haskal
/
jiti-meet
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add notification popup for shared video auto mute

This commit is contained in:
yanas 2016-04-05 14:17:50 -05:00
parent ba871d269f
commit a1cef0f181
4 changed files with 72 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
css/login_menu.css
View File

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

14
index.html
View File

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

4
lang/main.json
View File

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

72
modules/UI/shared_video/SharedVideo.js
View File

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