Browse Source

Fixes fadeIn/fadeOut large video transitions in Safari. Enables animation on video resize when switching between camera and screen video.

j8
paweldomas 10 years ago
parent
commit
eb63b24a9a
3 changed files with 21 additions and 14 deletions
  1. 6
    1
      css/videolayout_default.css
  2. 1
    1
      index.html
  3. 14
    12
      modules/UI/videolayout/LargeVideo.js

+ 6
- 1
css/videolayout_default.css View File

101
 }
101
 }
102
 
102
 
103
 #largeVideo,
103
 #largeVideo,
104
+#largeVideoWrapper,
104
 #largeVideoContainer {
105
 #largeVideoContainer {
105
     overflow: hidden;
106
     overflow: hidden;
106
     text-align: center;
107
     text-align: center;
107
 }
108
 }
108
 
109
 
109
-#largeVideo
110
+#largeVideo,
111
+#largeVideoWrapper
110
 {
112
 {
111
     object-fit: cover;
113
     object-fit: cover;
112
 }
114
 }
116
 #localVideoWrapper>video,
118
 #localVideoWrapper>video,
117
 #localVideoWrapper>object,
119
 #localVideoWrapper>object,
118
 #localVideoWrapper,
120
 #localVideoWrapper,
121
+#largeVideoWrapper,
122
+#largeVideoWrapper>video,
123
+#largeVideoWrapper>object,
119
 .videocontainer>video,
124
 .videocontainer>video,
120
 .videocontainer>object {
125
 .videocontainer>object {
121
     position: absolute;
126
     position: absolute;

+ 1
- 1
index.html View File

25
     <link rel="stylesheet" href="css/font.css?v=7"/>
25
     <link rel="stylesheet" href="css/font.css?v=7"/>
26
     <link rel="stylesheet" href="css/toastr.css?v=1">
26
     <link rel="stylesheet" href="css/toastr.css?v=1">
27
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=31"/>
27
     <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=31"/>
28
-    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=19" id="videolayout_default"/>
28
+    <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=20" id="videolayout_default"/>
29
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
29
     <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
30
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
30
     <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
31
     <link rel="stylesheet" href="css/modaldialog.css?v=3">
31
     <link rel="stylesheet" href="css/modaldialog.css?v=3">

+ 14
- 12
modules/UI/videolayout/LargeVideo.js View File

267
     if (isVisible) {
267
     if (isVisible) {
268
         LargeVideo.VideoLayout.largeVideoUpdated(currentSmallVideo);
268
         LargeVideo.VideoLayout.largeVideoUpdated(currentSmallVideo);
269
 
269
 
270
-        $('#largeVideo').fadeIn(300);
270
+        $('#largeVideoWrapper').fadeIn(300);
271
     }
271
     }
272
 }
272
 }
273
 
273
 
288
                 '<img id="activeSpeakerAvatar" src=""/>' +
288
                 '<img id="activeSpeakerAvatar" src=""/>' +
289
                 '<canvas id="activeSpeakerAudioLevel"></canvas>' +
289
                 '<canvas id="activeSpeakerAudioLevel"></canvas>' +
290
             '</div>' +
290
             '</div>' +
291
-            '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
291
+            '<div id="largeVideoWrapper">' +
292
+                '<video id="largeVideo" autoplay oncontextmenu="return false;"></video>' +
293
+            '</div id="largeVideoWrapper">' +
292
             '<span id="videoConnectionMessage"></span>';
294
             '<span id="videoConnectionMessage"></span>';
293
     html += '</div>';
295
     html += '</div>';
294
     $(html).prependTo("#videospace");
296
     $(html).prependTo("#videospace");
386
                 // or null.
388
                 // or null.
387
                 this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, resourceJid);
389
                 this.eventEmitter.emit(UIEvents.SELECTED_ENDPOINT, resourceJid);
388
             }
390
             }
389
-            if (RTCBrowserType.isSafari()) {
390
-                // FIXME In Safari fadeOut works only for the first time
391
-                changeVideo(this.isLargeVideoVisible());
392
-            } else {
393
-                $('#largeVideo').fadeOut(300,
394
-                    changeVideo.bind($('#largeVideo'), this.isLargeVideoVisible()));
395
-            }
391
+            // We are doing fadeOut/fadeIn animations on parent div which wraps
392
+            // largeVideo, because when Temasys plugin is in use it replaces
393
+            // <video> elements with plugin <object> tag. In Safari jQuery is
394
+            // unable to store values on this plugin object which breaks all
395
+            // animation effects performed on it directly.
396
+            $('#largeVideoWrapper').fadeOut(300,
397
+                changeVideo.bind($('#largeVideo'), this.isLargeVideoVisible()));
396
         } else {
398
         } else {
397
             if (currentSmallVideo) {
399
             if (currentSmallVideo) {
398
                 currentSmallVideo.showAvatar();
400
                 currentSmallVideo.showAvatar();
430
             getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
432
             getVideoSize = isDesktop ? getDesktopVideoSize : getCameraVideoSize;
431
             getVideoPosition = isDesktop ? getDesktopVideoPosition
433
             getVideoPosition = isDesktop ? getDesktopVideoPosition
432
                 : getCameraVideoPosition;
434
                 : getCameraVideoPosition;
433
-            this.position(null, null);
435
+            this.position(null, null, null, null, true);
434
         }
436
         }
435
     },
437
     },
436
     /**
438
     /**
464
         var horizontalIndent = videoPosition[0];
466
         var horizontalIndent = videoPosition[0];
465
         var verticalIndent = videoPosition[1];
467
         var verticalIndent = videoPosition[1];
466
 
468
 
467
-        positionVideo($('#largeVideo'),
469
+        positionVideo($('#largeVideoWrapper'),
468
             largeVideoWidth,
470
             largeVideoWidth,
469
             largeVideoHeight,
471
             largeVideoHeight,
470
             horizontalIndent, verticalIndent, animate);
472
             horizontalIndent, verticalIndent, animate);
632
                     document.body.style.background = 'black';
634
                     document.body.style.background = 'black';
633
                     ToolbarToggler.dockToolbar(false);//fix that
635
                     ToolbarToggler.dockToolbar(false);//fix that
634
                 });
636
                 });
635
-                $('#largeVideo').fadeIn(300, function () {
637
+                $('#largeVideoWrapper').fadeIn(300, function () {
636
                     self.setLargeVideoVisible(true);
638
                     self.setLargeVideoVisible(true);
637
                 });
639
                 });
638
                 break;
640
                 break;

Loading…
Cancel
Save