fix(thumbnails): es6 support & cleanup.

* Add shortcut key for toggle tile view

* Toggle tile view shortcut - undo main-enGB.json

* Add analytics

* Use already defined toolbar translations

ios/Podfile

@@ -1,4 +1,4 @@
-platform :ios, '10.0'
+platform :ios, '11.0'
 workspace 'jitsi-meet'
 require_relative '../node_modules/@react-native-community/cli-platform-ios/native_modules'
 
@@ -82,7 +82,7 @@ post_install do |installer|
     target.build_configurations.each do |config|
       config.build_settings['ENABLE_BITCODE'] = 'YES'
       config.build_settings['SUPPORTS_MACCATALYST'] = 'NO'
-      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '10.0'
+      config.build_settings['IPHONEOS_DEPLOYMENT_TARGET'] = '11.0'
     end
   end
 end

ios/Podfile.lock

@@ -553,6 +553,6 @@ SPEC CHECKSUMS:
   RNWatch: 09738b339eceb66e4d80a2371633ca5fb380fa42
   Yoga: 02036f6383c0008edb7ef0773a0e6beb6ce82bd1
 
-PODFILE CHECKSUM: 63c90b1d33cd96709fb72bad6be440ae9c3deecb
+PODFILE CHECKSUM: 0fdfa45ae809c9460c80be3e0d4bbb822fccc418
 
 COCOAPODS: 1.8.1

ios/app/app.xcodeproj/project.pbxproj

@@ -747,7 +747,6 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 				);
 				INFOPLIST_FILE = src/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
@@ -758,7 +757,6 @@
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.meet;
 				PRODUCT_NAME = "jitsi-meet";
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
@@ -783,7 +781,6 @@
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 				);
 				INFOPLIST_FILE = src/Info.plist;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks";
 				LIBRARY_SEARCH_PATHS = "$(inherited)";
 				OTHER_LDFLAGS = (
@@ -794,7 +791,6 @@
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.meet;
 				PRODUCT_NAME = "jitsi-meet";
 				PROVISIONING_PROFILE_SPECIFIER = "";
-				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
 		};
@@ -850,10 +846,11 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
+				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
@@ -902,10 +899,11 @@
 					"$(inherited)",
 					/Applications/Xcode.app/Contents/Developer/Toolchains/XcodeDefault.xctoolchain/usr/include,
 				);
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_COMPILATION_MODE = wholemodule;
+				TARGETED_DEVICE_FAMILY = "1,2";
 				VALIDATE_PRODUCT = YES;
 			};
 			name = Release;

ios/sdk/sdk.xcodeproj/project.pbxproj

@@ -555,7 +555,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = YES;
 				ONLY_ACTIVE_ARCH = YES;
 				SDKROOT = iphoneos;
@@ -611,7 +611,7 @@
 				GCC_WARN_UNINITIALIZED_AUTOS = YES_AGGRESSIVE;
 				GCC_WARN_UNUSED_FUNCTION = YES;
 				GCC_WARN_UNUSED_VARIABLE = YES;
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
 				MTL_ENABLE_DEBUG_INFO = NO;
 				SDKROOT = iphoneos;
 				SWIFT_COMPILATION_MODE = wholemodule;
@@ -639,7 +639,6 @@
 				ENABLE_BITCODE = NO;
 				INFOPLIST_FILE = src/Info.plist;
 				INSTALL_PATH = "$(LOCAL_LIBRARY_DIR)/Frameworks";
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.JitsiMeetSDK.ios;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -650,7 +649,6 @@
 				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
 				SWIFT_SWIFT3_OBJC_INFERENCE = Default;
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
@@ -671,7 +669,6 @@
 				ENABLE_BITCODE = YES;
 				INFOPLIST_FILE = src/Info.plist;
 				INSTALL_PATH = "$(LOCAL_LIBRARY_DIR)/Frameworks";
-				IPHONEOS_DEPLOYMENT_TARGET = 10.0;
 				LD_RUNPATH_SEARCH_PATHS = "$(inherited) @executable_path/Frameworks @loader_path/Frameworks";
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.JitsiMeetSDK.ios;
 				PRODUCT_NAME = "$(TARGET_NAME)";
