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;
-
-    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.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() {};
+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.bindHoverHandler();
+        this.isVideoMuted = true;
+        this.updateDisplayName();
+
+        this.container.onclick = this._onContainerClick;
+    }
 
-SharedVideoThumb.prototype.createContainer = function(spanId) {
-    const container = document.createElement('span');
+    /**
+     *
+     */
+    initializeAvatar() {} // eslint-disable-line no-empty-function
 
-    container.id = spanId;
-    container.className = 'videocontainer';
+    /**
+     *
+     * @param {*} spanId
+     */
+    createContainer(spanId) {
+        const container = document.createElement('span');
 
-    // add the avatar
-    const avatar = document.createElement('img');
+        container.id = spanId;
+        container.className = 'videocontainer';
 
-    avatar.className = 'sharedVideoAvatar';
-    avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
-    container.appendChild(avatar);
+        // add the avatar
+        const avatar = document.createElement('img');
 
-    const displayNameContainer = document.createElement('div');
+        avatar.className = 'sharedVideoAvatar';
+        avatar.src = `https://img.youtube.com/vi/${this.url}/0.jpg`;
+        container.appendChild(avatar);
 
-    displayNameContainer.className = 'displayNameContainer';
-    container.appendChild(displayNameContainer);
+        const displayNameContainer = document.createElement('div');
 
-    const remoteVideosContainer
-        = document.getElementById('filmstripRemoteVideosContainer');
-    const localVideoContainer
-        = document.getElementById('localVideoTileViewContainer');
+        displayNameContainer.className = 'displayNameContainer';
+        container.appendChild(displayNameContainer);
 
-    remoteVideosContainer.insertBefore(container, localVideoContainer);
+        const remoteVideosContainer
+            = document.getElementById('filmstripRemoteVideosContainer');
+        const localVideoContainer
+            = document.getElementById('localVideoTileViewContainer');
 
-    return container;
-};
+        remoteVideosContainer.insertBefore(container, localVideoContainer);
 
-/**
- * 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;
+        return container;
     }
 
-    this._renderDisplayName({
-        elementID: `${this.videoSpanId}_name`,
-        participantID: this.id
-    });
-};
+    /**
+     * 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);
+        // If the MAX_HEIGHT property hasn't been specified
+        // we have the static value.
+        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();
-
-    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();
+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.initBrowserSpecificProperties();
-
-    SmallVideo.call(this, VideoLayout);
-
-    // 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();
-
-    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;
+        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();
 
-    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>`;
+        // Set default display name.
+        this.updateDisplayName();
 
-    return containerSpan;
-};
+        // 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();
 
-/**
- * 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`);
+        this.addAudioLevelIndicator();
+        this.updateIndicators();
 
-        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
-    });
-};
-
-LocalVideo.prototype.changeVideo = function(stream) {
-    this.videoStream = stream;
+    /**
+     *
+     */
+    createContainer() {
+        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;
+    }
 
-    this.localVideoId = `localVideo_${stream.getId()}`;
+    /**
+     * 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._updateVideoElement();
+        this._renderDisplayName({
+            allowEditing: APP.store.getState()['features/base/jwt'].isGuest,
+            displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
+            elementID: 'localDisplayName',
+            participantID: this.id
+        });
+    }
 
-    // eslint-disable-next-line eqeqeq
-    const isVideo = stream.videoType != 'desktop';
-    const settings = APP.store.getState()['features/base/settings'];
+    /**
+     *
+     * @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._enableDisableContextMenu(isVideo);
-    this.setFlipX(isVideo ? settings.localFlipX : false);
+            this._notifyOfStreamEnded();
+            stream.off(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
+        };
 
-    const endedHandler = () => {
-        const localVideoContainer
-            = document.getElementById('localVideoWrapper');
+        stream.on(JitsiTrackEvents.LOCAL_TRACK_STOPPED, endedHandler);
+    }
 
-        // 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);
+    /**
+     * Notify any subscribers of the local video stream ending.
+     *
+     * @private
+     * @returns {void}
+     */
+    _notifyOfStreamEnded() {
+        if (this.streamEndedCallback) {
+            this.streamEndedCallback(this.id);
         }
-
-        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}
- */
-LocalVideo.prototype._notifyOfStreamEnded = function() {
-    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
- */
-LocalVideo.prototype.setVisible = function(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();
+    /**
+     * 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();
+        }
     }
-};
 
-/**
- * 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');
+    /**
+     * 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');
+        }
     }
-};
 
-/**
- * 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
-                    }));
+    /**
+     * 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;
+
+                        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
- */
-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);
+    /**
+     * 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);
+        }
     }
 
-    const appendTarget = shouldDisplayTileView(APP.store.getState())
-        ? document.getElementById('localVideoTileViewContainer')
-        : document.getElementById('filmstripLocalVideoThumbnail');
+    /**
+     * 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);
+        }
 
-    appendTarget && appendTarget.appendChild(this.container);
+        const appendTarget = shouldDisplayTileView(APP.store.getState())
+            ? document.getElementById('localVideoTileViewContainer')
+            : document.getElementById('filmstripLocalVideoThumbnail');
 
-    this._updateVideoElement();
-};
+        appendTarget && appendTarget.appendChild(this.container);
+        this._updateVideoElement();
+    }
 
-/**
- * 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;
+    /**
+     * 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']);
+
+        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();
+    }
+}

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
@@ -327,8 +306,7 @@ const VideoLayout = {
 
         const id = participant.id;
         const jitsiParticipant = APP.conference.getParticipantById(id);
-        const remoteVideo
-            = new RemoteVideo(jitsiParticipant, VideoLayout, eventEmitter);
+        const remoteVideo = new RemoteVideo(jitsiParticipant, VideoLayout);
 
         this._setRemoteControlProperties(jitsiParticipant, remoteVideo);
         this.addRemoteVideoContainer(id, remoteVideo);
@@ -411,27 +389,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