瀏覽代碼

Add maximum zooming coefficient

master
Ilya Daynatovich 8 年之前
父節點
當前提交
292c1689ba
共有 3 個檔案被更改,包括 50 行新增29 行删除
  1. 2
    1
      interface_config.js
  2. 21
    8
      modules/UI/videolayout/LargeVideoManager.js
  3. 27
    20
      modules/UI/videolayout/VideoContainer.js

+ 2
- 1
interface_config.js 查看文件

93
      *
93
      *
94
      * @type {boolean}
94
      * @type {boolean}
95
      */
95
      */
96
-    MOBILE_APP_PROMO: true
96
+    MOBILE_APP_PROMO: true,
97
+    MAXIMUM_ZOOMING_COEFFICIENT: 1.3
97
 };
98
 };

+ 21
- 8
modules/UI/videolayout/LargeVideoManager.js 查看文件

60
         this.width = 0;
60
         this.width = 0;
61
         this.height = 0;
61
         this.height = 0;
62
 
62
 
63
+        /**
64
+         * Cache the aspect ratio of the video displayed to detect changes to
65
+         * the aspect ratio on video resize events.
66
+         *
67
+         * @type {number}
68
+         */
69
+        this._videoAspectRatio = 0;
70
+
63
         this.$container = $('#largeVideoContainer');
71
         this.$container = $('#largeVideoContainer');
64
 
72
 
65
         this.$container.css({
73
         this.$container.css({
72
         );
80
         );
73
 
81
 
74
         // Bind event handler so it is only bound once for every instance.
82
         // Bind event handler so it is only bound once for every instance.
75
-        this._updateVideoResolutionStatus
76
-            = this._updateVideoResolutionStatus.bind(this);
83
+        this._onVideoResolutionUpdate
84
+            = this._onVideoResolutionUpdate.bind(this);
77
 
85
 
78
-        this.videoContainer.addResizeListener(
79
-            this._updateVideoResolutionStatus);
86
+        this.videoContainer.addResizeListener(this._onVideoResolutionUpdate);
80
 
87
 
81
         if (!JitsiMeetJS.util.RTCUIHelper.isResizeEventSupported()) {
88
         if (!JitsiMeetJS.util.RTCUIHelper.isResizeEventSupported()) {
82
             /**
89
             /**
88
              * @type {timeoutId}
95
              * @type {timeoutId}
89
              */
96
              */
90
             this._updateVideoResolutionInterval = window.setInterval(
97
             this._updateVideoResolutionInterval = window.setInterval(
91
-                this._updateVideoResolutionStatus,
98
+                this._onVideoResolutionUpdate,
92
                 VIDEO_RESOLUTION_POLL_INTERVAL);
99
                 VIDEO_RESOLUTION_POLL_INTERVAL);
93
         }
100
         }
94
     }
101
     }
102
     destroy() {
109
     destroy() {
103
         window.clearInterval(this._updateVideoResolutionInterval);
110
         window.clearInterval(this._updateVideoResolutionInterval);
104
         this.videoContainer.removeResizeListener(
111
         this.videoContainer.removeResizeListener(
105
-            this._updateVideoResolutionStatus);
112
+            this._onVideoResolutionUpdate);
106
     }
113
     }
107
 
114
 
108
     onHoverIn (e) {
115
     onHoverIn (e) {
565
 
572
 
566
     /**
573
     /**
567
      * Dispatches an action to update the known resolution state of the
574
      * Dispatches an action to update the known resolution state of the
568
-     * large video.
575
+     * large video and adjusts container sizes when the resolution changes.
569
      *
576
      *
570
      * @private
577
      * @private
571
      * @returns {void}
578
      * @returns {void}
572
      */
579
      */
573
-    _updateVideoResolutionStatus() {
580
+    _onVideoResolutionUpdate() {
574
         const { height, width } = this.videoContainer.getStreamSize();
581
         const { height, width } = this.videoContainer.getStreamSize();
582
+        const currentAspectRatio = width/ height;
575
         const isCurrentlyHD = Math.min(height, width) >= config.minHDHeight;
583
         const isCurrentlyHD = Math.min(height, width) >= config.minHDHeight;
576
 
584
 
577
         APP.store.dispatch(setLargeVideoHDStatus(isCurrentlyHD));
585
         APP.store.dispatch(setLargeVideoHDStatus(isCurrentlyHD));
586
+
587
+        if (this._videoAspectRatio !== currentAspectRatio) {
588
+            this._videoAspectRatio = currentAspectRatio;
589
+            this.resize();
590
+        }
578
     }
591
     }
579
 }
592
 }

+ 27
- 20
modules/UI/videolayout/VideoContainer.js 查看文件

38
  * @param videoSpaceHeight the height of the available space
38
  * @param videoSpaceHeight the height of the available space
39
  * @return an array with 2 elements, the video width and the video height
39
  * @return an array with 2 elements, the video width and the video height
40
  */
40
  */
