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 2016-08-05 10:25:36 -05:00 committed by GitHub
commit fe6588516f
4 changed files with 157 additions and 134 deletions

View File

@ -71,7 +71,7 @@
height: 35px;
width: 100px;
position: absolute;
bottom: -35;
bottom: -35px;
}
.jitsipopover_green

View File

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

View File

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

View File

@ -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'>&nbsp;</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();
}
};