From a1cef0f181e9cb8fd30e400b6e3dfe7c12341625 Mon Sep 17 00:00:00 2001 From: yanas Date: Tue, 5 Apr 2016 14:17:50 -0500 Subject: [PATCH] Add notification popup for shared video auto mute --- css/login_menu.css | 7 +-- index.html | 14 +++-- lang/main.json | 4 +- modules/UI/shared_video/SharedVideo.js | 72 ++++++++++++++++++++------ 4 files changed, 72 insertions(+), 25 deletions(-) diff --git a/css/login_menu.css b/css/login_menu.css index 34342a37f..17969a539 100644 --- a/css/login_menu.css +++ b/css/login_menu.css @@ -1,5 +1,6 @@ /*Initialize*/ ul.loginmenu { + font-family:'Helvetica Neue', Helvetica, sans-serif; display:none; position: absolute; margin: 0; @@ -15,12 +16,10 @@ ul.loginmenu { ul.loginmenu li { list-style-type: none; padding: 7px; -} - -ul.loginmenu li.identity { color: #fff; font-size: 11pt; cursor: default; + white-space: pre; } ul.loginmenu:after { @@ -38,8 +37,6 @@ li a.authButton{ padding-left: 29px; padding-right: 29px; border-radius: 4px; - color: #fff; - font-size: 11pt; cursor: pointer; } diff --git a/index.html b/index.html index 47f73cca2..550b444cf 100644 --- a/index.html +++ b/index.html @@ -111,7 +111,7 @@ - + + + @@ -129,7 +133,11 @@ - + diff --git a/lang/main.json b/lang/main.json index bf769362e..963c6e553 100644 --- a/lang/main.json +++ b/lang/main.json @@ -63,7 +63,9 @@ "hangup": "Hang Up", "login": "Login", "logout": "Logout", - "dialpad": "Show dialpad" + "dialpad": "Show dialpad", + "sharedVideoMutedPopup": "Your shared video has been muted so
that you can talk to the other participants.", + "micMutedPopup": "Your microphone has been muted so that you
would fully enjoy your shared video." }, "bottomtoolbar": { "chat": "Open / close chat", diff --git a/modules/UI/shared_video/SharedVideo.js b/modules/UI/shared_video/SharedVideo.js index a57a41fc3..ea2ca86e3 100644 --- a/modules/UI/shared_video/SharedVideo.js +++ b/modules/UI/shared_video/SharedVideo.js @@ -171,7 +171,7 @@ export default class SharedVideoManager { if(event.data.volume > 0 && !event.data.muted && !APP.conference.isLocalAudioMuted()){ self.emitter.emit(UIEvents.AUDIO_MUTED, true); - self.notifyUserComfortableMicMute(true); + self.showMicMutedPopup(true); } }; @@ -236,7 +236,7 @@ export default class SharedVideoManager { && APP.conference.isLocalAudioMuted()) { player.setVolume(attributes.volume); console.info("Player change of volume:" + attributes.volume); - this.notifyUserComfortableVideoMute(false); + this.showSharedVideoMutedPopup(false); } if(playerPaused) @@ -363,6 +363,8 @@ export default class SharedVideoManager { this.localAudioMutedListener); this.localAudioMutedListener = null; + this.showSharedVideoMutedPopup(false); + VideoLayout.removeParticipantContainer(this.url); VideoLayout.showLargeVideoContainer(SHARED_VIDEO_CONTAINER_TYPE, false) @@ -403,35 +405,73 @@ export default class SharedVideoManager { // to not pollute the conference if(this.player.getVolume() > 0 || !this.player.isMuted()){ this.player.setVolume(0); - this.notifyUserComfortableVideoMute(true); + this.showSharedVideoMutedPopup(true); } } /** - * Notifies user for muting its audio due to video is unmuted. + * Shows a popup under the microphone toolbar icon that notifies the user + * of automatic mute after a shared video has started. * @param show boolean, show or hide the notification */ - notifyUserComfortableMicMute (show) { + showMicMutedPopup (show) { + var micMutedPopupSelector = $("#micMutedPopup"); if(show) { - this.notifyUserComfortableVideoMute(false); - console.log("Your audio was muted to enjoy the video"); + this.showSharedVideoMutedPopup(false); + + if (!micMutedPopupSelector.is(":visible")) + micMutedPopupSelector.css("display", "inline-block"); + + // FIXME: we need an utility method for that. + micMutedPopupSelector.fadeIn(300, + () => {micMutedPopupSelector.css({opacity: 1});} + ); + + setTimeout( + function () { + micMutedPopupSelector.fadeOut(300, + () => {micMutedPopupSelector.css({opacity: 0});} + ); + }, 5000); + } + else { + micMutedPopupSelector.fadeOut(300, + () => {micMutedPopupSelector.css({opacity: 0});} + ); } - else - console.log("Hide notification local audio muted"); } /** - * Notifies user for muting the video due to audio is unmuted. + * Shows a popup under the shared video toolbar icon that notifies the user + * of automatic mute of the shared video after the user has unmuted their + * mic. * @param show boolean, show or hide the notification */ - notifyUserComfortableVideoMute (show) { + showSharedVideoMutedPopup (show) { + var sharedVideoMutedPopupSelector = $("#sharedVideoMutedPopup"); if(show) { - this.notifyUserComfortableMicMute(false); - console.log( - "Your shared video was muted in order to speak freely!"); + this.showMicMutedPopup(false); + + if (!sharedVideoMutedPopupSelector.is(":visible")) + sharedVideoMutedPopupSelector.css("display", "inline-block"); + + // FIXME: we need an utility method for that. + sharedVideoMutedPopupSelector.fadeIn(300, + () => {sharedVideoMutedPopupSelector.css({opacity: 1});} + ); + + setTimeout( + function () { + sharedVideoMutedPopupSelector.fadeOut(300, + () => {sharedVideoMutedPopupSelector.css({opacity: 0});} + ); + }, 5000); + } + else { + sharedVideoMutedPopupSelector.fadeOut(300, + () => {sharedVideoMutedPopupSelector.css({opacity: 0});} + ); } - else - console.log("Hide notification share video muted"); } }