fix(large-video): missing video.

modules/UI/videolayout/LargeVideoManager.js

@@ -683,8 +683,8 @@ export default class LargeVideoManager {
     }
 
     /**
-     * Dispatches an action to update the known resolution state of the
-     * large video and adjusts container sizes when the resolution changes.
+     * Dispatches an action to update the known resolution state of the large video and adjusts container sizes when the
+     * resolution changes.
      *
      * @private
      * @returns {void}
@@ -697,7 +697,7 @@ export default class LargeVideoManager {
             APP.store.dispatch(updateKnownLargeVideoResolution(height));
         }
 
-        const currentAspectRatio = width / height;
+        const currentAspectRatio = height === 0 ? 0 : width / height;
 
         if (this._videoAspectRatio !== currentAspectRatio) {
             this._videoAspectRatio = currentAspectRatio;

modules/UI/videolayout/VideoContainer.js

@@ -5,10 +5,8 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 
 import { browser } from '../../../react/features/base/lib-jitsi-meet';
-import {
-    ORIENTATION,
-    LargeVideoBackground
-} from '../../../react/features/large-video';
+import { ORIENTATION, LargeVideoBackground } from '../../../react/features/large-video';
+import { LAYOUTS, getCurrentLayout } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 
 import Filmstrip from './Filmstrip';
@@ -55,8 +53,12 @@ function computeDesktopVideoSize( // eslint-disable-line max-params
         videoHeight,
         videoSpaceWidth,
         videoSpaceHeight) {
-    const aspectRatio = videoWidth / videoHeight;
+    if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
+        // Avoid NaN values caused by devision by 0.
+        return [ 0, 0 ];
+    }
 
+    const aspectRatio = videoWidth / videoHeight;
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
 
@@ -99,6 +101,11 @@ function computeCameraVideoSize( // eslint-disable-line max-params
         videoSpaceWidth,
         videoSpaceHeight,
         videoLayoutFit) {
+    if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
+        // Avoid NaN values caused by devision by 0.
+        return [ 0, 0 ];
+    }
+
     const aspectRatio = videoWidth / videoHeight;
 
     switch (videoLayoutFit) {
@@ -322,7 +329,7 @@ export class VideoContainer extends LargeContainer {
      * @param {number} containerHeight container height
      * @returns {{availableWidth, availableHeight}}
      */
-    getVideoSize(containerWidth, containerHeight) {
+    _getVideoSize(containerWidth, containerHeight) {
         const { width, height } = this.getStreamSize();
 
         if (this.stream && this.isScreenSharing()) {
@@ -414,13 +421,27 @@ export class VideoContainer extends LargeContainer {
         if (this.$video.length === 0) {
             return;
         }
+        const currentLayout = getCurrentLayout(APP.store.getState());
 
-        const [ width, height ]
-            = this.getVideoSize(containerWidth, containerHeight);
+        if (currentLayout === LAYOUTS.TILE_VIEW) {
+            // We don't need to resize the large video since it won't be displayed and we'll resize when returning back
+            // to stage view.
+            return;
+        }
+
+        const [ width, height ] = this._getVideoSize(containerWidth, containerHeight);
+
+        if (width === 0 || height === 0) {
+            // We don't need to set 0 for width or height since the visibility is controled by the visibility css prop
+            // on the largeVideoElementsContainer. Also if the width/height of the video element is 0 the attached
+            // stream won't be played. Normally if we attach a new stream we won't resize the video element until the
+            // stream has been played. But setting width/height to 0 will prevent the video from playing.
+
+            return;
+        }
 
         if ((containerWidth > width) || (containerHeight > height)) {
-            this._backgroundOrientation = containerWidth > width
-                ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
+            this._backgroundOrientation = containerWidth > width ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
             this._hideBackground = false;
         } else {
             this._hideBackground = true;
@@ -429,8 +450,7 @@ export class VideoContainer extends LargeContainer {
         this._updateBackground();
 
         const { horizontalIndent, verticalIndent }
-            = this.getVideoPosition(width, height,
-            containerWidth, containerHeight);
+            = this.getVideoPosition(width, height, containerWidth, containerHeight);
 
         // update avatar position
         const top = (containerHeight / 2) - (this.avatarHeight / 4 * 3);

modules/UI/videolayout/VideoLayout.js

@@ -22,7 +22,6 @@ import SharedVideoThumb from '../shared_video/SharedVideoThumb';
 
 import Filmstrip from './Filmstrip';
 import UIEvents from '../../../service/UI/UIEvents';
-import UIUtil from '../util/UIUtil';
 
 import RemoteVideo from './RemoteVideo';
 import LargeVideoManager from './LargeVideoManager';
@@ -663,14 +662,6 @@ const VideoLayout = {
             largeVideo.updateContainerSize();
             largeVideo.resize(animate);
         }
-
-        // Calculate available width and height.
-        const availableHeight = window.innerHeight;
-        const availableWidth = UIUtil.getAvailableVideoWidth();
-
-        if (availableWidth < 0 || availableHeight < 0) {
-            return;
-        }
     },
 
     getSmallVideo(id) {