Merge pull request #891 from jitsi/video-thumbnail-toolbar-fixes

Video thumbnail toolbar fixes
pull/892/head 1265
Paweł Domas 8 years ago committed by GitHub
commit a07858cc72
  1. 6
      css/_font.scss
  2. 1
      css/_variables.scss
  3. 108
      css/_videolayout_default.scss
  4. BIN
      fonts/jitsi.eot
  5. 2
      fonts/jitsi.svg
  6. BIN
      fonts/jitsi.ttf
  7. BIN
      fonts/jitsi.woff
  8. 52
      fonts/selection.json
  9. 2
      lang/main.json
  10. 12
      modules/UI/videolayout/LocalVideo.js
  11. 22
      modules/UI/videolayout/RemoteVideo.js
  12. 165
      modules/UI/videolayout/SmallVideo.js

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

@ -14,6 +14,7 @@ $defaultToolbarSize: 50px;
$thumbnailIndicatorSize: 23px;
$thumbnailIndicatorBorder: 0px;
$thumbnailVideoMargin: 2px;
$thumbnailToolbarHeight: 25px;
/**
* Color variables.

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

Binary file not shown.

@ -42,4 +42,6 @@
<glyph unicode="&#xe91c;" glyph-name="toggle-filmstrip" d="M896 896h-768c-46.933 0-85.333-38.4-85.333-85.333v-597.333c0-46.933 38.4-85.333 85.333-85.333h768c46.933 0 85.333 38.4 85.333 85.333v597.333c0 46.933-38.4 85.333-85.333 85.333zM896 213.333h-768v128h768v-128z" />
<glyph unicode="&#xe91d;" glyph-name="feedback" d="M42.667 128h170.667v512h-170.667v-512zM981.333 597.333c0 46.933-38.4 85.333-85.333 85.333h-269.227l40.533 194.987 1.28 13.653c0 17.493-7.253 33.707-18.773 45.227l-45.227 44.8-280.747-281.173c-15.787-15.36-25.173-36.693-25.173-60.16v-426.667c0-46.933 38.4-85.333 85.333-85.333h384c35.413 0 65.707 21.333 78.507 52.053l128.853 300.8c3.84 9.813 5.973 20.053 5.973 31.147v81.493l-0.427 0.427 0.427 3.413z" />
<glyph unicode="&#xe91e;" glyph-name="raised-hand" d="M982 790v-620c0-94-78-170-172-170h-310c-46 0-90 18-122 50l-336 342s54 52 56 52c10 8 22 12 34 12 10 0 18-2 26-6 2 0 184-104 184-104v508c0 36 28 64 64 64s64-28 64-64v-300h42v406c0 36 28 64 64 64s64-28 64-64v-406h42v364c0 36 28 64 64 64s64-28 64-64v-364h44v236c0 36 28 64 64 64s64-28 64-64z" />
<glyph unicode="&#xe91f;" glyph-name="menu-up" d="M512 682l256-256-60-60-196 196-196-196-60 60z" />
<glyph unicode="&#xe920;" glyph-name="menu-down" d="M708 658l60-60-256-256-256 256 60 60 196-196z" />
</font></defs></svg>

Before

Width:  |  Height:  |  Size: 14 KiB

After

Width:  |  Height:  |  Size: 15 KiB

Binary file not shown.

Binary file not shown.

@ -293,6 +293,58 @@
"setId": 2,
"iconIdx": 243
},
{
"icon": {
"paths": [
"M512 342l256 256-60 60-196-196-196 196-60-60z"
],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"expand_less"
],
"grid": 0,
"attrs": []
},
"attrs": [],
"properties": {
"id": 256,
"order": 106,
"ligatures": "expand_less",
"prevSize": 32,
"code": 59679,
"name": "menu-up"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 257
},
{
"icon": {
"paths": [
"M708 366l60 60-256 256-256-256 60-60 196 196z"
],
"isMulticolor": false,
"isMulticolor2": false,
"tags": [
"expand_more"
],
"grid": 0,
"attrs": []
},
"attrs": [],
"properties": {
"id": 257,
"order": 107,
"ligatures": "expand_more",
"prevSize": 32,
"code": 59680,
"name": "menu-down"
},
"setIdx": 0,
"setId": 2,
"iconIdx": 258
},
{
"icon": {
"paths": [

@ -136,7 +136,7 @@
{
"editnickname": "Click to edit your<br/>display name",
"moderator": "The owner of<br/>this conference",
"videomute": "Participant has<br/>stopped the camera.",
"videomute": "Participant has<br/>stopped the camera",
"mute": "Participant is muted",
"kick": "Kick out",
"muted": "Muted",

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

@ -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();

@ -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,95 +189,102 @@ SmallVideo.prototype.hideIndicator = function () {
/**
* Shows audio muted indicator over small videos.
* @param {string} isMuted
* Shows / hides the audio muted indicator over small videos.
*
* @param {boolean} 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);
audioMutedIndicator.show();
}
this.isMuted = isMuted;
};
}
/**
* Returns the audio muted indicator jquery object. If it doesn't exists -
* creates it.
*
* @returns {jQuery|HTMLElement} the audio muted indicator
*/
SmallVideo.prototype.getAudioMutedIndicator = function () {
var audioMutedSpan = $('#' + this.videoSpanId + ' .audioMuted');
this.updateIconPositions();
if (audioMutedSpan.length) {
return audioMutedSpan;
}
this.isMuted = isMuted;
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.
*
* @param {boolean} isMuted indicates if we should set the view to muted view
* or not
*/
SmallVideo.prototype.setMutedView = function(isMuted) {
this.isVideoMuted = isMuted;
this.updateView();
var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
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"));
}
var videoMutedSpan = this.getVideoMutedIndicator();
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"});
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"});
/**
* Returns the video muted indicator jquery object. If it doesn't exists -
* creates it.
*
* @returns {jQuery|HTMLElement} the video muted indicator
*/
SmallVideo.prototype.getVideoMutedIndicator = function () {
var videoMutedSpan = $('#' + this.videoSpanId + ' .videoMuted');
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 +294,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);
};
/**

Loading…
Cancel
Save