fix(thumbnails): es6 support & cleanup.

modules/UI/UI.js

@@ -699,10 +699,6 @@ UI.showExtensionInlineInstallationDialog = function(callback) {
     });
 };
 
-UI.updateDevicesAvailability = function(id, devices) {
-    VideoLayout.setDeviceAvailabilityIcons(id, devices);
-};
-
 /**
  * Show shared video.
  * @param {string} id the id of the sender of the command

modules/UI/shared_video/SharedVideoThumb.js

@@ -7,77 +7,83 @@ const logger = require('jitsi-meet-logger').getLogger(__filename);
 /**
  *
  */
-export default function SharedVideoThumb(participant, videoType, VideoLayout) {
-    this.id = participant.id;
+export default class SharedVideoThumb extends SmallVideo {
+    /**
+     *
+     * @param {*} participant
+     * @param {*} videoType
+     * @param {*} VideoLayout
+     */
+    constructor(participant, videoType, VideoLayout) {
+        super(VideoLayout);
+        this.id = participant.id;
 
-    this.url = participant.id;
-    this.setVideoType(videoType);
-    this.videoSpanId = 'sharedVideoContainer';
-    this.container = this.createContainer(this.videoSpanId);
-    this.$container = $(this.container);
+        this.url = participant.id;
+        this.setVideoType(videoType);
+        this.videoSpanId = 'sharedVideoContainer';
+        this.container = this.createContainer(this.videoSpanId);
+        this.$container = $(this.container);
 
-    this.bindHoverHandler();
-    SmallVideo.call(this, VideoLayout);
-    this.isVideoMuted = true;
-    this.updateDisplayName();
+        this.bindHoverHandler();
+        this.isVideoMuted = true;
+        this.updateDisplayName();
 
-    this.container.onclick = this._onContainerClick;
-}
-SharedVideoThumb.prototype = Object.create(SmallVideo.prototype);
-SharedVideoThumb.prototype.constructor = SharedVideoThumb;
-
-/**
- * hide display name
- */
-// eslint-disable-next-line no-empty-function
-SharedVideoThumb.prototype.setDeviceAvailabilityIcons = function() {};
-
-// eslint-disable-next-line no-empty-function
-SharedVideoThumb.prototype.initializeAvatar = function() {};
-
-SharedVideoThumb.prototype.createContainer = function(spanId) {
-    const container = document.createElement('span');
-
-    container.id = spanId;
-    container.className = 'videocontainer';
-
-    // add the avatar
-    const avatar = document.createElement('img');
-
-    avatar.className = 'sharedVideoAvatar';
-    avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
-    container.appendChild(avatar);
-
-    const displayNameContainer = document.createElement('div');
-
-    displayNameContainer.className = 'displayNameContainer';
-    container.appendChild(displayNameContainer);
-
-    const remoteVideosContainer
-        = document.getElementById('filmstripRemoteVideosContainer');
-    const localVideoContainer
-        = document.getElementById('localVideoTileViewContainer');
-
-    remoteVideosContainer.insertBefore(container, localVideoContainer);
-
-    return container;
-};
-
-/**
- * Triggers re-rendering of the display name using current instance state.
- *
- * @returns {void}
- */
-SharedVideoThumb.prototype.updateDisplayName = function() {
-    if (!this.container) {
-        logger.warn(`Unable to set displayName - ${this.videoSpanId
-        } does not exist`);
-
-        return;
+        this.container.onclick = this._onContainerClick;
     }
 
-    this._renderDisplayName({
-        elementID: `${this.videoSpanId}_name`,
-        participantID: this.id
-    });
-};
+    /**
+     *
+     */
+    initializeAvatar() {} // eslint-disable-line no-empty-function
+
+    /**
+     *
+     * @param {*} spanId
+     */
+    createContainer(spanId) {
+        const container = document.createElement('span');
+
+        container.id = spanId;
+        container.className = 'videocontainer';
+
+        // add the avatar
+        const avatar = document.createElement('img');
+
+        avatar.className = 'sharedVideoAvatar';
+        avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
+        container.appendChild(avatar);
+
+        const displayNameContainer = document.createElement('div');
+
+        displayNameContainer.className = 'displayNameContainer';
+        container.appendChild(displayNameContainer);
+
+        const remoteVideosContainer
+            = document.getElementById('filmstripRemoteVideosContainer');
+        const localVideoContainer
+            = document.getElementById('localVideoTileViewContainer');
+
+        remoteVideosContainer.insertBefore(container, localVideoContainer);
+
+        return container;
+    }
+
+    /**
+     * Triggers re-rendering of the display name using current instance state.
+     *
+     * @returns {void}
+     */
+    updateDisplayName() {
+        if (!this.container) {
+            logger.warn(`Unable to set displayName - ${this.videoSpanId
+            } does not exist`);
+
+            return;
+        }
+
+        this._renderDisplayName({
+            elementID: `${this.videoSpanId}_name`,
+            participantID: this.id
+        });
+    }
+}

modules/UI/videolayout/Filmstrip.js

@@ -64,11 +64,9 @@ const Filmstrip = {
             return this._calculateThumbnailSizeForTileView();
         }
 
-        const availableSizes = this.calculateAvailableSize();
-        const width = availableSizes.availableWidth;
-        const height = availableSizes.availableHeight;
+        const { availableWidth, availableHeight } = this.calculateAvailableSize();
 
-        return this.calculateThumbnailSizeFromAvailable(width, height);
+        return this.calculateThumbnailSizeFromAvailable(availableWidth, availableHeight);
     },
 
     /**
@@ -80,8 +78,7 @@ const Filmstrip = {
     calculateAvailableSize() {
         const state = APP.store.getState();
         const currentLayout = getCurrentLayout(state);
-        const isHorizontalFilmstripView
-            = currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
+        const isHorizontalFilmstripView = currentLayout === LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW;
 
         /**
          * If the videoAreaAvailableWidth is set we use this one to calculate
@@ -100,7 +97,6 @@ const Filmstrip = {
 
         let availableHeight = interfaceConfig.FILM_STRIP_MAX_HEIGHT;
         let availableWidth = videoAreaAvailableWidth;
-
         const thumbs = this.getThumbs(true);
 
         // If local thumb is not hidden
@@ -149,15 +145,11 @@ const Filmstrip = {
             );
         }
 
-        const maxHeight
-
             // If the MAX_HEIGHT property hasn't been specified
             // we have the static value.
-            = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120,
-            availableHeight);
+        const maxHeight = Math.min(interfaceConfig.FILM_STRIP_MAX_HEIGHT || 120, availableHeight);
 
-        availableHeight
-            = Math.min(maxHeight, window.innerHeight - 18);
+        availableHeight = Math.min(maxHeight, window.innerHeight - 18);
 
         return {
             availableHeight,
@@ -239,13 +231,10 @@ const Filmstrip = {
          * availableHeight/h > availableWidth/totalWidth otherwise 2) is true
          */
 
