Revert "feat(iFrame): Add a method for resizing large video container from iFrame"

This reverts commit bbb4fbd5f8.

modules/API/API.js

@@ -21,11 +21,7 @@ import {
 import { isEnabled as isDropboxEnabled } from '../../react/features/dropbox';
 import { toggleE2EE } from '../../react/features/e2ee/actions';
 import { invite } from '../../react/features/invite';
-import {
-    captureLargeVideoScreenshot,
-    resizeLargeVideo,
-    selectParticipantInLargeVideo
-} from '../../react/features/large-video/actions';
+import { selectParticipantInLargeVideo } from '../../react/features/large-video/actions';
 import { toggleLobbyMode } from '../../react/features/lobby/actions.web';
 import { RECORDING_TYPES } from '../../react/features/recording/constants';
 import { getActiveSession } from '../../react/features/recording/functions';
@@ -123,11 +119,6 @@ function initCommands() {
         'proxy-connection-event': event => {
             APP.conference.onProxyConnectionEvent(event);
         },
-        'resize-large-video': (width, height) => {
-            logger.debug('Resize large video command received');
-            sendAnalytics(createApiEvent('largevideo.resized'));
-            APP.store.dispatch(resizeLargeVideo(width, height));
-        },
         'send-tones': (options = {}) => {
             const { duration, tones, pause } = options;
 
@@ -343,21 +334,6 @@ function initCommands() {
         const { name } = request;
 
         switch (name) {
-        case 'capture-largevideo-screenshot' :
-            APP.store.dispatch(captureLargeVideoScreenshot())
-                .then(dataURL => {
-                    let error;
-
-                    if (!dataURL) {
-                        error = new Error('No large video found!');
-                    }
-
-                    callback({
-                        error,
-                        dataURL
-                    });
-                });
-            break;
         case 'invite': {
             const { invitees } = request;
 

modules/API/external/external_api.js

@@ -35,7 +35,6 @@ const commands = {
     hangup: 'video-hangup',
     muteEveryone: 'mute-everyone',
     password: 'password',
-    resizeLargeVideo: 'resize-large-video',
     sendEndpointTextMessage: 'send-endpoint-text-message',
     sendTones: 'send-tones',
     setLargeVideoParticipant: 'set-large-video-participant',
@@ -438,12 +437,10 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         const parsedWidth = parseSizeParam(width);
 
         if (parsedHeight !== undefined) {
-            this._height = height;
             this._frame.style.height = parsedHeight;
         }
 
         if (parsedWidth !== undefined) {
-            this._width = width;
             this._frame.style.width = parsedWidth;
         }
     }
@@ -636,18 +633,6 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         }
     }
 
-    /**
-     * Captures the screenshot of the large video.
-     *
-     * @returns {dataURL} - Base64 encoded image data of the screenshot if large
-     * video is detected, an error otherwise.
-     */
-    captureLargeVideoScreenshot() {
-        return this._transport.sendRequest({
-            name: 'capture-largevideo-screenshot'
-        });
-    }
-
     /**
      * Removes the listeners and removes the Jitsi Meet frame.
      *
@@ -945,19 +930,6 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         eventList.forEach(event => this.removeEventListener(event));
     }
 
-    /**
-     * Resizes the large video container as per the dimensions provided.
-     *
-     * @param {number} width - Width that needs to be applied on the large video container.
-     * @param {number} height - Height that needs to be applied on the large video container.
-     * @returns {void}
-     */
-    resizeLargeVideo(width, height) {
-        if (width <= this._width && height <= this._height) {
-            this.executeCommand('resizeLargeVideo', width, height);
-        }
-    }
-
     /**
      * Passes an event along to the local conference participant to establish
      * or update a direct peer connection. This is currently used for developing

modules/UI/util/UIUtil.js

@@ -5,6 +5,13 @@
  */
 const UIUtil = {
 
+    /**
+     * Returns the available video width.
+     */
+    getAvailableVideoWidth() {
+        return window.innerWidth;
+    },
+
     /**
      * Escapes the given text.
      */

modules/UI/videolayout/LargeVideoManager.js

@@ -21,6 +21,7 @@ import { PresenceLabel } from '../../../react/features/presence-status';
 import UIEvents from '../../../service/UI/UIEvents';
 import { createDeferred } from '../../util/helpers';
 import AudioLevels from '../audio_levels/AudioLevels';
+import UIUtil from '../util/UIUtil';
 
 import { VideoContainer, VIDEO_CONTAINER_TYPE } from './VideoContainer';
 
@@ -322,25 +323,20 @@ export default class LargeVideoManager {
     /**
      * Update container size.
      */
-    updateContainerSize(width, height) {
-        let widthToUse = width ?? (this.width > 0 ? this.width : window.innerWidth);
+    updateContainerSize() {
+        let widthToUse = UIUtil.getAvailableVideoWidth();
         const { isOpen } = APP.store.getState()['features/chat'];
 
-        /**
-         * If chat state is open, we re-compute the container width by subtracting the default width of
-         * the chat. We re-compute the width again after the chat window is closed. This is needed when
-         * custom styling is configured on the large video container through the iFrame API.
-         */
         if (isOpen) {
+            /**
+             * If chat state is open, we re-compute the container width
+             * by subtracting the default width of the chat.
+             */
             widthToUse -= CHAT_SIZE;
-            this.resizedForChat = true;
-        } else if (this.resizedForChat) {
-            this.resizedForChat = false;
-            widthToUse += CHAT_SIZE;
         }
 
         this.width = widthToUse;
-        this.height = height ?? (this.height > 0 ? this.height : window.innerHeight);
+        this.height = window.innerHeight;
     }
 
     /**

react/features/large-video/actions.js

@@ -2,7 +2,6 @@
 
 import type { Dispatch } from 'redux';
 
-import VideoLayout from '../../../modules/UI/videolayout/VideoLayout';
 import {
     createSelectParticipantFailedEvent,
     sendAnalytics
@@ -10,7 +9,6 @@ import {
 import { _handleParticipantError } from '../base/conference';
 import { MEDIA_TYPE } from '../base/media';
 import { getParticipants } from '../base/participants';
-import { getTrackByMediaTypeAndParticipant } from '../base/tracks';
 import { reportError } from '../base/util';
 import { shouldDisplayTileView } from '../video-layout';
 
@@ -21,78 +19,6 @@ import {
 
 declare var APP: Object;
 
-/**
-* Captures a screenshot of the video displayed on the large video.
-*
-* @returns {Function}
-*/
-export function captureLargeVideoScreenshot() {
-    return (dispatch: Dispatch<any>, getState: Function): Promise<Object> => {
-        const state = getState();
-        const largeVideo = state['features/large-video'];
-
-        if (!largeVideo) {
-            return Promise.resolve();
-        }
-        const tracks = state['features/base/tracks'];
-        const { jitsiTrack } = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, largeVideo.participantId);
-        const videoStream = jitsiTrack.getOriginalStream();
-
-        // Create a HTML canvas and draw video from the track on to the canvas.
-        const [ track ] = videoStream.getVideoTracks();
-        const { height, width } = track.getSettings() ?? track.getConstraints();
-        const canvasElement = document.createElement('canvas');
-        const ctx = canvasElement.getContext('2d');
-        const videoElement = document.createElement('video');
-
-        videoElement.height = parseInt(height, 10);
-        videoElement.width = parseInt(width, 10);
-        videoElement.autoplay = true;
-        videoElement.srcObject = videoStream;
-        canvasElement.height = videoElement.height;
-        canvasElement.width = videoElement.width;
-
-        // Wait for the video to load before drawing on to the canvas.
-        const promise = new Promise(resolve => {
-            videoElement.onloadeddata = () => resolve();
-        });
-
-        return promise.then(() => {
-            ctx.drawImage(videoElement, 0, 0, videoElement.width, videoElement.height);
-            const dataURL = canvasElement.toDataURL('image/png', 1.0);
-
-            // Cleanup.
-            ctx.clearRect(0, 0, videoElement.width, videoElement.height);
-            videoElement.srcObject = null;
-            canvasElement.remove();
-            videoElement.remove();
-
-            return Promise.resolve(dataURL);
-        });
-    };
-}
-
-/**
- * Resizes the large video container based on the dimensions provided.
- *
- * @param {number} width - Width that needs to be applied on the large video container.
- * @param {number} height - Height that needs to be applied on the large video container.
- * @returns {Function}
- */
-export function resizeLargeVideo(width: number, height: number) {
-    return (dispatch: Dispatch<any>, getState: Function) => {
-        const state = getState();
-        const largeVideo = state['features/large-video'];
-
-        if (largeVideo) {
-            const largeVideoContainer = VideoLayout.getLargeVideo();
-
-            largeVideoContainer.updateContainerSize(width, height);
-            largeVideoContainer.resize();
-        }
-    };
-}
-
 /**
  * Signals conference to select a participant.
  *
@@ -124,7 +50,7 @@ export function selectParticipant() {
 
 /**
  * Action to select the participant to be displayed in LargeVideo based on the
- * participant id provided. If a participant id is not provided, the LargeVideo
+ * participant id provided. If a partcipant id is not provided, the LargeVideo
  * participant will be selected based on a variety of factors: If there is a
  * dominant or pinned speaker, or if there are remote tracks, etc.
  *