Selaa lähdekoodia

Fixes local video flickering when locally muted. Rearranges some of the large video avatar related code.

j8
yanas 10 vuotta sitten
vanhempi
commit
3fe0487df7
2 muutettua tiedostoa jossa 40 lisäystä ja 22 poistoa
  1. 39
    16
      modules/UI/videolayout/LargeVideo.js
  2. 1
    6
      modules/UI/videolayout/VideoLayout.js

+ 39
- 16
modules/UI/videolayout/LargeVideo.js Näytä tiedosto

5
 import UIEvents from "../../../service/UI/UIEvents";
5
 import UIEvents from "../../../service/UI/UIEvents";
6
 import LargeContainer from './LargeContainer';
6
 import LargeContainer from './LargeContainer';
7
 import BottomToolbar from '../toolbars/BottomToolbar';
7
 import BottomToolbar from '../toolbars/BottomToolbar';
8
+import Avatar from "../avatar/Avatar";
8
 
9
 
9
 const RTCBrowserType = require("../../RTC/RTCBrowserType");
10
 const RTCBrowserType = require("../../RTC/RTCBrowserType");
10
 
11
 
184
     getVideoSize (containerWidth, containerHeight) {
185
     getVideoSize (containerWidth, containerHeight) {
185
         let { width, height } = this.getStreamSize();
186
         let { width, height } = this.getStreamSize();
186
         if (this.stream && this.isScreenSharing()) {
187
         if (this.stream && this.isScreenSharing()) {
187
-            return getDesktopVideoSize(width, height, containerWidth, containerHeight);
188
+            return getDesktopVideoSize( width,
189
+                                        height,
190
+                                        containerWidth,
191
+                                        containerHeight);
188
         } else {
192
         } else {
189
-            return getCameraVideoSize(width, height, containerWidth, containerHeight);
193
+            return getCameraVideoSize(  width,
194
+                                        height,
195
+                                        containerWidth,
196
+                                        containerHeight);
190
         }
197
         }
191
     }
198
     }
192
 
199
 
193
     getVideoPosition (width, height, containerWidth, containerHeight) {
200
     getVideoPosition (width, height, containerWidth, containerHeight) {
194
         if (this.stream && this.isScreenSharing()) {
201
         if (this.stream && this.isScreenSharing()) {
195
-            return getDesktopVideoPosition(width, height, containerWidth, containerHeight);
202
+            return getDesktopVideoPosition( width,
203
+                                            height,
204
+                                            containerWidth,
205
+                                            containerHeight);
196
         } else {
206
         } else {
197
-            return getCameraVideoPosition(width, height, containerWidth, containerHeight);
207
+            return getCameraVideoPosition(  width,
208
+                                            height,
209
+                                            containerWidth,
210
+                                            containerHeight);
198
         }
211
         }
199
     }
212
     }
200
 
213
 
201
     resize (containerWidth, containerHeight, animate = false) {
214
     resize (containerWidth, containerHeight, animate = false) {
202
-        let { width, height } = this.getVideoSize(containerWidth, containerHeight);
203
-        let { horizontalIndent, verticalIndent } = this.getVideoPosition(width, height, containerWidth, containerHeight);
215
+        let { width, height }
216
+            = this.getVideoSize(containerWidth, containerHeight);
217
+        let { horizontalIndent, verticalIndent }
218
+            = this.getVideoPosition(width, height,
219
+                                    containerWidth, containerHeight);
204
 
220
 
205
         // update avatar position
221
         // update avatar position
206
         let top = containerHeight / 2 - avatarSize / 4 * 3;
222
         let top = containerHeight / 2 - avatarSize / 4 * 3;
239
     }
255
     }
240
 
256
 
241
     showAvatar (show) {
257
     showAvatar (show) {
242
-        // if we are showing the avatar, this means there is no video on large
243
-        // so let's hide its video wrapper
244
-        show ? this.hide() : this.show();
245
         this.$avatar.css("visibility", show ? "visible" : "hidden");
258
         this.$avatar.css("visibility", show ? "visible" : "hidden");
246
     }
259
     }
247
 
260
 
253
 
266
 
