From 1486eac75232e54b5fd907d3305bdb29155f29d0 Mon Sep 17 00:00:00 2001 From: yanas Date: Sun, 18 Sep 2016 16:35:35 -0500 Subject: [PATCH] Applies fixes to thumbnail video toolbar from m-voloshin --- css/_variables.scss | 1 + css/_videolayout_default.scss | 108 ++++++++--------- lang/main.json | 2 +- modules/UI/videolayout/LocalVideo.js | 12 +- modules/UI/videolayout/RemoteVideo.js | 22 ++-- modules/UI/videolayout/SmallVideo.js | 162 +++++++++++++------------- 6 files changed, 156 insertions(+), 151 deletions(-) diff --git a/css/_variables.scss b/css/_variables.scss index 5d3eb5cc3..c51afb354 100644 --- a/css/_variables.scss +++ b/css/_variables.scss @@ -14,6 +14,7 @@ $defaultToolbarSize: 50px; $thumbnailIndicatorSize: 23px; $thumbnailIndicatorBorder: 0px; $thumbnailVideoMargin: 2px; +$thumbnailToolbarHeight: 25px; /** * Color variables. diff --git a/css/_videolayout_default.scss b/css/_videolayout_default.scss index 2e64daa42..7a59eaf30 100644 --- a/css/_videolayout_default.scss +++ b/css/_videolayout_default.scss @@ -51,17 +51,25 @@ border: 1px solid $defaultDarkColor; } +/** + * The toolbar of the video thumbnail. + */ .videocontainer__toolbar { position: absolute; bottom: 0; left: 0; z-index: 1; width: 100%; - height: 25px; + box-sizing: border-box; // Includes the padding in the 100% width. + height: $thumbnailToolbarHeight; max-height: 100%; background-color: rgba(0, 0, 0, 0.5); + padding: 0 5px 0 5px; } +/** + * Focused video thumbnail. + */ #remoteVideos .videocontainer.videoContainerFocused { cursor: hand; transition-duration: 0.5s; @@ -69,9 +77,6 @@ -webkit-animation-name: greyPulse; -webkit-animation-duration: 2s; -webkit-animation-iteration-count: 1; -} - -#remoteVideos .videocontainer.videoContainerFocused { border: 1px solid $videoThumbnailSelected; } @@ -149,48 +154,31 @@ z-index: 0; } -#remoteVideos .videocontainer>span.focusindicator, -#remoteVideos .videocontainer>div.remotevideomenu { - position: absolute; - color: #FFFFFF; - bottom: 0; - right: 0; - padding: 5px 0px; - width: 25px; - font-size: 9pt; - text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); - border: 0px; - z-index: 2; - text-align: center; -} - -#remoteVideos .videocontainer>span.focusindicator { - display: inline-block; -} - -#remoteVideos .videocontainer>div.remotevideomenu { - display: block; -} - -.videocontainer>span.displayname, -.videocontainer>input.displayname { +/** + * Positions video thumbnail display name and editor. + */ +.videocontainer .displayname, +.videocontainer .editdisplayname { display: inline-block; position: absolute; - bottom: 4px; - left: 25%; + left: 30%; + width: 40%; color: $participantNameColor; text-align: center; text-overflow: ellipsis; - width: 50%; font-size: 12px; font-weight: 100; letter-spacing: 1px; overflow: hidden; white-space: nowrap; + line-height: $thumbnailToolbarHeight; z-index: 2; } -.videocontainer>input.displayname { +/** + * Positions video thumbnail display name editor. + */ +.videocontainer .editdisplayname { outline: none; border: none; background: none; @@ -271,16 +259,16 @@ } #localVideoContainer>span.status:hover, -#localVideoContainer>span.displayname:hover { +#localVideoContainer .displayname:hover { cursor: text; } .videocontainer>span.status, -.videocontainer>span.displayname { +.videocontainer .displayname { pointer-events: none; } -.videocontainer>input.displayname { +.videocontainer .editdisplayname { height: auto; } @@ -301,32 +289,36 @@ z-index: 2; } -.videocontainer>span.audioMuted { - display: inline-block; - position: absolute; - color: #FFFFFF; - bottom: 0; - left: 0; - padding: 8px 5px; - width: 25px; +/** + * Video thumbnail toolbar icon. + */ +.videocontainer .toolbar-icon { 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; text-align: center; + text-shadow: 0px 1px 0px rgba(255,255,255,.3), 0px -1px 0px rgba(0,0,0,.7); + color: #FFFFFF; + width: 12px; + line-height: $thumbnailToolbarHeight; + height: $thumbnailToolbarHeight; + padding: 0; + border: 0; + margin: 0px 5px 0px 0px; + float: left; } -.videocontainer>span.videoMuted { - display: inline-block; - position: absolute; - color: #FFFFFF; - bottom: 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; +/** + * Toolbar icon internal i elements (font icons). + */ +.toolbar-icon>i { + line-height: $thumbnailToolbarHeight; +} + +/** + * Toolbar icons positioned on the right. + */ +.toolbar-icon.right { + float: right; + margin: 0px 0px 0px 5px; } .videocontainer>span.indicator { diff --git a/lang/main.json b/lang/main.json index dcd406475..f2c3ba87f 100644 --- a/lang/main.json +++ b/lang/main.json @@ -136,7 +136,7 @@ { "editnickname": "Click to edit your
display name", "moderator": "The owner of
this conference", - "videomute": "Participant has
stopped the camera.", + "videomute": "Participant has
stopped the camera", "mute": "Participant is muted", "kick": "Kick out", "muted": "Muted", diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index a368fcc8c..9c2111e4e 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -60,7 +60,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) { return; } - var nameSpan = $('#' + this.videoSpanId + '>span.displayname'); + var nameSpan = $('#' + this.videoSpanId + ' .displayname'); var defaultLocalDisplayName = APP.translation.generateTranslationHTML( interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME); @@ -81,7 +81,9 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) { } else { nameSpan = document.createElement('span'); nameSpan.className = 'displayname'; - document.getElementById(this.videoSpanId).appendChild(nameSpan); + document.getElementById(this.videoSpanId) + .querySelector('.videocontainer__toolbar') + .appendChild(nameSpan); if (displayName && displayName.length > 0) { @@ -98,7 +100,7 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) { APP.translation.translateElement($("a.displayname")); var editableText = document.createElement('input'); - editableText.className = 'displayname'; + editableText.className = 'editdisplayname'; editableText.type = 'text'; editableText.id = 'editDisplayName'; @@ -115,7 +117,9 @@ LocalVideo.prototype.setDisplayName = function(displayName, key) { JSON.stringify({name: "Jane Pink"})); editableText.setAttribute("placeholder", defaultNickname); - this.container.appendChild(editableText); + this.container + .querySelector('.videocontainer__toolbar') + .appendChild(editableText); var self = this; $('#localVideoContainer .displayname') diff --git a/modules/UI/videolayout/RemoteVideo.js b/modules/UI/videolayout/RemoteVideo.js index dc6d68118..43e4ce872 100644 --- a/modules/UI/videolayout/RemoteVideo.js +++ b/modules/UI/videolayout/RemoteVideo.js @@ -51,7 +51,7 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() { */ RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) { this.popover = new JitsiPopover( - $("#" + this.videoSpanId + " > .remotevideomenu"), + $("#" + this.videoSpanId + " .remotevideomenu"), { content: popupMenuElement.outerHTML, skin: "black"}); @@ -171,12 +171,16 @@ RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted, force) { */ if (!interfaceConfig.filmStripOnly) { RemoteVideo.prototype.addRemoteVideoMenu = function () { - var spanElement = document.createElement('div'); - spanElement.className = 'remotevideomenu'; - this.container.appendChild(spanElement); + + var spanElement = document.createElement('span'); + spanElement.className = 'remotevideomenu toolbar-icon right'; + + this.container + .querySelector('.videocontainer__toolbar') + .appendChild(spanElement); var menuElement = document.createElement('i'); - menuElement.className = 'fa fa-angle-down'; + menuElement.className = 'icon-menu-up'; menuElement.title = 'Remote user controls'; spanElement.appendChild(menuElement); @@ -382,7 +386,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) { return; } - var nameSpan = $('#' + this.videoSpanId + '>span.displayname'); + var nameSpan = $('#' + this.videoSpanId + ' .displayname'); // If we already have a display name for this video. if (nameSpan.length > 0) { @@ -401,7 +405,9 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) { } else { nameSpan = document.createElement('span'); nameSpan.className = 'displayname'; - $('#' + this.videoSpanId)[0].appendChild(nameSpan); + $('#' + this.videoSpanId)[0] + .querySelector('.videocontainer__toolbar') + .appendChild(nameSpan); if (displayName && displayName.length > 0) { $(nameSpan).text(displayName); @@ -419,7 +425,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) { * @param videoElementId the id of local or remote video element. */ RemoteVideo.prototype.removeRemoteVideoMenu = function() { - var menuSpan = $('#' + this.videoSpanId + '>span.remotevideomenu'); + var menuSpan = $('#' + this.videoSpanId + '> .remotevideomenu'); if (menuSpan.length) { this.popover.forceHide(); menuSpan.remove(); diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index 619d67fe1..c7c6861a4 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -40,7 +40,7 @@ SmallVideo.prototype.isVisible = function () { }; SmallVideo.prototype.showDisplayName = function(isShow) { - var nameSpan = $('#' + this.videoSpanId + '>span.displayname').get(0); + var nameSpan = $('#' + this.videoSpanId + ' .displayname').get(0); if (isShow) { if (nameSpan && nameSpan.innerHTML && nameSpan.innerHTML.length) nameSpan.setAttribute("style", "display:inline-block;"); @@ -189,40 +189,56 @@ SmallVideo.prototype.hideIndicator = function () { /** - * Shows audio muted indicator over small videos. - * @param {string} isMuted + * Shows / hides the audio muted indicator over small videos. + * + * @param {string} isMuted indicates if the muted element should be shown + * or hidden */ SmallVideo.prototype.showAudioIndicator = function(isMuted) { - var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted'); + + var audioMutedIndicator = this.getAudioMutedIndicator(); if (!isMuted) { - if (audioMutedSpan.length > 0) { - audioMutedSpan.remove(); - this.updateIconPositions(); - } + audioMutedIndicator.hide(); } else { - if (!audioMutedSpan.length) { - audioMutedSpan = document.createElement('span'); - audioMutedSpan.className = 'audioMuted'; - UIUtil.setTooltip(audioMutedSpan, - "videothumbnail.mute", - "top"); - - this.container.appendChild(audioMutedSpan); - APP.translation - .translateElement($('#' + this.videoSpanId + " > span")); - var mutedIndicator = document.createElement('i'); - mutedIndicator.className = 'icon-mic-disabled'; - audioMutedSpan.appendChild(mutedIndicator); - - } - - this.updateIconPositions(); + audioMutedIndicator.show(); } this.isMuted = isMuted; }; +/** + * Returns the audio muted indicator jquery object. If it doesn't exists - + * creates it. + * + * @returns {jQuery|HTMLElement} + */ +SmallVideo.prototype.getAudioMutedIndicator = function () { + var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted'); + + if (audioMutedSpan.length) { + return audioMutedSpan; + } + + audioMutedSpan = document.createElement('span'); + audioMutedSpan.className = 'audioMuted toolbar-icon'; + + UIUtil.setTooltip(audioMutedSpan, + "videothumbnail.mute", + "top"); + + this.container + .querySelector('.videocontainer__toolbar') + .appendChild(audioMutedSpan); + + + var mutedIndicator = document.createElement('i'); + mutedIndicator.className = 'icon-mic-disabled'; + audioMutedSpan.appendChild(mutedIndicator); + + return $('#' + this.videoSpanId + ' .audioMuted'); +}; + /** * Shows video muted indicator over small videos and disables/enables avatar * if video muted. @@ -231,53 +247,41 @@ SmallVideo.prototype.setMutedView = function(isMuted) { this.isVideoMuted = isMuted; this.updateView(); - var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted'); + var videoMutedSpan = this.getVideoMutedIndicator(); - if (isMuted === false) { - if (videoMutedSpan.length > 0) { - videoMutedSpan.remove(); - this.updateIconPositions(); - } - } - else { - if (!videoMutedSpan.length) { - videoMutedSpan = document.createElement('span'); - videoMutedSpan.className = 'videoMuted'; - - this.container.appendChild(videoMutedSpan); - - var mutedIndicator = document.createElement('i'); - mutedIndicator.className = 'icon-camera-disabled'; - UIUtil.setTooltip(mutedIndicator, - "videothumbnail.videomute", - "top"); - videoMutedSpan.appendChild(mutedIndicator); - //translate texts for muted indicator - APP.translation - .translateElement($('#' + this.videoSpanId + " > span > i")); - } - - this.updateIconPositions(); - } + videoMutedSpan[isMuted ? 'show' : 'hide'](); }; -SmallVideo.prototype.updateIconPositions = function () { - let audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted'); - let videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted'); - audioMutedSpan.css({left: "0px"}); - videoMutedSpan.css({left: (audioMutedSpan.length > 0? 25 : 0) + "px"}); +/** + * Returns the video muted indicator jquery object. If it doesn't exists - + * creates it. + * + * @returns {jQuery|HTMLElement} + */ +SmallVideo.prototype.getVideoMutedIndicator = function () { + var videoMutedSpan = $('#' + this.videoSpanId + ' .videoMuted'); - var connectionIndicator - = $('#' + this.videoSpanId + '>div.connectionindicator'); - if(connectionIndicator.length > 0 && - connectionIndicator[0].style.display != "none") { - audioMutedSpan.css({right: "23px"}); - videoMutedSpan.css({right: - ((audioMutedSpan.length > 0? 23 : 0) + 30) + "px"}); - } else { - audioMutedSpan.css({right: "0px"}); - videoMutedSpan.css({right: (audioMutedSpan.length > 0? 30 : 0) + "px"}); + if (videoMutedSpan.length) { + return videoMutedSpan; } + + videoMutedSpan = document.createElement('span'); + videoMutedSpan.className = 'videoMuted toolbar-icon'; + + this.container + .querySelector('.videocontainer__toolbar') + .appendChild(videoMutedSpan); + + var mutedIndicator = document.createElement('i'); + mutedIndicator.className = 'icon-camera-disabled'; + + UIUtil.setTooltip(mutedIndicator, + "videothumbnail.videomute", + "top"); + + videoMutedSpan.appendChild(mutedIndicator); + + return $('#' + this.videoSpanId + ' .videoMuted'); }; /** @@ -287,27 +291,25 @@ SmallVideo.prototype.createModeratorIndicatorElement = function () { // Show moderator indicator var indicatorSpan = $('#' + this.videoSpanId + ' .focusindicator'); - if (!indicatorSpan || indicatorSpan.length === 0) { - indicatorSpan = document.createElement('span'); - indicatorSpan.className = 'focusindicator'; - - this.container.appendChild(indicatorSpan); - indicatorSpan = $('#' + this.videoSpanId + ' .focusindicator'); + if (indicatorSpan.length) { + return; } - if (indicatorSpan.children().length !== 0) - return; + indicatorSpan = document.createElement('span'); + indicatorSpan.className = 'focusindicator toolbar-icon right'; + + this.container + .querySelector('.videocontainer__toolbar') + .appendChild(indicatorSpan); + var moderatorIndicator = document.createElement('i'); moderatorIndicator.className = 'icon-star'; - indicatorSpan[0].appendChild(moderatorIndicator); - UIUtil.setTooltip(indicatorSpan[0], + UIUtil.setTooltip(moderatorIndicator, "videothumbnail.moderator", "top-left"); - //translates text in focus indicators - APP.translation - .translateElement($('#' + this.videoSpanId + ' .focusindicator')); + indicatorSpan.appendChild(moderatorIndicator); }; /**