feat(ringoverlay): Change the background when the avatar is displayed

css/ringing/_ringing.scss

@@ -9,6 +9,11 @@
     background: linear-gradient(transparent, #000);
     opacity: 0.8;
 
+    &.solidBG {
+        background: $defaultBackground;
+        opacity: 1;
+    }
+
     &__content {
         position: absolute;
         width: 400px;

modules/UI/ring_overlay/RingOverlay.js

@@ -1,5 +1,21 @@
-/* global $ */
+/* global $, APP */
 /* jshint -W101 */
+import UIEvents from "../../../service/UI/UIEvents";
+
+/**
+ * Store the current ring overlay instance.
+ * Note: We want to have only 1 instance at a time.
+ */
+let overlay = null;
+
+/**
+ * Handler for UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED event.
+ * @param {boolean} shown indicates whether the avatar on the large video is
+ *  currently displayed or not.
+ */
+function onAvatarDisplayed(shown) {
+    overlay._changeBackground(shown);
+}
 
 /**
  * Shows ring overlay
@@ -19,6 +35,21 @@ class RingOverlay {
         this._setAudioTimeout();
     }
 
+    /**
+     * Chagnes the background of the ring overlay.
+     * @param {boolean} solid - if true the new background will be the solid
+     * one, otherwise the background will be default one.
+     * NOTE: The method just toggles solidBG css class.
+     */
+    _changeBackground(solid) {
+        const container = $("#" + this._containerId);
+        if(solid) {
+            container.addClass("solidBG");
+        } else {
+            container.removeClass("solidBG");
+        }
+    }
+
     /**
      * Builds and appends the ring overlay to the html document
      */
@@ -74,12 +105,6 @@ class RingOverlay {
     }
 }
 
-/**
- * Store the current ring overlay instance.
- * Note: We want to have only 1 instance at a time.
- */
-let overlay = null;
-
 export default {
     /**
      * Shows the ring overlay for the passed callee.
@@ -92,6 +117,8 @@ export default {
         }
 
         overlay = new RingOverlay(callee);
+        APP.UI.addListener(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED,
+            onAvatarDisplayed);
     },
 
     /**
@@ -104,6 +131,8 @@ export default {
         }
         overlay.destroy();
         overlay = null;
+        APP.UI.removeListener(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED,
+            onAvatarDisplayed);
         return true;
     },
 

modules/UI/videolayout/LargeVideo.js

@@ -164,11 +164,12 @@ class VideoContainer extends LargeContainer {
         return getStreamOwnerId(this.stream);
     }
 
-    constructor (onPlay) {
+    constructor (onPlay, emitter) {
         super();
         this.stream = null;
         this.videoType = null;
         this.localFlipX = true;
+        this.emitter = emitter;
 
         this.isVisible = false;
 
@@ -327,6 +328,8 @@ class VideoContainer extends LargeContainer {
             (show) ? interfaceConfig.DEFAULT_BACKGROUND : "#000");
 
         this.$avatar.css("visibility", show ? "visible" : "hidden");
+
+        this.emitter.emit(UIEvents.LARGE_VIDEO_AVATAR_DISPLAYED, show);
     }
 
     // We are doing fadeOut/fadeIn animations on parent div which wraps
@@ -385,12 +388,12 @@ class VideoContainer extends LargeContainer {
  * Manager for all Large containers.
  */
 export default class LargeVideoManager {
-    constructor () {
+    constructor (emitter) {
         this.containers = {};
 
         this.state = VIDEO_CONTAINER_TYPE;
         this.videoContainer = new VideoContainer(
-            () => this.resizeContainer(VIDEO_CONTAINER_TYPE));
+            () => this.resizeContainer(VIDEO_CONTAINER_TYPE), emitter);
         this.addContainer(VIDEO_CONTAINER_TYPE, this.videoContainer);
 
         // use the same video container to handle and desktop tracks

modules/UI/videolayout/VideoLayout.js

@@ -113,7 +113,7 @@ var VideoLayout = {
     },
 
     initLargeVideo () {
-        largeVideo = new LargeVideoManager();
+        largeVideo = new LargeVideoManager(eventEmitter);
         if(localFlipX) {
             largeVideo.onLocalFlipXChange(localFlipX);
         }

service/UI/UIEvents.js

@@ -105,5 +105,10 @@ export default {
      * event must contain the identifier of the container that has been toggled
      * and information about toggle on or off.
      */
-    SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled"
+    SIDE_TOOLBAR_CONTAINER_TOGGLED: "UI.side_container_toggled",
+
+    /**
+     * Notifies that the avatar is displayed or not on the largeVideo.
+     */
+    LARGE_VIDEO_AVATAR_DISPLAYED: "UI.large_video_avatar_displayed"
 };