浏览代码

Fixes bugs with thumbnails getting black when prezi is playing or etherpad is viewed.

master
fo 11 年前
父节点
当前提交
f0a4c08f26
共有 5 个文件被更改,包括 66 次插入47 次删除
  1. 3
    2
      avatar.js
  2. 1
    2
      css/videolayout_default.css
  3. 16
    10
      etherpad.js
  4. 11
    9
      prezi.js
  5. 35
    24
      videolayout.js

+ 3
- 2
avatar.js 查看文件

73
             }
73
             }
74
 
74
 
75
             //if the user is the currently focused, the dominant speaker or if
75
             //if the user is the currently focused, the dominant speaker or if
76
-            //there is no focused and no dominant speaker
77
-            if (activeSpeakerJid === jid) {
76
+            //there is no focused and no dominant speaker and the large video is
77
+            //currently shown
78
+            if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) {
78
                 setVisibility($("#largeVideo"), !show);
79
                 setVisibility($("#largeVideo"), !show);
79
                 setVisibility($('#activeSpeakerAvatar'), show);
80
                 setVisibility($('#activeSpeakerAvatar'), show);
80
                 setVisibility(avatar, false);
81
                 setVisibility(avatar, false);

+ 1
- 2
css/videolayout_default.css 查看文件

36
 #remoteVideos .videocontainer {
36
 #remoteVideos .videocontainer {
37
     display: inline-block;
37
     display: inline-block;
38
     background-color: black;
38
     background-color: black;
39
-    background-repeat: no-repeat;
40
-    background-position: 45;
41
     background-size: contain;
39
     background-size: contain;
42
     border-radius:8px;
40
     border-radius:8px;
43
     border: 2px solid #212425;
41
     border: 2px solid #212425;
376
     position: absolute;
374
     position: absolute;
377
     z-index: 0;
375
     z-index: 0;
378
     border-radius:10px;
376
     border-radius:10px;
377
+    pointer-events: none;
379
 }
378
 }
380
 
379
 
381
 #mixedstream {
380
 #mixedstream {

+ 16
- 10
etherpad.js 查看文件

48
                 } else {
48
                 } else {
49
                     VideoLayout.setLargeVideoVisible(false);
49
                     VideoLayout.setLargeVideoVisible(false);
50
                 }
50
                 }
51
+            });
51
 
52
 
52
-                $('#etherpad>iframe').fadeIn(300, function () {
53
-                    document.body.style.background = '#eeeeee';
54
-                    $('#etherpad>iframe').css({visibility: 'visible'});
55
-                    $('#etherpad').css({zIndex: 2});
56
-                });
53
+            $('#etherpad>iframe').fadeIn(300, function () {
54
+                document.body.style.background = '#eeeeee';
55
+                $('#etherpad>iframe').css({visibility: 'visible'});
56
+                $('#etherpad').css({zIndex: 2});
57
             });
57
             });
58
         }
58
         }
59
         else if ($('#etherpad>iframe')) {
59
         else if ($('#etherpad>iframe')) {
61
                 $('#etherpad>iframe').css({visibility: 'hidden'});
61
                 $('#etherpad>iframe').css({visibility: 'hidden'});
62
                 $('#etherpad').css({zIndex: 0});
62
                 $('#etherpad').css({zIndex: 0});
63
                 document.body.style.background = 'black';
63
                 document.body.style.background = 'black';
64
-                if (!isPresentation) {
65
-                    $('#largeVideo').fadeIn(300, function () {
66
-                        VideoLayout.setLargeVideoVisible(true);
67
-                    });
68
-                }
69
             });
64
             });
65
+
66
+            if (!isPresentation) {
67
+                $('#largeVideo').fadeIn(300, function () {
68
+                    VideoLayout.setLargeVideoVisible(true);
69
+                });
70
+            }
70
         }
71
         }
71
         resize();
72
         resize();
72
     };
73
     };
73
 
74
 
75
+    my.isVisible = function() {
76
+        var etherpadIframe = $('#etherpad>iframe');
77
+        return etherpadIframe && etherpadIframe.is(':visible');
78
+    };
79
+
74
     /**
80
     /**
75
      * Resizes the etherpad.
81
      * Resizes the etherpad.
76
      */
82
      */

+ 11
- 9
prezi.js 查看文件

13
      * Shows/hides a presentation.
13
      * Shows/hides a presentation.
14
      */
14
      */
