Explorar el Código

LargeVideo: show watermark even if video is muted

master
isymchych hace 10 años
padre
commit
24ffc816f4
Se han modificado 1 ficheros con 44 adiciones y 18 borrados
  1. 44
    18
      modules/UI/videolayout/LargeVideo.js

+ 44
- 18
modules/UI/videolayout/LargeVideo.js Ver fichero

170
         this.stream = null;
170
         this.stream = null;
171
         this.videoType = null;
171
         this.videoType = null;
172
 
172
 
173
+        this.isVisible = false;
174
+
173
         this.$avatar = $('#dominantSpeaker');
175
         this.$avatar = $('#dominantSpeaker');
174
         this.$wrapper = $('#largeVideoWrapper');
176
         this.$wrapper = $('#largeVideoWrapper');
175
 
177
 
298
         this.$avatar.css("visibility", show ? "visible" : "hidden");
300
         this.$avatar.css("visibility", show ? "visible" : "hidden");
299
     }
301
     }
300
 
302
 
303
+    /**
304
+     * Show or hide watermark.
305
+     * @param {boolean} show
306
+     */
307
+    showWatermark (show) {
308
+        $('.watermark').css('visibility', show ? 'visible' : 'hidden');
309
+    }
310
+
301
     // We are doing fadeOut/fadeIn animations on parent div which wraps
311
     // We are doing fadeOut/fadeIn animations on parent div which wraps
302
     // largeVideo, because when Temasys plugin is in use it replaces
312
     // largeVideo, because when Temasys plugin is in use it replaces
303
     // <video> elements with plugin <object> tag. In Safari jQuery is
313
     // <video> elements with plugin <object> tag. In Safari jQuery is
305
     // animation effects performed on it directly.
315
     // animation effects performed on it directly.
306
 
316
 
307
     show () {
317
     show () {
318
+        // its already visible
319
+        if (this.isVisible) {
320
+            return Promise.resolve();
321
+        }
322
+
308
         let $wrapper = this.$wrapper;
323
         let $wrapper = this.$wrapper;
309
-        return new Promise(function(resolve) {
310
-            $wrapper.css('visibility', 'visible');
311
-            $wrapper.fadeTo(FADE_DURATION_MS, 1, function () {
312
-                $('.watermark').css('visibility', 'visible');
313
-                resolve();
314
-            });
324
+        return new Promise((resolve) => {
325
+            this.$wrapper.css('visibility', 'visible').fadeTo(
326
+                FADE_DURATION_MS,
327
+                1,
328
+                () => {
329
+                    this.showWatermark(true);
330
+                    this.isVisible = true;
331
+                    resolve();
332
+                }
333
+            );
315
         });
334
         });
316
     }
335
     }
317
 
336
 
318
     hide () {
337
     hide () {
319
-        let $wrapper = this.$wrapper;
320
-        let id = this.id;
321
-        return new Promise(function(resolve) {
322
-            // There is no id on initial render
323
-            // so first time we hide wrapper immediately
324
-            // instead of slowly fading it out.
325
-            // This improves startup time.
326
-            $wrapper.fadeTo(id ? FADE_DURATION_MS : 1, 0, function () {
327
-                $wrapper.css('visibility', 'hidden');
328
-                $('.watermark').css('visibility', 'hidden');
338
+        // its already hidden
339
+        if (!this.isVisible) {
340
+            return Promise.resolve();
341
+        }
342
+
343
+        return new Promise((resolve) => {
344
+            this.$wrapper.fadeTo(FADE_DURATION_MS, 0, () => {
345
+                this.$wrapper.css('visibility', 'hidden');
346
+                this.showWatermark(false);
347
+                this.isVisible = false;
329
                 resolve();
348
                 resolve();
330
             });
349
             });
331
         });
350
         });
426
             // show the avatar on large if needed
445
             // show the avatar on large if needed
427
             this.videoContainer.showAvatar(isVideoMuted);
446
             this.videoContainer.showAvatar(isVideoMuted);
428
 
447
 
448
+            let promise;
449
+
429
             // do not show stream if video is muted
450
             // do not show stream if video is muted
430
-            let promise
431
-                = isVideoMuted ? Promise.resolve() : this.videoContainer.show();
451
+            // but we still should show watermark
452
+            if (isVideoMuted) {
453
+                this.videoContainer.showWatermark(true);
454
+                promise = Promise.resolve();
455
+            } else {
456
+                promise = this.videoContainer.show();
457
+            }
432
 
458
 
433
             // resolve updateLargeVideo promise after everything is done
459
             // resolve updateLargeVideo promise after everything is done
434
             promise.then(resolve);
460
             promise.then(resolve);

Loading…
Cancelar
Guardar