254
     show () {
267
     show () {
255
         let $wrapper = this.$wrapper;
268
         let $wrapper = this.$wrapper;
256
-        return new Promise(resolve => {
269
+        return new Promise(function(resolve) {
257
             $wrapper.fadeIn(300, function () {
270
             $wrapper.fadeIn(300, function () {
258
                 $wrapper.css({visibility: 'visible'});
271
                 $wrapper.css({visibility: 'visible'});
259
                 $('.watermark').css({visibility: 'visible'});
272
                 $('.watermark').css({visibility: 'visible'});
263
     }
276
     }
264
 
277
 
265
     hide () {
278
     hide () {
266
-        this.showAvatar(false);
267
 
279
 
268
         let $wrapper = this.$wrapper;
280
         let $wrapper = this.$wrapper;
269
 
281
 
270
-        return new Promise(resolve => {
282
+        return new Promise(function(resolve) {
271
             $wrapper.fadeOut(300, function () {
283
             $wrapper.fadeOut(300, function () {
272
                 $wrapper.css({visibility: 'hidden'});
284
                 $wrapper.css({visibility: 'hidden'});
273
                 $('.watermark').css({visibility: 'hidden'});
285
                 $('.watermark').css({visibility: 'hidden'});
344
         return this.videoContainer.id;
356
         return this.videoContainer.id;
345
     }
357
     }
346
 
358
 
347
-    updateLargeVideo (stream, videoType, largeVideoUpdatedCallBack) {
348
-        let id = getStreamId(stream);
359
+    updateLargeVideo (smallVideo, videoType, largeVideoUpdatedCallBack) {
360
+        let id = getStreamId(smallVideo.stream);
349
 
361
 
350
         let container = this.getContainer(this.state);
362
         let container = this.getContainer(this.state);
351
 
363
 
352
         container.hide().then(() => {
364
         container.hide().then(() => {
353
             console.info("hover in %s", id);
365
             console.info("hover in %s", id);
354
             this.state = VideoContainerType;
366
             this.state = VideoContainerType;
355
-            this.videoContainer.setStream(stream, videoType);
356
-            this.videoContainer.show();
367
+            this.videoContainer.setStream(smallVideo.stream, videoType);
368
+
369
+            // change the avatar url on large
370
+            this.updateAvatar(Avatar.getAvatarUrl(smallVideo.id));
371
+
372
+            var isVideoMuted = smallVideo.stream.isMuted()
373
+            // show the avatar on large if needed
374
+            this.videoContainer.showAvatar(isVideoMuted);
375
+
376
+            if (!isVideoMuted)
377
+                this.videoContainer.show();
378
+
357
             largeVideoUpdatedCallBack();
379
             largeVideoUpdatedCallBack();
358
         });
380
         });
359
     }
381
     }
399
     }
421
     }
400
 
422
 
401
     showAvatar (show) {
423
     showAvatar (show) {
424
+        show ? this.videoContainer.hide() : this.videoContainer.show();
402
         this.videoContainer.showAvatar(show);
425
         this.videoContainer.showAvatar(show);
403
     }
426
     }
404
 
427
 

+ 1
- 6
modules/UI/videolayout/VideoLayout.js Näytä tiedosto

990
 
990
 
991
             let videoType = this.getRemoteVideoType(id);
991
             let videoType = this.getRemoteVideoType(id);
992
             largeVideo.updateLargeVideo(
992
             largeVideo.updateLargeVideo(
993
-                smallVideo.stream,
993
+                smallVideo,
994
                 videoType,
994
                 videoType,
995
                 // LargeVideoUpdatedCallBack
995
                 // LargeVideoUpdatedCallBack
996
                 function() {
996
                 function() {
997
                     // update current small video and the old one
997
                     // update current small video and the old one
998
                     smallVideo.updateView();
998
                     smallVideo.updateView();
999
                     oldSmallVideo && oldSmallVideo.updateView();
999
                     oldSmallVideo && oldSmallVideo.updateView();
1000
-
1001
-                    // change the avatar url on large
1002
-                    largeVideo.updateAvatar(Avatar.getAvatarUrl(smallVideo.id));
1003
-                    // show the avatar on large if needed
1004
-                    largeVideo.showAvatar(smallVideo.stream.isMuted());
1005
                 });
1000
                 });
1006
 
1001
 
1007
         } else if (currentId) {
1002
         } else if (currentId) {

Loading…
Peruuta
Tallenna