Browse Source

Add blurring effect

master
Ilya Daynatovich 8 years ago
parent
commit
0aee5e5b48

+ 18
- 0
css/_videolayout_default.scss View File

12
     overflow: hidden;
12
     overflow: hidden;
13
 }
13
 }
14
 
14
 
15
+.video_blurred {
16
+    width: 100%;
17
+
18
+    &_container {
19
+        width: 100%;
20
+        height: 100%;
21
+        position: absolute;
22
+        top: 0;
23
+        left: 0;
24
+        overflow: hidden;
25
+        filter: blur(40px);
26
+    }
27
+}
28
+
15
 .videocontainer {
29
 .videocontainer {
16
     position: relative;
30
     position: relative;
17
     text-align: center;
31
     text-align: center;
153
     text-align: center;
167
     text-align: center;
154
 }
168
 }
155
 
169
 
170
+#largeVideoWrapper {
171
+    box-shadow: 0 0 20px -2px #444;
172
+}
173
+
156
 #largeVideo,
174
 #largeVideo,
157
 #largeVideoWrapper
175
 #largeVideoWrapper
158
 {
176
 {

+ 56
- 6
modules/UI/videolayout/VideoContainer.js View File

102
         if (aspectRatio <= 1) {
102
         if (aspectRatio <= 1) {
103
             const zoomRateHeight = videoSpaceHeight / videoHeight;
103
             const zoomRateHeight = videoSpaceHeight / videoHeight;
104
             const zoomRateWidth = videoSpaceWidth / videoWidth;
104
             const zoomRateWidth = videoSpaceWidth / videoWidth;
105
-            const maxZoomRate
106
-                = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity;
107
-            let zoomRate = Math.min(zoomRateWidth, maxZoomRate);
105
+            const zoomRate = Math.min(
106
+                zoomRateWidth,
107
+                zoomRateHeight,
108
+                interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
108
 
109
 
109
-            zoomRate = Math.max(zoomRate, zoomRateHeight);
110
             availableWidth = videoWidth * zoomRate;
110
             availableWidth = videoWidth * zoomRate;
111
             availableHeight = videoHeight * zoomRate;
111
             availableHeight = videoHeight * zoomRate;
112
         } else if (availableHeight * aspectRatio < videoSpaceWidth) {
112
         } else if (availableHeight * aspectRatio < videoSpaceWidth) {
166
         return $('#largeVideo');
166
         return $('#largeVideo');
167
     }
167
     }
168
 
168
 
169
+    get $videoBackground() {
170
+        return $('#largeVideoBackground');
171
+    }
172
+
169
     get id () {
173
     get id () {
170
         return getStreamOwnerId(this.stream);
174
         return getStreamOwnerId(this.stream);
171
     }
175
     }
255
      */
259
      */
256
     enableLocalConnectionProblemFilter (enable) {
260
     enableLocalConnectionProblemFilter (enable) {
257
         this.$video.toggleClass("videoProblemFilter", enable);
261
         this.$video.toggleClass("videoProblemFilter", enable);
262
+        this.$videoBackground.toggleClass("videoProblemFilter", enable);
258
     }
263
     }
259
 
264
 
260
     /**
265
     /**
345
             return;
350
             return;
346
         }
351
         }
347
 
352
 
348
-        let [width, height]
353
+        this._hideVideoBackground();
354
+
355
+        let [ width, height ]
349
             = this.getVideoSize(containerWidth, containerHeight);
356
             = this.getVideoSize(containerWidth, containerHeight);
357
+
358
+        if (containerWidth > width) {
359
+            this._showVideoBackground();
360
+        }
361
+
350
         let { horizontalIndent, verticalIndent }
362
         let { horizontalIndent, verticalIndent }
351
             = this.getVideoPosition(width, height,
363
             = this.getVideoPosition(width, height,
352
             containerWidth, containerHeight);
364
             containerWidth, containerHeight);
408
         // detach old stream
420
         // detach old stream
409
         if (this.stream) {
421
         if (this.stream) {
410
             this.stream.detach(this.$video[0]);
422
             this.stream.detach(this.$video[0]);
423
+            this.stream.detach(this.$videoBackground[0]);
411
         }
424
         }
412
 
425
 
413
         this.stream = stream;
426
         this.stream = stream;
418
         }
431
         }
419
 
432
 
420
         stream.attach(this.$video[0]);
433
         stream.attach(this.$video[0]);
421
-        let flipX = stream.isLocal() && this.localFlipX;
434
+        stream.attach(this.$videoBackground[0]);
435
+
436
+        this._hideVideoBackground();
437
+
438
+        const flipX = stream.isLocal() && this.localFlipX;
439
+
422
         this.$video.css({
440
         this.$video.css({
423
             transform: flipX ? 'scaleX(-1)' : 'none'
441
             transform: flipX ? 'scaleX(-1)' : 'none'
424
         });
442
         });
443
+        this.$videoBackground.css({
444
+            transform: flipX ? 'scaleX(-1)' : 'none'
445
+        });
425
 
446
 
426
         // Reset the large video background depending on the stream.
447
         // Reset the large video background depending on the stream.
427
         this.setLargeVideoBackground(this.avatarDisplayed);
448
         this.setLargeVideoBackground(this.avatarDisplayed);
438
         this.$video.css({
459
         this.$video.css({
439
             transform: this.localFlipX ? 'scaleX(-1)' : 'none'
460
             transform: this.localFlipX ? 'scaleX(-1)' : 'none'
440
         });
461
         });
462
+
463
+        this.$videoBackground.css({
464
+            transform: this.localFlipX ? 'scaleX(-1)' : 'none'
465
+        });
441
     }
466
     }
442
 
467
 
468
+
443
     /**
469
     /**
444
      * Check if current video stream is screen sharing.
470
      * Check if current video stream is screen sharing.
445
      * @returns {boolean}
471
      * @returns {boolean}
476
      */
502
      */
477
     showRemoteConnectionProblemIndicator (show) {
503
     showRemoteConnectionProblemIndicator (show) {
478
         this.$video.toggleClass("remoteVideoProblemFilter", show);
504
         this.$video.toggleClass("remoteVideoProblemFilter", show);
505
+        this.$videoBackground.toggleClass("remoteVideoProblemFilter", show);
506
+
479
         this.$avatar.toggleClass("remoteVideoProblemFilter", show);
507
         this.$avatar.toggleClass("remoteVideoProblemFilter", show);
480
     }
508
     }
481
 
509
 
544
                 ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
572
                 ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
545
     }
573
     }
546
 
574
 
575
+    /**
576
+     * Sets the blur background to be invisible and pauses any playing video.
577
+     *
578
+     * @private
579
+     * @returns {void}
580
+     */
581
+    _hideVideoBackground() {
582
+        this.$videoBackground.css({ visibility: 'hidden' });
583
+        this.$videoBackground[0].pause();
584
+    }
585
+
547
     /**
586
     /**
548
      * Callback invoked when the video element changes dimensions.
587
      * Callback invoked when the video element changes dimensions.
549
      *
588
      *
553
     _onResize() {
592
     _onResize() {
554
         this._resizeListeners.forEach(callback => callback());
593
         this._resizeListeners.forEach(callback => callback());
555
     }
594
     }
595
+
596
+    /**
597
+     * Sets the blur background to be visible and starts any loaded video.
598
+     *
599
+     * @private
600
+     * @returns {void}
601
+     */
602
+    _showVideoBackground() {
603
+        this.$videoBackground.css({ visibility: 'visible' });
604
+        this.$videoBackground[0].play();
605
+    }
556
 }
606
 }

+ 0
- 1
react/features/conference/components/Conference.web.js View File

69
             <div id = 'videoconference_page'>
69
             <div id = 'videoconference_page'>
70
                 <div id = 'videospace'>
70
                 <div id = 'videospace'>
71
                     <LargeVideo />
71
                     <LargeVideo />
72
-
73
                     <Filmstrip />
72
                     <Filmstrip />
74
                 </div>
73
                 </div>
75
 
74
 

+ 7
- 0
react/features/large-video/components/LargeVideo.web.js View File

37
                         src = '' />
37
                         src = '' />
38
                 </div>
38
                 </div>
39
                 <span id = 'remoteConnectionMessage' />
39
                 <span id = 'remoteConnectionMessage' />
40
+                <div className = 'video_blurred_container'>
41
+                    <video
42
+                        autoPlay = { true }
43
+                        className = 'video_blurred'
44
+                        id = 'largeVideoBackground'
45
+                        muted = 'true' />
46
+                </div>
40
                 <div id = 'largeVideoWrapper'>
47
                 <div id = 'largeVideoWrapper'>
41
                     <video
48
                     <video
42
                         autoPlay = { true }
49
                         autoPlay = { true }

Loading…
Cancel
Save