Merge pull request #773 from jitsi/object-fit-fix-and-refactoring-around-it
Object fit fix and refactoring around it
This commit is contained in:
Paweł Domas
GitHub
commit
fe6588516f
|
|
@ -71,7 +71,7 @@
|
|||
height: 35px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
bottom: -35;
|
||||
bottom: -35px;
|
||||
}
|
||||
|
||||
.jitsipopover_green
|
||||
|
|
|
|||
|
|
@ -1,27 +1,10 @@
|
|||
/*Initialize*/
|
||||
ul.popupmenu {
|
||||
display:none;
|
||||
position: absolute;
|
||||
padding:10px;
|
||||
padding: 0px 10px 0px 10px;
|
||||
margin: 0;
|
||||
bottom: 0;
|
||||
margin-bottom: 35px;
|
||||
padding-bottom: 10px;
|
||||
padding-top: 10px;
|
||||
right: 10px;
|
||||
left: -5px;
|
||||
width: 100px;
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
border: 1px solid rgba(256, 256, 256, 0.2);
|
||||
border-radius:3px;
|
||||
}
|
||||
|
||||
ul.popupmenu:after {
|
||||
content: url('../images/popupPointer.png');
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: 11px;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
ul.popupmenu li {
|
||||
|
|
@ -36,11 +19,13 @@ ul.popupmenu li:hover {
|
|||
|
||||
/*Link Appearance*/
|
||||
ul.popupmenu li a {
|
||||
display: block;
|
||||
text-decoration: none;
|
||||
color: #fff;
|
||||
padding: 5px;
|
||||
display: inline-block;
|
||||
font-size: 9pt;
|
||||
width: 100%;
|
||||
cursor: hand;
|
||||
}
|
||||
|
||||
ul.popupmenu li a i.icon-kick {
|
||||
|
|
@ -54,6 +39,15 @@ ul.popupmenu li a span {
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
ul.popupmenu li a div {
|
||||
display: inline-block;
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
ul.popupmenu li a i {
|
||||
line-height: 25px;
|
||||
}
|
||||
|
||||
span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
|
||||
display:block !important;
|
||||
}
|
||||
|
|
@ -61,12 +55,4 @@ span.remotevideomenu:hover ul.popupmenu, ul.popupmenu:hover {
|
|||
a.disabled {
|
||||
color: gray !important;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.popupmenuPadding {
|
||||
height: 35px;
|
||||
width: 100px;
|
||||
position: absolute;
|
||||
bottom: -35;
|
||||
left: 0px;
|
||||
}
|
||||
|
|
@ -41,20 +41,22 @@
|
|||
background-size: contain;
|
||||
border-radius:1px;
|
||||
border: 1px solid #212425;
|
||||
/*margin-right: 1px;*/
|
||||
/**
|
||||
* Some browsers don't have full support of the object-fit property for the
|
||||
* video element and when we set video object-fit to "cover" the video
|
||||
* actually overflows the boundaries of its container, so it's important
|
||||
* to indicate that the "overflow" should be hidden.
|
||||
*/
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
/*#remoteVideos .videocontainer:hover,*/
|
||||
#remoteVideos .videocontainer.videoContainerFocused {
|
||||
cursor: hand;
|
||||
/* transform:scale(1.08, 1.08);
|
||||
-webkit-transform:scale(1.08, 1.08); */
|
||||
transition-duration: 0.5s;
|
||||
-webkit-transition-duration: 0.5s;
|
||||
-webkit-animation-name: greyPulse;
|
||||
-webkit-animation-duration: 2s;
|
||||
-webkit-animation-iteration-count: 1;
|
||||
overflow: visible !important;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer:hover {
|
||||
|
|
@ -82,6 +84,7 @@
|
|||
cursor: hand;
|
||||
border-radius:1px;
|
||||
object-fit: cover;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.flipVideoX {
|
||||
|
|
@ -144,8 +147,7 @@
|
|||
}
|
||||
|
||||
#remoteVideos .videocontainer>span.focusindicator,
|
||||
#remoteVideos .videocontainer>span.remotevideomenu {
|
||||
display: inline-block;
|
||||
#remoteVideos .videocontainer>div.remotevideomenu {
|
||||
position: absolute;
|
||||
color: #FFFFFF;
|
||||
top: 0;
|
||||
|
|
@ -159,6 +161,14 @@
|
|||
text-align: center;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer>span.focusindicator {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
#remoteVideos .videocontainer>div.remotevideomenu {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.videocontainer>span.displayname,
|
||||
.videocontainer>input.displayname {
|
||||
display: none;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,7 @@ import SmallVideo from "./SmallVideo";
|
|||
import AudioLevels from "../audio_levels/AudioLevels";
|
||||
import UIUtils from "../util/UIUtil";
|
||||
import UIEvents from '../../../service/UI/UIEvents';
|
||||
import JitsiPopover from "../util/JitsiPopover";
|
||||
|
||||
function RemoteVideo(id, VideoLayout, emitter) {
|
||||
this.id = id;
|
||||
|
|
@ -18,6 +19,7 @@ function RemoteVideo(id, VideoLayout, emitter) {
|
|||
this.bindHoverHandler();
|
||||
this.flipX = false;
|
||||
this.isLocal = false;
|
||||
this.isMuted = false;
|
||||
}
|
||||
|
||||
RemoteVideo.prototype = Object.create(SmallVideo.prototype);
|
||||
|
|
@ -34,6 +36,126 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
|
|||
return this.container;
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* Initializes the remote participant popup menu, by specifying previously
|
||||
* constructed popupMenuElement, containing all the menu items.
|
||||
*
|
||||
* @param popupMenuElement a pre-constructed element, containing the menu items
|
||||
* to display in the popup
|
||||
*/
|
||||
RemoteVideo.prototype._initPopupMenu = function (popupMenuElement) {
|
||||
this.popover = new JitsiPopover(
|
||||
$("#" + this.videoSpanId + " > .remotevideomenu"),
|
||||
{ content: popupMenuElement.outerHTML,
|
||||
skin: "black"});
|
||||
|
||||
// override popover show method to make sure we will update the content
|
||||
// before showing the popover
|
||||
var origShowFunc = this.popover.show;
|
||||
this.popover.show = function () {
|
||||
// update content by forcing it, to finish even if popover
|
||||
// is not visible
|
||||
this.updateRemoteVideoMenu(this.isMuted, true);
|
||||
// call the original show, passing its actual this
|
||||
origShowFunc.call(this.popover);
|
||||
}.bind(this);
|
||||
};
|
||||
|
||||
/**
|
||||
* Generates the popup menu content.
|
||||
*
|
||||
* @returns {Element|*} the constructed element, containing popup menu items
|
||||
* @private
|
||||
*/
|
||||
RemoteVideo.prototype._generatePopupContent = function () {
|
||||
var popupmenuElement = document.createElement('ul');
|
||||
popupmenuElement.className = 'popupmenu';
|
||||
popupmenuElement.id = `remote_popupmenu_${this.id}`;
|
||||
|
||||
var muteMenuItem = document.createElement('li');
|
||||
var muteLinkItem = document.createElement('a');
|
||||
|
||||
var mutedIndicator = "<i class='icon-mic-disabled'></i>";
|
||||
|
||||
var doMuteHTML = mutedIndicator +
|
||||
" <div " +
|
||||
"data-i18n='videothumbnail.domute'>" +
|
||||
APP.translation.translateString("videothumbnail.domute") +
|
||||
"</div>";
|
||||
|
||||
var mutedHTML = mutedIndicator +
|
||||
" <div " +
|
||||
"data-i18n='videothumbnail.muted'>" +
|
||||
APP.translation.translateString("videothumbnail.muted") +
|
||||
"</div>";
|
||||
|
||||
muteLinkItem.id = "muteLinkItem";
|
||||
|
||||
if (this.isMuted) {
|
||||
muteLinkItem.innerHTML = mutedHTML;
|
||||
muteLinkItem.className = 'mutelink disabled';
|
||||
}
|
||||
else {
|
||||
muteLinkItem.innerHTML = doMuteHTML;
|
||||
muteLinkItem.className = 'mutelink';
|
||||
}
|
||||
|
||||
// Delegate event to the document.
|
||||
$(document).on("click", ".mutelink", function(){
|
||||
|
||||
if (this.isMuted)
|
||||
return;
|
||||
|
||||
this.emitter.emit(UIEvents.REMOTE_AUDIO_MUTED, this.id);
|
||||
|
||||
this.popover.forceHide();
|
||||
}.bind(this));
|
||||
|
||||
muteMenuItem.appendChild(muteLinkItem);
|
||||
popupmenuElement.appendChild(muteMenuItem);
|
||||
|
||||
var ejectIndicator = "<i style='float:left;' class='fa fa-eject'></i>";
|
||||
|
||||
var ejectMenuItem = document.createElement('li');
|
||||
var ejectLinkItem = document.createElement('a');
|
||||
|
||||
var ejectText = "<div " +
|
||||
"data-i18n='videothumbnail.kick'>" +
|
||||
APP.translation.translateString("videothumbnail.kick") +
|
||||
"</div>";
|
||||
|
||||
ejectLinkItem.className = 'ejectlink';
|
||||
ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText;
|
||||
|
||||
$(document).on("click", ".ejectlink", function(){
|
||||
this.emitter.emit(UIEvents.USER_KICKED, this.id);
|
||||
this.popover.forceHide();
|
||||
}.bind(this));
|
||||
|
||||
ejectMenuItem.appendChild(ejectLinkItem);
|
||||
popupmenuElement.appendChild(ejectMenuItem);
|
||||
|
||||
return popupmenuElement;
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the remote video menu.
|
||||
*
|
||||
* @param isMuted the new muted state to update to
|
||||
* @param force to work even if popover is not visible
|
||||
*/
|
||||
RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted, force) {
|
||||
|
||||
this.isMuted = isMuted;
|
||||
|
||||
// generate content, translate it and add it to document only if
|
||||
// popover is visible or we force to do so.
|
||||
if(this.popover.popoverShown || force) {
|
||||
this.popover.updateContent(this._generatePopupContent());
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Adds the remote video menu element for the given <tt>id</tt> in the
|
||||
* given <tt>parentElement</tt>.
|
||||
|
|
@ -43,9 +165,8 @@ RemoteVideo.prototype.addRemoteVideoContainer = function() {
|
|||
*/
|
||||
if (!interfaceConfig.filmStripOnly) {
|
||||
RemoteVideo.prototype.addRemoteVideoMenu = function () {
|
||||
var spanElement = document.createElement('span');
|
||||
var spanElement = document.createElement('div');
|
||||
spanElement.className = 'remotevideomenu';
|
||||
|
||||
this.container.appendChild(spanElement);
|
||||
|
||||
var menuElement = document.createElement('i');
|
||||
|
|
@ -53,77 +174,7 @@ if (!interfaceConfig.filmStripOnly) {
|
|||
menuElement.title = 'Remote user controls';
|
||||
spanElement.appendChild(menuElement);
|
||||
|
||||
|
||||
var popupmenuElement = document.createElement('ul');
|
||||
popupmenuElement.className = 'popupmenu';
|
||||
popupmenuElement.id = `remote_popupmenu_${this.id}`;
|
||||
spanElement.appendChild(popupmenuElement);
|
||||
|
||||
var muteMenuItem = document.createElement('li');
|
||||
var muteLinkItem = document.createElement('a');
|
||||
|
||||
var mutedIndicator = "<i style='float:left;' " +
|
||||
"class='icon-mic-disabled'></i>";
|
||||
|
||||
if (!this.isMuted) {
|
||||
muteLinkItem.innerHTML = mutedIndicator +
|
||||
" <div style='width: 90px;margin-left: 20px;' " +
|
||||
"data-i18n='videothumbnail.domute'></div>";
|
||||
muteLinkItem.className = 'mutelink';
|
||||
}
|
||||
else {
|
||||
muteLinkItem.innerHTML = mutedIndicator +
|
||||
" <div style='width: 90px;margin-left: 20px;' " +
|
||||
"data-i18n='videothumbnail.muted'></div>";
|
||||
muteLinkItem.className = 'mutelink disabled';
|
||||
}
|
||||
|
||||
muteLinkItem.onclick = (event) => {
|
||||
if ($(this).attr('disabled')) {
|
||||
event.preventDefault();
|
||||
}
|
||||
var isMute = !!this.isMuted;
|
||||
this.emitter.emit(UIEvents.REMOTE_AUDIO_MUTED, this.id);
|
||||
|
||||
popupmenuElement.setAttribute('style', 'display:none;');
|
||||
|
||||
if (isMute) {
|
||||
this.innerHTML = mutedIndicator +
|
||||
" <div style='width: 90px;margin-left: 20px;' " +
|
||||
"data-i18n='videothumbnail.muted'></div>";
|
||||
this.className = 'mutelink disabled';
|
||||
}
|
||||
else {
|
||||
this.innerHTML = mutedIndicator +
|
||||
" <div style='width: 90px;margin-left: 20px;' " +
|
||||
"data-i18n='videothumbnail.domute'></div>";
|
||||
this.className = 'mutelink';
|
||||
}
|
||||
};
|
||||
|
||||
muteMenuItem.appendChild(muteLinkItem);
|
||||
popupmenuElement.appendChild(muteMenuItem);
|
||||
|
||||
var ejectIndicator = "<i style='float:left;' class='fa fa-eject'></i>";
|
||||
|
||||
var ejectMenuItem = document.createElement('li');
|
||||
var ejectLinkItem = document.createElement('a');
|
||||
var ejectText = "<div style='width: 90px;margin-left: 20px;' " +
|
||||
"data-i18n='videothumbnail.kick'> </div>";
|
||||
ejectLinkItem.innerHTML = ejectIndicator + ' ' + ejectText;
|
||||
ejectLinkItem.onclick = (event) => {
|
||||
this.emitter.emit(UIEvents.USER_KICKED, this.id);
|
||||
popupmenuElement.setAttribute('style', 'display:none;');
|
||||
};
|
||||
|
||||
ejectMenuItem.appendChild(ejectLinkItem);
|
||||
popupmenuElement.appendChild(ejectMenuItem);
|
||||
|
||||
var paddingSpan = document.createElement('span');
|
||||
paddingSpan.className = 'popupmenuPadding';
|
||||
popupmenuElement.appendChild(paddingSpan);
|
||||
APP.translation.translateElement(
|
||||
$("#" + popupmenuElement.id + " > li > a > div"));
|
||||
this._initPopupMenu(this._generatePopupContent());
|
||||
};
|
||||
|
||||
} else {
|
||||
|
|
@ -313,31 +364,6 @@ RemoteVideo.prototype.hideConnectionIndicator = function () {
|
|||
this.connectionIndicator.hide();
|
||||
};
|
||||
|
||||
/**
|
||||
* Updates the remote video menu.
|
||||
*
|
||||
* @param id the id indicating the video for which we're adding a menu.
|
||||
* @param isMuted indicates the current mute state
|
||||
*/
|
||||
RemoteVideo.prototype.updateRemoteVideoMenu = function (isMuted) {
|
||||
var muteMenuItem = $(`#remote_popupmenu_${this.id}>li>a.mutelink`);
|
||||
|
||||
var mutedIndicator = "<i class='icon-mic-disabled'></i>";
|
||||
|
||||
if (muteMenuItem.length) {
|
||||
var muteLink = muteMenuItem.get(0);
|
||||
|
||||
if (isMuted) {
|
||||
muteLink.innerHTML = mutedIndicator + ' Muted';
|
||||
muteLink.className = 'mutelink disabled';
|
||||
}
|
||||
else {
|
||||
muteLink.innerHTML = mutedIndicator + ' Mute';
|
||||
muteLink.className = 'mutelink';
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the display name for the given video span id.
|
||||
*/
|
||||
|
|
@ -388,6 +414,7 @@ RemoteVideo.prototype.setDisplayName = function(displayName, key) {
|
|||
RemoteVideo.prototype.removeRemoteVideoMenu = function() {
|
||||
var menuSpan = $('#' + this.videoSpanId + '>span.remotevideomenu');
|
||||
if (menuSpan.length) {
|
||||
this.popover.forceHide();
|
||||
menuSpan.remove();
|
||||
}
|
||||
};
|
||||
|
|
|
|||
Loading…
Reference in New Issue