Merge pull request #586 from jitsi/shared-video-auto-mute-popup

Shared video auto mute popup

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

css/videolayout_default.css

@@ -357,6 +357,7 @@
     right:0;
     z-index:10;
     pointer-events: none;
+    min-height: 100px;
 }
 
 #subject {

index.html

@@ -111,7 +111,7 @@
                         <a class="button icon-avatar" id="toolbar_button_authentication" data-i18n="[content]toolbar.authenticate"></a>
                         <ul class="loginmenu">
                             <span class="loginmenuPadding"></span>
-                            <li id="toolbar_auth_identity" class="identity"></li>
+                            <li id="toolbar_auth_identity"></li>
                             <li id="toolbar_button_login">
                                 <a class="authButton" data-i18n="toolbar.login"></a>
                             </li>
@@ -120,7 +120,11 @@
                             </li>
                         </ul>
                     </span>
-                    <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute"></a>
+                    <a class="button icon-microphone" id="toolbar_button_mute" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="mutePopover" data-i18n="[content]toolbar.mute" content="Mute / Unmute">
+                        <ul id="micMutedPopup" class="loginmenu">
+                            <li data-i18n="[html]toolbar.micMutedPopup"></li>
+                        </ul>
+                    </a>
                     <a class="button icon-camera" id="toolbar_button_camera" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleVideoPopover" data-i18n="[content]toolbar.videomute" content="Start / stop camera"></a>
                     <a class="button" id="toolbar_button_record" data-container="body" data-toggle="popover" data-placement="bottom" style="display: none"></a>
                     <a class="button icon-security" id="toolbar_button_security" data-container="body" data-toggle="popover" data-placement="bottom" data-i18n="[content]toolbar.lock" content="Lock / unlock room"></a>
@@ -129,7 +133,11 @@
                         <span id="unreadMessages"></span>
                     </a>
                     <a class="button icon-share-doc" id="toolbar_button_etherpad" data-container="body" data-toggle="popover" data-placement="bottom" content="Shared document" data-i18n="[content]toolbar.etherpad"></a>
-                    <a class="button fa fa-share-alt-square" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="bottom" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none"></a>
+                    <a class="button fa fa-share-alt-square" id="toolbar_button_sharedvideo" data-container="body" data-toggle="popover" data-placement="bottom" content="Share a YouTube video" data-i18n="[content]toolbar.sharedvideo" style="display: none">
+                        <ul id="sharedVideoMutedPopup" class="loginmenu">
+                            <li data-i18n="[html]toolbar.sharedVideoMutedPopup"></li>
+                        </ul>
+                    </a>
                     <a class="button icon-share-desktop" id="toolbar_button_desktopsharing" data-container="body" data-toggle="popover" data-placement="bottom" shortcut="toggleDesktopSharingPopover" content="Share screen" data-i18n="[content]toolbar.sharescreen" style="display: none"></a>
                     <a class="button icon-full-screen" id="toolbar_button_fullScreen" data-container="body" data-toggle="popover" data-placement="bottom" content="Enter / Exit Full Screen" data-i18n="[content]toolbar.fullscreen"></a>
                     <a class="button icon-telephone" id="toolbar_button_sip" data-container="body" data-toggle="popover" data-placement="bottom" content="Call SIP number" data-i18n="[content]toolbar.sip" style="display: none"></a>

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<br/>that you can talk to the other participants.",
+        "micMutedPopup": "Your microphone has been muted so that you<br/>would fully enjoy your shared video."
     },
     "bottomtoolbar": {
         "chat": "Open / close chat",

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