From c5adecb6e1955fbee181dfb2a6898d1ef5949fca Mon Sep 17 00:00:00 2001 From: yanas Date: Sun, 18 Sep 2016 16:20:52 -0500 Subject: [PATCH 1/3] Adds menu icon to font. --- css/_font.scss | 6 +++++ fonts/jitsi.eot | Bin 6348 -> 6436 bytes fonts/jitsi.svg | 2 ++ fonts/jitsi.ttf | Bin 6192 -> 6280 bytes fonts/jitsi.woff | Bin 6268 -> 6356 bytes fonts/selection.json | 52 +++++++++++++++++++++++++++++++++++++++++++ 6 files changed, 60 insertions(+) diff --git a/css/_font.scss b/css/_font.scss index b5c519b67..99972b853 100644 --- a/css/_font.scss +++ b/css/_font.scss @@ -57,6 +57,12 @@ .icon-kick:before { content: "\e904"; } +.icon-menu-up:before { + content: "\e91f"; +} +.icon-menu-down:before { + content: "\e920"; +} .icon-full-screen:before { content: "\e90b"; } diff --git a/fonts/jitsi.eot b/fonts/jitsi.eot index f76e035d43ab10a89c9b62991e3d49a5efd6ad45..205a4de699a5bb6d91ed826caa14d48b5b3b444a 100644 GIT binary patch delta 354 zcmX?OxWtH6MUsJ`Vv!fP4-H y5ILDsOpQ@;pEmVyF delta 234 zcmZ2tbjFbNj06LN!9-Sbmg=(UCnq}8GFDIACs&`p^Vwbo2F3{t48kiiQWH~n4u&jb zU=X!nU|=xI019v}WjzDr7XbMx8M!4DGeUR|0{K&b{5d)K$%*l&Qi>QD#0-G^fZW82 z0tN$y%|Lzwkgt%Jn45ZcLhW)Oe*w^ryn_7V5(Z|V41fGBBK+URE8?Z}XLbn+2qU;qrg>%P@Mfiy M8PqpdiLYV=0A0F1i~s-t diff --git a/fonts/jitsi.svg b/fonts/jitsi.svg index 73c048fb7..501e79915 100644 --- a/fonts/jitsi.svg +++ b/fonts/jitsi.svg @@ -42,4 +42,6 @@ + + \ No newline at end of file diff --git a/fonts/jitsi.ttf b/fonts/jitsi.ttf index 4b9f26148825ac5cde5711346f0f09a2221e04d2..f06e6242fab3fe3b530bebe5c7d796668cb98c95 100644 GIT binary patch delta 349 zcmdmB&|x@1vA*`q8wLhO83qQ1ob<%v0w65_pP;1Nk?Ae1*Kk+*F0T6KaN-;=efD|w=v&c?7V9%&9 zi7}8-VRI1U3*mZ3pgLv-rd15A3=Eu%?CR|5Obm<+Hb;)wFs=FzrWqK4YQlhOCV|v2 zigPlWi!&Xu`Og57W|{CnmoP8`r5GfDj$lw=U}lk@c)*@f zZW3c4quk~o#uvg$KygL}hLh9Fs^j@>zA|vLfRr;_{?C3HMo(TLYR;%W`GM%1$t_|5 PY#`+f>YMM0tzrZK6@Wh; diff --git a/fonts/jitsi.woff b/fonts/jitsi.woff index c38e60b9e3e925ee1b2af66ad74eeca42a9e6c65..91c7811e50f72d4afa624fd757030477c6a991ce 100644 GIT binary patch delta 421 zcmexkaK%up+~3WOfsp|SB(5-UgXst5iViR>#>ub-vNlz>;U|?Xp0+ix_VuAFW z$~2(Z9R>#BFCfghXaY}0YGMilgXjgI8Z!{)IWspr11QMAAO_N>0>Ye2S$kwwF#}o5EV7e%80{GqCi^f3GAeAI$M{0Ho)M^nnSp5)11kdqCnLK$ zyE+rl>o!M@*f6d752hIyfoj5lY9@iyFp6_Bnu{|XvH8ycl4hC&WPsEI%?E`T5EtGq ze;Chi^Ob>{1t`G4aD`=!9)kY=hjj@H6Ohlr03s*v6jfu?ocus^4hIWRGYC(v5epFE be8%|;Y@jB?MsOH2FfailKzQ?ev0g?1i{)D* delta 301 zcmca&_{Tu3+~3WOfsp|SBx)GA!L$JbZ{MZNlz>;U|?Xp0+ix_VuAFW z$~2(Z9R>#B6(F3y^V!~v)Wj492GJIv8Z!{)IT*4q11Ja-+XLjQfH3D$)-xHoB^5xi z2SEND5S|gjdoU+I8K_RI2FMQp;rLT2MY)L;1vWszGe7|aFg9S=oR^rJ3KV+-v^)=l z?@p*)UXWj00(5;0Tpcrz#mpi Date: Sun, 18 Sep 2016 16:35:35 -0500 Subject: [PATCH 2/3] 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); }; /** From d1d4674136b253569638c545f7056084690b02e3 Mon Sep 17 00:00:00 2001 From: yanas Date: Mon, 19 Sep 2016 18:04:55 -0500 Subject: [PATCH 3/3] Fixes some jsdocs. --- modules/UI/videolayout/SmallVideo.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/modules/UI/videolayout/SmallVideo.js b/modules/UI/videolayout/SmallVideo.js index c7c6861a4..911c3bc4f 100644 --- a/modules/UI/videolayout/SmallVideo.js +++ b/modules/UI/videolayout/SmallVideo.js @@ -191,7 +191,7 @@ SmallVideo.prototype.hideIndicator = function () { /** * Shows / hides the audio muted indicator over small videos. * - * @param {string} isMuted indicates if the muted element should be shown + * @param {boolean} isMuted indicates if the muted element should be shown * or hidden */ SmallVideo.prototype.showAudioIndicator = function(isMuted) { @@ -211,7 +211,7 @@ SmallVideo.prototype.showAudioIndicator = function(isMuted) { * Returns the audio muted indicator jquery object. If it doesn't exists - * creates it. * - * @returns {jQuery|HTMLElement} + * @returns {jQuery|HTMLElement} the audio muted indicator */ SmallVideo.prototype.getAudioMutedIndicator = function () { var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted'); @@ -242,6 +242,9 @@ SmallVideo.prototype.getAudioMutedIndicator = function () { /** * Shows video muted indicator over small videos and disables/enables avatar * if video muted. + * + * @param {boolean} isMuted indicates if we should set the view to muted view + * or not */ SmallVideo.prototype.setMutedView = function(isMuted) { this.isVideoMuted = isMuted; @@ -256,7 +259,7 @@ SmallVideo.prototype.setMutedView = function(isMuted) { * Returns the video muted indicator jquery object. If it doesn't exists - * creates it. * - * @returns {jQuery|HTMLElement} + * @returns {jQuery|HTMLElement} the video muted indicator */ SmallVideo.prototype.getVideoMutedIndicator = function () { var videoMutedSpan = $('#' + this.videoSpanId + ' .videoMuted');