apitech
/
jitsi-meet
mirror of https://github.com/jitsi/jitsi-meet
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

Adds mute indication when someone is muted.

Browse Source
pull/56/head
yanas 11 years ago
parent cb5df3be84
commit f8070b621a
4 changed files with 195 additions and 24 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 116
      app.js
  2. 44
      css/videolayout_default.css
  3. 11
      index.html
  4. 48
      muc.js

116
app.js
Unescape View File

@ -223,7 +223,7 @@ $(document).bind('remotestreamadded.jingle', function (event, data, sid) {
var sess = connection.jingle.sessions[sid];
if (data.stream.id === 'mixedmslabel') return;
var videoTracks = data.stream.getVideoTracks();
console.log("waiting..", videoTracks, selector[0]);
// console.log("waiting..", videoTracks, selector[0]);
if (videoTracks.length === 0 || selector[0].currentTime > 0) {
RTC.attachMediaStream(selector, data.stream); // FIXME: why do i have to do this for FF?
@ -673,6 +673,32 @@ $(document).bind('passwordrequired.muc', function (event, jid) {
});
});
$(document).bind('audiomuted.muc', function (event, jid, isMuted) {
var videoSpanId = null;
if (jid === connection.emuc.myroomjid) {
videoSpanId = 'localVideoContainer';
} else {
ensurePeerContainerExists(jid);
videoSpanId = 'participant_' + Strophe.getResourceFromJid(jid);
}
if (videoSpanId)
showAudioIndicator(videoSpanId, isMuted);
});
$(document).bind('videomuted.muc', function (event, jid, isMuted) {
var videoSpanId = null;
if (jid === connection.emuc.myroomjid) {
videoSpanId = 'localVideoContainer';
} else {
ensurePeerContainerExists(jid);
videoSpanId = 'participant_' + Strophe.getResourceFromJid(jid);
}
if (videoSpanId)
showAudioIndicator(videoSpanId, isMuted);
});
/**
* Updates the large video with the given new video source.
*/
@ -744,11 +770,11 @@ function isVideoSrcDesktop(videoSrc){
function setLargeVideoVisible(isVisible) {
if (isVisible) {
$('#largeVideo').css({visibility:'visible'});
$('#watermark').css({visibility:'visible'});
$('.watermark').css({visibility:'visible'});
}
else {
$('#largeVideo').css({visibility:'hidden'});
$('#watermark').css({visibility:'hidden'});
$('.watermark').css({visibility:'hidden'});
}
}
@ -757,35 +783,49 @@ function getConferenceHandler() {
}
function toggleVideo() {
if (!(connection && connection.jingle.localVideo)) return;
if (!(connection && connection.jingle.localVideo))
return;
var sess = getConferenceHandler();
if (sess) {
sess.toggleVideoMute(
function(isMuted){
if(isMuted) {
$('#video').removeClass("fa fa-video-camera fa-lg");
$('#video').addClass("fa fa-video-camera no-fa-video-camera fa-lg");
$('#video').removeClass("icon-camera");
$('#video').addClass("icon-camera icon-camera-disabled");
} else {
$('#video').removeClass("fa fa-video-camera no-fa-video-camera fa-lg");
$('#video').addClass("fa fa-video-camera fa-lg");
$('#video').removeClass("icon-camera icon-camera-disabled");
$('#video').addClass("icon-camera");
}
}
);
}
var sess = focus || activecall;
if (!sess) {
return;
}
sess.pendingop = ismuted ? 'unmute' : 'mute';
// connection.emuc.addVideoInfoToPresence(!ismuted);
// connection.emuc.sendPresence();
sess.modifySources();
}
/**
* Mutes / unmutes audio for the local participant.
*/
function toggleAudio() {
if (!(connection && connection.jingle.localAudio)) return;
if (!(connection && connection.jingle.localAudio))
return;
var localAudio = connection.jingle.localAudio;
for (var idx = 0; idx < localAudio.getAudioTracks().length; idx++) {
localAudio.getAudioTracks()[idx].enabled = !localAudio.getAudioTracks()[idx].enabled;
var audioEnabled = localAudio.getAudioTracks()[idx].enabled;
localAudio.getAudioTracks()[idx].enabled = !audioEnabled;
connection.emuc.addAudioInfoToPresence(audioEnabled); //isMuted is the opposite of audioEnabled
connection.emuc.sendPresence();
}
}
@ -1561,6 +1601,62 @@ function createEditDisplayNameButton() {
return editButton;
}
/**
* Shows audio muted indicator over small videos.
*/
function showAudioIndicator(videoSpanId, isMuted) {
var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted');
if (isMuted === 'false') {
if (audioMutedSpan.length > 0) {
audioMutedSpan.remove();
}
}
else {
var videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted');
audioMutedSpan = document.createElement('span');
audioMutedSpan.className = 'audioMuted';
if (videoMutedSpan) {
audioMutedSpan.right = '30px';
}
$('#' + videoSpanId)[0].appendChild(audioMutedSpan);
var mutedIndicator = document.createElement('i');
mutedIndicator.className = 'icon-mic-disabled';
mutedIndicator.title = "Participant is muted";
audioMutedSpan.appendChild(mutedIndicator);
}
}
/**
* Shows video muted indicator over small videos.
*/
function showVideoIndicator(videoSpanId, isMuted) {
var videoMutedSpan = $('#' + videoSpanId + '>span.videoMuted');
if (isMuted === 'false') {
if (videoMutedSpan.length > 0) {
videoMutedSpan.remove();
}
}
else {
var audioMutedSpan = $('#' + videoSpanId + '>span.audioMuted');
videoMutedSpan = document.createElement('span');
videoMutedSpan.className = 'videoMuted';
if (audioMutedSpan) {
videoMutedSpan.right = '30px';
}
$('#' + videoSpanId)[0].appendChild(videoMutedSpan);
var mutedIndicator = document.createElement('i');
mutedIndicator.className = 'icon-camera-disabled';
mutedIndicator.title = "Participant has stopped the camera.";
videoMutedSpan.appendChild(mutedIndicator);
}
}
/**
* Resizes and repositions videos in full screen mode.
*/

44
css/videolayout_default.css
Unescape View File

@ -178,6 +178,34 @@
z-index: 2;
}
.videocontainer>span.audioMuted {
display: inline-block;
position: absolute;
color: #FFFFFF;
top: 0;
right: 0;
padding: 8px 5px;
width: 25px;
font-size: 8pt;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
border: 0px;
z-index: 3;
}
.videocontainer>span.videoMuted {
display: inline-block;
position: absolute;
color: #FFFFFF;
top: 0;
right: 0;
padding: 8px 5px;
width: 25px;
font-size: 8pt;
text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7);
border: 0px;
z-index: 3;
}
#reloadPresentation {
display: none;
position: absolute;
@ -220,15 +248,25 @@
border-bottom-right-radius: 12px;
}
#watermark {
.watermark {
display: block;
position: absolute;
left: 15;
top: 15;
width: 20%;
height: 10%;
background-image:url(../images/watermark.png);
background-size: contain;
background-repeat: no-repeat;
z-index: 2;
}
#leftwatermark {
left: 15;
background-image:url(../images/watermark.png);
background-position: center left;
}
#rightwatermark {
right: 15;
background-image:url(../images/rightwatermark.png);
background-position: center right;
}