41
-function getDesktopVideoSize(videoWidth,
41
+function computeDesktopVideoSize(videoWidth,
42
                              videoHeight,
42
                              videoHeight,
43
                              videoSpaceWidth,
43
                              videoSpaceWidth,
44
                              videoSpaceHeight) {
44
                              videoSpaceHeight) {
75
  * @param videoSpaceHeight the height of the video space
75
  * @param videoSpaceHeight the height of the video space
76
  * @return an array with 2 elements, the video width and the video height
76
  * @return an array with 2 elements, the video width and the video height
77
  */
77
  */
78
-function getCameraVideoSize(videoWidth,
78
+function computeCameraVideoSize(videoWidth,
79
                             videoHeight,
79
                             videoHeight,
80
                             videoSpaceWidth,
80
                             videoSpaceWidth,
81
                             videoSpaceHeight) {
81
                             videoSpaceHeight) {
82
 
82
 
83
-    let aspectRatio = videoWidth / videoHeight;
84
-
83
+    const aspectRatio = videoWidth / videoHeight;
85
     let availableWidth = videoWidth;
84
     let availableWidth = videoWidth;
86
     let availableHeight = videoHeight;
85
     let availableHeight = videoHeight;
87
 
86
 
88
-    if (interfaceConfig.VIDEO_LAYOUT_FIT == 'height') {
87
+    if (interfaceConfig.VIDEO_LAYOUT_FIT === 'height') {
89
         availableHeight = videoSpaceHeight;
88
         availableHeight = videoSpaceHeight;
90
-        availableWidth = availableHeight*aspectRatio;
91
-    }
92
-    else if (interfaceConfig.VIDEO_LAYOUT_FIT == 'width') {
89
+        availableWidth = availableHeight * aspectRatio;
90
+    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'width') {
93
         availableWidth = videoSpaceWidth;
91
         availableWidth = videoSpaceWidth;
94
-        availableHeight = availableWidth/aspectRatio;
95
-    }
96
-    else if (interfaceConfig.VIDEO_LAYOUT_FIT == 'both') {
92
+        availableHeight = availableWidth / aspectRatio;
93
+    } else if (interfaceConfig.VIDEO_LAYOUT_FIT === 'both') {
97
         availableWidth = Math.max(videoWidth, videoSpaceWidth);
94
         availableWidth = Math.max(videoWidth, videoSpaceWidth);
98
         availableHeight = Math.max(videoHeight, videoSpaceHeight);
95
         availableHeight = Math.max(videoHeight, videoSpaceHeight);
99
 
96
 
102
             availableWidth = availableHeight * aspectRatio;
99
             availableWidth = availableHeight * aspectRatio;
103
         }
100
         }
104
 
101
 
105
-        if (availableHeight * aspectRatio < videoSpaceWidth) {
102
+        if (aspectRatio <= 1) {
103
+            const zoomRateHeight = videoSpaceHeight / videoHeight;
104
+            const zoomRateWidth = videoSpaceWidth / videoWidth;
105
+            const maxZoomRate
106
+                = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity;
107
+            let zoomRate = Math.min(zoomRateWidth, maxZoomRate);
108
+
109
+            zoomRate = Math.max(zoomRate, zoomRateHeight);
110
+            availableWidth = videoWidth * zoomRate;
111
+            availableHeight = videoHeight * zoomRate;
112
+        } else if (availableHeight * aspectRatio < videoSpaceWidth) {
106
             availableWidth = videoSpaceWidth;
113
             availableWidth = videoSpaceWidth;
107
             availableHeight = availableWidth / aspectRatio;
114
             availableHeight = availableWidth / aspectRatio;
108
         }
115
         }
109
     }
116
     }
110
 
117
 
111
-
112
     return [ availableWidth, availableHeight ];
118
     return [ availableWidth, availableHeight ];
113
 }
119
 }
114
 
120
 
269
      * @param {number} containerHeight container height
275
      * @param {number} containerHeight container height
270
      * @returns {{availableWidth, availableHeight}}
276
      * @returns {{availableWidth, availableHeight}}
271
      */
277
      */
272
-    getVideoSize (containerWidth, containerHeight) {
278
+    getVideoSize(containerWidth, containerHeight) {
273
         let { width, height } = this.getStreamSize();
279
         let { width, height } = this.getStreamSize();
280
+
274
         if (this.stream && this.isScreenSharing()) {
281
         if (this.stream && this.isScreenSharing()) {
275
-            return getDesktopVideoSize( width,
276
-                height,
277
-                containerWidth,
278
-                containerHeight);
279
-        } else {
280
-            return getCameraVideoSize(  width,
282
+            return computeDesktopVideoSize(width,
281
                 height,
283
                 height,
282
                 containerWidth,
284
                 containerWidth,
283
                 containerHeight);
285
                 containerHeight);
284
         }
286
         }
287
+
288
+        return computeCameraVideoSize(width,
289
+            height,
290
+            containerWidth,
291
+            containerHeight);
285
     }
292
     }
286
 
293
 
287
     /**
294
     /**

Loading…
取消
儲存