Applies fixes to thumbnail video toolbar from m-voloshin
This commit is contained in:
yanas
parent
c5adecb6e1
commit
1486eac752
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,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);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
|
|||
Loading…
Reference in New Issue