/* global $, config, interfaceConfig, APP */ /* eslint-disable no-unused-vars */ import React, { Component } from 'react'; import ReactDOM from 'react-dom'; import { Provider } from 'react-redux'; import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet'; import { VideoTrack } from '../../../react/features/base/media'; /* eslint-enable no-unused-vars */ const logger = require('jitsi-meet-logger').getLogger(__filename); import UIEvents from '../../../service/UI/UIEvents'; import SmallVideo from './SmallVideo'; /** * */ function LocalVideo(VideoLayout, emitter) { this.videoSpanId = 'localVideoContainer'; this.container = this.createContainer(); this.$container = $(this.container); $('#filmstripLocalVideo').append(this.container); this.localVideoId = null; this.bindHoverHandler(); if (config.enableLocalVideoFlip) { this._buildContextMenu(); } this.isLocal = true; this.emitter = emitter; this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP ? 'left top' : 'top center'; Object.defineProperty(this, 'id', { get() { return APP.conference.getMyUserId(); } }); this.initBrowserSpecificProperties(); SmallVideo.call(this, VideoLayout); // Set default display name. this.setDisplayName(); this.addAudioLevelIndicator(); this.updateIndicators(); } LocalVideo.prototype = Object.create(SmallVideo.prototype); LocalVideo.prototype.constructor = LocalVideo; LocalVideo.prototype.createContainer = function() { const containerSpan = document.createElement('span'); containerSpan.classList.add('videocontainer'); containerSpan.id = this.videoSpanId; containerSpan.innerHTML = `
`; return containerSpan; }; /** * Sets the display name for the given video span id. */ LocalVideo.prototype.setDisplayName = function(displayName) { if (!this.container) { logger.warn( `Unable to set displayName - ${this.videoSpanId } does not exist`); return; } this.updateDisplayName({ allowEditing: true, displayName, displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME, elementID: 'localDisplayName', participantID: this.id }); }; LocalVideo.prototype.changeVideo = function(stream) { this.videoStream = stream; const localVideoClick = event => { // TODO Checking the classes is a workround to allow events to bubble // into the DisplayName component if it was clicked. React's synthetic // events will fire after jQuery handlers execute, so stop propogation // at this point will prevent DisplayName from getting click events. // This workaround should be removeable once LocalVideo is a React // Component because then the components share the same eventing system. const $source = $(event.target || event.srcElement); const { classList } = event.target; const clickedOnDisplayName = $source.parents('.displayNameContainer').length > 0; const clickedOnPopover = $source.parents('.connection-info').length > 0; const clickedOnPopoverTrigger = $source.parents('.popover-trigger').length > 0 || classList.contains('popover-trigger'); const ignoreClick = clickedOnDisplayName || clickedOnPopoverTrigger || clickedOnPopover; // FIXME: with Temasys plugin event arg is not an event, but // the clicked object itself, so we have to skip this call if (event.stopPropagation && !ignoreClick) { event.stopPropagation(); } if (!ignoreClick) { this.VideoLayout.handleVideoThumbClicked(this.id); } }; this.$container.off('click'); this.$container.on('click', localVideoClick); this.localVideoId = `localVideo_${stream.getId()}`; const localVideoContainer = document.getElementById('localVideoWrapper'); ReactDOM.render(