429 lines
13 KiB
JavaScript
429 lines
13 KiB
JavaScript
/* global $, APP, JitsiMeetJS */
|
|
/* jshint -W101 */
|
|
import Avatar from "../avatar/Avatar";
|
|
import UIUtil from "../util/UIUtil";
|
|
|
|
const RTCUIHelper = JitsiMeetJS.util.RTCUIHelper;
|
|
|
|
function SmallVideo() {
|
|
this.isMuted = false;
|
|
this.hasAvatar = false;
|
|
this.isVideoMuted = false;
|
|
this.videoStream = null;
|
|
this.audioStream = null;
|
|
}
|
|
|
|
function setVisibility(selector, show) {
|
|
if (selector && selector.length > 0) {
|
|
selector.css("visibility", show ? "visible" : "hidden");
|
|
}
|
|
}
|
|
|
|
|
|
/* Indicates if this small video is currently visible.
|
|
*
|
|
* @return <tt>true</tt> if this small video isn't currently visible and
|
|
* <tt>false</tt> - otherwise.
|
|
*/
|
|
SmallVideo.prototype.isVisible = function () {
|
|
return $('#' + this.videoSpanId).is(':visible');
|
|
};
|
|
|
|
SmallVideo.prototype.showDisplayName = function(isShow) {
|
|
var nameSpan = $('#' + this.videoSpanId + '>span.displayname').get(0);
|
|
if (isShow) {
|
|
if (nameSpan && nameSpan.innerHTML && nameSpan.innerHTML.length)
|
|
nameSpan.setAttribute("style", "display:inline-block;");
|
|
}
|
|
else {
|
|
if (nameSpan)
|
|
nameSpan.setAttribute("style", "display:none;");
|
|
}
|
|
};
|
|
|
|
SmallVideo.prototype.setDeviceAvailabilityIcons = function (devices) {
|
|
if(!this.container)
|
|
return;
|
|
|
|
var noMic = $("#" + this.videoSpanId + " > .noMic");
|
|
var noVideo = $("#" + this.videoSpanId + " > .noVideo");
|
|
|
|
noMic.remove();
|
|
noVideo.remove();
|
|
if (!devices.audio) {
|
|
this.container.appendChild(
|
|
document.createElement("div")).setAttribute("class", "noMic");
|
|
}
|
|
|
|
if (!devices.video) {
|
|
this.container.appendChild(
|
|
document.createElement("div")).setAttribute("class", "noVideo");
|
|
}
|
|
|
|
if (!devices.audio && !devices.video) {
|
|
noMic.css("background-position", "75%");
|
|
noVideo.css("background-position", "25%");
|
|
noVideo.css("background-color", "transparent");
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Sets the type of the video displayed by this instance.
|
|
* @param videoType 'camera' or 'desktop'
|
|
*/
|
|
SmallVideo.prototype.setVideoType = function (videoType) {
|
|
this.videoType = videoType;
|
|
};
|
|
|
|
/**
|
|
* Returns the type of the video displayed by this instance.
|
|
* @returns {String} 'camera', 'screen' or undefined.
|
|
*/
|
|
SmallVideo.prototype.getVideoType = function () {
|
|
return this.videoType;
|
|
};
|
|
|
|
/**
|
|
* Shows the presence status message for the given video.
|
|
*/
|
|
SmallVideo.prototype.setPresenceStatus = function (statusMsg) {
|
|
if (!this.container) {
|
|
// No container
|
|
return;
|
|
}
|
|
|
|
var statusSpan = $('#' + this.videoSpanId + '>span.status');
|
|
if (!statusSpan.length) {
|
|
//Add status span
|
|
statusSpan = document.createElement('span');
|
|
statusSpan.className = 'status';
|
|
statusSpan.id = this.videoSpanId + '_status';
|
|
$('#' + this.videoSpanId)[0].appendChild(statusSpan);
|
|
|
|
statusSpan = $('#' + this.videoSpanId + '>span.status');
|
|
}
|
|
|
|
// Display status
|
|
if (statusMsg && statusMsg.length) {
|
|
$('#' + this.videoSpanId + '_status').text(statusMsg);
|
|
statusSpan.get(0).setAttribute("style", "display:inline-block;");
|
|
}
|
|
else {
|
|
// Hide
|
|
statusSpan.get(0).setAttribute("style", "display:none;");
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Creates an audio or video element for a particular MediaStream.
|
|
*/
|
|
SmallVideo.createStreamElement = function (stream) {
|
|
let isVideo = stream.isVideoTrack();
|
|
|
|
let element = isVideo
|
|
? document.createElement('video')
|
|
: document.createElement('audio');
|
|
if (isVideo) {
|
|
element.setAttribute("muted", "true");
|
|
}
|
|
|
|
RTCUIHelper.setAutoPlay(element, true);
|
|
|
|
element.id = SmallVideo.getStreamElementID(stream);
|
|
|
|
element.onplay = function () {
|
|
console.log("(TIME) Render " + (isVideo ? 'video' : 'audio') + ":\t",
|
|
window.performance.now());
|
|
};
|
|
|
|
element.oncontextmenu = function () { return false; };
|
|
|
|
return element;
|
|
};
|
|
|
|
/**
|
|
* Returns the element id for a particular MediaStream.
|
|
*/
|
|
SmallVideo.getStreamElementID = function (stream) {
|
|
let isVideo = stream.isVideoTrack();
|
|
|
|
return (isVideo ? 'remoteVideo_' : 'remoteAudio_') + stream.getId();
|
|
};
|
|
|
|
/**
|
|
* Configures hoverIn/hoverOut handlers.
|
|
*/
|
|
SmallVideo.prototype.bindHoverHandler = function () {
|
|
// Add hover handler
|
|
var self = this;
|
|
$(this.container).hover(
|
|
function () {
|
|
self.showDisplayName(true);
|
|
},
|
|
function () {
|
|
// If the video has been "pinned" by the user we want to
|
|
// keep the display name on place.
|
|
if (!self.VideoLayout.isLargeVideoVisible() ||
|
|
!self.VideoLayout.isCurrentlyOnLarge(self.id))
|
|
self.showDisplayName(false);
|
|
}
|
|
);
|
|
};
|
|
|
|
/**
|
|
* Updates the data for the indicator
|
|
* @param id the id of the indicator
|
|
* @param percent the percent for connection quality
|
|
* @param object the data
|
|
*/
|
|
SmallVideo.prototype.updateStatsIndicator = function (percent, object) {
|
|
if(this.connectionIndicator)
|
|
this.connectionIndicator.updateConnectionQuality(percent, object);
|
|
};
|
|
|
|
SmallVideo.prototype.hideIndicator = function () {
|
|
if(this.connectionIndicator)
|
|
this.connectionIndicator.hideIndicator();
|
|
};
|
|
|
|
|
|
/**
|
|
* Shows audio muted indicator over small videos.
|
|
* @param {string} isMuted
|
|
*/
|
|
SmallVideo.prototype.showAudioIndicator = function(isMuted) {
|
|
var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
|
|
|
|
if (!isMuted) {
|
|
if (audioMutedSpan.length > 0) {
|
|
audioMutedSpan.popover('hide');
|
|
audioMutedSpan.remove();
|
|
}
|
|
}
|
|
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();
|
|
}
|
|
this.isMuted = isMuted;
|
|
};
|
|
|
|
/**
|
|
* Shows video muted indicator over small videos and disables/enables avatar
|
|
* if video muted.
|
|
*/
|
|
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();
|
|
}
|
|
}
|
|
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();
|
|
}
|
|
};
|
|
|
|
SmallVideo.prototype.updateIconPositions = function () {
|
|
var audioMutedSpan = $('#' + this.videoSpanId + '>span.audioMuted');
|
|
var connectionIndicator = $('#' + this.videoSpanId + '>div.connectionindicator');
|
|
var videoMutedSpan = $('#' + this.videoSpanId + '>span.videoMuted');
|
|
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"});
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Creates the element indicating the moderator(owner) of the conference.
|
|
*
|
|
* @param parentElement the parent element where the owner indicator will
|
|
* be added
|
|
*/
|
|
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.children().length !== 0)
|
|
return;
|
|
var moderatorIndicator = document.createElement('i');
|
|
moderatorIndicator.className = 'fa fa-star';
|
|
indicatorSpan[0].appendChild(moderatorIndicator);
|
|
|
|
UIUtil.setTooltip(indicatorSpan[0],
|
|
"videothumbnail.moderator",
|
|
"top");
|
|
|
|
//translates text in focus indicators
|
|
APP.translation.translateElement($('#' + this.videoSpanId + ' .focusindicator'));
|
|
};
|
|
|
|
SmallVideo.prototype.selectVideoElement = function () {
|
|
return $(RTCUIHelper.findVideoElement($('#' + this.videoSpanId)[0]));
|
|
};
|
|
|
|
SmallVideo.prototype.focus = function(isFocused) {
|
|
if(!isFocused) {
|
|
this.container.classList.remove("videoContainerFocused");
|
|
} else {
|
|
this.container.classList.add("videoContainerFocused");
|
|
}
|
|
};
|
|
|
|
SmallVideo.prototype.hasVideo = function () {
|
|
return this.selectVideoElement().length !== 0;
|
|
};
|
|
|
|
/**
|
|
* Hides or shows the user's avatar.
|
|
* This update assumes that large video had been updated and we will
|
|
* reflect it on this small video.
|
|
*
|
|
* @param show whether we should show the avatar or not
|
|
* video because there is no dominant speaker and no focused speaker
|
|
*/
|
|
SmallVideo.prototype.updateView = function () {
|
|
if (!this.hasAvatar) {
|
|
if (this.id) {
|
|
// Init avatar
|
|
this.avatarChanged(Avatar.getAvatarUrl(this.id));
|
|
} else {
|
|
console.error("Unable to init avatar - no id", this);
|
|
return;
|
|
}
|
|
}
|
|
|
|
let video = this.selectVideoElement();
|
|
|
|
let avatar = $(`#avatar_${this.id}`);
|
|
|
|
var isCurrentlyOnLarge = this.VideoLayout.isCurrentlyOnLarge(this.id);
|
|
|
|
var showVideo = !this.isVideoMuted && !isCurrentlyOnLarge;
|
|
var showAvatar;
|
|
if ((!this.isLocal
|
|
&& !this.VideoLayout.isInLastN(this.id))
|
|
|| this.isVideoMuted) {
|
|
showAvatar = true;
|
|
} else {
|
|
// We want to show the avatar when the video is muted or not exists
|
|
// that is when 'true' or 'null' is returned
|
|
showAvatar = !this.videoStream || this.videoStream.isMuted();
|
|
}
|
|
|
|
showAvatar = showAvatar && !isCurrentlyOnLarge;
|
|
|
|
if (video && video.length > 0) {
|
|
setVisibility(video, showVideo);
|
|
}
|
|
setVisibility(avatar, showAvatar);
|
|
|
|
var showDisplayName = !showVideo && !showAvatar;
|
|
|
|
if (showDisplayName) {
|
|
this.showDisplayName(this.VideoLayout.isLargeVideoVisible());
|
|
}
|
|
else {
|
|
this.showDisplayName(false);
|
|
}
|
|
};
|
|
|
|
SmallVideo.prototype.avatarChanged = function (avatarUrl) {
|
|
var thumbnail = $('#' + this.videoSpanId);
|
|
var avatar = $('#avatar_' + this.id);
|
|
this.hasAvatar = true;
|
|
|
|
// set the avatar in the thumbnail
|
|
if (avatar && avatar.length > 0) {
|
|
avatar[0].src = avatarUrl;
|
|
} else {
|
|
if (thumbnail && thumbnail.length > 0) {
|
|
avatar = document.createElement('img');
|
|
avatar.id = 'avatar_' + this.id;
|
|
avatar.className = 'userAvatar';
|
|
avatar.src = avatarUrl;
|
|
thumbnail.append(avatar);
|
|
}
|
|
}
|
|
};
|
|
|
|
/**
|
|
* Updates the Indicator for dominant speaker.
|
|
*
|
|
* @param isSpeaker indicates the current indicator state
|
|
*/
|
|
SmallVideo.prototype.updateDominantSpeakerIndicator = function (isSpeaker) {
|
|
|
|
if (!this.container) {
|
|
console.warn( "Unable to set dominant speaker indicator - "
|
|
+ this.videoSpanId + " does not exist");
|
|
return;
|
|
}
|
|
|
|
var indicatorSpan
|
|
= $('#' + this.videoSpanId + '>span.dominantspeakerindicator');
|
|
|
|
// If we do not have an indicator for this video.
|
|
if (indicatorSpan.length <= 0) {
|
|
indicatorSpan = document.createElement('span');
|
|
|
|
indicatorSpan.innerHTML
|
|
= "<i id='speakerindicatoricon' class='fa fa-bullhorn'></i>";
|
|
indicatorSpan.className = 'dominantspeakerindicator';
|
|
|
|
$('#' + this.videoSpanId)[0].appendChild(indicatorSpan);
|
|
|
|
// adds a tooltip
|
|
UIUtil.setTooltip(indicatorSpan, "speaker", "left");
|
|
APP.translation.translateElement($(indicatorSpan));
|
|
}
|
|
|
|
$(indicatorSpan).css("visibility", isSpeaker ? "visible" : "hidden");
|
|
};
|
|
|
|
export default SmallVideo;
|