11
index.html
Unescape View File

@ -20,10 +20,10 @@
<script src="libs/colibri/colibri.session.js?v=1"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="config.js"></script><!-- adapt to your needs, i.e. set hosts and bosh path -->
<script src="muc.js?v=9"></script><!-- simple MUC library -->
<script src="muc.js?v=10"></script><!-- simple MUC library -->
<script src="estos_log.js?v=2"></script><!-- simple stanza logger -->
<script src="desktopsharing.js?v=1"></script><!-- desktop sharing -->
<script src="app.js?v=25"></script><!-- application logic -->
<script src="app.js?v=26"></script><!-- application logic -->
<script src="chat.js?v=4"></script><!-- chat logic -->
<script src="util.js?v=3"></script><!-- utility functions -->
<script src="etherpad.js?v=7"></script><!-- etherpad plugin -->
@ -33,7 +33,7 @@
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/font.css"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=20"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=3" id="videolayout_default"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=4" id="videolayout_default"/>
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
<link rel="stylesheet" href="css/modaldialog.css?v=3">
<!--
@ -46,8 +46,6 @@
</head>
<body>
<div id="header">
<a href="http://jitsi.org" target="_blank"><div id="leftlogo"></div></a>
<a href="http://www.estos.com/" target="_blank"><div id="rightlogo"></div></a>
<span id="toolbar">
<a class="button" onclick='buttonClick("#mute", "icon-microphone icon-mic-disabled");toggleAudio();'>
<i id="mute" title="Mute / unmute" class="icon-microphone"></i></a>
@ -91,7 +89,8 @@
<div id="largeVideoContainer" class="videocontainer">
<div id="presentation"></div>
<div id="etherpad"></div>
<a href="http://jitsi.org" target="_new"><div id="watermark"></div></a>
<a href="http://jitsi.org" target="_new"><div class="watermark" id="leftwatermark"></div></a>
<!-- a href="http://jitsi.org" target="_new"><div class="watermark" id="rightwatermark"></div></a -->
<video id="largeVideo" autoplay oncontextmenu="return false;"></video>
</div>
<div id="remoteVideos">

