Merge pull request #874 from jitsi/ui-fix-ringoverlay

feat(ringoverlay): Change the background when the avatar is displayed
This commit is contained in:
yanas 2016-09-14 21:40:54 -05:00 committed by GitHub
commit 5092f52716
5 changed files with 55 additions and 13 deletions

View File

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

View File

@ -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;
},

View File

@ -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

View File

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

View File

@ -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"
};