Render Jitsi (and other sticky widgets) in PiP container, so it can be dragged and the "jump to room functionality" is provided

res/css/_components.scss

@@ -304,7 +304,6 @@
 @import "./views/typography/_Heading.scss";
 @import "./views/verification/_VerificationShowSas.scss";
 @import "./views/voip/CallView/_CallViewButtons.scss";
-@import "./views/voip/_CallContainer.scss";
 @import "./views/voip/_CallPreview.scss";
 @import "./views/voip/_CallView.scss";
 @import "./views/voip/_CallViewForRoom.scss";
@@ -313,4 +312,5 @@
 @import "./views/voip/_DialPad.scss";
 @import "./views/voip/_DialPadContextMenu.scss";
 @import "./views/voip/_DialPadModal.scss";
+@import "./views/voip/_PiPContainer.scss";
 @import "./views/voip/_VideoFeed.scss";

res/css/views/voip/_CallView.scss

@@ -20,14 +20,15 @@ limitations under the License.
     background-color: $dark-panel-bg-color;
     padding-left: 8px;
     padding-right: 8px;
-    // XXX: CallContainer sets pointer-events: none - should probably be set back in a better place
+    // XXX: PiPContainer sets pointer-events: none - should probably be set back in a better place
     pointer-events: initial;
 }
 
 .mx_CallView_large {
     padding-bottom: 10px;
     margin: $container-gap-width;
-    margin-right: calc($container-gap-width / 2); // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    // The left side gap is fully handled by this margin. To prohibit bleeding on webkit browser.
+    margin-right: calc($container-gap-width / 2);
     margin-bottom: 10px;
     display: flex;
     flex-direction: column;
@@ -46,7 +47,7 @@ limitations under the License.
     width: 320px;
     padding-bottom: 8px;
     background-color: $system;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.20);
+    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
     border-radius: 8px;
 
     .mx_CallView_video_hold,
@@ -170,7 +171,7 @@ limitations under the License.
     background-position: center;
     filter: blur(20px);
     &::after {
-        content: '';
+        content: "";
         display: block;
         position: absolute;
         width: 100%;
@@ -194,10 +195,10 @@ limitations under the License.
         display: block;
         margin-left: auto;
         margin-right: auto;
-        content: '';
+        content: "";
         width: 40px;
         height: 40px;
-        background-image: url('$(res)/img/voip/paused.svg');
+        background-image: url("$(res)/img/voip/paused.svg");
         background-position: center;
         background-size: cover;
     }

