Pārlūkot izejas kodu

fix(large-video): missing video.

j8
Hristo Terezov 6 gadus atpakaļ
vecāks
revīzija
f3f936c196

+ 3
- 3
modules/UI/videolayout/LargeVideoManager.js Parādīt failu

683
     }
683
     }
684
 
684
 
685
     /**
685
     /**
686
-     * Dispatches an action to update the known resolution state of the
687
-     * large video and adjusts container sizes when the resolution changes.
686
+     * Dispatches an action to update the known resolution state of the large video and adjusts container sizes when the
687
+     * resolution changes.
688
      *
688
      *
689
      * @private
689
      * @private
690
      * @returns {void}
690
      * @returns {void}
697
             APP.store.dispatch(updateKnownLargeVideoResolution(height));
697
             APP.store.dispatch(updateKnownLargeVideoResolution(height));
698
         }
698
         }
699
 
699
 
700
-        const currentAspectRatio = width / height;
700
+        const currentAspectRatio = height === 0 ? 0 : width / height;
701
 
701
 
702
         if (this._videoAspectRatio !== currentAspectRatio) {
702
         if (this._videoAspectRatio !== currentAspectRatio) {
703
             this._videoAspectRatio = currentAspectRatio;
703
             this._videoAspectRatio = currentAspectRatio;

+ 32
- 12
modules/UI/videolayout/VideoContainer.js Parādīt failu

5
 import ReactDOM from 'react-dom';
5
 import ReactDOM from 'react-dom';
6
 
6
 
7
 import { browser } from '../../../react/features/base/lib-jitsi-meet';
7
 import { browser } from '../../../react/features/base/lib-jitsi-meet';
8
-import {
9
-    ORIENTATION,
10
-    LargeVideoBackground
11
-} from '../../../react/features/large-video';
8
+import { ORIENTATION, LargeVideoBackground } from '../../../react/features/large-video';
9
+import { LAYOUTS, getCurrentLayout } from '../../../react/features/video-layout';
12
 /* eslint-enable no-unused-vars */
10
 /* eslint-enable no-unused-vars */
13
 
11
 
14
 import Filmstrip from './Filmstrip';
12
 import Filmstrip from './Filmstrip';
55
         videoHeight,
53
         videoHeight,
56
         videoSpaceWidth,
54
         videoSpaceWidth,
57
         videoSpaceHeight) {
55
         videoSpaceHeight) {
58
-    const aspectRatio = videoWidth / videoHeight;
56
+    if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
57
+        // Avoid NaN values caused by devision by 0.
58
+        return [ 0, 0 ];
59
+    }
59
 
60
 
61
+    const aspectRatio = videoWidth / videoHeight;
60
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
62
     let availableWidth = Math.max(videoWidth, videoSpaceWidth);
61
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
63
     let availableHeight = Math.max(videoHeight, videoSpaceHeight);
62
 
64
 
99
         videoSpaceWidth,
101
         videoSpaceWidth,
100
         videoSpaceHeight,
102
         videoSpaceHeight,
