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

Fixes active speaker avatar and active speaker audio level missmatch.

This commit is contained in:
fo 2014-12-12 11:32:16 +02:00
parent 4230aa1ff1
commit d1c634abc2
6 changed files with 30 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
avatar.js
View File

@ -77,8 +77,7 @@ var Avatar = (function(my) {
//currently shown //currently shown
if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) { if (activeSpeakerJid === jid && VideoLayout.isLargeVideoOnTop()) {
setVisibility($("#largeVideo"), !show); setVisibility($("#largeVideo"), !show);
setVisibility($('#activeSpeakerAvatar'), show); setVisibility($('#activeSpeaker'), show);
setVisibility($('#activeSpeakerAudioLevel'), show);
setVisibility(avatar, false); setVisibility(avatar, false);
setVisibility(video, false); setVisibility(video, false);
} else { } else {

17
css/videolayout_default.css
View File

@ -377,11 +377,21 @@
pointer-events: none; pointer-events: none;
} }
#activeSpeakerAudioLevel { #activeSpeaker {
visibility: hidden; visibility: hidden;
width: 150px;
height: 150px;
margin: auto;
overflow: hidden;
position: relative;
}
#activeSpeakerAudioLevel {
position: absolute; position: absolute;
top: 113px; top: 0px;
left: 0px;
z-index: 1; z-index: 1;
visibility: inherit;
} }
#mixedstream { #mixedstream {
@ -389,13 +399,14 @@
} }
#activeSpeakerAvatar { #activeSpeakerAvatar {
visibility: hidden;
width: 100px; width: 100px;
height: 100px; height: 100px;
top: 25px;
margin: auto; margin: auto;
position: relative; position: relative;
border-radius: 50px; border-radius: 50px;
z-index: 2; z-index: 2;
visibility: inherit;
} }
.userAvatar { .userAvatar {

1
etherpad.js
View File

@ -42,6 +42,7 @@ var Etherpad = (function (my) {
largeVideo = $('#largeVideo'); largeVideo = $('#largeVideo');
if ($('#etherpad>iframe').css('visibility') === 'hidden') { if ($('#etherpad>iframe').css('visibility') === 'hidden') {
$('#activeSpeaker').css('visibility', 'hidden');
largeVideo.fadeOut(300, function () { largeVideo.fadeOut(300, function () {
if (Prezi.isPresentationVisible()) { if (Prezi.isPresentationVisible()) {
largeVideo.css({opacity: '0'}); largeVideo.css({opacity: '0'});

16
index.html
View File

@ -41,15 +41,15 @@
<script src="contact_list.js?v=7"></script><!-- contact list logic --> <script src="contact_list.js?v=7"></script><!-- contact list logic -->
<script src="side_panel_toggler.js?v=1"></script> <script src="side_panel_toggler.js?v=1"></script>
<script src="util.js?v=7"></script><!-- utility functions --> <script src="util.js?v=7"></script><!-- utility functions -->
<script src="etherpad.js?v=9"></script><!-- etherpad plugin --> <script src="etherpad.js?v=10"></script><!-- etherpad plugin -->
<script src="prezi.js?v=6"></script><!-- prezi plugin --> <script src="prezi.js?v=7"></script><!-- prezi plugin -->
<script src="smileys.js?v=3"></script><!-- smiley images --> <script src="smileys.js?v=3"></script><!-- smiley images -->
<script src="replacement.js?v=7"></script><!-- link and smiley replacement --> <script src="replacement.js?v=7"></script><!-- link and smiley replacement -->
<script src="moderatemuc.js?v=4"></script><!-- moderator plugin --> <script src="moderatemuc.js?v=4"></script><!-- moderator plugin -->
<script src="analytics.js?v=1"></script><!-- google analytics plugin --> <script src="analytics.js?v=1"></script><!-- google analytics plugin -->
<script src="rtp_sts.js?v=5"></script><!-- RTP stats processing --> <script src="rtp_sts.js?v=5"></script><!-- RTP stats processing -->
<script src="local_sts.js?v=2"></script><!-- Local stats processing --> <script src="local_sts.js?v=2"></script><!-- Local stats processing -->
<script src="videolayout.js?v=30"></script><!-- video ui --> <script src="videolayout.js?v=31"></script><!-- video ui -->
<script src="connectionquality.js?v=1"></script> <script src="connectionquality.js?v=1"></script>
<script src="toolbar.js?v=6"></script><!-- toolbar ui --> <script src="toolbar.js?v=6"></script><!-- toolbar ui -->
<script src="toolbar_toggler.js?v=2"></script> <script src="toolbar_toggler.js?v=2"></script>
@ -66,11 +66,11 @@
<script src="message_handler.js?v=2"></script> <script src="message_handler.js?v=2"></script>
<script src="api_connector.js?v=2"></script> <script src="api_connector.js?v=2"></script>
<script src="settings_menu.js?v=1"></script> <script src="settings_menu.js?v=1"></script>
<script src="avatar.js?v=2"></script><!-- avatars --> <script src="avatar.js?v=3"></script><!-- avatars -->
<link rel="stylesheet" href="css/font.css?v=6"/> <link rel="stylesheet" href="css/font.css?v=6"/>
<link rel="stylesheet" href="css/toastr.css?v=1"> <link rel="stylesheet" href="css/toastr.css?v=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/> <link rel="stylesheet" type="text/css" media="screen" href="css/main.css?v=30"/>
<link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=15" id="videolayout_default"/> <link rel="stylesheet" type="text/css" media="screen" href="css/videolayout_default.css?v=16" id="videolayout_default"/>
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet"> <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
<link rel="stylesheet" href="css/jquery-impromptu.css?v=4"> <link rel="stylesheet" href="css/jquery-impromptu.css?v=4">
<link rel="stylesheet" href="css/modaldialog.css?v=3"> <link rel="stylesheet" href="css/modaldialog.css?v=3">
@ -264,8 +264,10 @@
<a target="_new"><div class="watermark leftwatermark"></div></a> <a target="_new"><div class="watermark leftwatermark"></div></a>
<a target="_new"><div class="watermark rightwatermark"></div></a> <a target="_new"><div class="watermark rightwatermark"></div></a>
<a class="poweredby" href="http://jitsi.org" target="_new" >powered by jitsi.org</a> <a class="poweredby" href="http://jitsi.org" target="_new" >powered by jitsi.org</a>
<img id="activeSpeakerAvatar" src=""/> <div id="activeSpeaker">
<canvas id="activeSpeakerAudioLevel"></canvas> <img id="activeSpeakerAvatar" src=""/>
<canvas id="activeSpeakerAudioLevel"></canvas>
</div>
<video id="largeVideo" autoplay oncontextmenu="return false;"></video> <video id="largeVideo" autoplay oncontextmenu="return false;"></video>
</div> </div>
<div id="remoteVideos"> <div id="remoteVideos">

2
prezi.js
View File

@ -25,7 +25,7 @@ var Prezi = (function (my) {
ToolbarToggler.dockToolbar(true); ToolbarToggler.dockToolbar(true);
VideoLayout.setLargeVideoVisible(false); VideoLayout.setLargeVideoVisible(false);
}); });
$('#activeSpeakerAvatar').css('visibility', 'hidden'); $('#activeSpeaker').css('visibility', 'hidden');
} }
else { else {
if (prezi.css('opacity') == '1') { if (prezi.css('opacity') == '1') {

10
videolayout.js
View File

@ -173,8 +173,7 @@ var VideoLayout = (function (my) {
if (RTC.getVideoSrc($('#largeVideo')[0]) !== newSrc) { if (RTC.getVideoSrc($('#largeVideo')[0]) !== newSrc) {
$('#activeSpeakerAvatar').css('visibility', 'hidden'); $('#activeSpeaker').css('visibility', 'hidden');
$('#activeSpeakerAudioLevel').css('visibility', 'hidden');
// Due to the simulcast the localVideoSrc may have changed when the // Due to the simulcast the localVideoSrc may have changed when the
// fadeOut event triggers. In that case the getJidFromVideoSrc and // fadeOut event triggers. In that case the getJidFromVideoSrc and
// isVideoSrcDesktop methods will not function correctly. // isVideoSrcDesktop methods will not function correctly.
@ -434,6 +433,7 @@ var VideoLayout = (function (my) {
} }
else { else {
$('#largeVideo').css({visibility: 'hidden'}); $('#largeVideo').css({visibility: 'hidden'});
$('#activeSpeaker').css('visibility', 'hidden');
$('.watermark').css({visibility: 'hidden'}); $('.watermark').css({visibility: 'hidden'});
VideoLayout.enableDominantSpeaker(resourceJid, false); VideoLayout.enableDominantSpeaker(resourceJid, false);
if(focusedVideoInfo) { if(focusedVideoInfo) {
@ -1040,10 +1040,8 @@ var VideoLayout = (function (my) {
$('#largeVideoContainer').height(availableHeight); $('#largeVideoContainer').height(availableHeight);
var avatarSize = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE; var avatarSize = interfaceConfig.ACTIVE_SPEAKER_AVATAR_SIZE;
var top = (availableHeight - avatarSize) / 2; var top = availableHeight / 2 - avatarSize / 4 * 3;
$('#activeSpeakerAvatar').css('top', top); $('#activeSpeaker').css('top', top);
$('#activeSpeakerAudioLevel').css('top', top - avatarSize / 4);
$('#activeSpeakerAudioLevel').css('left', availableWidth / 2 - avatarSize * 3 / 4);
VideoLayout.resizeThumbnails(); VideoLayout.resizeThumbnails();
}; };