15
     my.setPresentationVisible = function (visible) {
15
     my.setPresentationVisible = function (visible) {
16
+        var prezi = $('#presentation>iframe');
16
         if (visible) {
17
         if (visible) {
17
             // Trigger the video.selected event to indicate a change in the
18
             // Trigger the video.selected event to indicate a change in the
18
             // large video.
19
             // large video.
19
             $(document).trigger("video.selected", [true]);
20
             $(document).trigger("video.selected", [true]);
20
 
21
 
21
-            $('#largeVideo').fadeOut(300, function () {
22
+            $('#largeVideo').fadeOut(300);
23
+            prezi.fadeIn(300, function() {
24
+                prezi.css({opacity:'1'});
25
+                ToolbarToggler.dockToolbar(true);
22
                 VideoLayout.setLargeVideoVisible(false);
26
                 VideoLayout.setLargeVideoVisible(false);
23
-                $('#presentation>iframe').fadeIn(300, function() {
24
-                    $('#presentation>iframe').css({opacity:'1'});
25
-                    ToolbarToggler.dockToolbar(true);
26
-                });
27
             });
27
             });
28
+            $('#activeSpeakerAvatar').css('visibility', 'hidden');
28
         }
29
         }
29
         else {
30
         else {
30
-            if ($('#presentation>iframe').css('opacity') == '1') {
31
-                $('#presentation>iframe').fadeOut(300, function () {
32
-                    $('#presentation>iframe').css({opacity:'0'});
31
+            if (prezi.css('opacity') == '1') {
32
+                prezi.fadeOut(300, function () {
33
+                    prezi.css({opacity:'0'});
33
                     $('#reloadPresentation').css({display:'none'});
34
                     $('#reloadPresentation').css({display:'none'});
34
                     $('#largeVideo').fadeIn(300, function() {
35
                     $('#largeVideo').fadeIn(300, function() {
35
                         VideoLayout.setLargeVideoVisible(true);
36
                         VideoLayout.setLargeVideoVisible(true);
332
      * On video selected event.
333
      * On video selected event.
333
      */
334
      */
334
     $(document).bind('video.selected', function (event, isPresentation) {
335
     $(document).bind('video.selected', function (event, isPresentation) {
335
-        if (!isPresentation && $('#presentation>iframe'))
336
+        if (!isPresentation && $('#presentation>iframe')) {
336
             Prezi.setPresentationVisible(false);
337
             Prezi.setPresentationVisible(false);
338
+        }
337
     });
339
     });
338
 
340
 
339
     $(window).resize(function () {
341
     $(window).resize(function () {

+ 35
- 24
videolayout.js 查看文件

310
                 connection.emuc.findJidFromResource(
310
                 connection.emuc.findJidFromResource(
311
                     largeVideoState.userResourceJid));
311
                     largeVideoState.userResourceJid));
312
         }
312
         }
313
+
313
     };
314
     };
314
 
315
 
315
     my.handleVideoThumbClicked = function(videoSrc,
316
     my.handleVideoThumbClicked = function(videoSrc,
318
         // Restore style for previously focused video
319
         // Restore style for previously focused video
319
         var oldContainer = null;
320
         var oldContainer = null;
320
         if(focusedVideoInfo) {
321
         if(focusedVideoInfo) {
321
-            var focusResourceJid = focusedVideoInfo.resouceJid;
322
+            var focusResourceJid = focusedVideoInfo.resourceJid;
322
             oldContainer = getParticipantContainer(focusResourceJid);
323
             oldContainer = getParticipantContainer(focusResourceJid);
323
         }
324
         }
324
 
325
 
354
         // Lock new video
355
         // Lock new video
355
         focusedVideoInfo = {
356
         focusedVideoInfo = {
356
             src: videoSrc,
357
             src: videoSrc,
357
-            resouceJid: resourceJid
358
+            resourceJid: resourceJid
358
         };
359
         };
359
 
360
 
360
         // Update focused/pinned interface.
361
         // Update focused/pinned interface.
368
             }
369
             }
369
         }
370
         }
370
 
371
 
371
-        if ($('#largeVideo').attr('src') === videoSrc) {
372
+        if ($('#largeVideo').attr('src') === videoSrc &&
373
+            VideoLayout.isLargeVideoOnTop()) {
372
             return;
374
             return;
373
         }
375
         }
374
 
376
 
433
             $('#largeVideo').css({visibility: 'hidden'});
435
             $('#largeVideo').css({visibility: 'hidden'});
434
             $('.watermark').css({visibility: 'hidden'});
436
             $('.watermark').css({visibility: 'hidden'});
435
             VideoLayout.enableDominantSpeaker(resourceJid, false);
437
             VideoLayout.enableDominantSpeaker(resourceJid, false);
436
-            var focusJid = VideoLayout.getLargeVideoState().userJid;
437
-            var oldContainer = getParticipantContainer(focusJid);
438
+            if(focusedVideoInfo) {
439
+                var focusResourceJid = focusedVideoInfo.resourceJid;
440
+                var oldContainer = getParticipantContainer(focusResourceJid);
438
 
441
 
439
-            if (oldContainer) {
440
-                oldContainer.removeClass("videoContainerFocused");
441
-            }
442
-            focusedVideoInfo = null;
443
-            if(focusJid) {
444
-                Avatar.showUserAvatar(focusJid);
442
+                if (oldContainer && oldContainer.length > 0) {
443
+                    oldContainer.removeClass("videoContainerFocused");
444
+                }
445
+                focusedVideoInfo = null;
446
+                if(focusResourceJid) {
447
+                    Avatar.showUserAvatar(
448
+                        connection.emuc.findJidFromResource(focusResourceJid));
449
+                }
445
             }
450
             }
446
         }
451
         }
447
     };
452
     };
455
         return $('#largeVideo').is(':visible');
460
         return $('#largeVideo').is(':visible');
456
     };
461
     };
457
 
462
 
463
+    my.isLargeVideoOnTop = function () {
464
+        return !Prezi.isPresentationVisible() && !Etherpad.isVisible();
465
+    };
466
+
458
     /**
467
     /**
459
      * Checks if container for participant identified by given peerJid exists
468
      * Checks if container for participant identified by given peerJid exists
460
      * in the document and creates it eventually.
469
      * in the document and creates it eventually.
596
                  * no actual video).
605
                  * no actual video).
597
                  */
606
                  */
598
                 var videoThumb = $('#' + container.id + '>video').get(0);
607
                 var videoThumb = $('#' + container.id + '>video').get(0);
599
-
600
-                if (videoThumb)
608
+                if (videoThumb) {
601
                     VideoLayout.handleVideoThumbClicked(
609
                     VideoLayout.handleVideoThumbClicked(
602
                         RTC.getVideoSrc(videoThumb),
610
                         RTC.getVideoSrc(videoThumb),
603
                         false,
611
                         false,
604
                         Strophe.getResourceFromJid(peerJid));
612
                         Strophe.getResourceFromJid(peerJid));
613
+                }
605
 
614
 
615
+                event.stopPropagation();
606
                 event.preventDefault();
616
                 event.preventDefault();
607
                 return false;
617
                 return false;
608
             };
618
             };
1098
 
1108
 
1099
         if (video && video.length > 0) {
1109
         if (video && video.length > 0) {
1100
             if (isEnable) {
1110
             if (isEnable) {
1101
-                VideoLayout.showDisplayName(videoContainerId, true);
1111
+                var isLargeVideoVisible = VideoLayout.isLargeVideoOnTop();
1112
+                VideoLayout.showDisplayName(videoContainerId, isLargeVideoVisible);
1102
 
1113
 
1103
                 if (!videoSpan.classList.contains("dominantspeaker"))
1114
                 if (!videoSpan.classList.contains("dominantspeaker"))
1104
                     videoSpan.classList.add("dominantspeaker");
1115
                     videoSpan.classList.add("dominantspeaker");
1105
-
1106
-                video.css({visibility: 'hidden'});
1107
             }
1116
             }
1108
             else {
1117
             else {
1109
                 VideoLayout.showDisplayName(videoContainerId, false);
1118
                 VideoLayout.showDisplayName(videoContainerId, false);
1110
 
1119
 
1111
                 if (videoSpan.classList.contains("dominantspeaker"))
1120
                 if (videoSpan.classList.contains("dominantspeaker"))
1112
                     videoSpan.classList.remove("dominantspeaker");
1121
                     videoSpan.classList.remove("dominantspeaker");
1113
-
1114
-                video.css({visibility: 'visible'});
1115
             }
1122
             }
1123
+
1124
+            Avatar.showUserAvatar(
1125
+                connection.emuc.findJidFromResource(resourceJid));
1116
         }
1126
         }
1117
     };
1127
     };