@@ -681,7 +678,6 @@
 				SWIFT_OBJC_BRIDGING_HEADER = "";
 				SWIFT_SWIFT3_OBJC_INFERENCE = Default;
 				SWIFT_VERSION = 5.0;
-				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
 		};

lang/main.json

@@ -47,8 +47,10 @@
     },
     "chat": {
         "error": "Error: your message was not sent. Reason: {{error}}",
+        "fieldPlaceHolder": "Type your message here",
         "messagebox": "Type a message",
         "messageTo": "Private message to {{recipient}}",
+        "noMessagesMessage": "There are no messages in the meeting yet. Start a conversation here!",
         "nickname": {
             "popover": "Choose a nickname",
             "title": "Enter a nickname to use chat"

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

react/features/base/conference/functions.js

@@ -178,13 +178,15 @@ export function getConferenceName(stateful: Function | Object): string {
  * @returns {JitsiConference|undefined}
  */
 export function getCurrentConference(stateful: Function | Object) {
-    const { conference, joining, leaving }
+    const { conference, joining, leaving, passwordRequired }
         = toState(stateful)['features/base/conference'];
 
-    return (
-        conference
-            ? conference === leaving ? undefined : conference
-            : joining);
+    // There is a precendence
+    if (conference) {
+        return conference === leaving ? undefined : conference;
+    }
+
+    return joining || passwordRequired;
 }
 
 /**

react/features/base/config/reducer.js

@@ -2,7 +2,6 @@
 
 import _ from 'lodash';
 
-import Platform from '../react/Platform';
 import { equals, ReducerRegistry, set } from '../redux';
 
 import { _UPDATE_CONFIG, CONFIG_WILL_LOAD, LOAD_CONFIG_ERROR, SET_CONFIG } from './actionTypes';
@@ -21,15 +20,6 @@ import { _cleanupConfig } from './functions';
 const INITIAL_NON_RN_STATE = {
 };
 
-/**
- * When we should enable H.264 on mobile. iOS 10 crashes so we disable it there.
- * See: https://bugs.chromium.org/p/webrtc/issues/detail?id=11002
- * Note that this is only used for P2P calls.
- *
- * @type {boolean}
- */
-const RN_ENABLE_H264 = navigator.product === 'ReactNative' && !(Platform.OS === 'ios' && Platform.Version === 10);
-
 /**
  * The initial state of the feature base/config when executing in a React Native
  * environment. The mandatory configuration to be passed to JitsiMeetJS#init().
@@ -50,11 +40,9 @@ const INITIAL_RN_STATE = {
     // fastest to merely disable them.
     disableAudioLevels: true,
 
-    disableH264: !RN_ENABLE_H264,
-
     p2p: {
-        disableH264: !RN_ENABLE_H264,
-        preferH264: RN_ENABLE_H264
+        disableH264: false,
+        preferH264: true
     }
 };
 

react/features/base/dialog/components/native/BottomSheet.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent, type Node } from 'react';
-import { Platform, SafeAreaView, ScrollView, View } from 'react-native';
+import { SafeAreaView, ScrollView, View } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../../color-scheme';
 import { SlidingView } from '../../../react';
@@ -61,41 +61,18 @@ class BottomSheet extends PureComponent<Props> {
                             styles.sheetItemContainer,
                             _styles.sheet
                         ] }>
-                        { this._getWrappedContent() }
+                        <SafeAreaView>
+                            <ScrollView
+                                bounces = { false }
+                                showsVerticalScrollIndicator = { false } >
+                                { this.props.children }
+                            </ScrollView>
+                        </SafeAreaView>
                     </View>
                 </View>
             </SlidingView>
         );
     }
-
-    /**
-     * Wraps the content when needed (iOS 11 and above), or just returns the original content.
-     *
-     * @returns {React$Element}
-     */
-    _getWrappedContent() {
-        const content = (
-            <ScrollView
-                bounces = { false }
-                showsVerticalScrollIndicator = { false } >
-                { this.props.children }
-            </ScrollView>
-        );
-
-        if (Platform.OS === 'ios') {
-            const majorVersionIOS = parseInt(Platform.Version, 10);
-
-            if (majorVersionIOS > 10) {
-                return (
-                    <SafeAreaView>
-                        { content }
-                    </SafeAreaView>
-                );
-            }
-        }
-
-        return content;
-    }
 }
 
 /**

react/features/base/react/components/native/Header.js

@@ -1,18 +1,14 @@
 // @flow
 
-import React, { Component, type Node } from 'react';
-import { Platform, SafeAreaView, StatusBar, View } from 'react-native';
+import React, { PureComponent, type Node } from 'react';
+import { SafeAreaView, StatusBar, View } from 'react-native';
 
 import { ColorSchemeRegistry } from '../../../color-scheme';
 import { connect } from '../../../redux';
 import { isDarkColor } from '../../../styles';
 
-import { HEADER_PADDING } from './headerstyles';
-
-/**
- * Compatibility header padding size for iOS 10 (and older) devices.
- */
-const IOS10_PADDING = 20;
+// Register style
+import './headerstyles';
 
 /**
  * Constanst for the (currently) supported statusbar colors.
@@ -44,19 +40,7 @@ type Props = {
 /**
  * A generic screen header component.
  */
-class Header extends Component<Props> {
-    /**
-     * Initializes a new {@code Header} instance.
-     *
-     * @inheritdoc
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this._getIOS10CompatiblePadding
-            = this._getIOS10CompatiblePadding.bind(this);
-    }
-
+class Header extends PureComponent<Props> {
     /**
      * Implements React's {@link Component#render()}.
      *
@@ -66,11 +50,7 @@ class Header extends Component<Props> {
         const { _styles } = this.props;
 
         return (
-            <View
-                style = { [
-                    _styles.headerOverlay,
-                    this._getIOS10CompatiblePadding()
-                ] } >
+            <View style = { _styles.headerOverlay }>
                 <StatusBar
                     backgroundColor = { _styles.statusBar }
                     barStyle = { this._getStatusBarContentColor() }
@@ -90,32 +70,6 @@ class Header extends Component<Props> {
         );
     }
 
-    _getIOS10CompatiblePadding: () => Object;
-
-    /**
-     * Adds a padding for iOS 10 (and older) devices to avoid clipping with the
-     * status bar.
-     * Note: This is a workaround for iOS 10 (and older) devices only to fix
-     * usability, but it doesn't take orientation into account, so unnecessary
-     * padding is rendered in some cases.
-     *
-     * @private
-     * @returns {Object}
-     */
-    _getIOS10CompatiblePadding() {
-        if (Platform.OS === 'ios') {
-            const majorVersionIOS = parseInt(Platform.Version, 10);
-
-            if (majorVersionIOS <= 10) {
-                return {
-                    paddingTop: HEADER_PADDING + IOS10_PADDING
-                };
-            }
-        }
-
-        return null;
-    }
-
     /**
      * Calculates the color of the statusbar content (light or dark) based on
      * certain criterias.

react/features/base/react/components/native/headerstyles.js

@@ -7,8 +7,7 @@ import { BoxModel } from '../../../styles';
 
 const HEADER_FONT_SIZE = 18;
 const HEADER_HEIGHT = 48;
-
-export const HEADER_PADDING = BoxModel.padding / 2;
+const HEADER_PADDING = BoxModel.padding / 2;
 
 ColorSchemeRegistry.register('Header', {
 

react/features/base/testing/components/TestConnectionInfo.js

@@ -117,8 +117,8 @@ class TestConnectionInfo extends Component<Props, State> {
         this.setState({
             stats: {
                 bitrate: {
-                    download: stats.bitrate.download,
-                    upload: stats.bitrate.upload
+                    download: stats.bitrate?.download || 0,
+                    upload: stats.bitrate?.upload || 0
                 }
             }
         });

react/features/chat/components/AbstractMessageContainer.js

@@ -15,7 +15,7 @@ export type Props = {
  *
  * @extends PureComponent
  */
-export default class AbstractMessageContainer extends PureComponent<Props> {
+export default class AbstractMessageContainer<P: Props> extends PureComponent<P> {
     static defaultProps = {
         messages: []
     };
@@ -46,7 +46,7 @@ export default class AbstractMessageContainer extends PureComponent<Props> {
             }
         }
 
-        groups.push(currentGrouping);
+        currentGrouping.length && groups.push(currentGrouping);
 
         return groups;
     }

react/features/chat/components/native/ChatInputBar.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 import { TextInput, TouchableOpacity, View } from 'react-native';
 
+import { translate } from '../../../base/i18n';
 import { Icon, IconChatSend } from '../../../base/icons';
 import { Platform } from '../../../base/react';
 
@@ -13,7 +14,12 @@ type Props = {
     /**
      * Callback to invoke on message send.
      */
-    onSend: Function
+    onSend: Function,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function
 };
 
 type State = {
@@ -37,7 +43,7 @@ type State = {
 /**
  * Implements the chat input bar with text field and action(s).
  */
-export default class ChatInputBar extends Component<Props, State> {
+class ChatInputBar extends Component<Props, State> {
     /**
      * Instantiates a new instance of the component.
      *
@@ -53,6 +59,7 @@ export default class ChatInputBar extends Component<Props, State> {
         };
 
         this._onChangeText = this._onChangeText.bind(this);
+        this._onFieldReferenceAvailable = this._onFieldReferenceAvailable.bind(this);
         this._onFocused = this._onFocused.bind(this);
         this._onSubmit = this._onSubmit.bind(this);
     }
@@ -76,6 +83,8 @@ export default class ChatInputBar extends Component<Props, State> {
                     onChangeText = { this._onChangeText }
                     onFocus = { this._onFocused(true) }
                     onSubmitEditing = { this._onSubmit }
+                    placeholder = { this.props.t('chat.fieldPlaceHolder') }
+                    ref = { this._onFieldReferenceAvailable }
                     returnKeyType = 'send'
                     style = { styles.inputField }
                     value = { this.state.message } />
@@ -105,6 +114,18 @@ export default class ChatInputBar extends Component<Props, State> {
         });
     }
 
+    _onFieldReferenceAvailable: Object => void;
+
+    /**
+     * Callback to be invoked when the field reference is available.
+     *
+     * @param {Object} field - The reference to the field.
+     * @returns {void}
+     */
+    _onFieldReferenceAvailable(field) {
+        field && field.focus();
+    }
+
     _onFocused: boolean => Function;
 
     /**
@@ -138,3 +159,5 @@ export default class ChatInputBar extends Component<Props, State> {
         });
     }
 }
+
+export default translate(ChatInputBar);

react/features/chat/components/native/MessageContainer.js

@@ -1,18 +1,36 @@
 // @flow
 
 import React from 'react';
-import { FlatList } from 'react-native';
+import { FlatList, Text, View } from 'react-native';
 
-import AbstractMessageContainer, { type Props }
+import { ColorSchemeRegistry } from '../../../base/color-scheme';
+import { translate } from '../../../base/i18n';
+import { connect } from '../../../base/redux';
+import { StyleType } from '../../../base/styles';
+
+import AbstractMessageContainer, { type Props as AbstractProps }
     from '../AbstractMessageContainer';
 
 import ChatMessageGroup from './ChatMessageGroup';
 import styles from './styles';
 
+type Props = AbstractProps & {
+
+    /**
+     * The color-schemed stylesheet of the feature.
+     */
+    _styles: StyleType,
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function
+};
+
 /**
  * Implements a container to render all the chat messages in a conference.
  */
-export default class MessageContainer extends AbstractMessageContainer {
+class MessageContainer extends AbstractMessageContainer<Props> {
     /**
      * Instantiates a new instance of the component.
      *
@@ -22,6 +40,7 @@ export default class MessageContainer extends AbstractMessageContainer {
         super(props);
 
         this._keyExtractor = this._keyExtractor.bind(this);
+        this._renderListEmptyComponent = this._renderListEmptyComponent.bind(this);
         this._renderMessageGroup = this._renderMessageGroup.bind(this);
     }
 
@@ -31,10 +50,16 @@ export default class MessageContainer extends AbstractMessageContainer {
      * @inheritdoc
      */
     render() {
+        const data = this._getMessagesGroupedBySender();
+
         return (
             <FlatList
-                data = { this._getMessagesGroupedBySender() }
-                inverted = { true }
+                ListEmptyComponent = { this._renderListEmptyComponent }
+                data = { data }
+
+                // Workaround for RN bug:
+                // https://github.com/facebook/react-native/issues/21196
+                inverted = { Boolean(data.length) }
                 keyExtractor = { this._keyExtractor }
                 keyboardShouldPersistTaps = 'always'
                 renderItem = { this._renderMessageGroup }
@@ -58,7 +83,26 @@ export default class MessageContainer extends AbstractMessageContainer {
         return `key_${index}`;
     }
 
-    _renderMessageGroup: Object => React$Element<*>;
+    _renderListEmptyComponent: () => React$Element<any>;
+
+    /**
+     * Renders a message when there are no messages in the chat yet.
+     *
+     * @returns {React$Element<any>}
+     */
+    _renderListEmptyComponent() {
+        const { _styles, t } = this.props;
+
+        return (
+            <View style = { styles.emptyComponentWrapper }>
+                <Text style = { _styles.emptyComponentText }>
+                    { t('chat.noMessagesMessage') }
+                </Text>
+            </View>
+        );
+    }
+
+    _renderMessageGroup: Object => React$Element<any>;
 
     /**
      * Renders a single chat message.
@@ -70,3 +114,17 @@ export default class MessageContainer extends AbstractMessageContainer {
         return <ChatMessageGroup messages = { messages } />;
     }
 }
+
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {Props}
+ */
+function _mapStateToProps(state) {
+    return {
+        _styles: ColorSchemeRegistry.get(state, 'Chat')
+    };
+}
+
+export default translate(connect(_mapStateToProps)(MessageContainer));

react/features/chat/components/native/styles.js

@@ -42,6 +42,13 @@ export default {
         flexDirection: 'column'
     },
 
+    emptyComponentWrapper: {
+        alignSelf: 'center',
+        flex: 1,
+        padding: BoxModel.padding,
+        paddingTop: '10%'
+    },
+
     /**
      * A special padding to avoid issues on some devices (such as Android devices with custom suggestions bar).
      */
@@ -143,6 +150,11 @@ ColorSchemeRegistry.register('Chat', {
         fontSize: 13
     },
 
+    emptyComponentText: {
+        color: schemeColor('displayName'),
+        textAlign: 'center'
+    },
+
     localMessageBubble: {
         backgroundColor: schemeColor('localMsgBackground'),
         borderTopRightRadius: 0

react/features/chat/components/web/MessageContainer.js

@@ -14,7 +14,7 @@ import ChatMessageGroup from './ChatMessageGroup';
  *
  * @extends AbstractMessageContainer
  */
-export default class MessageContainer extends AbstractMessageContainer {
+export default class MessageContainer extends AbstractMessageContainer<Props> {
     /**
      * Whether or not chat has been scrolled to the bottom of the screen. Used
      * to determine if chat should be scrolled automatically to the bottom when

react/features/conference/actions.web.js

@@ -20,7 +20,7 @@ export function notifyKickedOut(participant: Object, _: ?Function) { // eslint-d
     return (dispatch: Dispatch<any>, getState: Function) => {
         const args = {
             participantDisplayName:
-                getParticipantDisplayName(getState, participant.getDisplayName())
+                getParticipantDisplayName(getState, participant.getId())
         };
 
         dispatch(showNotification({

react/features/conference/components/web/Subject.js

@@ -3,6 +3,7 @@
 import React, { Component } from 'react';
 
 import { getConferenceName } from '../../../base/conference/functions';
+import { getParticipantCount } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux';
 import { isToolboxVisible } from '../../../toolbox';
 
@@ -13,6 +14,11 @@ import ParticipantsCount from './ParticipantsCount';
  */
 type Props = {
 
+    /**
+     * Whether then participant count should be shown or not.
+     */
+    _showParticipantCount: boolean,
+
     /**
      * The subject or the of the conference.
      * Falls back to conference name.
@@ -39,12 +45,12 @@ class Subject extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { _subject, _visible } = this.props;
+        const { _showParticipantCount, _subject, _visible } = this.props;
 
         return (
             <div className = { `subject ${_visible ? 'visible' : ''}` }>
                 <span className = 'subject-text'>{ _subject }</span>
-                <ParticipantsCount />
+                { _showParticipantCount && <ParticipantsCount /> }
             </div>
         );
     }
@@ -62,8 +68,10 @@ class Subject extends Component<Props> {
  * }}
  */
 function _mapStateToProps(state) {
+    const participantCount = getParticipantCount(state);
 
     return {
+        _showParticipantCount: participantCount > 2,
         _subject: getConferenceName(state),
         _visible: isToolboxVisible(state)
     };

react/features/toolbox/components/web/Toolbox.js

@@ -57,7 +57,10 @@ import {
 } from '../../../settings';
 import { toggleSharedVideo } from '../../../shared-video';
 import { SpeakerStats } from '../../../speaker-stats';
-import { TileViewButton } from '../../../video-layout';
+import {
+    TileViewButton,
+    toggleTileView
+} from '../../../video-layout';
 import {
     OverflowMenuVideoQualityItem,
     VideoQualityDialog
@@ -122,6 +125,11 @@ type Props = {
      */
     _fullScreen: boolean,
 
+    /**
+     * Whether or not the tile view is enabled.
+     */
+    _tileViewEnabled: boolean,
+
     /**
      * Whether or not invite should be hidden, regardless of feature
      * availability.
@@ -236,6 +244,7 @@ class Toolbox extends Component<Props, State> {
         this._onToolbarToggleScreenshare = this._onToolbarToggleScreenshare.bind(this);
         this._onToolbarToggleSharedVideo = this._onToolbarToggleSharedVideo.bind(this);
         this._onToolbarOpenLocalRecordingInfoDialog = this._onToolbarOpenLocalRecordingInfoDialog.bind(this);
+        this._onShortcutToggleTileView = this._onShortcutToggleTileView.bind(this);
 
         this.state = {
             windowWidth: window.innerWidth
@@ -274,6 +283,11 @@ class Toolbox extends Component<Props, State> {
                 character: 'S',
                 exec: this._onShortcutToggleFullScreen,
                 helpDescription: 'keyboardShortcuts.fullScreen'
+            },
+            this._shouldShowButton('tileview') && {
+                character: 'W',
+                exec: this._onShortcutToggleTileView,
+                helpDescription: 'toolbar.tileViewToggle'
             }
         ];
 
@@ -475,6 +489,16 @@ class Toolbox extends Component<Props, State> {
         this.props.dispatch(toggleDialog(VideoQualityDialog));
     }
 
+    /**
+     * Dispaches an action to toggle tile view.
+     *
+     * @private
+     * @returns {void}
+     */
+    _doToggleTileView() {
+        this.props.dispatch(toggleTileView());
+    }
+
     _onMouseOut: () => void;
 
     /**
@@ -565,6 +589,24 @@ class Toolbox extends Component<Props, State> {
         this._doToggleVideoQuality();
     }
 
+    _onShortcutToggleTileView: () => void;
+
+    /**
+     * Dispatches an action for toggling the tile view.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onShortcutToggleTileView() {
+        sendAnalytics(createShortcutEvent(
+            'toggle.tileview',
+            {
+                enable: !this.props._tileViewEnabled
+            }));
+
+        this._doToggleTileView();
+    }
+
     _onShortcutToggleFullScreen: () => void;
 
     /**
@@ -1295,6 +1337,7 @@ function _mapStateToProps(state) {
             iAmRecorder || (!addPeopleEnabled && !dialOutEnabled),
         _isGuest: state['features/base/jwt'].isGuest,
         _fullScreen: fullScreen,
+        _tileViewEnabled: state['features/video-layout'].tileViewEnabled,
         _localParticipantID: localParticipant.id,
         _localRecState: localRecordingStates,
         _overflowMenuVisible: overflowMenuVisible,

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)
+    })
+];
+