48
muc.js
Unescape View File

@ -72,6 +72,19 @@ Strophe.addConnectionPlugin('emuc', {
$(document).trigger('presentationremoved.muc', [from, url]);
}
// Parse audio info tag.
var audioMuted = $(pres).find('>audiomuted');
if (audioMuted.length) {
$(document).trigger('audiomuted.muc', [from, audioMuted.text()]);
}
// Parse video info tag.
var videoMuted = $(pres).find('>videomuted');
if (videoMuted.length) {
$(document).trigger('videomuted.muc', [from, videoMuted.text()]);
}
// Parse status.
if ($(pres).find('>x[xmlns="http://jabber.org/protocol/muc#user"]>status[code="201"]').length) {
// http://xmpp.org/extensions/xep-0045.html#createroom-instant
this.isOwner = true;
@ -81,6 +94,7 @@ Strophe.addConnectionPlugin('emuc', {
this.connection.send(create); // fire away
}
// Parse roles.
var member = {};
member.show = $(pres).find('>show').text();
member.status = $(pres).find('>status').text();
@ -186,16 +200,31 @@ Strophe.addConnectionPlugin('emuc', {
if (this.presMap['displayName']) {
// XEP-0172
pres.c('nick', {xmlns: 'http://jabber.org/protocol/nick'}).t(this.presMap['displayName']).up();
pres.c('nick', {xmlns: 'http://jabber.org/protocol/nick'})
.t(this.presMap['displayName']).up();
}
if (this.presMap['audions']) {
pres.c('audiomuted', {xmlns: this.presMap['audions']})
.t(this.presMap['audiomuted']).up();
}
if (this.presMap['videons']) {
console.log("SEND VIDEO MUTED", this.presMap['videomuted']);
pres.c('videomuted', {xmlns: this.presMap['videons']})
.t(this.presMap['videomuted']).up();
}
if (this.presMap['prezins']) {
pres.c('prezi', {xmlns: this.presMap['prezins'], 'url': this.presMap['preziurl']}).
c('current').t(this.presMap['prezicurrent']).up().up();
pres.c('prezi',
{xmlns: this.presMap['prezins'],
'url': this.presMap['preziurl']})
.c('current').t(this.presMap['prezicurrent']).up().up();
}
if (this.presMap['etherpadns']) {
pres.c('etherpad', {xmlns: this.presMap['etherpadns']}).t(this.presMap['etherpadname']).up();
pres.c('etherpad', {xmlns: this.presMap['etherpadns']})
.t(this.presMap['etherpadname']).up();
}
if (this.presMap['medians'])
@ -212,7 +241,8 @@ Strophe.addConnectionPlugin('emuc', {
pres.c('source',
{type: this.presMap['source' + i + '_type'],
ssrc: this.presMap['source' + i + '_ssrc'],
direction: this.presMap['source'+ i + '_direction'] || 'sendrecv' }
direction: this.presMap['source'+ i + '_direction']
|| 'sendrecv' }
).up();
}
}
@ -257,5 +287,13 @@ Strophe.addConnectionPlugin('emuc', {
addEtherpadToPresence: function(etherpadName) {
this.presMap['etherpadns'] = 'http://jitsi.org/jitmeet/etherpad';
this.presMap['etherpadname'] = etherpadName;
},
addAudioInfoToPresence: function(isMuted) {
this.presMap['audions'] = 'http://jitsi.org/jitmeet/audio';
this.presMap['audiomuted'] = isMuted.toString();
},
addVideoInfoToPresence: function(isMuted) {
this.presMap['videons'] = 'http://jitsi.org/jitmeet/video';
this.presMap['videomuted'] = isMuted.toString();
}
});

Write Preview
Loading…
Cancel
Save