-        const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP
-            ? 0 : this.getThumbs(true).remoteThumbs.length;
-        const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO
-            / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
-        const lW = Math.min(availableWidth
-            / ((remoteLocalWidthRatio * remoteThumbsInRow) + 1), availableHeight
-            * interfaceConfig.LOCAL_THUMBNAIL_RATIO);
+        const remoteThumbsInRow = interfaceConfig.VERTICAL_FILMSTRIP ? 0 : this.getThumbs(true).remoteThumbs.length;
+        const remoteLocalWidthRatio = interfaceConfig.REMOTE_THUMBNAIL_RATIO / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
+        const lW = Math.min(availableWidth / ((remoteLocalWidthRatio * remoteThumbsInRow) + 1),
+            availableHeight * interfaceConfig.LOCAL_THUMBNAIL_RATIO);
         const h = lW / interfaceConfig.LOCAL_THUMBNAIL_RATIO;
 
         const remoteVideoWidth = lW * remoteLocalWidthRatio;
@@ -333,18 +322,12 @@ const Filmstrip = {
         if (shouldDisplayTileView(state)) {
             // The size of the side margins for each tile as set in CSS.
             const sideMargins = 10 * 2;
-            const {
-                columns,
-                rows
-            } = getTileViewGridDimensions(state, getMaxColumnCount());
+            const { columns, rows } = getTileViewGridDimensions(state, getMaxColumnCount());
             const hasOverflow = rows > columns;
 
             // Width is set so that the flex layout can automatically wrap
             // tiles onto new rows.
-            this.filmstripRemoteVideos.css({
-                width: (local.thumbWidth * columns) + (columns * sideMargins)
-            });
-
+            this.filmstripRemoteVideos.css({ width: (local.thumbWidth * columns) + (columns * sideMargins) });
             this.filmstripRemoteVideos.toggleClass('has-overflow', hasOverflow);
         } else {
             this.filmstripRemoteVideos.css('width', '');

modules/UI/videolayout/LocalVideo.js

@@ -20,260 +20,264 @@ import SmallVideo from './SmallVideo';
 /**
  *
  */
-function LocalVideo(VideoLayout, emitter, streamEndedCallback) {
-    this.videoSpanId = 'localVideoContainer';
-    this.streamEndedCallback = streamEndedCallback;
-    this.container = this.createContainer();
-    this.$container = $(this.container);
-    this.updateDOMLocation();
+export default class LocalVideo extends SmallVideo {
+    /**
+     *
+     * @param {*} VideoLayout
+     * @param {*} emitter
+     * @param {*} streamEndedCallback
+     */
+    constructor(VideoLayout, emitter, streamEndedCallback) {
+        super(VideoLayout);
+        this.videoSpanId = 'localVideoContainer';
+        this.streamEndedCallback = streamEndedCallback;
+        this.container = this.createContainer();
+        this.$container = $(this.container);
+        this.updateDOMLocation();
 
-    this.localVideoId = null;
-    this.bindHoverHandler();
-    if (!config.disableLocalVideoFlip) {
-        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.localVideoId = null;
+        this.bindHoverHandler();
+        if (!config.disableLocalVideoFlip) {
+            this._buildContextMenu();
         }
-    });
-    this.initBrowserSpecificProperties();
+        this.isLocal = true;
+        this.emitter = emitter;
+        this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP
+            ? 'left top' : 'top center';
 
-    SmallVideo.call(this, VideoLayout);
+        Object.defineProperty(this, 'id', {
+            get() {
+                return APP.conference.getMyUserId();
+            }
+        });
+        this.initBrowserSpecificProperties();
 
-    // Set default display name.
-    this.updateDisplayName();
+        // Set default display name.
+        this.updateDisplayName();
 
-    // Initialize the avatar display with an avatar url selected from the redux
-    // state. Redux stores the local user with a hardcoded participant id of
-    // 'local' if no id has been assigned yet.
-    this.initializeAvatar();
+        // Initialize the avatar display with an avatar url selected from the redux
+        // state. Redux stores the local user with a hardcoded participant id of
+        // 'local' if no id has been assigned yet.
+        this.initializeAvatar();
 
-    this.addAudioLevelIndicator();
-    this.updateIndicators();
+        this.addAudioLevelIndicator();
+        this.updateIndicators();
 
-    this.container.onclick = this._onContainerClick;
-}
-
-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 = `
-        <div class = 'videocontainer__background'></div>
-        <span id = 'localVideoWrapper'></span>
-        <div class = 'videocontainer__toolbar'></div>
-        <div class = 'videocontainer__toptoolbar'></div>
-        <div class = 'videocontainer__hoverOverlay'></div>
-        <div class = 'displayNameContainer'></div>
-        <div class = 'avatar-container'></div>`;
-
-    return containerSpan;
-};
-
-/**
- * Triggers re-rendering of the display name using current instance state.
- *
- * @returns {void}
- */
-LocalVideo.prototype.updateDisplayName = function() {
-    if (!this.container) {
-        logger.warn(
-                `Unable to set displayName - ${this.videoSpanId
-                } does not exist`);
-
-        return;
+        this.container.onclick = this._onContainerClick;
     }
 
-    this._renderDisplayName({
-        allowEditing: APP.store.getState()['features/base/jwt'].isGuest,
-        displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
-        elementID: 'localDisplayName',
-        participantID: this.id
-    });
-};
+    /**
+     *
+     */
+    createContainer() {
+        const containerSpan = document.createElement('span');
 
-LocalVideo.prototype.changeVideo = function(stream) {
-    this.videoStream = stream;
+        containerSpan.classList.add('videocontainer');
+        containerSpan.id = this.videoSpanId;
 
-    this.localVideoId = `localVideo_${stream.getId()}`;
+        containerSpan.innerHTML = `
+            <div class = 'videocontainer__background'></div>
+            <span id = 'localVideoWrapper'></span>
+            <div class = 'videocontainer__toolbar'></div>
+            <div class = 'videocontainer__toptoolbar'></div>
+            <div class = 'videocontainer__hoverOverlay'></div>
+            <div class = 'displayNameContainer'></div>
+            <div class = 'avatar-container'></div>`;
 
-    this._updateVideoElement();
+        return containerSpan;
+    }
 
-    // eslint-disable-next-line eqeqeq
-    const isVideo = stream.videoType != 'desktop';
-    const settings = APP.store.getState()['features/base/settings'];
+    /**
+     * Triggers re-rendering of the display name using current instance state.
+     *
+     * @returns {void}
+     */
+    updateDisplayName() {
+        if (!this.container) {
+            logger.warn(
+                    `Unable to set displayName - ${this.videoSpanId
+                    } does not exist`);
 
-    this._enableDisableContextMenu(isVideo);
-    this.setFlipX(isVideo ? settings.localFlipX : false);
-
-    const endedHandler = () => {
-        const localVideoContainer
-            = document.getElementById('localVideoWrapper');
-
-        // Only remove if there is no video and not a transition state.
-        // Previous non-react logic created a new video element with each track
-        // removal whereas react reuses the video component so it could be the
-        // stream ended but a new one is being used.
-        if (localVideoContainer && this.videoStream.isEnded()) {
-            ReactDOM.unmountComponentAtNode(localVideoContainer);
+            return;
         }
 
-        this._notifyOfStreamEnded();
-        stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
+        this._renderDisplayName({
+            allowEditing: APP.store.getState()['features/base/jwt'].isGuest,
+            displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
+            elementID: 'localDisplayName',
+            participantID: this.id
+        });
+    }
+
+    /**
+     *
+     * @param {*} stream
+     */
+    changeVideo(stream) {
+        this.videoStream = stream;
+        this.localVideoId = `localVideo_${stream.getId()}`;
+        this._updateVideoElement();
+
+        // eslint-disable-next-line eqeqeq
+        const isVideo = stream.videoType != 'desktop';
+        const settings = APP.store.getState()['features/base/settings'];
+
+        this._enableDisableContextMenu(isVideo);
+        this.setFlipX(isVideo ? settings.localFlipX : false);
+
+        const endedHandler = () => {
+            const localVideoContainer
+                = document.getElementById('localVideoWrapper');
+
+            // Only remove if there is no video and not a transition state.
+            // Previous non-react logic created a new video element with each track
+            // removal whereas react reuses the video component so it could be the
+            // stream ended but a new one is being used.
+            if (localVideoContainer && this.videoStream.isEnded()) {
+                ReactDOM.unmountComponentAtNode(localVideoContainer);
+            }
+
+            this._notifyOfStreamEnded();
+            stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
+        };
+
+        stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
+    }
+
+    /**
+     * Notify any subscribers of the local video stream ending.
+     *
+     * @private
+     * @returns {void}
+     */
+    _notifyOfStreamEnded() {
+        if (this.streamEndedCallback) {
+            this.streamEndedCallback(this.id);
+        }
+    }
+
+    /**
+     * Shows or hides the local video container.
+     * @param {boolean} true to make the local video container visible, false
+     * otherwise
+     */
+    setVisible(visible) {
+        // We toggle the hidden class as an indication to other interested parties
+        // that this container has been hidden on purpose.
+        this.$container.toggleClass('hidden');
+
+        // We still show/hide it as we need to overwrite the style property if we
+        // want our action to take effect. Toggling the display property through
+        // the above css class didn't succeed in overwriting the style.
+        if (visible) {
+            this.$container.show();
+        } else {
+            this.$container.hide();
+        }
     };
 
-    stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
-};
-
-/**
- * Notify any subscribers of the local video stream ending.
- *
- * @private
- * @returns {void}
- */
-LocalVideo.prototype._notifyOfStreamEnded = function() {
-    if (this.streamEndedCallback) {
-        this.streamEndedCallback(this.id);
+    /**
+     * Sets the flipX state of the video.
+     * @param val {boolean} true for flipped otherwise false;
+     */
+    setFlipX(val) {
+        this.emitter.emit(UIEvents.LOCAL_FLIPX_CHANGED, val);
+        if (!this.localVideoId) {
+            return;
+        }
+        if (val) {
+            this.selectVideoElement().addClass('flipVideoX');
+        } else {
+            this.selectVideoElement().removeClass('flipVideoX');
+        }
     }
-};
 
-/**
- * Shows or hides the local video container.
- * @param {boolean} true to make the local video container visible, false
- * otherwise
- */
-LocalVideo.prototype.setVisible = function(visible) {
+    /**
+     * Builds the context menu for the local video.
+     */
+    _buildContextMenu() {
+        $.contextMenu({
+            selector: `#${this.videoSpanId}`,
+            zIndex: 10000,
+            items: {
+                flip: {
+                    name: 'Flip',
+                    callback: () => {
+                        const { store } = APP;
+                        const val = !store.getState()['features/base/settings']
+                        .localFlipX;
 
-    // We toggle the hidden class as an indication to other interested parties
-    // that this container has been hidden on purpose.
-    this.$container.toggleClass('hidden');
-
-    // We still show/hide it as we need to overwrite the style property if we
-    // want our action to take effect. Toggling the display property through
-    // the above css class didn't succeed in overwriting the style.
-    if (visible) {
-        this.$container.show();
-    } else {
-        this.$container.hide();
-    }
-};
-
-/**
- * Sets the flipX state of the video.
- * @param val {boolean} true for flipped otherwise false;
- */
-LocalVideo.prototype.setFlipX = function(val) {
-    this.emitter.emit(UIEvents.LOCAL_FLIPX_CHANGED, val);
-    if (!this.localVideoId) {
-        return;
-    }
-    if (val) {
-        this.selectVideoElement().addClass('flipVideoX');
-    } else {
-        this.selectVideoElement().removeClass('flipVideoX');
-    }
-};
-
-/**
- * Builds the context menu for the local video.
- */
-LocalVideo.prototype._buildContextMenu = function() {
-    $.contextMenu({
-        selector: `#${this.videoSpanId}`,
-        zIndex: 10000,
-        items: {
-            flip: {
-                name: 'Flip',
-                callback: () => {
-                    const { store } = APP;
-                    const val = !store.getState()['features/base/settings']
-                    .localFlipX;
-
-                    this.setFlipX(val);
-                    store.dispatch(updateSettings({
-                        localFlipX: val
-                    }));
+                        this.setFlipX(val);
+                        store.dispatch(updateSettings({
+                            localFlipX: val
+                        }));
+                    }
+                }
+            },
+            events: {
+                show(options) {
+                    options.items.flip.name
+                        = APP.translation.generateTranslationHTML(
+                            'videothumbnail.flip');
                 }
             }
-        },
-        events: {
-            show(options) {
-                options.items.flip.name
-                    = APP.translation.generateTranslationHTML(
-                        'videothumbnail.flip');
-            }
+        });
+    }
+
+    /**
+     * Enables or disables the context menu for the local video.
+     * @param enable {boolean} true for enable, false for disable
+     */
+    _enableDisableContextMenu(enable) {
+        if (this.$container.contextMenu) {
+            this.$container.contextMenu(enable);
         }
-    });
-};
-
-/**
- * Enables or disables the context menu for the local video.
- * @param enable {boolean} true for enable, false for disable
- */
-LocalVideo.prototype._enableDisableContextMenu = function(enable) {
-    if (this.$container.contextMenu) {
-        this.$container.contextMenu(enable);
-    }
-};
-
-/**
- * Places the {@code LocalVideo} in the DOM based on the current video layout.
- *
- * @returns {void}
- */
-LocalVideo.prototype.updateDOMLocation = function() {
-    if (!this.container) {
-        return;
     }
 
-    if (this.container.parentElement) {
-        this.container.parentElement.removeChild(this.container);
+    /**
+     * Places the {@code LocalVideo} in the DOM based on the current video layout.
+     *
+     * @returns {void}
+     */
+    updateDOMLocation() {
+        if (!this.container) {
+            return;
+        }
+        if (this.container.parentElement) {
+            this.container.parentElement.removeChild(this.container);
+        }
+
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
+
+        appendTarget && appendTarget.appendChild(this.container);
+        this._updateVideoElement();
     }
 
-    const appendTarget = shouldDisplayTileView(APP.store.getState())
-        ? document.getElementById('localVideoTileViewContainer')
-        : document.getElementById('filmstripLocalVideoThumbnail');
+    /**
+     * Renders the React Element for displaying video in {@code LocalVideo}.
+     *
+     */
+    _updateVideoElement() {
+        const localVideoContainer = document.getElementById('localVideoWrapper');
+        const videoTrack
+            = getLocalVideoTrack(APP.store.getState()['features/base/tracks']);
 
-    appendTarget && appendTarget.appendChild(this.container);
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <VideoTrack
+                    id = 'localVideo_container'
+                    videoTrack = { videoTrack } />
+            </Provider>,
+            localVideoContainer
+        );
 
-    this._updateVideoElement();
-};
+        // Ensure the video gets play() called on it. This may be necessary in the
+        // case where the local video container was moved and re-attached, in which
+        // case video does not autoplay.
+        const video = this.container.querySelector('video');
 
-/**
- * Renders the React Element for displaying video in {@code LocalVideo}.
- *
- */
-LocalVideo.prototype._updateVideoElement = function() {
-    const localVideoContainer = document.getElementById('localVideoWrapper');
-    const videoTrack
-        = getLocalVideoTrack(APP.store.getState()['features/base/tracks']);
-
-    ReactDOM.render(
-        <Provider store = { APP.store }>
-            <VideoTrack
-                id = 'localVideo_container'
-                videoTrack = { videoTrack } />
-        </Provider>,
-        localVideoContainer
-    );
-
-    // Ensure the video gets play() called on it. This may be necessary in the
-    // case where the local video container was moved and re-attached, in which
-    // case video does not autoplay.
-    const video = this.container.querySelector('video');
-
-    video && !config.testing?.noAutoPlayVideo && video.play();
-};
-
-export default LocalVideo;
+        video && !config.testing?.noAutoPlayVideo && video.play();
+    }
+}

modules/UI/videolayout/VideoLayout.js

@@ -166,27 +166,6 @@ const VideoLayout = {
         localVideoThumbnail.updateIndicators();
     },
 
-    /**
-     * Adds or removes icons for not available camera and microphone.
-     * @param resourceJid the jid of user
-     * @param devices available devices
-     */
-    setDeviceAvailabilityIcons(id, devices) {
-        if (APP.conference.isLocalId(id)) {
-            localVideoThumbnail.setDeviceAvailabilityIcons(devices);
-
-            return;
-        }
-
-        const video = remoteVideos[id];
-
-        if (!video) {
-            return;
-        }
-
-        video.setDeviceAvailabilityIcons(devices);
-    },
-
     /**
      * Shows/hides local video.
      * @param {boolean} true to make the local video visible, false - otherwise
@@ -411,27 +390,20 @@ const VideoLayout = {
     /**
      * Resizes thumbnails.
      */
-    resizeThumbnails(
-            forceUpdate = false,
-            onComplete = null) {
-        const { localVideo, remoteVideo }
-            = Filmstrip.calculateThumbnailSize();
+    resizeThumbnails(forceUpdate = false, onComplete = null) {
+        const { localVideo, remoteVideo } = Filmstrip.calculateThumbnailSize();
 
         Filmstrip.resizeThumbnails(localVideo, remoteVideo, forceUpdate);
 
         if (shouldDisplayTileView(APP.store.getState())) {
-            const height
-                = (localVideo && localVideo.thumbHeight)
-                || (remoteVideo && remoteVideo.thumbnHeight)
-                || 0;
+            const height = (localVideo && localVideo.thumbHeight) || (remoteVideo && remoteVideo.thumbnHeight) || 0;
             const qualityLevel = getNearestReceiverVideoQualityLevel(height);
 
             APP.store.dispatch(setMaxReceiverVideoQuality(qualityLevel));
         }
 
         localVideoThumbnail && localVideoThumbnail.rerender();
-        Object.values(remoteVideos).forEach(
-            remoteVideoThumbnail => remoteVideoThumbnail.rerender());
+        Object.values(remoteVideos).forEach(remoteVideoThumbnail => remoteVideoThumbnail.rerender());
 
         if (onComplete && typeof onComplete === 'function') {
             onComplete();

react/features/analytics/AnalyticsEvents.js

@@ -692,21 +692,6 @@ export function createSyncTrackStateEvent(mediaType, muted) {
     };
 }
 
-/**
- * Creates an event that indicates the thumbnail offset parent is null.
- *
- * @param {string} id - The id of the user related to the thumbnail.
- * @returns {Object} The event in a format suitable for sending via sendAnalytics.
- */
-export function createThumbnailOffsetParentIsNullEvent(id) {
-    return {
-        action: 'OffsetParentIsNull',
-        attributes: {
-            id
-        }
-    };
-}
-
 /**
  * Creates an event associated with a toolbar button being clicked/pressed. By
  * convention, where appropriate an attribute named 'enable' should be used to

static/load-test/load-test-participant.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+<head lang="en">
+    <meta charset="UTF-8">
+    <title></title>
+    <script src="../../libs/lib-jitsi-meet.min.js?v=139"></script>
+    <script src="libs/load-test-participant.min.js" ></script>
+</head>
+<body>
+    <div>Number of participants: <span id="participants">1</span></div>
+</body>
+</html>

static/load-test/load-test-participant.js

@@ -0,0 +1,261 @@
+/* global $, JitsiMeetJS */
+import 'jquery';
+import parseURLParams from '../../react/features/base/config/parseURLParams';
+
+const params = parseURLParams(window.location, false, 'hash');
+const { isHuman = false } = params;
+const {
+    roomName = 'loadtest0',
+    localAudio = isHuman,
+    localVideo = isHuman,
+    remoteVideo = isHuman,
+    remoteAudio = isHuman
+} = params;
+
+const options = {
+    hosts: {
+        domain: 'george-perf.jitsi.net',
+        muc: 'conference.george-perf.jitsi.net'
+    },
+    bosh: '//george-perf.jitsi.net/http-bind',
+
+    // The name of client node advertised in XEP-0115 'c' stanza
+    clientNode: 'http://jitsi.org/jitsimeet'
+};
+
+const confOptions = {
+    openBridgeChannel: 'websocket',
+    testing: {
+        testMode: true,
+        noAutoPlayVideo: true
+    },
+    disableNS: true,
+    disableAEC: true,
+    gatherStats: true,
+    callStatsID: false
+
+};
+
+let connection = null;
+
+let isJoined = false;
+
+let room = null;
+
+let numParticipants = 1;
+
+let localTracks = [];
+const remoteTracks = {};
+
+window.APP = {
+    get room() {
+        return room;
+    },
+    get connection() {
+        return connection;
+    },
+    get numParticipants() {
+        return numParticipants;
+    },
+    get localTracks() {
+        return localTracks;
+    },
+    get remoteTracks() {
+        return remoteTracks;
+    },
+    get params() {
+        return {
+            roomName,
+            localAudio,
+            localVideo,
+            remoteVideo,
+            remoteAudio
+        };
+    }
+};
+
+/**
+ *
+ */
+function setNumberOfParticipants() {
+    $('#participants').text(numParticipants);
+}
+
+/**
+ * Handles local tracks.
+ * @param tracks Array with JitsiTrack objects
+ */
+function onLocalTracks(tracks = []) {
+    localTracks = tracks;
+    for (let i = 0; i < localTracks.length; i++) {
+        if (localTracks[i].getType() === 'video') {
+            $('body').append(`<video autoplay='1' id='localVideo${i}' />`);
+            localTracks[i].attach($(`#localVideo${i}`)[0]);
+        } else {
+            $('body').append(
+                `<audio autoplay='1' muted='true' id='localAudio${i}' />`);
+            localTracks[i].attach($(`#localAudio${i}`)[0]);
+        }
+        if (isJoined) {
+            room.addTrack(localTracks[i]);
+        }
+    }
+}
+
+/**
+ * Handles remote tracks
+ * @param track JitsiTrack object
+ */
+function onRemoteTrack(track) {
+    if (track.isLocal()
+            || (track.getType() === 'video' && !remoteVideo) || (track.getType() === 'audio' && !remoteAudio)) {
+        return;
+    }
+    const participant = track.getParticipantId();
+
+    if (!remoteTracks[participant]) {
+        remoteTracks[participant] = [];
+    }
+    const idx = remoteTracks[participant].push(track);
+    const id = participant + track.getType() + idx;
+
+    if (track.getType() === 'video') {
+        $('body').append(`<video autoplay='1' id='${id}' />`);
+    } else {
+        $('body').append(`<audio autoplay='1' id='${id}' />`);
+    }
+    track.attach($(`#${id}`)[0]);
+}
+
+/**
+ * That function is executed when the conference is joined
+ */
+function onConferenceJoined() {
+    isJoined = true;
+    for (let i = 0; i < localTracks.length; i++) {
+        room.addTrack(localTracks[i]);
+    }
+}
+
+/**
+ *
+ * @param id
+ */
+function onUserLeft(id) {
+    numParticipants--;
+    setNumberOfParticipants();
+    if (!remoteTracks[id]) {
+        return;
+    }
+    const tracks = remoteTracks[id];
+
+    for (let i = 0; i < tracks.length; i++) {
+        const container = $(`#${id}${tracks[i].getType()}${i + 1}`)[0];
+
+        if (container) {
+            tracks[i].detach(container);
+            container.parentElement.removeChild(container);
+        }
+    }
+}
+
+/**
+ * That function is called when connection is established successfully
+ */
+function onConnectionSuccess() {
+    room = connection.initJitsiConference(roomName, confOptions);
+    room.on(JitsiMeetJS.events.conference.TRACK_ADDED, onRemoteTrack);
+    room.on(JitsiMeetJS.events.conference.CONFERENCE_JOINED, onConferenceJoined);
+    room.on(JitsiMeetJS.events.conference.USER_JOINED, id => {
+        numParticipants++;
+        setNumberOfParticipants();
+        remoteTracks[id] = [];
+    });
+    room.on(JitsiMeetJS.events.conference.USER_LEFT, onUserLeft);
+    room.join();
+}
+
+/**
+ * This function is called when the connection fail.
+ */
+function onConnectionFailed() {
+    console.error('Connection Failed!');
+}
+
+/**
+ * This function is called when we disconnect.
+ */
+function disconnect() {
+    console.log('disconnect!');
+    connection.removeEventListener(
+        JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED,
+        onConnectionSuccess);
+    connection.removeEventListener(
+        JitsiMeetJS.events.connection.CONNECTION_FAILED,
+        onConnectionFailed);
+    connection.removeEventListener(
+        JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED,
+        disconnect);
+}
+
+/**
+ *
+ */
+function unload() {
+    for (let i = 0; i < localTracks.length; i++) {
+        localTracks[i].dispose();
+    }
+    room.leave();
+    connection.disconnect();
+}
+
+$(window).bind('beforeunload', unload);
+$(window).bind('unload', unload);
+
+JitsiMeetJS.setLogLevel(JitsiMeetJS.logLevels.ERROR);
+
+const initOptions = {
+    disableAudioLevels: true,
+
+    // The ID of the jidesha extension for Chrome.
+    desktopSharingChromeExtId: 'mbocklcggfhnbahlnepmldehdhpjfcjp',
+
+    // Whether desktop sharing should be disabled on Chrome.
+    desktopSharingChromeDisabled: true,
+
+    // The media sources to use when using screen sharing with the Chrome
+    // extension.
+    desktopSharingChromeSources: [ 'screen', 'window' ],
+
+    // Required version of Chrome extension
+    desktopSharingChromeMinExtVersion: '0.1',
+
+    // Whether desktop sharing should be disabled on Firefox.
+    desktopSharingFirefoxDisabled: true
+};
+
+JitsiMeetJS.init(initOptions);
+
+connection = new JitsiMeetJS.JitsiConnection(null, null, options);
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_ESTABLISHED, onConnectionSuccess);
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_FAILED, onConnectionFailed);
+connection.addEventListener(JitsiMeetJS.events.connection.CONNECTION_DISCONNECTED, disconnect);
+connection.connect();
+
+const devices = [];
+
+if (localVideo) {
+    devices.push('video');
+}
+if (localAudio) {
+    devices.push('audio');
+}
+if (devices.length > 0) {
+    JitsiMeetJS.createLocalTracks({ devices })
+    .then(onLocalTracks)
+    .catch(error => {
+        throw error;
+    });
+}
+
+

static/load-test/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "jitsi-meet-load-test",
+  "version": "0.0.0",
+  "description": "A load test participant",
+  "repository": {
+    "type": "git",
+    "url": "git://github.com/jitsi/jitsi-meet"
+  },
+  "keywords": [
+    "jingle",
+    "webrtc",
+    "xmpp",
+    "browser"
+  ],
+  "author": "",
+  "readmeFilename": "../README.md",
+  "dependencies": {
+    "jquery": "3.4.0"
+  },
+  "devDependencies": {
+    "@babel/core": "7.5.5",
+    "@babel/plugin-proposal-class-properties": "7.1.0",
+    "@babel/plugin-proposal-export-default-from": "7.0.0",
+    "@babel/plugin-proposal-export-namespace-from": "7.0.0",
+    "@babel/plugin-proposal-nullish-coalescing-operator": "7.4.4",
+    "@babel/plugin-proposal-optional-chaining": "7.2.0",
+    "@babel/plugin-transform-flow-strip-types": "7.0.0",
+    "@babel/preset-env": "7.1.0",
+    "@babel/preset-flow": "7.0.0",
+    "@babel/runtime": "7.5.5",
+    "babel-eslint": "10.0.1",
+    "babel-loader": "8.0.4",
+    "eslint": "5.6.1",
+    "eslint-config-jitsi": "github:jitsi/eslint-config-jitsi#1.0.1",
+    "eslint-plugin-flowtype": "2.50.3",
+    "eslint-plugin-import": "2.14.0",
+    "eslint-plugin-jsdoc": "3.8.0",
+    "expose-loader": "0.7.5",
+    "flow-bin": "0.104.0",
+    "imports-loader": "0.7.1",
+    "string-replace-loader": "2.1.1",
+    "style-loader": "0.19.0",
+    "webpack": "4.27.1",
+    "webpack-bundle-analyzer": "3.4.1",
+    "webpack-cli": "3.1.2"
+  },
+  "engines": {
+    "node": ">=8.0.0",
+    "npm": ">=6.0.0"
+  },
+  "license": "Apache-2.0",
+  "scripts": {
+    "build": "webpack -p"
+  }
+}

static/load-test/webpack.config.js

@@ -0,0 +1,131 @@
+/* global __dirname */
+
+const process = require('process');
+const { BundleAnalyzerPlugin } = require('webpack-bundle-analyzer');
+const analyzeBundle = process.argv.indexOf('--analyze-bundle') !== -1;
+const minimize
+    = process.argv.indexOf('-p') !== -1
+        || process.argv.indexOf('--optimize-minimize') !== -1;
+
+/**
+ * Build a Performance configuration object for the given size.
+ * See: https://webpack.js.org/configuration/performance/
+ */
+function getPerformanceHints(size) {
+    return {
+        hints: minimize ? 'error' : false,
+        maxAssetSize: size,
+        maxEntrypointSize: size
+    };
+}
+
+// The base Webpack configuration to bundle the JavaScript artifacts of
+// jitsi-meet such as app.bundle.js and external_api.js.
+const config = {
+    devtool: 'source-map',
+    mode: minimize ? 'production' : 'development',
+    module: {
+        rules: [ {
+            // Transpile ES2015 (aka ES6) to ES5. Accept the JSX syntax by React
+            // as well.
+
+            exclude: [
+                new RegExp(`${__dirname}/node_modules/(?!js-utils)`)
+            ],
+            loader: 'babel-loader',
+            options: {
+                // XXX The require.resolve bellow solves failures to locate the
+                // presets when lib-jitsi-meet, for example, is npm linked in
+                // jitsi-meet.
+                plugins: [
+                    require.resolve('@babel/plugin-transform-flow-strip-types'),
+                    require.resolve('@babel/plugin-proposal-class-properties'),
+                    require.resolve('@babel/plugin-proposal-export-default-from'),
+                    require.resolve('@babel/plugin-proposal-export-namespace-from'),
+                    require.resolve('@babel/plugin-proposal-nullish-coalescing-operator'),
+                    require.resolve('@babel/plugin-proposal-optional-chaining')
+                ],
+                presets: [
+                    [
+                        require.resolve('@babel/preset-env'),
+
+                        // Tell babel to avoid compiling imports into CommonJS
+                        // so that webpack may do tree shaking.
+                        {
+                            modules: false,
+
+                            // Specify our target browsers so no transpiling is
+                            // done unnecessarily. For browsers not specified
+                            // here, the ES2015+ profile will be used.
+                            targets: {
+                                chrome: 58,
+                                electron: 2,
+                                firefox: 54,
+                                safari: 11
+                            }
+
+                        }
+                    ],
+                    require.resolve('@babel/preset-flow'),
+                    require.resolve('@babel/preset-react')
+                ]
+            },
+            test: /\.jsx?$/
+        }, {
+            // Expose jquery as the globals $ and jQuery because it is expected
+            // to be available in such a form by multiple jitsi-meet
+            // dependencies including lib-jitsi-meet.
+
+            loader: 'expose-loader?$!expose-loader?jQuery',
+            test: /\/node_modules\/jquery\/.*\.js$/
+        }]
+    },
+    node: {
+        // Allow the use of the real filename of the module being executed. By
+        // default Webpack does not leak path-related information and provides a
+        // value that is a mock (/index.js).
+        __filename: true
+    },
+    optimization: {
+        concatenateModules: minimize,
+        minimize
+    },
+    output: {
+        filename: `[name]${minimize ? '.min' : ''}.js`,
+        path: `${__dirname}/libs`,
+        publicPath: 'load-test/libs/',
+        sourceMapFilename: `[name].${minimize ? 'min' : 'js'}.map`
+    },
+    plugins: [
+        analyzeBundle
+            && new BundleAnalyzerPlugin({
+                analyzerMode: 'disabled',
+                generateStatsFile: true
+            })
+    ].filter(Boolean),
+    resolve: {
+        alias: {
+            jquery: `jquery/dist/jquery${minimize ? '.min' : ''}.js`
+        },
+        aliasFields: [
+            'browser'
+        ],
+        extensions: [
+            '.web.js',
+
+            // Webpack defaults:
+            '.js',
+            '.json'
+        ]
+    }
+};
+
+module.exports = [
+    Object.assign({}, config, {
+        entry: {
+            'load-test-participant': './load-test-participant.js'
+        },
+        performance: getPerformanceHints(3 * 1024 * 1024)
+    })
+];
+