res/css/views/voip/_CallContainer.scss → res/css/views/voip/_PiPContainer.scss

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_CallContainer {
+.mx_PiPContainer {
     position: absolute;
     right: 20px;
     bottom: 72px;
@@ -25,8 +25,4 @@ limitations under the License.
     // sure the cursor hits the iframe for Jitsi which will be at a
     // different level.
     pointer-events: none;
-
-    .mx_AppTile_persistedWrapper div {
-        min-width: 350px;
-    }
 }

src/components/structures/LoggedInView.tsx

@@ -40,7 +40,7 @@ import { DefaultTagID } from "../../stores/room-list/models";
 import { hideToast as hideServerLimitToast, showToast as showServerLimitToast } from "../../toasts/ServerLimitToast";
 import { Action } from "../../dispatcher/actions";
 import LeftPanel from "./LeftPanel";
-import CallContainer from '../views/voip/CallContainer';
+import PiPContainer from '../views/voip/PipContainer';
 import { ViewRoomDeltaPayload } from "../../dispatcher/payloads/ViewRoomDeltaPayload";
 import RoomListStore from "../../stores/room-list/RoomListStore";
 import NonUrgentToastContainer from "./NonUrgentToastContainer";
@@ -674,7 +674,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                         </div>
                     </div>
                 </div>
-                <CallContainer />
+                <PiPContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />
                 { audioFeedArraysForCalls }

src/components/views/elements/AppTile.tsx

@@ -508,8 +508,13 @@ export default class AppTile extends React.Component<IProps, IState> {
 
                     // Also wrap the PersistedElement in a div to fix the height, otherwise
                     // AppTile's border is in the wrong place
+
+                    // For persistent apps in PiP we want the zIndex to be higher then for other persistent apps (100)
+                    // otherwise there are issues that the PiP view is drawn UNDER another widget (Persistent app) when dragged around.
+                    const zIndexAboveOtherPersistentElements = 101;
+
                     appTileBody = <div className="mx_AppTile_persistedWrapper">
-                        <PersistedElement zIndex={this.props.miniMode ? 10 : 9}persistKey={this.persistKey}>
+                        <PersistedElement zIndex={this.props.miniMode ? zIndexAboveOtherPersistentElements : 9} persistKey={this.persistKey}>
                             { appTileBody }
                         </PersistedElement>
                     </div>;
@@ -548,12 +553,12 @@ export default class AppTile extends React.Component<IProps, IState> {
             maxMinButton = <AccessibleButton
                 className={
                     "mx_AppTileMenuBar_iconButton"
-                                    + (widgetIsMaximised
-                                        ? " mx_AppTileMenuBar_iconButton_minWidget"
-                                        : " mx_AppTileMenuBar_iconButton_maxWidget")
+                    + (widgetIsMaximised
+                        ? " mx_AppTileMenuBar_iconButton_minWidget"
+                        : " mx_AppTileMenuBar_iconButton_maxWidget")
                 }
                 title={
-                    widgetIsMaximised ? _t('Close'): _t('Maximise widget')
+                    widgetIsMaximised ? _t('Close') : _t('Maximise widget')
                 }
                 onClick={this.onMaxMinWidgetClick}
             />;

src/components/views/elements/PersistedElement.tsx

@@ -184,7 +184,7 @@ export default class PersistedElement extends React.Component<IProps> {
             width: parentRect.width + 'px',
             height: parentRect.height + 'px',
         });
-    }, 100, { trailing: true, leading: true });
+    }, 16, { trailing: true, leading: true });
 
     public render(): JSX.Element {
         return <div ref={this.collectChildContainer} />;

src/components/views/elements/PersistentApp.tsx

@@ -16,141 +16,79 @@ limitations under the License.
 */
 
 import React from 'react';
-import { EventSubscription } from 'fbemitter';
 import { Room } from "matrix-js-sdk/src/models/room";
 
 import RoomViewStore from '../../../stores/RoomViewStore';
-import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/ActiveWidgetStore';
+import ActiveWidgetStore from '../../../stores/ActiveWidgetStore';
 import WidgetUtils from '../../../utils/WidgetUtils';
 import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 import AppTile from "./AppTile";
-import { Container, WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
-import { RightPanelPhases } from '../../../stores/right-panel/RightPanelStorePhases';
-import RightPanelStore from '../../../stores/right-panel/RightPanelStore';
-import { UPDATE_EVENT } from '../../../stores/AsyncStore';
 
 interface IProps {
-    // none
+    persistentWidgetId: string;
+    pointerEvents?: string;
 }
 
 interface IState {
     roomId: string;
-    persistentWidgetId: string;
-    rightPanelPhase?: RightPanelPhases;
 }
 
 @replaceableComponent("views.elements.PersistentApp")
 export default class PersistentApp extends React.Component<IProps, IState> {
-    private roomStoreToken: EventSubscription;
-
     constructor(props: IProps) {
         super(props);
 
         this.state = {
             roomId: RoomViewStore.getRoomId(),
-            persistentWidgetId: ActiveWidgetStore.instance.getPersistentWidgetId(),
-            rightPanelPhase: RightPanelStore.instance.currentCard.phase,
         };
     }
 
     public componentDidMount(): void {
-        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
-        ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
-        RightPanelStore.instance.on(UPDATE_EVENT, this.onRightPanelStoreUpdate);
         MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
     }
 
     public componentWillUnmount(): void {
-        if (this.roomStoreToken) {
-            this.roomStoreToken.remove();
-        }
-        ActiveWidgetStore.instance.removeListener(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
-        RightPanelStore.instance.off(UPDATE_EVENT, this.onRightPanelStoreUpdate);
-        if (MatrixClientPeg.get()) {
-            MatrixClientPeg.get().removeListener("Room.myMembership", this.onMyMembership);
-        }
+        MatrixClientPeg.get().off("Room.myMembership", this.onMyMembership);
     }
 
-    private onRoomViewStoreUpdate = (): void => {
-        if (RoomViewStore.getRoomId() === this.state.roomId) return;
-        this.setState({
-            roomId: RoomViewStore.getRoomId(),
-        });
-    };
-
-    private onRightPanelStoreUpdate = () => {
-        this.setState({
-            rightPanelPhase: RightPanelStore.instance.currentCard.phase,
-        });
-    };
-
-    private onActiveWidgetStoreUpdate = (): void => {
-        this.setState({
-            persistentWidgetId: ActiveWidgetStore.instance.getPersistentWidgetId(),
-        });
-    };
-
     private onMyMembership = async (room: Room, membership: string): Promise<void> => {
-        const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.state.persistentWidgetId);
+        const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(this.props.persistentWidgetId);
         if (membership !== "join") {
             // we're not in the room anymore - delete
-            if (room .roomId === persistentWidgetInRoomId) {
-                ActiveWidgetStore.instance.destroyPersistentWidget(this.state.persistentWidgetId);
+            if (room.roomId === persistentWidgetInRoomId) {
+                ActiveWidgetStore.instance.destroyPersistentWidget(this.props.persistentWidgetId);
             }
         }
     };
 
     public render(): JSX.Element {
-        const wId = this.state.persistentWidgetId;
+        const wId = this.props.persistentWidgetId;
         if (wId) {
             const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(wId);
-
             const persistentWidgetInRoom = MatrixClientPeg.get().getRoom(persistentWidgetInRoomId);
 
-            // Sanity check the room - the widget may have been destroyed between render cycles, and
-            // thus no room is associated anymore.
-            if (!persistentWidgetInRoom) return null;
-
-            const wls = WidgetLayoutStore.instance;
-
-            const userIsPartOfTheRoom = persistentWidgetInRoom.getMyMembership() == "join";
-            const fromAnotherRoom = this.state.roomId !== persistentWidgetInRoomId;
-
-            const notInRightPanel =
-                !(this.state.rightPanelPhase == RightPanelPhases.Widget &&
-                wId == RightPanelStore.instance.currentCard.state?.widgetId);
-            const notInCenterContainer =
-                    !wls.getContainerWidgets(persistentWidgetInRoom, Container.Center).some((app) => app.id == wId);
-            const notInTopContainer =
-                !wls.getContainerWidgets(persistentWidgetInRoom, Container.Top).some(app => app.id == wId);
-            if (
-                // the widget should only be shown as a persistent app (in a floating pip container) if it is not visible on screen
-                // either, because we are viewing a different room OR because it is in none of the possible containers of the room view.
-                (fromAnotherRoom && userIsPartOfTheRoom) ||
-                (notInRightPanel && notInCenterContainer && notInTopContainer && userIsPartOfTheRoom)
-            ) {
-                // get the widget data
-                const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
-                    return ev.getStateKey() === ActiveWidgetStore.instance.getPersistentWidgetId();
-                });
-                const app = WidgetUtils.makeAppConfig(
-                    appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
-                    persistentWidgetInRoomId, appEvent.getId(),
-                );
-                return <AppTile
-                    key={app.id}
-                    app={app}
-                    fullWidth={true}
-                    room={persistentWidgetInRoom}
-                    userId={MatrixClientPeg.get().credentials.userId}
-                    creatorUserId={app.creatorUserId}
-                    widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
-                    waitForIframeLoad={app.waitForIframeLoad}
-                    miniMode={true}
-                    showMenubar={false}
-                />;
-            }
+            // get the widget data
+            const appEvent = WidgetUtils.getRoomWidgets(persistentWidgetInRoom).find((ev) => {
+                return ev.getStateKey() === ActiveWidgetStore.instance.getPersistentWidgetId();
+            });
+            const app = WidgetUtils.makeAppConfig(
+                appEvent.getStateKey(), appEvent.getContent(), appEvent.getSender(),
+                persistentWidgetInRoomId, appEvent.getId(),
+            );
+            return <AppTile
+                key={app.id}
+                app={app}
+                fullWidth={true}
+                room={persistentWidgetInRoom}
+                userId={MatrixClientPeg.get().credentials.userId}
+                creatorUserId={app.creatorUserId}
+                widgetPageTitle={WidgetUtils.getWidgetDataTitle(app)}
+                waitForIframeLoad={app.waitForIframeLoad}
+                miniMode={true}
+                showMenubar={false}
+                pointerEvents={this.props.pointerEvents}
+            />;
         }
         return null;
     }

src/components/views/rooms/Stickerpicker.tsx

@@ -135,7 +135,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         // Close the sticker picker when the window resizes
         window.addEventListener('resize', this.onResize);
 
-        this.dispatcherRef = dis.register(this.onWidgetAction);
+        this.dispatcherRef = dis.register(this.onAction);
 
         // Track updates to widget state in account data
         MatrixClientPeg.get().on('accountData', this.updateWidget);
@@ -198,7 +198,7 @@ export default class Stickerpicker extends React.PureComponent<IProps, IState> {
         });
     };
 
-    private onWidgetAction = (payload: ActionPayload): void => {
+    private onAction = (payload: ActionPayload): void => {
         switch (payload.action) {
             case "user_widget_updated":
                 this.forceUpdate();