101
         videoLayoutFit) {
103
         videoLayoutFit) {
104
+    if (videoWidth === 0 || videoHeight === 0 || videoSpaceWidth === 0 || videoSpaceHeight === 0) {
105
+        // Avoid NaN values caused by devision by 0.
106
+        return [ 0, 0 ];
107
+    }
108
+
102
     const aspectRatio = videoWidth / videoHeight;
109
     const aspectRatio = videoWidth / videoHeight;
103
 
110
 
104
     switch (videoLayoutFit) {
111
     switch (videoLayoutFit) {
322
      * @param {number} containerHeight container height
329
      * @param {number} containerHeight container height
323
      * @returns {{availableWidth, availableHeight}}
330
      * @returns {{availableWidth, availableHeight}}
324
      */
331
      */
325
-    getVideoSize(containerWidth, containerHeight) {
332
+    _getVideoSize(containerWidth, containerHeight) {
326
         const { width, height } = this.getStreamSize();
333
         const { width, height } = this.getStreamSize();
327
 
334
 
328
         if (this.stream && this.isScreenSharing()) {
335
         if (this.stream && this.isScreenSharing()) {
414
         if (this.$video.length === 0) {
421
         if (this.$video.length === 0) {
415
             return;
422
             return;
416
         }
423
         }
424
+        const currentLayout = getCurrentLayout(APP.store.getState());
425
+
426
+        if (currentLayout === LAYOUTS.TILE_VIEW) {
427
+            // We don't need to resize the large video since it won't be displayed and we'll resize when returning back
428
+            // to stage view.
429
+            return;
430
+        }
431
+
432
+        const [ width, height ] = this._getVideoSize(containerWidth, containerHeight);
417
 
433
 
418
-        const [ width, height ]
419
-            = this.getVideoSize(containerWidth, containerHeight);
434
+        if (width === 0 || height === 0) {
435
+            // We don't need to set 0 for width or height since the visibility is controled by the visibility css prop
436
+            // on the largeVideoElementsContainer. Also if the width/height of the video element is 0 the attached
437
+            // stream won't be played. Normally if we attach a new stream we won't resize the video element until the
438
+            // stream has been played. But setting width/height to 0 will prevent the video from playing.
439
+
440
+            return;
441
+        }
420
 
442
 
421
         if ((containerWidth > width) || (containerHeight > height)) {
443
         if ((containerWidth > width) || (containerHeight > height)) {
422
-            this._backgroundOrientation = containerWidth > width
423
-                ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
444
+            this._backgroundOrientation = containerWidth > width ? ORIENTATION.LANDSCAPE : ORIENTATION.PORTRAIT;
424
             this._hideBackground = false;
445
             this._hideBackground = false;
425
         } else {
446
         } else {
426
             this._hideBackground = true;
447
             this._hideBackground = true;
429
         this._updateBackground();
450
         this._updateBackground();
430
 
451
 
431
         const { horizontalIndent, verticalIndent }
452
         const { horizontalIndent, verticalIndent }
432
-            = this.getVideoPosition(width, height,
433
-            containerWidth, containerHeight);
453
+            = this.getVideoPosition(width, height, containerWidth, containerHeight);
434
 
454
 
435
         // update avatar position
455
         // update avatar position
436
         const top = (containerHeight / 2) - (this.avatarHeight / 4 * 3);
456
         const top = (containerHeight / 2) - (this.avatarHeight / 4 * 3);

+ 0
- 9
modules/UI/videolayout/VideoLayout.js Parādīt failu

22
 
22
 
23
 import Filmstrip from './Filmstrip';
23
 import Filmstrip from './Filmstrip';
24
 import UIEvents from '../../../service/UI/UIEvents';
24
 import UIEvents from '../../../service/UI/UIEvents';
25
-import UIUtil from '../util/UIUtil';
26
 
25
 
27
 import RemoteVideo from './RemoteVideo';
26
 import RemoteVideo from './RemoteVideo';
28
 import LargeVideoManager from './LargeVideoManager';
27
 import LargeVideoManager from './LargeVideoManager';
663
             largeVideo.updateContainerSize();
662
             largeVideo.updateContainerSize();
664
             largeVideo.resize(animate);
663
             largeVideo.resize(animate);
665
         }
664
         }
666
-
667
-        // Calculate available width and height.
668
-        const availableHeight = window.innerHeight;
669
-        const availableWidth = UIUtil.getAvailableVideoWidth();
670
-
671
-        if (availableWidth < 0 || availableHeight < 0) {
672
-            return;
673
-        }
674
     },
665
     },
675
 
666
 
676
     getSmallVideo(id) {
667
     getSmallVideo(id) {

Notiek ielāde…
Atcelt
Saglabāt