Add a way to maximize/pin widget from the PiP view (#7672)

src/components/views/voip/PipView.tsx

@@ -19,6 +19,7 @@ import { CallEvent, CallState, MatrixCall } from 'matrix-js-sdk/src/webrtc/call'
 import { EventSubscription } from 'fbemitter';
 import { logger } from "matrix-js-sdk/src/logger";
 import classNames from 'classnames';
+import { Room } from "matrix-js-sdk/src/models/room";
 
 import CallView from "./CallView";
 import { RoomViewStore } from '../../../stores/RoomViewStore';
@@ -29,9 +30,10 @@ import { MatrixClientPeg } from '../../../MatrixClientPeg';
 import PictureInPictureDragger from './PictureInPictureDragger';
 import dis from '../../../dispatcher/dispatcher';
 import { Action } from "../../../dispatcher/actions";
-import { WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
+import { Container, WidgetLayoutStore } from '../../../stores/widgets/WidgetLayoutStore';
 import CallViewHeader from './CallView/CallViewHeader';
 import ActiveWidgetStore, { ActiveWidgetStoreEvent } from '../../../stores/ActiveWidgetStore';
+import WidgetStore, { IApp } from "../../../stores/WidgetStore";
 import { ViewRoomPayload } from "../../../dispatcher/payloads/ViewRoomPayload";
 
 const SHOW_CALL_IN_STATES = [
@@ -64,6 +66,16 @@ interface IState {
     moving: boolean;
 }
 
+const getRoomAndAppForWidget = (widgetId: string, roomId: string): [Room, IApp] => {
+    if (!widgetId) return;
+    if (!roomId) return;
+
+    const room = MatrixClientPeg.get().getRoom(roomId);
+    const app = WidgetStore.instance.getApps(roomId).find((app) => app.id === widgetId);
+
+    return [room, app];
+};
+
 // Splits a list of calls into one 'primary' one and a list
 // (which should be a single element) of other calls.
 // The primary will be the one not on hold, or an arbitrary one
@@ -232,6 +244,38 @@ export default class PipView extends React.Component<IProps, IState> {
         }
     };
 
+    private onMaximize = (): void => {
+        const widgetId = this.state.persistentWidgetId;
+        const roomId = this.state.persistentRoomId;
+
+        if (this.state.showWidgetInPip && widgetId && roomId) {
+            const [room, app] = getRoomAndAppForWidget(widgetId, roomId);
+            WidgetLayoutStore.instance.moveToContainer(room, app, Container.Center);
+        } else {
+            dis.dispatch({
+                action: 'video_fullscreen',
+                fullscreen: true,
+            });
+        }
+    };
+
+    private onPin = (): void => {
+        if (!this.state.showWidgetInPip) return;
+
+        const [room, app] = getRoomAndAppForWidget(this.state.persistentWidgetId, this.state.persistentRoomId);
+        WidgetLayoutStore.instance.moveToContainer(room, app, Container.Top);
+    };
+
+    private onExpand = (): void => {
+        const widgetId = this.state.persistentWidgetId;
+        if (!widgetId || !this.state.showWidgetInPip) return;
+
+        dis.dispatch({
+            action: Action.ViewRoom,
+            room_id: this.state.persistentRoomId,
+        });
+    };
+
     // Accepts a persistentWidgetId to be able to skip awaiting the setState for persistentWidgetId
     public updateShowWidgetInPip(
         persistentWidgetId = this.state.persistentWidgetId,
@@ -276,7 +320,9 @@ export default class PipView extends React.Component<IProps, IState> {
                 mx_CallView_pip: pipMode,
                 mx_CallView_large: !pipMode,
             });
-            const roomForWidget = MatrixClientPeg.get().getRoom(this.state.persistentRoomId);
+            const roomId = this.state.persistentRoomId;
+            const roomForWidget = MatrixClientPeg.get().getRoom(roomId);
+            const viewingCallRoom = this.state.viewedRoomId === roomId;
 
             pipContent = ({ onStartMoving, _onResize }) =>
                 <div className={pipViewClasses}>
@@ -284,10 +330,13 @@ export default class PipView extends React.Component<IProps, IState> {
                         onPipMouseDown={(event) => { onStartMoving(event); this.onStartMoving.bind(this)(); }}
                         pipMode={pipMode}
                         callRooms={[roomForWidget]}
+                        onExpand={!viewingCallRoom && this.onExpand}
+                        onPin={viewingCallRoom && this.onPin}
+                        onMaximize={viewingCallRoom && this.onMaximize}
                     />
                     <PersistentApp
                         persistentWidgetId={this.state.persistentWidgetId}
-                        persistentRoomId={this.state.persistentRoomId}
+                        persistentRoomId={roomId}
                         pointerEvents={this.state.moving ? 'none' : undefined}
                     />
                 </div>;