From 0aee5e5b48962a62727289fe04d0194b57489dfd Mon Sep 17 00:00:00 2001
From: Ilya Daynatovich <shupuercha@gmail.com>
Date: Wed, 10 May 2017 13:07:00 +0300
Subject: [PATCH] Add blurring effect

---
 css/_videolayout_default.scss                 | 18 ++++++
 modules/UI/videolayout/VideoContainer.js      | 62 +++++++++++++++++--
 .../conference/components/Conference.web.js   |  1 -
 .../large-video/components/LargeVideo.web.js  |  7 +++
 4 files changed, 81 insertions(+), 7 deletions(-)

diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss
index 26012f17a..55b90dd57 100644
--- a/css/_videolayout_default.scss
+++ b/css/_videolayout_default.scss
@@ -12,6 +12,20 @@
     overflow: hidden;
 }
 
+.video_blurred {
+    width: 100%;
+
+    &_container {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        top: 0;
+        left: 0;
+        overflow: hidden;
+        filter: blur(40px);
+    }
+}
+
 .videocontainer {
     position: relative;
     text-align: center;
@@ -153,6 +167,10 @@
     text-align: center;
 }
 
+#largeVideoWrapper {
+    box-shadow: 0 0 20px -2px #444;
+}
+
 #largeVideo,
 #largeVideoWrapper
 {
diff --git a/modules/UI/videolayout/VideoContainer.js b/modules/UI/videolayout/VideoContainer.js
index 29e4d318b..0c3fc5a42 100644
--- a/modules/UI/videolayout/VideoContainer.js
+++ b/modules/UI/videolayout/VideoContainer.js
@@ -102,11 +102,11 @@ function computeCameraVideoSize(videoWidth,
         if (aspectRatio <= 1) {
             const zoomRateHeight = videoSpaceHeight / videoHeight;
             const zoomRateWidth = videoSpaceWidth / videoWidth;
-            const maxZoomRate
-                = interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity;
-            let zoomRate = Math.min(zoomRateWidth, maxZoomRate);
+            const zoomRate = Math.min(
+                zoomRateWidth,
+                zoomRateHeight,
+                interfaceConfig.MAXIMUM_ZOOMING_COEFFICIENT || Infinity);
 
-            zoomRate = Math.max(zoomRate, zoomRateHeight);
             availableWidth = videoWidth * zoomRate;
             availableHeight = videoHeight * zoomRate;
         } else if (availableHeight * aspectRatio < videoSpaceWidth) {
@@ -166,6 +166,10 @@ export class VideoContainer extends LargeContainer {
         return $('#largeVideo');
     }
 
+    get $videoBackground() {
+        return $('#largeVideoBackground');
+    }
+
     get id () {
         return getStreamOwnerId(this.stream);
     }
@@ -255,6 +259,7 @@ export class VideoContainer extends LargeContainer {
      */
     enableLocalConnectionProblemFilter (enable) {
         this.$video.toggleClass("videoProblemFilter", enable);
+        this.$videoBackground.toggleClass("videoProblemFilter", enable);
     }
 
     /**
@@ -345,8 +350,15 @@ export class VideoContainer extends LargeContainer {
             return;
         }
 
-        let [width, height]
+        this._hideVideoBackground();
+
+        let [ width, height ]
             = this.getVideoSize(containerWidth, containerHeight);
+
+        if (containerWidth > width) {
+            this._showVideoBackground();
+        }
+
         let { horizontalIndent, verticalIndent }
             = this.getVideoPosition(width, height,
             containerWidth, containerHeight);
@@ -408,6 +420,7 @@ export class VideoContainer extends LargeContainer {
         // detach old stream
         if (this.stream) {
             this.stream.detach(this.$video[0]);
+            this.stream.detach(this.$videoBackground[0]);
         }
 
         this.stream = stream;
@@ -418,10 +431,18 @@ export class VideoContainer extends LargeContainer {
         }
 
         stream.attach(this.$video[0]);
-        let flipX = stream.isLocal() && this.localFlipX;
+        stream.attach(this.$videoBackground[0]);
+
+        this._hideVideoBackground();
+
+        const flipX = stream.isLocal() && this.localFlipX;
+
         this.$video.css({
             transform: flipX ? 'scaleX(-1)' : 'none'
         });
+        this.$videoBackground.css({
+            transform: flipX ? 'scaleX(-1)' : 'none'
+        });
 
         // Reset the large video background depending on the stream.
         this.setLargeVideoBackground(this.avatarDisplayed);
@@ -438,8 +459,13 @@ export class VideoContainer extends LargeContainer {
         this.$video.css({
             transform: this.localFlipX ? 'scaleX(-1)' : 'none'
         });
+
+        this.$videoBackground.css({
+            transform: this.localFlipX ? 'scaleX(-1)' : 'none'
+        });
     }
 
+
     /**
      * Check if current video stream is screen sharing.
      * @returns {boolean}
@@ -476,6 +502,8 @@ export class VideoContainer extends LargeContainer {
      */
     showRemoteConnectionProblemIndicator (show) {
         this.$video.toggleClass("remoteVideoProblemFilter", show);
+        this.$videoBackground.toggleClass("remoteVideoProblemFilter", show);
+
         this.$avatar.toggleClass("remoteVideoProblemFilter", show);
     }
 
@@ -544,6 +572,17 @@ export class VideoContainer extends LargeContainer {
                 ? "#000" : interfaceConfig.DEFAULT_BACKGROUND);
     }
 
+    /**
+     * Sets the blur background to be invisible and pauses any playing video.
+     *
+     * @private
+     * @returns {void}
+     */
+    _hideVideoBackground() {
+        this.$videoBackground.css({ visibility: 'hidden' });
+        this.$videoBackground[0].pause();
+    }
+
     /**
      * Callback invoked when the video element changes dimensions.
      *
@@ -553,4 +592,15 @@ export class VideoContainer extends LargeContainer {
     _onResize() {
         this._resizeListeners.forEach(callback => callback());
     }
+
+    /**
+     * Sets the blur background to be visible and starts any loaded video.
+     *
+     * @private
+     * @returns {void}
+     */
+    _showVideoBackground() {
+        this.$videoBackground.css({ visibility: 'visible' });
+        this.$videoBackground[0].play();
+    }
 }
diff --git a/react/features/conference/components/Conference.web.js b/react/features/conference/components/Conference.web.js
index 72af2ad10..c4e9825be 100644
--- a/react/features/conference/components/Conference.web.js
+++ b/react/features/conference/components/Conference.web.js
@@ -69,7 +69,6 @@ class Conference extends Component {
             <div id = 'videoconference_page'>
                 <div id = 'videospace'>
                     <LargeVideo />
-
                     <Filmstrip />
                 </div>
 
diff --git a/react/features/large-video/components/LargeVideo.web.js b/react/features/large-video/components/LargeVideo.web.js
index 6859133b8..05d017992 100644
--- a/react/features/large-video/components/LargeVideo.web.js
+++ b/react/features/large-video/components/LargeVideo.web.js
@@ -37,6 +37,13 @@ export default class LargeVideo extends Component {
                         src = '' />
                 </div>
                 <span id = 'remoteConnectionMessage' />
+                <div className = 'video_blurred_container'>
+                    <video
+                        autoPlay = { true }
+                        className = 'video_blurred'
+                        id = 'largeVideoBackground'
+                        muted = 'true' />
+                </div>
                 <div id = 'largeVideoWrapper'>
                     <video
                         autoPlay = { true }