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

res/css/views/voip/_CallContainer.scss

@@ -26,7 +26,7 @@ limitations under the License.
     // different level.
     pointer-events: none;
 
-    .mx_AppTile_persistedWrapper div {
-        min-width: 350px;
-    }
+    // .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";
@@ -677,7 +677,7 @@ class LoggedInView extends React.Component<IProps, IState> {
                         </div>
                     </div>
                 </div>
-                <CallContainer />
+                <PiPContainer />
                 <NonUrgentToastContainer />
                 <HostSignupContainer />
                 { audioFeedArraysForCalls }

src/components/views/elements/AppTile.tsx

@@ -508,7 +508,7 @@ 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
                     appTileBody = <div className="mx_AppTile_persistedWrapper">
-                        <PersistedElement zIndex={this.props.miniMode ? 10 : 9}persistKey={this.persistKey}>
+                        <PersistedElement zIndex={this.props.miniMode ? 101 : 9}persistKey={this.persistKey}>
                             { appTileBody }
                         </PersistedElement>
                     </div>;

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,110 +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";
 
 interface IProps {
-    // none
+    persistentWidgetId: string;
 }
 
 interface IState {
     roomId: string;
-    persistentWidgetId: string;
 }
 
 @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(),
         };
     }
 
     public componentDidMount(): void {
-        this.roomStoreToken = RoomViewStore.addListener(this.onRoomViewStoreUpdate);
-        ActiveWidgetStore.instance.on(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
         MatrixClientPeg.get().on("Room.myMembership", this.onMyMembership);
     }
 
     public componentWillUnmount(): void {
-        if (this.roomStoreToken) {
-            this.roomStoreToken.remove();
-        }
-        ActiveWidgetStore.instance.removeListener(ActiveWidgetStoreEvent.Update, this.onActiveWidgetStoreUpdate);
         if (MatrixClientPeg.get()) {
             MatrixClientPeg.get().removeListener("Room.myMembership", this.onMyMembership);
         }
     }
 
-    private onRoomViewStoreUpdate = (): void => {
-        if (RoomViewStore.getRoomId() === this.state.roomId) return;
-        this.setState({
-            roomId: RoomViewStore.getRoomId(),
-        });
-    };
-
-    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 {
-        if (this.state.persistentWidgetId) {
-            const persistentWidgetInRoomId = ActiveWidgetStore.instance.getRoomId(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 myMembership = persistentWidgetInRoom.getMyMembership();
-            if (this.state.roomId !== persistentWidgetInRoomId && myMembership === "join") {
-                // 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}
+            />;
         }
         return null;
     }

src/components/views/voip/CallView/CallViewHeader.tsx

@@ -87,15 +87,15 @@ const CallTypeIcon: React.FC<{ type: CallType }> = ({ type }) => {
 };
 
 const CallViewHeader: React.FC<CallViewHeaderProps> = ({
-    type,
+    type = undefined,
     pipMode = false,
     callRooms = [],
     onPipMouseDown,
 }) => {
     const [callRoom, onHoldCallRoom] = callRooms;
-    const callTypeText = _t(callTypeTranslationByType[type]);
-    const callRoomName = callRoom.name;
-    const { roomId } = callRoom;
+    const callTypeText = type ? _t(callTypeTranslationByType[type]) : _t("widget");
+    const callRoomName = callRoom?.name;
+    const roomId = callRoom?.roomId;
 
     if (!pipMode) {
         return <div className="mx_CallViewHeader">

src/components/views/voip/CallContainer.tsx → src/components/views/voip/PiPContainer.tsx

@@ -17,7 +17,7 @@ limitations under the License.
 
 import React from 'react';
 
-import CallPreview from './CallPreview';
+import PiPViewer from './PiPView';
 import { replaceableComponent } from "../../../utils/replaceableComponent";
 
 interface IProps {
@@ -29,10 +29,10 @@ interface IState {
 }
 
 @replaceableComponent("views.voip.CallContainer")
-export default class CallContainer extends React.PureComponent<IProps, IState> {
+export default class PiPContainer extends React.PureComponent<IProps, IState> {
     public render() {
         return <div className="mx_CallContainer">
-            <CallPreview />
+            <PiPViewer />
         </div>;
     }
 }