/* global $, APP, interfaceConfig */
import ConnectionIndicator from './ConnectionIndicator';
import SmallVideo from "./SmallVideo";
import AudioLevels from "../audio_levels/AudioLevels";
import UIUtils from "../util/UIUtil";
import UIEvents from '../../../service/UI/UIEvents';
function RemoteVideo(id, VideoLayout, emitter) {
this.id = id;
this.emitter = emitter;
this.videoSpanId = `participant_${id}`;
SmallVideo.call(this, VideoLayout);
this.addRemoteVideoContainer();
this.connectionIndicator = new ConnectionIndicator(this, id);
this.setDisplayName();
this.bindHoverHandler();
this.flipX = false;
this.isLocal = false;
}
RemoteVideo.prototype = Object.create(SmallVideo.prototype);
RemoteVideo.prototype.constructor = RemoteVideo;
RemoteVideo.prototype.addRemoteVideoContainer = function() {
this.container = RemoteVideo.createContainer(this.videoSpanId);
if (APP.conference.isModerator) {
this.addRemoteVideoMenu();
}
let {thumbWidth, thumbHeight} = this.VideoLayout.resizeThumbnails();
AudioLevels.updateAudioLevelCanvas(this.id, thumbWidth, thumbHeight);
return this.container;
};
/**
* Adds the remote video menu element for the given id in the
* given parentElement.
*
* @param id the id indicating the video for which we're adding a menu.
* @param parentElement the parent element where this menu will be added
*/
if (!interfaceConfig.filmStripOnly) {
RemoteVideo.prototype.addRemoteVideoMenu = function () {
var spanElement = document.createElement('span');
spanElement.className = 'remotevideomenu';
this.container.appendChild(spanElement);
var menuElement = document.createElement('i');
menuElement.className = 'fa fa-angle-down';
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 = "";
if (!this.isMuted) {
muteLinkItem.innerHTML = mutedIndicator +
" ";
muteLinkItem.className = 'mutelink';
}
else {
muteLinkItem.innerHTML = mutedIndicator +
" ";
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 +
" ";
this.className = 'mutelink disabled';
}
else {
this.innerHTML = mutedIndicator +
" ";
this.className = 'mutelink';
}
};
muteMenuItem.appendChild(muteLinkItem);
popupmenuElement.appendChild(muteMenuItem);
var ejectIndicator = "";
var ejectMenuItem = document.createElement('li');
var ejectLinkItem = document.createElement('a');
var ejectText = "
";
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"));
};
} else {
RemoteVideo.prototype.addRemoteVideoMenu = function() {};
}
/**
* Removes the remote stream element corresponding to the given stream and
* parent container.
*
* @param stream the MediaStream
* @param isVideo true if given stream is a video one.
*/
RemoteVideo.prototype.removeRemoteStreamElement = function (stream) {
if (!this.container)
return false;
var isVideo = stream.isVideoTrack();
var elementID = SmallVideo.getStreamElementID(stream);
var select = $('#' + elementID);
select.remove();
console.info((isVideo ? "Video" : "Audio") +
" removed " + this.id, select);
// when removing only the video element and we are on stage
// update the stage
if (isVideo && this.VideoLayout.isCurrentlyOnLarge(this.id))
this.VideoLayout.updateLargeVideo(this.id);
};
/**
* Removes RemoteVideo from the page.
*/
RemoteVideo.prototype.remove = function () {
console.log("Remove thumbnail", this.id);
this.removeConnectionIndicator();
// Make sure that the large video is updated if are removing its
// corresponding small video.
this.VideoLayout.updateAfterThumbRemoved(this.id);
// Remove whole container
if (this.container.parentNode) {
this.container.parentNode.removeChild(this.container);
}
};
RemoteVideo.prototype.waitForPlayback = function (streamElement, stream) {
var webRtcStream = stream.getOriginalStream();
var isVideo = stream.isVideoTrack();
if (!isVideo || webRtcStream.id === 'mixedmslabel') {
return;
}
var self = this;
// Register 'onplaying' listener to trigger 'videoactive' on VideoLayout
// when video playback starts
var onPlayingHandler = function () {
self.VideoLayout.videoactive(streamElement, self.id);
streamElement.onplaying = null;
};
streamElement.onplaying = onPlayingHandler;
};
/**
* Checks whether or not video stream exists and has started for this
* RemoteVideo instance. This is checked by trying to select video element in
* this container and checking if 'currentTime' field's value is greater than 0.
*
* @returns {*|boolean} true if this RemoteVideo has active video stream running
*/
RemoteVideo.prototype.hasVideoStarted = function () {
var videoSelector = this.selectVideoElement();
return videoSelector.length && videoSelector[0].currentTime > 0;
};
RemoteVideo.prototype.addRemoteStreamElement = function (stream) {
if (!this.container) {
return;
}
let isVideo = stream.isVideoTrack();
isVideo ? this.videoStream = stream : this.audioStream = stream;
// Add click handler.
let onClickHandler = (event) => {
let source = event.target || event.srcElement;
// ignore click if it was done in popup menu
if ($(source).parents('.popupmenu').length === 0) {
this.VideoLayout.handleVideoThumbClicked(this.id);
}
// On IE we need to populate this handler on video