Преглед изворни кода

fix(videolayout): Resize calculations

master
hristoterezov пре 8 година
родитељ
комит
c250da59d5

+ 7
- 11
css/_videolayout_default.scss Прегледај датотеку

12
     overflow: hidden;
12
     overflow: hidden;
13
 }
13
 }
14
 
14
 
15
-.video_blurred {
15
+.video_blurred_container {
16
+    height: 100%;
17
+    filter: blur(40px);
18
+    left: 0;
19
+    overflow: hidden;
20
+    position: absolute;
21
+    top: 0;
16
     width: 100%;
22
     width: 100%;
17
-
18
-    &_container {
19
-        width: 100%;
20
-        height: 100%;
21
-        position: absolute;
22
-        top: 0;
23
-        left: 0;
24
-        overflow: hidden;
25
-        filter: blur(40px);
26
-    }
27
 }
23
 }
28
 
24
 
29
 .videocontainer {
25
 .videocontainer {

+ 6
- 0
interface_config.js Прегледај датотеку

94
      * @type {boolean}
94
      * @type {boolean}
95
      */
95
      */
96
     MOBILE_APP_PROMO: true,
96
     MOBILE_APP_PROMO: true,
97
+    /**
98
+     * Maximum coeficient of the ratio of the large video to the visible area
99
+     * after the large video is scaled to fit the window.
100
+     *
101
+     * @type {number}
102
+     */
97
     MAXIMUM_ZOOMING_COEFFICIENT: 1.3
103
     MAXIMUM_ZOOMING_COEFFICIENT: 1.3
98
 };
104
 };

+ 39
- 35
modules/UI/videolayout/VideoContainer.js Прегледај датотеку

78
 function computeCameraVideoSize(videoWidth,
78
 function computeCameraVideoSize(videoWidth,
79
                             videoHeight,
79
                             videoHeight,
80
                             videoSpaceWidth,
80
                             videoSpaceWidth,
81
-                            videoSpaceHeight) {
82
-
81
+                            videoSpaceHeight,
82
+                            videoLayoutFit) {
83
     const aspectRatio = videoWidth / videoHeight;
83
     const aspectRatio = videoWidth / videoHeight;
84
-    let availableWidth = videoWidth;
85
-    let availableHeight = videoHeight;
86
-
87
-    if (interfaceConfig.VIDEO_LAYOUT_FIT === 'height') {
88
-        availableHeight = videoSpaceHeight;
89
-        availableWidth = availableHeight * aspectRatio;
90
-    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'width') {
91
-        availableWidth = videoSpaceWidth;
92
-        availableHeight = availableWidth / aspectRatio;
93
-    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'both') {
94
-        availableWidth = Math.max(videoWidth, videoSpaceWidth);
95
-        availableHeight = Math.max(videoHeight, videoSpaceHeight);
96
-
97
-        if (availableWidth / aspectRatio < videoSpaceHeight) {
98
-            availableHeight = videoSpaceHeight;
99
-            availableWidth = availableHeight * aspectRatio;
84
+    switch (videoLayoutFit) {
85
+    case 'height':
86
+        return [ videoSpaceHeight * aspectRatio, videoSpaceHeight ];
87
+    case 'width':
88
+        return [ videoSpaceWidth, videoSpaceWidth / aspectRatio ];
89
+    case 'both': {
90
+        const videoSpaceRatio = videoSpaceWidth / videoSpaceHeight;
91
+        const maxZoomCoefficient = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT
92
+            || Infinity;
93
+
94
+        if (videoSpaceRatio === aspectRatio) {
95
+            return [videoSpaceWidth, videoSpaceHeight];
100
         }
96
         }
101
 
97
 
102
-        if (aspectRatio <= 1) {
103
-            const zoomRateHeight = videoSpaceHeight / videoHeight;
104
-            const zoomRateWidth = videoSpaceWidth / videoWidth;
105
-            const zoomRate = Math.min(
106
-                zoomRateWidth,
107
-                zoomRateHeight,
108
-                interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
109
-
110
-            availableWidth = videoWidth * zoomRate;
111
-            availableHeight = videoHeight * zoomRate;
112
-        } else if (availableHeight * aspectRatio < videoSpaceWidth) {
113
-            availableWidth = videoSpaceWidth;
114
-            availableHeight = availableWidth / aspectRatio;
98
+        let [ width, height] = computeCameraVideoSize(
99
+            videoWidth,
100
+            videoHeight,
101
+            videoSpaceWidth,
102
+            videoSpaceHeight,
103
+            videoSpaceRatio < aspectRatio ? 'height' : 'width');
104
+        const maxWidth = videoSpaceWidth * maxZoomCoefficient;
105
+        const maxHeight = videoSpaceHeight * maxZoomCoefficient;
106
+
107
+        if (width > maxWidth) {
108
+            width = maxWidth;
109
+            height = width / aspectRatio;
110
+        } else if (height > maxHeight) {
111
+            height = maxHeight;
112
+            width = height * aspectRatio;
115
         }
113
         }
114
+        return [width, height];
115
+    }
116
+    default:
117
+        return [ videoWidth, videoHeight ];
116
     }
118
     }
117
-
118
-    return [ availableWidth, availableHeight ];
119
 }
119
 }
120
 
120
 
121
 /**
121
 /**
293
         return computeCameraVideoSize(width,
293
         return computeCameraVideoSize(width,
294
             height,
294
             height,
295
             containerWidth,
295
             containerWidth,
296
-            containerHeight);
296
+            containerHeight,
297
+            interfaceConfig.VIDEO_LAYOUT_FIT);
297
     }
298
     }
298
 
299
 
299
     /**
300
     /**
355
         let [ width, height ]
356
         let [ width, height ]
356
             = this.getVideoSize(containerWidth, containerHeight);
357
             = this.getVideoSize(containerWidth, containerHeight);
357
 
358
 
358
-        if (containerWidth > width) {
359
+        if ((containerWidth > width) || (containerHeight > height)) {
359
             this._showVideoBackground();
360
             this._showVideoBackground();
361
+            const css = containerWidth > width
362
+                ? {width: '100%', height: 'auto'} : {width: 'auto', height: '100%'};
363
+            this.$videoBackground.css(css);
360
         }
364
         }
361
 
365
 
362
         let { horizontalIndent, verticalIndent }
366
         let { horizontalIndent, verticalIndent }

+ 0
- 1
react/features/large-video/components/LargeVideo.web.js Прегледај датотеку

40
                 <div className = 'video_blurred_container'>
40
                 <div className = 'video_blurred_container'>
41
                     <video
41
                     <video
42
                         autoPlay = { true }
42
                         autoPlay = { true }
43
-                        className = 'video_blurred'
44
                         id = 'largeVideoBackground'
43
                         id = 'largeVideoBackground'
45
                         muted = 'true' />
44
                         muted = 'true' />
46
                 </div>
45
                 </div>

Loading…
Откажи
Сачувај