1118
 
1128
 
1715
                     = VideoLayout.getPeerContainerResourceJid(videoParent[0]);
1725
                     = VideoLayout.getPeerContainerResourceJid(videoParent[0]);
1716
 
1726
 
1717
             // Update the large video to the last added video only if there's no
1727
             // Update the large video to the last added video only if there's no
1718
-            // current dominant or focused speaker or update it to the current
1719
-            // dominant speaker.
1720
-            if ((!focusedVideoInfo && !VideoLayout.getDominantSpeakerResourceJid())
1721
-                || (parentResourceJid
1722
-                && VideoLayout.getDominantSpeakerResourceJid()
1723
-                    === parentResourceJid)) {
1728
+            // current dominant, focused speaker or prezi playing or update it to
1729
+            // the current dominant speaker.
1730
+            if ((!focusedVideoInfo &&
1731
+                !VideoLayout.getDominantSpeakerResourceJid() &&
1732
+                !Prezi.isPresentationVisible()) ||
1733
+                (parentResourceJid &&
1734
+                VideoLayout.getDominantSpeakerResourceJid() === parentResourceJid)) {
1724
                 VideoLayout.updateLargeVideo(
1735
                 VideoLayout.updateLargeVideo(
1725
                     RTC.getVideoSrc(videoelem[0]),
1736
                     RTC.getVideoSrc(videoelem[0]),
1726
                     1,
1737
                     1,

正在加载...
取消
保存