+ ,
+ statusBarContainer);
}
-};
-/**
- * Queries the component's DOM for the element that should be the parent to the
- * AudioLevelIndicator.
- *
- * @returns {HTMLElement} The DOM element that holds the AudioLevelIndicator.
- */
-SmallVideo.prototype._getAudioLevelContainer = function() {
- return this.container.querySelector('.audioindicator-container');
-};
+ /**
+ * Adds the element indicating the moderator(owner) of the conference.
+ */
+ addModeratorIndicator() {
+ this._isModerator = true;
+ this.updateStatusBar();
+ }
-/**
- * Removes the element indicating the moderator(owner) of the conference.
- */
-SmallVideo.prototype.removeModeratorIndicator = function() {
- this._isModerator = false;
- this.updateStatusBar();
-};
+ /**
+ * Adds the element indicating the audio level of the participant.
+ *
+ * @returns {void}
+ */
+ addAudioLevelIndicator() {
+ let audioLevelContainer = this._getAudioLevelContainer();
-/**
- * This is an especially interesting function. A naive reader might think that
- * it returns this SmallVideo's "video" element. But it is much more exciting.
- * It first finds this video's parent element using jquery, then uses a utility
- * from lib-jitsi-meet to extract the video element from it (with two more
- * jquery calls), and finally uses jquery again to encapsulate the video element
- * in an array. This last step allows (some might prefer "forces") users of
- * this function to access the video element via the 0th element of the returned
- * array (after checking its length of course!).
- */
-SmallVideo.prototype.selectVideoElement = function() {
- return $($(this.container).find('video')[0]);
-};
+ if (audioLevelContainer) {
+ return;
+ }
-/**
- * Selects the HTML image element which displays user's avatar.
- *
- * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
- * element which displays the user's avatar.
- */
-SmallVideo.prototype.$avatar = function() {
- return this.$container.find('.avatar-container');
-};
+ audioLevelContainer = document.createElement('span');
+ audioLevelContainer.className = 'audioindicator-container';
+ this.container.appendChild(audioLevelContainer);
+ this.updateAudioLevelIndicator();
+ }
-/**
- * Returns the display name element, which appears on the video thumbnail.
- *
- * @return {jQuery} a jQuery selector pointing to the display name element of
- * the video thumbnail
- */
-SmallVideo.prototype.$displayName = function() {
- return this.$container.find('.displayNameContainer');
-};
+ /**
+ * Removes the element indicating the audio level of the participant.
+ *
+ * @returns {void}
+ */
+ removeAudioLevelIndicator() {
+ const audioLevelContainer = this._getAudioLevelContainer();
-/**
- * Creates or updates the participant's display name that is shown over the
- * video preview.
- *
- * @param {Object} props - The React {@code Component} props to pass into the
- * {@code DisplayName} component.
- * @returns {void}
- */
-SmallVideo.prototype._renderDisplayName = function(props) {
- const displayNameContainer
- = this.container.querySelector('.displayNameContainer');
+ if (audioLevelContainer) {
+ ReactDOM.unmountComponentAtNode(audioLevelContainer);
+ }
+ }
+
+ /**
+ * Updates the audio level for this small video.
+ *
+ * @param lvl the new audio level to set
+ * @returns {void}
+ */
+ updateAudioLevelIndicator(lvl = 0) {
+ const audioLevelContainer = this._getAudioLevelContainer();
+
+ if (audioLevelContainer) {
+ ReactDOM.render(, audioLevelContainer);
+ }
+ }
+
+ /**
+ * Queries the component's DOM for the element that should be the parent to the
+ * AudioLevelIndicator.
+ *
+ * @returns {HTMLElement} The DOM element that holds the AudioLevelIndicator.
+ */
+ _getAudioLevelContainer() {
+ return this.container.querySelector('.audioindicator-container');
+ }
+
+ /**
+ * Removes the element indicating the moderator(owner) of the conference.
+ */
+ removeModeratorIndicator() {
+ this._isModerator = false;
+ this.updateStatusBar();
+ }
+
+ /**
+ * This is an especially interesting function. A naive reader might think that
+ * it returns this SmallVideo's "video" element. But it is much more exciting.
+ * It first finds this video's parent element using jquery, then uses a utility
+ * from lib-jitsi-meet to extract the video element from it (with two more
+ * jquery calls), and finally uses jquery again to encapsulate the video element
+ * in an array. This last step allows (some might prefer "forces") users of
+ * this function to access the video element via the 0th element of the returned
+ * array (after checking its length of course!).
+ */
+ selectVideoElement() {
+ return $($(this.container).find('video')[0]);
+ }
+
+ /**
+ * Selects the HTML image element which displays user's avatar.
+ *
+ * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
+ * element which displays the user's avatar.
+ */
+ $avatar() {
+ return this.$container.find('.avatar-container');
+ }
+
+ /**
+ * Returns the display name element, which appears on the video thumbnail.
+ *
+ * @return {jQuery} a jQuery selector pointing to the display name element of
+ * the video thumbnail
+ */
+ $displayName() {
+ return this.$container.find('.displayNameContainer');
+ }
+
+ /**
+ * Creates or updates the participant's display name that is shown over the
+ * video preview.
+ *
+ * @param {Object} props - The React {@code Component} props to pass into the
+ * {@code DisplayName} component.
+ * @returns {void}
+ */
+ _renderDisplayName(props) {
+ const displayNameContainer = this.container.querySelector('.displayNameContainer');
+
+ if (displayNameContainer) {
+ ReactDOM.render(
+
+
+
+
+ ,
+ displayNameContainer);
+ }
+ }
+
+ /**
+ * Removes the component responsible for showing the participant's display name,
+ * if its container is present.
+ *
+ * @returns {void}
+ */
+ removeDisplayName() {
+ const displayNameContainer = this.container.querySelector('.displayNameContainer');
+
+ if (displayNameContainer) {
+ ReactDOM.unmountComponentAtNode(displayNameContainer);
+ }
+ }
+
+ /**
+ * Enables / disables the css responsible for focusing/pinning a video
+ * thumbnail.
+ *
+ * @param isFocused indicates if the thumbnail should be focused/pinned or not
+ */
+ focus(isFocused) {
+ const focusedCssClass = 'videoContainerFocused';
+ const isFocusClassEnabled = this.$container.hasClass(focusedCssClass);
+
+ if (!isFocused && isFocusClassEnabled) {
+ this.$container.removeClass(focusedCssClass);
+ } else if (isFocused && !isFocusClassEnabled) {
+ this.$container.addClass(focusedCssClass);
+ }
+ }
+
+ /**
+ *
+ */
+ hasVideo() {
+ return this.selectVideoElement().length !== 0;
+ }
+
+ /**
+ * Checks whether the user associated with this SmallVideo is currently
+ * being displayed on the "large video".
+ *
+ * @return {boolean} true if the user is displayed on the large video
+ * or false otherwise.
+ */
+ isCurrentlyOnLargeVideo() {
+ return this.VideoLayout.isCurrentlyOnLarge(this.id);
+ }
+
+ /**
+ * Checks whether there is a playable video stream available for the user
+ * associated with this SmallVideo.
+ *
+ * @return {boolean} true if there is a playable video stream available
+ * or false otherwise.
+ */
+ isVideoPlayable() {
+ return this.videoStream && !this.isVideoMuted && !APP.conference.isAudioOnly();
+ }
+
+ /**
+ * Determines what should be display on the thumbnail.
+ *
+ * @return {number} one of DISPLAY_VIDEO,DISPLAY_AVATAR
+ * or DISPLAY_BLACKNESS_WITH_NAME.
+ */
+ selectDisplayMode(input) {
+ // Display name is always and only displayed when user is on the stage
+ if (input.isCurrentlyOnLargeVideo && !input.tileViewEnabled) {
+ return input.isVideoPlayable && !input.isAudioOnly ? DISPLAY_BLACKNESS_WITH_NAME : DISPLAY_AVATAR_WITH_NAME;
+ } else if (input.isVideoPlayable && input.hasVideo && !input.isAudioOnly) {
+ // check hovering and change state to video with name
+ return input.isHovered ? DISPLAY_VIDEO_WITH_NAME : DISPLAY_VIDEO;
+ }
+
+ // check hovering and change state to avatar with name
+ return input.isHovered ? DISPLAY_AVATAR_WITH_NAME : DISPLAY_AVATAR;
+ }
+
+ /**
+ * Computes information that determine the display mode.
+ *
+ * @returns {Object}
+ */
+ computeDisplayModeInput() {
+ return {
+ isCurrentlyOnLargeVideo: this.isCurrentlyOnLargeVideo(),
+ isHovered: this._isHovered(),
+ isAudioOnly: APP.conference.isAudioOnly(),
+ tileViewEnabled: shouldDisplayTileView(APP.store.getState()),
+ isVideoPlayable: this.isVideoPlayable(),
+ hasVideo: Boolean(this.selectVideoElement().length),
+ connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
+ mutedWhileDisconnected: this.mutedWhileDisconnected,
+ wasVideoPlayed: this.wasVideoPlayed,
+ videoStream: Boolean(this.videoStream),
+ isVideoMuted: this.isVideoMuted,
+ videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
+ };
+ }
+
+ /**
+ * Checks whether current video is considered hovered. Currently it is hovered
+ * if the mouse is over the video, or if the connection
+ * indicator is shown(hovered).
+ * @private
+ */
+ _isHovered() {
+ return this.videoIsHovered || this._popoverIsHovered;
+ }
+
+ /**
+ * 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.
+ */
+ updateView() {
+ if (this.id) {
+ // Init / refresh avatar
+ this.initializeAvatar();
+ } else {
+ logger.error('Unable to init avatar - no id', this);
+
+ return;
+ }
+
+ this.$container.removeClass((index, classNames) =>
+ classNames.split(' ').filter(name => name.startsWith('display-')));
+
+ const oldDisplayMode = this.displayMode;
+ let displayModeString = '';
+
+ const displayModeInput = this.computeDisplayModeInput();
+
+ // Determine whether video, avatar or blackness should be displayed
+ this.displayMode = this.selectDisplayMode(displayModeInput);
+
+ switch (this.displayMode) {
+ case DISPLAY_AVATAR_WITH_NAME:
+ displayModeString = 'avatar-with-name';
+ this.$container.addClass('display-avatar-with-name');
+ break;
+ case DISPLAY_BLACKNESS_WITH_NAME:
+ displayModeString = 'blackness-with-name';
+ this.$container.addClass('display-name-on-black');
+ break;
+ case DISPLAY_VIDEO:
+ displayModeString = 'video';
+ this.$container.addClass('display-video');
+ break;
+ case DISPLAY_VIDEO_WITH_NAME:
+ displayModeString = 'video-with-name';
+ this.$container.addClass('display-name-on-video');
+ break;
+ case DISPLAY_AVATAR:
+ default:
+ displayModeString = 'avatar';
+ this.$container.addClass('display-avatar-only');
+ break;
+ }
+
+ if (this.displayMode !== oldDisplayMode) {
+ logger.debug(`Displaying ${displayModeString} for ${this.id}, data: [${JSON.stringify(displayModeInput)}]`);
+ }
+ }
+
+ /**
+ * Updates the react component displaying the avatar with the passed in avatar
+ * url.
+ *
+ * @returns {void}
+ */
+ initializeAvatar() {
+ const thumbnail = this.$avatar().get(0);
+
+ this.hasAvatar = true;
+
+ if (thumbnail) {
+ // Maybe add a special case for local participant, as on init of
+ // LocalVideo.js the id is set to "local" but will get updated later.
+ ReactDOM.render(
+
+
+ ,
+ thumbnail
+ );
+ }
+ }
+
+ /**
+ * Unmounts any attached react components (particular the avatar image) from
+ * the avatar container.
+ *
+ * @returns {void}
+ */
+ removeAvatar() {
+ const thumbnail = this.$avatar().get(0);
+
+ if (thumbnail) {
+ ReactDOM.unmountComponentAtNode(thumbnail);
+ }
+ }
+
+ /**
+ * Shows or hides the dominant speaker indicator.
+ * @param show whether to show or hide.
+ */
+ showDominantSpeakerIndicator(show) {
+ // Don't create and show dominant speaker indicator if
+ // DISABLE_DOMINANT_SPEAKER_INDICATOR is true
+ if (interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR) {
+ return;
+ }
+
+ if (!this.container) {
+ logger.warn(`Unable to set dominant speaker indicator - ${this.videoSpanId} does not exist`);
+
+ return;
+ }
+ if (this._showDominantSpeaker === show) {
+ return;
+ }
+
+ this._showDominantSpeaker = show;
+ this.$container.toggleClass('active-speaker', this._showDominantSpeaker);
+ this.updateIndicators();
+ this.updateView();
+ }
+
+ /**
+ * Shows or hides the raised hand indicator.
+ * @param show whether to show or hide.
+ */
+ showRaisedHandIndicator(show) {
+ if (!this.container) {
+ logger.warn(`Unable to raised hand indication - ${
+ this.videoSpanId} does not exist`);
+
+ return;
+ }
+
+ this._showRaisedHand = show;
+ this.updateIndicators();
+ }
+
+ /**
+ * Adds a listener for onresize events for this video, which will monitor for
+ * resolution changes, will calculate the delay since the moment the listened
+ * is added, and will fire a RESOLUTION_CHANGED event.
+ */
+ waitForResolutionChange() {
+ const beforeChange = window.performance.now();
+ const videos = this.selectVideoElement();
+
+ if (!videos || !videos.length || videos.length <= 0) {
+ return;
+ }
+ const video = videos[0];
+ const oldWidth = video.videoWidth;
+ const oldHeight = video.videoHeight;
+
+ video.onresize = () => {
+ // eslint-disable-next-line eqeqeq
+ if (video.videoWidth != oldWidth || video.videoHeight != oldHeight) {
+ // Only run once.
+ video.onresize = null;
+
+ const delay = window.performance.now() - beforeChange;
+ const emitter = this.VideoLayout.getEventEmitter();
+
+ if (emitter) {
+ emitter.emit(UIEvents.RESOLUTION_CHANGED, this.getId(), `${oldWidth}x${oldHeight}`,
+ `${video.videoWidth}x${video.videoHeight}`, delay);
+ }
+ }
+ };
+ }
+
+ /**
+ * Initalizes any browser specific properties. Currently sets the overflow
+ * property for Qt browsers on Windows to hidden, thus fixing the following
+ * problem:
+ * 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.
+ *
+ * Setting this property for all browsers will result in broken audio levels,
+ * which makes this a temporary solution, before reworking audio levels.
+ */
+ initBrowserSpecificProperties() {
+ const userAgent = window.navigator.userAgent;
+
+ if (userAgent.indexOf('QtWebEngine') > -1
+ && (userAgent.indexOf('Windows') > -1 || userAgent.indexOf('Linux') > -1)) {
+ this.$container.css('overflow', 'hidden');
+ }
+ }
+
+ /**
+ * Cleans up components on {@code SmallVideo} and removes itself from the DOM.
+ *
+ * @returns {void}
+ */
+ remove() {
+ logger.log('Remove thumbnail', this.id);
+ this.removeAudioLevelIndicator();
+
+ const toolbarContainer
+ = this.container.querySelector('.videocontainer__toolbar');
+
+ if (toolbarContainer) {
+ ReactDOM.unmountComponentAtNode(toolbarContainer);
+ }
+
+ this.removeConnectionIndicator();
+ this.removeDisplayName();
+ this.removeAvatar();
+ this._unmountIndicators();
+
+ // Remove whole container
+ if (this.container.parentNode) {
+ this.container.parentNode.removeChild(this.container);
+ }
+ }
+
+ /**
+ * Helper function for re-rendering multiple react components of the small
+ * video.
+ *
+ * @returns {void}
+ */
+ rerender() {
+ this.updateIndicators();
+ this.updateStatusBar();
+ this.updateView();
+ }
+
+ /**
+ * Updates the React element responsible for showing connection status, dominant
+ * speaker, and raised hand icons. Uses instance variables to get the necessary
+ * state to display. Will create the React element if not already created.
+ *
+ * @private
+ * @returns {void}
+ */
+ updateIndicators() {
+ const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
+
+ if (!indicatorToolbar) {
+ return;
+ }
+
+ const iconSize = UIUtil.getIndicatorFontSize();
+ const showConnectionIndicator = this.videoIsHovered || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
+ const state = APP.store.getState();
+ const currentLayout = getCurrentLayout(state);
+ const participantCount = getParticipantCount(state);
+ let statsPopoverPosition, tooltipPosition;
+
+ if (currentLayout === LAYOUTS.TILE_VIEW) {
+ statsPopoverPosition = 'right top';
+ tooltipPosition = 'right';
+ } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+ statsPopoverPosition = this.statsPopoverLocation;
+ tooltipPosition = 'left';
+ } else {
+ statsPopoverPosition = this.statsPopoverLocation;
+ tooltipPosition = 'top';
+ }
- if (displayNameContainer) {
ReactDOM.render(
-
+