feat(welcome_page): Redesign welcome page

Do not resize the desktop share to 720p by default when the desktop track resolution is higher than 720p. This is causing bluriness when presenter is turned on.
Remove the 'detail' contentHint setting for the desktop+presenter canvas stream as it forcing chrome to send only 5 fps stream for high resolution desktop tracks.
Move the desktop resizing logic behind a config.js option - videoQuality.resizeDesktopForPresenter.

.github/ISSUE_TEMPLATE/2-feature-request.md

@@ -1,9 +1,7 @@
 ---
 name: "Feature request"
 about: Suggest an idea for this project
-title: ''
-labels: 'feature-request'
-assignees: ''
+
 ---
 
 <!--

ConferenceEvents.js

@@ -2,3 +2,10 @@
  * Notifies interested parties that hangup procedure will start.
  */
 export const BEFORE_HANGUP = 'conference.before_hangup';
+
+/**
+ * Notifies interested parties that desktop sharing enable/disable state is
+ * changed.
+ */
+export const DESKTOP_SHARING_ENABLED_CHANGED
+    = 'conference.desktop_sharing_enabled_changed';

android/gradle.properties

@@ -18,10 +18,6 @@ org.gradle.jvmargs=-Xmx2048m -XX:MaxPermSize=512m -XX:+HeapDumpOnOutOfMemoryErro
 # http://www.gradle.org/docs/current/userguide/multi_project_builds.html#sec:decoupled_projects
 # org.gradle.parallel=true
 
-# This one fixes a weird WebRTC runtime problem on some devices.
-# https://github.com/jitsi/jitsi-meet/issues/7911#issuecomment-714323255
-android.enableDexingArtifactTransform.desugaring=false
-
 android.useAndroidX=true
 android.enableJetifier=true
 

android/sdk/src/main/AndroidManifest.xml

@@ -12,7 +12,7 @@
     <uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
     <uses-permission android:name="android.permission.WAKE_LOCK" />
     <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
-    <uses-permission android:name="android.permission.FOREGROUND_SERVICE" />
+    <uses-permission android:name="android.permission.FOREGROUND_SERVICE"/>
 
     <uses-feature
         android:glEsVersion="0x00020000"
@@ -34,7 +34,8 @@
             android:launchMode="singleTask"
             android:resizeableActivity="true"
             android:supportsPictureInPicture="true"
-            android:windowSoftInputMode="adjustResize"></activity>
+            android:windowSoftInputMode="adjustResize">
+        </activity>
         <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
 
         <service
@@ -45,9 +46,7 @@
             </intent-filter>
         </service>
 
-        <service
-            android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService"
-            android:foregroundServiceType="mediaProjection" />
+        <service android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService" />
     </application>
 
 </manifest>

android/sdk/src/main/java/org/jitsi/meet/sdk/PictureInPictureModule.java

@@ -43,7 +43,6 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
     private static final String TAG = NAME;
 
     private static boolean isSupported;
-    private boolean isDisabled;
 
     public PictureInPictureModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -84,10 +83,6 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
      */
     @TargetApi(Build.VERSION_CODES.O)
     public void enterPictureInPicture() {
-        if (isDisabled) {
-            return;
-        }
-
         if (!isSupported) {
             throw new IllegalStateException("Picture-in-Picture not supported");
         }
@@ -131,11 +126,6 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
         }
     }
 
-    @ReactMethod
-    public void setPictureInPictureDisabled(Boolean disabled) {
-        this.isDisabled = disabled;
-    }
-
     public boolean isPictureInPictureSupported() {
         return isSupported;
     }

conference.js

@@ -41,7 +41,8 @@ import {
     lockStateChanged,
     onStartMutedPolicyChanged,
     p2pStatusChanged,
-    sendLocalParticipant
+    sendLocalParticipant,
+    setDesktopSharingEnabled
 } from './react/features/base/conference';
 import {
     checkAndNotifyForNewDevice,
@@ -53,6 +54,7 @@ import {
     updateDeviceList
 } from './react/features/base/devices';
 import {
+    browser,
     isFatalJitsiConnectionError,
     JitsiConferenceErrors,
     JitsiConferenceEvents,
@@ -64,8 +66,6 @@ import {
     JitsiTrackEvents
 } from './react/features/base/lib-jitsi-meet';
 import {
-    getStartWithAudioMuted,
-    getStartWithVideoMuted,
     isVideoMutedByUser,
     MEDIA_TYPE,
     setAudioAvailable,
@@ -97,7 +97,7 @@ import {
     destroyLocalTracks,
     getLocalJitsiAudioTrack,
     getLocalJitsiVideoTrack,
-    isLocalCameraTrackMuted,
+    isLocalVideoTrackMuted,
     isLocalTrackMuted,
     isUserInteractionRequiredForUnmute,
     replaceLocalTrack,
@@ -440,9 +440,18 @@ export default {
      * the tracks won't exist).
      */
     _localTracksInitialized: false,
-
     isSharingScreen: false,
 
+    /**
+     * Indicates if the desktop sharing functionality has been enabled.
+     * It takes into consideration the status returned by
+     * {@link JitsiMeetJS.isDesktopSharingEnabled()}. The latter can be false
+     * either if the desktop sharing is not supported by the current browser
+     * or if it was disabled through lib-jitsi-meet specific options (check
+     * config.js for listed options).
+     */
+    isDesktopSharingEnabled: false,
+
     /**
      * The local audio track (if any).
      * FIXME tracks from redux store should be the single source of truth
@@ -493,9 +502,9 @@ export default {
 
         JitsiMeetJS.mediaDevices.addEventListener(
             JitsiMediaDevicesEvents.PERMISSION_PROMPT_IS_SHOWN,
-            browser =>
+            browserName =>
                 APP.store.dispatch(
-                    mediaPermissionPromptVisibilityChanged(true, browser))
+                    mediaPermissionPromptVisibilityChanged(true, browserName))
         );
 
         let tryCreateLocalTracks;
@@ -669,6 +678,14 @@ export default {
         con.addEventListener(JitsiConnectionEvents.CONNECTION_FAILED, _connectionFailedHandler);
         APP.connection = connection = con;
 
+        // Desktop sharing related stuff:
+        this.isDesktopSharingEnabled
+            = JitsiMeetJS.isDesktopSharingEnabled();
+        eventEmitter.emit(JitsiMeetConferenceEvents.DESKTOP_SHARING_ENABLED_CHANGED, this.isDesktopSharingEnabled);
+
+        APP.store.dispatch(
+            setDesktopSharingEnabled(this.isDesktopSharingEnabled));
+
         this._createRoom(tracks);
         APP.remoteControl.init();
 
@@ -715,10 +732,10 @@ export default {
         const initialOptions = {
             startAudioOnly: config.startAudioOnly,
             startScreenSharing: config.startScreenSharing,
-            startWithAudioMuted: getStartWithAudioMuted(APP.store.getState())
+            startWithAudioMuted: config.startWithAudioMuted
                 || config.startSilent
                 || isUserInteractionRequiredForUnmute(APP.store.getState()),
-            startWithVideoMuted: getStartWithVideoMuted(APP.store.getState())
+            startWithVideoMuted: config.startWithVideoMuted
                 || isUserInteractionRequiredForUnmute(APP.store.getState())
         };
 
@@ -793,7 +810,7 @@ export default {
     isLocalVideoMuted() {
         // If the tracks are not ready, read from base/media state
         return this._localTracksInitialized
-            ? isLocalCameraTrackMuted(
+            ? isLocalVideoTrackMuted(
                 APP.store.getState()['features/base/tracks'])
             : isVideoMutedByUser(APP.store);
     },
@@ -1116,6 +1133,20 @@ export default {
         return room ? room.getParticipantById(id) : null;
     },
 
+    /**
+     * Get participant connection status for the participant.
+     *
+     * @param {string} id participant's identifier(MUC nickname)
+     *
+     * @returns {ParticipantConnectionStatus|null} the status of the participant
+     * or null if no such participant is found or participant is the local user.
+     */
+    getParticipantConnectionStatus(id) {
+        const participant = this.getParticipantById(id);
+
+        return participant ? participant.getConnectionStatus() : null;
+    },
+
     /**
      * Gets the display name foe the <tt>JitsiParticipant</tt> identified by
      * the given <tt>id</tt>.
@@ -1514,8 +1545,9 @@ export default {
         if (this.videoSwitchInProgress) {
             return Promise.reject('Switch in progress.');
         }
-        if (!JitsiMeetJS.isDesktopSharingEnabled()) {
-            return Promise.reject('Cannot toggle screen sharing: not supported.');
+        if (!this.isDesktopSharingEnabled) {
+            return Promise.reject(
+                'Cannot toggle screen sharing: not supported.');
         }
 
         if (this.isAudioOnly()) {
@@ -1605,8 +1637,10 @@ export default {
      */
     async _createPresenterStreamEffect(height = null, cameraDeviceId = null) {
         if (!this.localPresenterVideo) {
+            const camera = cameraDeviceId ?? getUserSelectedCameraDeviceId(APP.store.getState());
+
             try {
-                this.localPresenterVideo = await createLocalPresenterTrack({ cameraDeviceId }, height);
+                this.localPresenterVideo = await createLocalPresenterTrack({ cameraDeviceId: camera }, height);
             } catch (err) {
                 logger.error('Failed to create a camera track for presenter', err);
 
@@ -1647,37 +1681,39 @@ export default {
 
         // Create a new presenter track and apply the presenter effect.
         if (!this.localPresenterVideo && !mute) {
-            let { aspectRatio, height } = this.localVideo.track.getSettings();
-            const { width } = this.localVideo.track.getSettings();
+            const { height, width } = this.localVideo.track.getSettings() ?? this.localVideo.track.getConstraints();
             let desktopResizeConstraints = {};
             let resizeDesktopStream = false;
             const DESKTOP_STREAM_CAP = 720;
 
-            // Determine the constraints if the desktop track needs to be resized.
-            // Resizing is needed when the resolution cannot be determined or when
-            // the window is bigger than 720p.
-            if (height && width) {
-                aspectRatio = aspectRatio ?? (width / height).toPrecision(4);
-                const advancedConstraints = [ { aspectRatio } ];
-                const isPortrait = height >= width;
+            // Resizing the desktop track for presenter is causing blurriness of the desktop share.
+            // Disable this behavior for now until it is fixed in Chrome. The stream needs to be resized
+            // Firefox always.
+            if ((config.videoQuality && config.videoQuality.resizeDesktopForPresenter) || browser.isFirefox()) {
+                // Resizing is needed when the window is bigger than 720p.
+                if (height && width) {
+                    const advancedConstraints = [ { aspectRatio: (width / height).toPrecision(4) } ];
+                    const isPortrait = height >= width;
 
-                // Determine which dimension needs resizing and resize only that side
-                // keeping the aspect ratio same as before.
-                if (isPortrait && width > DESKTOP_STREAM_CAP) {
+                    // Determine which dimension needs resizing and resize only that side
+                    // keeping the aspect ratio same as before.
+                    if (isPortrait && width > DESKTOP_STREAM_CAP) {
+                        resizeDesktopStream = true;
+                        advancedConstraints.push({ width: DESKTOP_STREAM_CAP });
+                    } else if (!isPortrait && height > DESKTOP_STREAM_CAP) {
+                        resizeDesktopStream = true;
+                        advancedConstraints.push({ height: DESKTOP_STREAM_CAP });
+                    }
+                    desktopResizeConstraints.advanced = advancedConstraints;
+                } else {
                     resizeDesktopStream = true;
-                    advancedConstraints.push({ width: DESKTOP_STREAM_CAP });
-                } else if (!isPortrait && height > DESKTOP_STREAM_CAP) {
-                    resizeDesktopStream = true;
-                    advancedConstraints.push({ height: DESKTOP_STREAM_CAP });
+                    desktopResizeConstraints = {
+                        width: 1280,
+                        height: 720
+                    };
                 }
-                desktopResizeConstraints.advanced = advancedConstraints;
-            } else {
-                resizeDesktopStream = true;
-                desktopResizeConstraints = {
-                    width: 1280,
-                    height: 720
-                };
             }
+
             if (resizeDesktopStream) {
                 try {
                     await this.localVideo.track.applyConstraints(desktopResizeConstraints);
@@ -1686,14 +1722,15 @@ export default {
 
                     return;
                 }
-                height = this.localVideo.track.getSettings().height ?? DESKTOP_STREAM_CAP;
             }
+            const trackHeight = resizeDesktopStream
+                ? this.localVideo.track.getSettings().height ?? DESKTOP_STREAM_CAP
+                : height;
             const defaultCamera = getUserSelectedCameraDeviceId(APP.store.getState());
             let effect;
 
             try {
-                effect = await this._createPresenterStreamEffect(height,
-                    defaultCamera);
+                effect = await this._createPresenterStreamEffect(trackHeight, defaultCamera);
             } catch (err) {
                 logger.error('Failed to unmute Presenter Video');
                 maybeShowErrorDialog(err);
@@ -1992,6 +2029,7 @@ export default {
                             formattedDisplayName
                                 || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
                 });
+                APP.UI.changeDisplayName(id, formattedDisplayName);
             }
         );
         room.on(
@@ -2054,7 +2092,10 @@ export default {
             });
 
         room.on(JitsiConferenceEvents.KICKED, participant => {
+            APP.UI.hideStats();
             APP.store.dispatch(kickedOut(room, participant));
+
+            // FIXME close
         });
 
         room.on(JitsiConferenceEvents.PARTICIPANT_KICKED, (kicker, kicked) => {
@@ -2387,6 +2428,11 @@ export default {
         APP.keyboardshortcut.init();
 
         APP.store.dispatch(conferenceJoined(room));
+
+        const displayName
+            = APP.store.getState()['features/base/settings'].displayName;
+
+        APP.UI.changeDisplayName('localVideoContainer', displayName);
     },
 
     /**
@@ -2562,20 +2608,6 @@ export default {
         // https://bugs.chromium.org/p/chromium/issues/detail?id=997689
         const hasDefaultMicChanged = newDevices.audioinput === 'default';
 
-        // This is the case when the local video is muted and a preferred device is connected.
-        if (requestedInput.video && this.isLocalVideoMuted()) {
-            // We want to avoid creating a new video track in order to prevent turning on the camera.
-            requestedInput.video = false;
-            APP.store.dispatch(updateSettings({ // Update the current selected camera for the device selection dialog.
-                cameraDeviceId: newDevices.videoinput
-            }));
-            delete newDevices.videoinput;
-
-            // Removing the current video track in order to force the unmute to select the preferred device.
-            this.useVideoStream(null);
-
-        }
-
         promises.push(
             mediaDeviceHelper.createLocalTracksAfterDeviceListChanged(
                     createLocalTracksF,
@@ -2884,6 +2916,10 @@ export default {
         APP.store.dispatch(updateSettings({
             displayName: formattedNickname
         }));
+
+        if (room) {
+            APP.UI.changeDisplayName(id, formattedNickname);
+        }
     },
 
     /**
@@ -2993,7 +3029,7 @@ export default {
      * @param {boolean} muted - New muted status.
      */
     setVideoMuteStatus(muted) {
-        APP.UI.setVideoMuted(this.getMyUserId());
+        APP.UI.setVideoMuted(this.getMyUserId(), muted);
         APP.API.notifyVideoMutedStatusChanged(muted);
     },
 

config.js

@@ -275,9 +275,13 @@ var config = {
     //    // at least 360 pixels tall. If the thumbnail height reaches 720 pixels then the application will switch to
     //    // the high quality.
     //    minHeightForQualityLvl: {
-    //        360: 'standard,
+    //        360: 'standard',
     //        720: 'high'
-    //    }
+    //    },
+    //
+    //    // Provides a way to resize the desktop track to 720p (if it is greater than 720p) before creating a canvas
+    //    // for the presenter mode (camera picture-in-picture mode with screenshare).
+    //    resizeDesktopForPresenter: false
     // },
 
     // // Options for the recording limit notification.

css/_meetings_list.scss

@@ -7,9 +7,8 @@
     display: flex;
     flex-direction: column;
     position: relative;
-    width: 100%;
-    height: 100%;
     overflow: auto;
+    width: 100%;
 
     .meetings-list-empty {
         text-align: center;
@@ -20,11 +19,34 @@
         flex-direction: column;
 
         .description {
-            font-size: 16px;
-            padding: 20px;
+           color: #2f3237;
+           font-size: 14px;
+           line-height: 18px;
+           margin-bottom: 16px;
+           max-width: 436px;
         }
     }
 
+    .meetings-list-empty-image {
+        text-align: center;
+        margin: 24px 0 20px 0;
+    }
+
+    .meetings-list-empty-button {
+        align-items: center;
+        color: #0163FF;
+        cursor: pointer;
+        display: flex;
+        font-size: 14px;
+        line-height: 18px;
+        margin: 24px 0 32px 0;
+    }
+
+    .meetings-list-empty-icon {
+        display: inline-block;
+        margin-right: 8px;
+    }
+
     .button {
         background: #0074E0;
         border-radius: 4px;
@@ -32,7 +54,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        padding: 5px 10px;
+        padding: 8px;
         cursor: pointer;
     }
 
@@ -43,12 +65,13 @@
     }
 
     .item {
-        background: rgba(255,255,255,0.50);
+        background: #fff;
         box-sizing: border-box;
+        border-radius: 4px;
         display: inline-flex;
-        margin-top: 5px;
-        min-height: 92px;
-        width: 100%;
+        margin: 4px 4px 0 4px;
+        min-height: 60px;
+        width: calc(100% - 8px);
         word-break: break-word;
         display: flex;
         flex-direction: row;
@@ -61,37 +84,41 @@
         .left-column {
             display: flex;
             flex-direction: column;
-            width: 140px;
             flex-grow: 0;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .date {
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
+            padding-left: 16px;
+            padding-top: 13px;
         }
 
         .right-column {
             display: flex;
             flex-direction: column;
             flex-grow: 1;
-            padding-left: 30px;
-            padding-top: 25px;
-
-            .title {
-                font-size: 16px;
-                font-weight: bold;
-                padding-bottom: 5px;
-            }
+            padding-left: 16px;
+            padding-top: 13px;
+            position: relative;
         }
 
+        .title {
+                font-size: 12px;
+                font-weight: 600;
+                line-height: 16px;
+                padding-bottom: 4px;
+            }
+
+        .subtitle {
+            color: #5E6D7A;
+            font-weight: normal;
+            font-size: 12px;
+            line-height: 16px;
+        }
+
+
         .actions {
             display: flex;
             align-items: center;
             justify-content: center;
             flex-grow: 0;
-            padding-right: 30px;
+            margin-right: 16px;
         }
 
         &.with-click-handler {
@@ -99,7 +126,7 @@
         }
 
         &.with-click-handler:hover {
-            background-color: #75A7E7;
+            background-color: #c7ddff;
         }
 
         .add-button {
@@ -120,4 +147,20 @@
             display: block
         }
     }
+
+    .delete-meeting {
+        display: none;
+        margin-right: 16px;
+        position: absolute;
+
+        &> svg {
+            fill: #0074e0;
+        }
+    }
+
+    .item:hover {
+        .delete-meeting {
+            display: block;
+        }
+    }
 }

css/_prejoin.scss

@@ -62,15 +62,12 @@
     &-status {
         align-items: center;
         align-self: stretch;
-        bottom: 0;
         color: #fff;
         display: flex;
         font-size: 13px;
         min-height: 24px;
         justify-content: center;
-        position: absolute;
         text-align: center;
-        width: 100%;
         z-index: 1;
 
         &--warning {

css/_premeeting-screens.scss

@@ -104,7 +104,6 @@
         flex: 1;
         flex-direction: column;
         justify-content: flex-end;
-        padding-bottom: 24px;
         z-index: $toolbarZ + 2;
 
         .title {

css/_responsive.scss

@@ -30,6 +30,67 @@
 }
 
 @media only screen and (max-width: $verySmallScreen) {
+  .welcome {
+      #enter_room {
+        position: relative;
+        height: 42px;
+
+        .welcome-page-button {
+          font-size: 16px;
+          left: 0;
+          position: absolute;
+          top: 68px;
+          text-align: center;
+          width: 100%;
+        }
+      }
+
+      .header {
+          background: #06345E;
+          background-image: linear-gradient(180deg, rgba(8, 110, 202, 0.8) 0%, rgba(8, 110, 202, 0) 100%);
+
+          #enter_room {
+              .enter-room-input-container {
+                  padding-right: 0;
+              }
+
+              .warning-without-link,
+              .warning-with-link {
+                  top: 120px;
+              }
+          }
+      }
+
+      .welcome-tabs {
+          display: none;
+      }
+
+      .header-text-title {
+        text-align: center;
+      }
+
+      .welcome-cards-container {
+        padding: 0;
+      }
+
+      &.without-content {
+        .header {
+          height: 100%;
+        }
+      }
+
+      #moderated-meetings {
+          display: none;
+      }
+
+      .welcome-footer-row-block {
+          display: block;
+      }
+      .welcome-badge {
+          margin-right: 16px;
+      }
+  }
+
     #videoResolutionLabel {
         display: none;
     }

css/_variables.scss

@@ -161,71 +161,47 @@ $unsupportedDesktopBrowserTextFontSize: 21px;
 /**
  * The size of the default watermark.
  */
-$watermarkWidth: 186px;
-$watermarkHeight: 74px;
+$watermarkWidth: 71px;
+$watermarkHeight: 32px;
 
-$welcomePageWatermarkWidth: 186px;
-$welcomePageWatermarkHeight: 74px;
+$welcomePageWatermarkWidth: 71px;
+$welcomePageWatermarkHeight: 32px;
 
 /**
  * Welcome page variables.
  */
 $welcomePageDescriptionColor: #fff;
 $welcomePageFontFamily: inherit;
-$welcomePageBackground: linear-gradient(-90deg, #1251AE 0%, #0074FF 50%, #1251AE 100%);
+$welcomePageBackground: none;
 $welcomePageTitleColor: #fff;
 
-$welcomePageHeaderBackground: none;
-$welcomePageHeaderBackgroundSmall: none;
+$welcomePageHeaderBackground: linear-gradient(0deg, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), url('/images/welcome-background.png');
 $welcomePageHeaderBackgroundPosition: none;
 $welcomePageHeaderBackgroundRepeat: none;
-$welcomePageHeaderBackgroundSize: none;
+$welcomePageHeaderBackgroundSize: cover;
 $welcomePageHeaderPaddingBottom: 0px;
-$welcomePageHeaderMinHeight: fit-content;
+$welcomePageHeaderTitleMaxWidth: initial;
+$welcomePageHeaderTextAlign: center;
 
-$welcomePageHeaderTextMarginTop: 35px;
-$welcomePageHeaderTextMarginBottom: 35px;
-$welcomePageHeaderTextDisplay: flex;
-$welcomePageHeaderTextWidth: 650px;
+$welcomePageHeaderContainerDisplay: flex;
+$welcomePageHeaderContainerMargin: 146px 32px 0 32px;
 
-$welcomePageHeaderTextTitleMarginBottom: 16px;
-$welcomePageHeaderTextTitleFontSize: 2.5rem;
-$welcomePageHeaderTextTitleFontWeight: 500;
-$welcomePageHeaderTextTitleLineHeight: 1.18;
+$welcomePageHeaderTextTitleMarginBottom: 0;
+$welcomePageHeaderTextTitleFontSize: 42px;
+$welcomePageHeaderTextTitleFontWeight: normal;
+$welcomePageHeaderTextTitleLineHeight: 50px;
 $welcomePageHeaderTextTitleOpacity: 1;
 
-$welcomePageHeaderTextDescriptionDisplay: inherit;
-$welcomePageHeaderTextDescriptionFontSize: 1rem;
-$welcomePageHeaderTextDescriptionFontWeight: 400;
-$welcomePageHeaderTextDescriptionLineHeight: 24px;
-$welcomePageHeaderTextDescriptionMarginBottom: 20px;
-$welcomePageHeaderTextDescriptionAlignSelf: inherit;
-
 $welcomePageEnterRoomDisplay: flex;
-$welcomePageEnterRoomWidth: 680px;
-$welcomePageEnterRoomPadding: 25px 30px;
-$welcomePageEnterRoomBorderRadius: 0px;
-
-$welcomePageEnterRoomInputContainerPadding: 0 8px 5px 0px;
-$welcomePageEnterRoomInputContainerBorderWidth: 0px 0px 2px 0px;
-$welcomePageEnterRoomInputContainerBorderStyle: solid;
-$welcomePageEnterRoomInputContainerBorderImage: linear-gradient(to right, #dee1e6, #fff) 1;
-
-$welcomePageEnterRoomTitleDisplay: inherit;
+$welcomePageEnterRoomWidth: calc(100% - 32px);
+$welcomePageEnterRoomPadding: 4px;
+$welcomePageEnterRoomMargin: 0 auto;
 
 $welcomePageTabContainerDisplay: flex;
 $welcomePageTabContentDisplay: inherit;
 $welcomePageTabButtonsDisplay: flex;
 $welcomePageTabDisplay: block;
 
-$welcomePageButtonWidth: 51px;
-$welcomePageButtonMinWidth: inherit;
-$welcomePageButtonFontSize: 14px;
-$welcomePageButtonHeight: 35px;
-$welcomePageButtonFontWeight: inherit;
-$welcomePageButtonBorderRadius: 4px;
-$welcomePageButtonLineHeight: 35px;
-
 /**
  * Deep-linking page variables.
  */

css/_welcome_page.scss

@@ -5,6 +5,7 @@ body.welcome-page {
 
 .welcome {
     background-image: $welcomePageBackground;
+    background-color: #fff;
     display: flex;
     flex-direction: column;
     font-family: $welcomePageFontFamily;
@@ -18,21 +19,15 @@ body.welcome-page {
         background-repeat: $welcomePageHeaderBackgroundRepeat;
         background-size: $welcomePageHeaderBackgroundSize;
         padding-bottom: $welcomePageHeaderPaddingBottom;
-        align-items: center;
-        display: flex;
-        flex-direction: column;
-        min-height: $welcomePageHeaderMinHeight;
+        background-color: #002637;
+        height: 480px;
         overflow: hidden;
         position: relative;
-        text-align: center;
 
-        .header-text {
-            display: $welcomePageHeaderTextDisplay;
+        .header-container {
+            display: $welcomePageHeaderContainerDisplay;
             flex-direction: column;
-            margin-top: $watermarkHeight + $welcomePageHeaderTextMarginTop;
-            margin-bottom: $welcomePageHeaderTextMarginBottom;
-            max-width: calc(100% - 40px);
-            width: $welcomePageHeaderTextWidth;
+            margin: $welcomePageHeaderContainerMargin;
             z-index: $zindex2;
         }
 
@@ -42,50 +37,52 @@ body.welcome-page {
             font-weight: $welcomePageHeaderTextTitleFontWeight;
             line-height: $welcomePageHeaderTextTitleLineHeight;
             margin-bottom: $welcomePageHeaderTextTitleMarginBottom;
+            max-width: $welcomePageHeaderTitleMaxWidth;
             opacity: $welcomePageHeaderTextTitleOpacity;
+            text-align: $welcomePageHeaderTextAlign;
         }
 
-        .header-text-description {
-            display: $welcomePageHeaderTextDescriptionDisplay;
-            color: $welcomePageDescriptionColor;
-            font-size: $welcomePageHeaderTextDescriptionFontSize;
-            font-weight: $welcomePageHeaderTextDescriptionFontWeight;
-            line-height: $welcomePageHeaderTextDescriptionLineHeight;
-            margin-bottom: $welcomePageHeaderTextDescriptionMarginBottom;
-            align-self: $welcomePageHeaderTextDescriptionAlignSelf;
+        .header-text-subtitle {
+            color: #fff;
+            font-size: 20px;
+            font-weight: 600;
+            line-height: 26px;
+            margin: 16px 0 32px 0;
+            text-align: $welcomePageHeaderTextAlign;
+
         }
 
         #enter_room {
             display: $welcomePageEnterRoomDisplay;
             align-items: center;
-            max-width: calc(100% - 40px);
+            max-width: 480px;
             width: $welcomePageEnterRoomWidth;
             z-index: $zindex2;
             background-color: #fff;
             padding: $welcomePageEnterRoomPadding;
-            border-radius: $welcomePageEnterRoomBorderRadius;
+            border-radius: 4px;
+            margin: $welcomePageEnterRoomMargin;
 
             .enter-room-input-container {
-                width: 100%;
-                padding: $welcomePageEnterRoomInputContainerPadding;
                 text-align: left;
                 color: #253858;
+                flex-grow: 1;
                 height: fit-content;
-
-                .enter-room-title {
-                    display: $welcomePageEnterRoomTitleDisplay;
-                    font-size: 18px;
-                    font-weight: bold;
-                    padding-bottom: 5px;
-                }
+                padding-right: 4px;
+                position: relative;
 
                 .enter-room-input {
-                    border-width: $welcomePageEnterRoomInputContainerBorderWidth;
-                    border-style: $welcomePageEnterRoomInputContainerBorderStyle;
-                    border-image: $welcomePageEnterRoomInputContainerBorderImage;
+                    border: 0;
+                    background: #fff;
                     display: inline-block;
+                    height: 50px;
                     width: 100%;
                     font-size: 14px;
+                    padding-left: 10px;
+
+                    &:focus {
+                        outline: auto 2px #005fcc;
+                    }
                 }
 
                 .insecure-room-name-warning {
@@ -109,16 +106,28 @@ body.welcome-page {
                 }
             }
 
+            .warning-without-link {
+                position: absolute;
+                top: 44px;
+                left: -10px;
+            }
+
+            .warning-with-link {
+                position: absolute;
+                top: 84px;
+            }
+
         }
 
         #moderated-meetings {
             max-width: calc(100% - 40px);
             padding: 16px 0 39px 0;
+            margin: $welcomePageEnterRoomMargin;
             width: $welcomePageEnterRoomWidth;
 
             p {
                 color: $welcomePageDescriptionColor;
-                text-align: left;
+                text-align: $welcomePageHeaderTextAlign;
 
                 a {
                     color: inherit;
@@ -126,76 +135,70 @@ body.welcome-page {
                 }
             }
         }
+    }
 
-        .tab-container {
-            font-size: 16px;
+    .tab-container {
+        font-size: 16px;
+        position: relative;
+        text-align: left;
+        display: $welcomePageTabContainerDisplay;
+        flex-direction: column;
+
+        .tab-content{
+            display: $welcomePageTabContentDisplay;
+            height: 250px;
+            margin: 5px 0px;
+            overflow: hidden;
+            flex-grow: 1;
             position: relative;
-            text-align: left;
-            min-height: 354px;
-            width: 710px;
-            background: #75A7E7;
-            display: $welcomePageTabContainerDisplay;
-            flex-direction: column;
+        }
 
-            .tab-content{
-                display: $welcomePageTabContentDisplay;
-                margin: 5px 0px;
-                overflow: hidden;
+        .tab-buttons {
+            background-color: #c7ddff;
+            border-radius: 6px;
+            color: #0163FF;
+            font-size: 14px;
+            line-height: 18px;
+            margin: 4px;
+            display: $welcomePageTabButtonsDisplay;
+
+            .tab {
+                background-color: #c7ddff;
+                border-radius: 7px;
+                cursor: pointer;
+                display: $welcomePageTabDisplay;
                 flex-grow: 1;
-                position: relative;
+                margin: 2px;
+                padding: 7px 0;
+                text-align: center;
 
-                > * {
-                    position: absolute;
+                &.selected {
+                    background-color: #FFF;
                 }
             }
 
-            .tab-buttons {
-                font-size: 18px;
-                color: #FFFFFF;
-                display: $welcomePageTabButtonsDisplay;
-                flex-grow: 0;
-                flex-direction: row;
-                min-height: 54px;
-                width: 100%;
-
-                .tab {
-                    display: $welcomePageTabDisplay;
-                    text-align: center;
-                    background: rgba(9,30,66,0.37);
-                    height: 55px;
-                    line-height: 54px;
-                    flex-grow: 1;
-                    cursor: pointer;
-
-                    &.selected, &:hover {
-                        background: rgba(9,30,66,0.71);
-                    }
-
-                    &:last-child {
-                        margin-left: 1px;
-                    }
-                }
-            }
         }
     }
 
     .welcome-page-button {
-        width: $welcomePageButtonWidth;
-        min-width: $welcomePageButtonMinWidth;
-        height: $welcomePageButtonHeight;
-        font-size: $welcomePageButtonFontSize;
-        font-weight: $welcomePageButtonFontWeight;
+        border: 0;
+        font-size: 14px;
         background: #0074E0;
-        border-radius: $welcomePageButtonBorderRadius;
+        border-radius: 3px;
         color: #FFFFFF;
-        text-align: center;
-        vertical-align: middle;
-        line-height: $welcomePageButtonLineHeight;
         cursor: pointer;
+        padding: 16px 20px;
+
+        &:focus-within {
+            outline: auto 2px #022e61;
+        }
     }
 
     .welcome-page-settings {
+        background: rgba(255, 255, 255, 0.38);
+        border-radius: 3px;
         color: $welcomePageDescriptionColor;
+        padding: 4px;
         position: absolute;
         top: 32px;
         right: 32px;
@@ -217,4 +220,83 @@ body.welcome-page {
             height: $welcomePageWatermarkHeight;
         }
     }
+
+    &.without-content {
+        .welcome-card {
+            min-width: 500px;
+        }
+    }
+
+    .welcome-cards-container {
+        color:#131519;
+        padding-top: 40px;
+    }
+
+    .welcome-card-row {
+        display: flex;
+        justify-content: center;
+        padding: 0 32px;
+    }
+
+    .welcome-card-text {
+        padding: 32px;
+    }
+
+    .welcome-card {
+        width: 49%;
+        border-radius: 8px;
+
+        &--dark {
+            background: #444447;
+            color: #fff;
+        }
+
+        &--blue {
+            background: #D5E5FF;
+        }
+
+        &--grey {
+            background: #F2F3F4;
+        }
+
+        &--shadow {
+            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.15);
+        }
+    }
+
+    .welcome-footer {
+        background: #131519;
+        color: #fff;
+        margin-top: 40px;
+        position: relative;
+    }
+
+    .welcome-footer-centered {
+        max-width: 688px;
+        margin: 0 auto;
+    }
+
+    .welcome-footer-padded {
+        padding: 0px 16px;
+    }
+
+    .welcome-footer-row-block {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        border-bottom: 1px solid #424447;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    .welcome-footer--row-1 {
+        padding: 40px 0 24px 0;
+    }
+
+    .welcome-footer-row-1-text {
+        max-width: 200px;
+        margin-right: 16px;
+    }
 }

debian/jitsi-meet-web.install

@@ -13,5 +13,4 @@ lang					/usr/share/jitsi-meet/
 connection_optimization	/usr/share/jitsi-meet/
 resources/robots.txt	/usr/share/jitsi-meet/
 resources/*.sh			/usr/share/jitsi-meet/scripts/
-pwa-worker.js			/usr/share/jitsi-meet/
-manifest.json			/usr/share/jitsi-meet/
+pwa-worker.js /usr/share/jitsi-meet/

images/calendar.svg

@@ -0,0 +1,21 @@
+<svg width="68" height="72" viewBox="0 0 68 72" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="1" y="5.64514" width="65.3548" height="65.3548" rx="7" stroke="#A4B8D1" stroke-width="2"/>
+<rect y="23.2258" width="67.3548" height="2.0213" fill="#A4B8D1"/>
+<rect x="14.5161" width="2.32258" height="14.5161" fill="#A4B8D1"/>
+<rect x="11.6129" y="12.1935" width="8.12903" height="2.32258" fill="#A4B8D1"/>
+<rect x="50.5161" width="2.32258" height="14.5161" fill="#A4B8D1"/>
+<rect x="47.6129" y="12.1935" width="8.12903" height="2.32258" fill="#A4B8D1"/>
+<circle cx="24.387" cy="37.7419" r="2.32258" fill="#A4B8D1"/>
+<circle cx="33.6774" cy="37.7419" r="2.32258" fill="#A4B8D1"/>
+<circle cx="42.9677" cy="37.7419" r="2.32258" fill="#A4B8D1"/>
+<circle cx="52.258" cy="37.7419" r="2.32258" fill="#A4B8D1"/>
+<circle cx="24.387" cy="47.0322" r="2.32258" fill="#A4B8D1"/>
+<circle cx="15.0968" cy="47.0322" r="2.32258" fill="#A4B8D1"/>
+<circle cx="33.6774" cy="47.0322" r="2.32258" fill="#A4B8D1"/>
+<circle cx="42.9677" cy="47.0322" r="2.32258" fill="#A4B8D1"/>
+<circle cx="24.387" cy="56.3226" r="2.32258" fill="#A4B8D1"/>
+<circle cx="15.0968" cy="56.3226" r="2.32258" fill="#A4B8D1"/>
+<circle cx="33.6774" cy="56.3226" r="2.32258" fill="#A4B8D1"/>
+<circle cx="42.9677" cy="56.3226" r="2.32258" fill="#A4B8D1"/>
+<circle cx="52.258" cy="47.0322" r="2.32258" fill="#A4B8D1"/>
+</svg>

index.html

@@ -9,13 +9,8 @@
 
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
     <link rel="stylesheet" href="css/all.css">
-    <link rel="manifest" id="manifest-placeholder">
-
+    <link rel="manifest" href="static/pwa/manifest.json">
     <script>
-        // Dynamically generate the manifest location URL. It must be served from the document origin, and we may have
-        // the base pointing to the CDN. This way we can generate a full URL which will bypass the base.
-        document.querySelector('#manifest-placeholder').setAttribute('href', window.location.origin + '/manifest.json');
-
         document.addEventListener('DOMContentLoaded', () => {
             if (!JitsiMeetJS.app) {
                 return;
@@ -30,7 +25,7 @@
 
             if (shouldRegisterWorker) {
                 navigator.serviceWorker
-                    .register(window.location.origin + '/pwa-worker.js')
+                    .register('pwa-worker.js')
                     .then(reg => {
                         console.log('Service worker registered.', reg);
                     })
@@ -38,7 +33,7 @@
                         console.log(err);
                     });
             }
-        });
+        })
     </script>
     <script>
         // IE11 and earlier can be identified via their user agent and be
@@ -182,6 +177,7 @@
     <!--#include virtual="title.html" -->
     <!--#include virtual="plugin.head.html" -->
     <!--#include virtual="static/welcomePageAdditionalContent.html" -->
+    <!--#include virtual="static/welcomePageAdditionalCard.html" -->
     <!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
   </head>
   <body>

interface_config.js

@@ -46,9 +46,9 @@ var interfaceConfig = {
 
     DEFAULT_BACKGROUND: '#474747',
     DEFAULT_LOCAL_DISPLAY_NAME: 'me',
-    DEFAULT_LOGO_URL: 'images/watermark.png',
+    DEFAULT_LOGO_URL: 'images/watermark.svg',
     DEFAULT_REMOTE_DISPLAY_NAME: 'Fellow Jitster',
-    DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.png',
+    DEFAULT_WELCOME_PAGE_LOGO_URL: 'images/watermark.svg',
 
     DISABLE_DOMINANT_SPEAKER_INDICATOR: false,
 
@@ -86,7 +86,9 @@ var interfaceConfig = {
      */
     DISABLE_VIDEO_BACKGROUND: false,
 
-    DISPLAY_WELCOME_PAGE_CONTENT: true,
+    DISPLAY_WELCOME_FOOTER: true,
+    DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD: false,
+    DISPLAY_WELCOME_PAGE_CONTENT: false,
     DISPLAY_WELCOME_PAGE_TOOLBAR_ADDITIONAL_CONTENT: false,
 
     ENABLE_DIAL_OUT: true,
@@ -136,6 +138,21 @@ var interfaceConfig = {
      */
     MOBILE_APP_PROMO: true,
 
+    /**
+     * Specify custom URL for downloading android mobile app.
+     */
+    MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
+
+    /**
+     * Specify custom URL for downloading f droid app.
+     */
+    MOBILE_DOWNLOAD_LINK_F_DROID: 'https://f-droid.org/en/packages/org.jitsi.meet/',
+
+    /**
+     * Specify URL for downloading ios mobile app.
+     */
+    MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',
+
     NATIVE_APP_NAME: 'Jitsi Meet',
 
     // Names of browsers which should show a warning stating the current browser
@@ -234,16 +251,6 @@ var interfaceConfig = {
      */
     // TILE_VIEW_MAX_COLUMNS: 5,
 
-    /**
-     * Specify custom URL for downloading android mobile app.
-     */
-    // MOBILE_DOWNLOAD_LINK_ANDROID: 'https://play.google.com/store/apps/details?id=org.jitsi.meet',
-
-    /**
-     * Specify URL for downloading ios mobile app.
-     */
-    // MOBILE_DOWNLOAD_LINK_IOS: 'https://itunes.apple.com/us/app/jitsi-meet/id1165103905',
-
     /**
      * Specify Firebase dynamic link properties for the mobile apps.
      */

ios/Podfile.lock

@@ -293,8 +293,8 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webrtc (1.84.1):
-    - React-Core
+  - react-native-webrtc (1.84.0):
+    - React
   - react-native-webview (10.9.0):
     - React
   - React-RCTActionSheet (0.61.5-jitsi.2):
@@ -562,7 +562,7 @@ SPEC CHECKSUMS:
   react-native-keep-awake: eba3137546b10003361b37c761f6c429b59814ae
   react-native-netinfo: 8d8db463bcc5db66a8ac5c48a7d86beb3b92f61a
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webrtc: edd689b0d5a462d7a6f6f52bca3f9414fc0ee11c
+  react-native-webrtc: 9268ae9a2bc9730796b0968d012327e92c392adf
   react-native-webview: 6ee7868ca8eba635dbf7963986d1ab7959da0391
   React-RCTActionSheet: bcbc311dc3b47bc8efb2737ff0940239a45789a9
   React-RCTAnimation: 65f61080ce632f6dea23d52e354ffac9948396c6

lang/main-fr.json

@@ -730,7 +730,7 @@
         "stopScreenSharing": "Arrêter le partage d'écran",
         "stopSubtitles": "Désactiver les sous-titres",
         "stopSharedVideo": "Arrêter la vidéo YouTube",
-        "talkWhileMutedPopup": "Vous voulez parler ? Votre micro est coupé.",
+        "talkWhileMutedPopup": "Vous voulez parler ? Vôtre micro est coupé.",
         "tileViewToggle": "Activer/désactiver la vue mosaïque",
         "toggleCamera": "Changer de caméra",
         "videomute": "Démarrer / Arrêter la caméra",
@@ -769,7 +769,7 @@
         "errorAlreadyInvited": "{{displayName}} est déjà invité(e)",
         "errorInvite": "La conférence n'est pas encore établie. Veuillez réessayer plus tard.",
         "errorInviteFailed": "Nous tentons de résoudre le problème. Veuillez réessayer plus tard.",
-        "errorInviteFailedTitle": "L'invitation de {{displayName}} a échoué",
+        "errorInviteFailedTitle": "l'invitation de {{displayName}} a échoué",
         "errorInviteTitle": "Erreur lors de l'invitation",
         "pending": "{{displayName}} a été invité(e)"
     },
@@ -809,7 +809,7 @@
             "join": "Touchez pour rejoindre",
             "roomname": "Saisissez un nom de salle"
         },
-        "appDescription": "Foncez tchater en vidéo avec toute le monde. En fait, vous pouvez inviter tout ceux que vous connaissez. {{app}} est une solution de visioconférence entièrement chiffrée et 100% libre que vous pouvez utiliser en permanence, chaque jour, et sans aucun compte requis.",
+        "appDescription": "Foncez tchater en vidéo avec toute le monde. En fait, vous pouvez inviter tout ceux que vous connaissez. {{app}} est une solution de visioconférence entièrement chiffrée et 100% libre que vous pouvez utiliser en permanence, chaque jours, et sans aucun compte requis.",
         "audioVideoSwitch": {
             "audio": "Voix",
             "video": "Vidéo"
@@ -847,10 +847,10 @@
         "allow": "Autoriser",
         "backToKnockModeButton": "Aucun mot de passe, demander à rejoindre plutôt",
         "dialogTitle": "Mode lobby",
-        "disableDialogContent": "Le mode lobby est actuellement activé. Cette fonctionnalité garantit que les participants indésirables ne peuvent pas rejoindre votre réunion. Souhaitez-vous la désactiver ?",
+        "disableDialogContent": "Le mode lobby est actuellement activé. Cette fonctionnalité garantit que les participants indésirables ne peuvent pas rejoindre votre réunion. Souhaitez-vous la désactiver?",
         "disableDialogSubmit": "Désactiver",
         "emailField": "Saisissez votre adresse email",
-        "enableDialogPasswordField": "Définir le mot de passe (optionnel)",
+        "enableDialogPasswordField": "Définir le mot de passe (optionel)",
         "enableDialogSubmit": "Activer",
         "enableDialogText": "Le mode lobby vous permet de protéger votre réunion en autorisant les personnes à entrer qu'après l'approbation formelle d'un modérateur.",
         "enterPasswordButton": "Saisissez un mot de passe de réunion",

lang/main-ptBR.json

@@ -512,12 +512,6 @@
     "sectionList": {
         "pullToRefresh": "Puxe para atualizar"
     },
-    "security": {
-        "about": "Voce pode adicionar uma $t(lockRoomPassword) em sua reunião. Participantes irão precisar informar a $t(lockRoomPassword) antes de se juntarem na reunião.",
-        "aboutReadOnly": "Moderadores podem adicionar uma $t(lockRoomPassword) na reunião. Participantes irão precisar informar a $t(lockRoomPassword) antes de se juntarem na reunião",
-        "insecureRoomNameWarning": "Essa sala não está protegida. Participantes indesejados poderão entrar na sua reunião. Considere configurar a segurança da sua reunião utilizando o botão de segurança.",
-        "securityOptions": "Opções de segurança"
-    },
     "settings": {
         "calendar": {
             "about": "A integração do calendário {{appName}} é usada para acessar com segurança o seu calendário para que ele possa ler os próximos eventos.",

lang/main.json

@@ -878,6 +878,8 @@
         "goSmall": "GO",
         "info": "Dial-in info",
         "join": "CREATE / JOIN",
+        "jitsiMeet": "Jitsi Meet",
+        "jitsiOnMobile": "Jitsi on mobile – download our apps and start a meeting from anywhere",
         "moderatedMessage": "Or <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">book a meeting URL</a> in advance where you are the only moderator.",
         "privacy": "Privacy",
         "recentList": "Recent",
@@ -888,6 +890,8 @@
         "roomname": "Enter room name",
         "roomnameHint": "Enter the name or URL of the room you want to join. You may make a name up, just let the people you are meeting know it so that they enter the same name.",
         "sendFeedback": "Send feedback",
+        "secureMeetings": "Secure and high quality meetings",
+        "startMeeting": "Start meeting",
         "terms": "Terms",
         "title": "Secure, fully featured, and completely free video conferencing"
     },

modules/API/API.js

@@ -2,6 +2,7 @@
 
 import Logger from 'jitsi-meet-logger';
 
+import * as JitsiMeetConferenceEvents from '../../ConferenceEvents';
 import {
     createApiEvent,
     sendAnalytics
@@ -13,7 +14,7 @@ import {
     setSubject
 } from '../../react/features/base/conference';
 import { parseJWTFromURLParams } from '../../react/features/base/jwt';
-import JitsiMeetJS, { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
+import { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
 import { pinParticipant } from '../../react/features/base/participants';
 import {
     processExternalDeviceRequest
@@ -45,6 +46,14 @@ declare var APP: Object;
  */
 let commands = {};
 
+/**
+ * The state of screen sharing(started/stopped) before the screen sharing is
+ * enabled and initialized.
+ * NOTE: This flag help us to cache the state and use it if toggle-share-screen
+ * was received before the initialization.
+ */
+let initialScreenSharingState = false;
+
 /**
  * The transport instance used for communication with external apps.
  *
@@ -421,6 +430,19 @@ function initCommands() {
     });
 }
 
+/**
+ * Listens for desktop/screen sharing enabled events and toggles the screen
+ * sharing if needed.
+ *
+ * @param {boolean} enabled - Current screen sharing enabled status.
+ * @returns {void}
+ */
+function onDesktopSharingEnabledChanged(enabled = false) {
+    if (enabled && initialScreenSharingState) {
+        toggleScreenSharing();
+    }
+}
+
 /**
  * Check whether the API should be enabled or not.
  *
@@ -448,10 +470,12 @@ function shouldBeEnabled() {
  * @returns {void}
  */
 function toggleScreenSharing(enable) {
-    if (JitsiMeetJS.isDesktopSharingEnabled()) {
-        APP.conference.toggleScreenSharing(enable).catch(() => {
-            logger.warn('Failed to toggle screen-sharing');
-        });
+    if (APP.conference.isDesktopSharingEnabled) {
+
+        // eslint-disable-next-line no-empty-function
+        APP.conference.toggleScreenSharing(enable).catch(() => {});
+    } else {
+        initialScreenSharingState = !initialScreenSharingState;
     }
 }
 
@@ -484,6 +508,10 @@ class API {
          */
         this._enabled = true;
 
+        APP.conference.addListener(
+            JitsiMeetConferenceEvents.DESKTOP_SHARING_ENABLED_CHANGED,
+            onDesktopSharingEnabledChanged);
+
         initCommands();
     }
 
@@ -1030,6 +1058,9 @@ class API {
     dispose() {
         if (this._enabled) {
             this._enabled = false;
+            APP.conference.removeListener(
+                JitsiMeetConferenceEvents.DESKTOP_SHARING_ENABLED_CHANGED,
+                onDesktopSharingEnabledChanged);
         }
     }
 }

modules/UI/UI.js

@@ -7,6 +7,7 @@ import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
 import { isMobileBrowser } from '../../react/features/base/environment/utils';
+import { getLocalParticipant } from '../../react/features/base/participants';
 import { toggleChat } from '../../react/features/chat';
 import { setDocumentUrl } from '../../react/features/etherpad';
 import { setFilmstripVisible } from '../../react/features/filmstrip';
@@ -98,11 +99,29 @@ UI.notifyReservationError = function(code, msg) {
     });
 };
 
+/**
+ * Change nickname for the user.
+ * @param {string} id user id
+ * @param {string} displayName new nickname
+ */
+UI.changeDisplayName = function(id, displayName) {
+    VideoLayout.onDisplayNameChanged(id, displayName);
+};
+
 /**
  * Initialize conference UI.
  */
 UI.initConference = function() {
+    const { getState } = APP.store;
+    const { id, name } = getLocalParticipant(getState);
+
     UI.showToolbar();
+
+    const displayName = config.displayJids ? id : name;
+
+    if (displayName) {
+        UI.changeDisplayName('localVideoContainer', displayName);
+    }
 };
 
 /**
@@ -228,12 +247,19 @@ UI.getSharedDocumentManager = () => etherpadManager;
  * @param {JitsiParticipant} user
  */
 UI.addUser = function(user) {
+    const id = user.getId();
+    const displayName = user.getDisplayName();
     const status = user.getStatus();
 
     if (status) {
         // FIXME: move updateUserStatus in participantPresenceChanged action
         UI.updateUserStatus(user, status);
     }
+
+    // set initial display name
+    if (displayName) {
+        UI.changeDisplayName(id, displayName);
+    }
 };
 
 /**
@@ -330,8 +356,8 @@ UI.askForNickname = function() {
 /**
  * Sets muted audio state for participant
  */
-UI.setAudioMuted = function(id) {
-    // FIXME: Maybe this can be removed!
+UI.setAudioMuted = function(id, muted) {
+    VideoLayout.onAudioMute(id, muted);
     if (APP.conference.isLocalId(id)) {
         APP.conference.updateAudioIconEnabled();
     }
@@ -340,8 +366,8 @@ UI.setAudioMuted = function(id) {
 /**
  * Sets muted video state for participant
  */
-UI.setVideoMuted = function(id) {
-    VideoLayout.onVideoMute(id);
+UI.setVideoMuted = function(id, muted) {
+    VideoLayout.onVideoMute(id, muted);
     if (APP.conference.isLocalId(id)) {
         APP.conference.updateVideoIconEnabled();
     }
@@ -468,6 +494,14 @@ UI.handleLastNEndpoints = function(leavingIds, enteringIds) {
  */
 UI.setAudioLevel = (id, lvl) => VideoLayout.setAudioLevel(id, lvl);
 
+/**
+ * Hide connection quality statistics from UI.
+ */
+UI.hideStats = function() {
+    VideoLayout.hideStats();
+};
+
+
 UI.notifyTokenAuthFailed = function() {
     messageHandler.showError({
         descriptionKey: 'dialog.tokenAuthFailed',

modules/UI/shared_video/SharedVideoThumb.js

@@ -1,15 +1,10 @@
-/* global $, APP */
+/* global $ */
 
-/* eslint-disable no-unused-vars */
-import React, { Component } from 'react';
-import ReactDOM from 'react-dom';
-import { I18nextProvider } from 'react-i18next';
-import { Provider } from 'react-redux';
+import Logger from 'jitsi-meet-logger';
 
-import { i18next } from '../../../react/features/base/i18n';
-import Thumbnail from '../../../react/features/filmstrip/components/web/Thumbnail';
 import SmallVideo from '../videolayout/SmallVideo';
-/* eslint-enable no-unused-vars */
+
+const logger = Logger.getLogger(__filename);
 
 /**
  *
@@ -29,12 +24,18 @@ export default class SharedVideoThumb extends SmallVideo {
         this.videoSpanId = 'sharedVideoContainer';
         this.container = this.createContainer(this.videoSpanId);
         this.$container = $(this.container);
-        this.renderThumbnail();
         this._setThumbnailSize();
         this.bindHoverHandler();
+        this.isVideoMuted = true;
+        this.updateDisplayName();
         this.container.onclick = this._onContainerClick;
     }
 
+    /**
+     *
+     */
+    initializeAvatar() {} // eslint-disable-line no-empty-function
+
     /**
      *
      * @param {*} spanId
@@ -45,6 +46,18 @@ export default class SharedVideoThumb extends SmallVideo {
         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
@@ -56,14 +69,21 @@ export default class SharedVideoThumb extends SmallVideo {
     }
 
     /**
-     * Renders the thumbnail.
+     * Triggers re-rendering of the display name using current instance state.
+     *
+     * @returns {void}
      */
-    renderThumbnail(isHovered = false) {
-        ReactDOM.render(
-            <Provider store = { APP.store }>
-                <I18nextProvider i18n = { i18next }>
-                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
-                </I18nextProvider>
-            </Provider>, this.container);
+    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

@@ -37,6 +37,7 @@ const Filmstrip = {
      */
     resizeThumbnailsForTileView(width, height, forceUpdate = false) {
         const thumbs = this._getThumbs(!forceUpdate);
+        const avatarSize = height / 2;
 
         if (thumbs.localThumb) {
             thumbs.localThumb.css({
@@ -57,6 +58,11 @@ const Filmstrip = {
                 width: `${width}px`
             });
         }
+
+        $('.avatar-container').css({
+            height: `${avatarSize}px`,
+            width: `${avatarSize}px`
+        });
     },
 
     /**
@@ -71,6 +77,7 @@ const Filmstrip = {
 
         if (thumbs.localThumb) {
             const { height, width } = local;
+            const avatarSize = height / 2;
 
             thumbs.localThumb.css({
                 height: `${height}px`,
@@ -78,10 +85,15 @@ const Filmstrip = {
                 'min-width': `${width}px`,
                 width: `${width}px`
             });
+            $('#localVideoContainer > .avatar-container').css({
+                height: `${avatarSize}px`,
+                width: `${avatarSize}px`
+            });
         }
 
         if (thumbs.remoteThumbs) {
             const { height, width } = remote;
+            const avatarSize = height / 2;
 
             thumbs.remoteThumbs.css({
                 height: `${height}px`,
@@ -89,6 +101,10 @@ const Filmstrip = {
                 'min-width': `${width}px`,
                 width: `${width}px`
             });
+            $('#filmstripRemoteVideosContainer > span > .avatar-container').css({
+                height: `${avatarSize}px`,
+                width: `${avatarSize}px`
+            });
         }
     },
 
@@ -110,6 +126,10 @@ const Filmstrip = {
                 'min-width': '',
                 'min-height': ''
             });
+            $('#localVideoContainer > .avatar-container').css({
+                height: '50%',
+                width: `${heightToWidthPercent / 2}%`
+            });
         }
 
         if (thumbs.remoteThumbs) {
@@ -122,6 +142,10 @@ const Filmstrip = {
                 'min-width': '',
                 'min-height': ''
             });
+            $('#filmstripRemoteVideosContainer > span > .avatar-container').css({
+                height: '50%',
+                width: `${heightToWidthPercent / 2}%`
+            });
         }
     },
 

modules/UI/videolayout/LargeVideoManager.js

@@ -12,7 +12,6 @@ import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
 import { VIDEO_TYPE } from '../../../react/features/base/media';
-import { getParticipantById } from '../../../react/features/base/participants';
 import { CHAT_SIZE } from '../../../react/features/chat';
 import {
     updateKnownLargeVideoResolution
@@ -225,8 +224,9 @@ export default class LargeVideoManager {
             const wasUsersImageCached
                 = !isUserSwitch && container.wasVideoRendered;
             const isVideoMuted = !stream || stream.isMuted();
-            const participant = getParticipantById(APP.store.getState(), id);
-            const connectionStatus = participant?.connectionStatus;
+
+            const connectionStatus
+                = APP.conference.getParticipantConnectionStatus(id);
             const isVideoRenderable
                 = !isVideoMuted
                     && (APP.conference.isLocalId(id)
@@ -479,8 +479,8 @@ export default class LargeVideoManager {
      */
     showRemoteConnectionMessage(show) {
         if (typeof show !== 'boolean') {
-            const participant = getParticipantById(APP.store.getState(), this.id);
-            const connStatus = participant?.connectionStatus;
+            const connStatus
+                = APP.conference.getParticipantConnectionStatus(this.id);
 
             // eslint-disable-next-line no-param-reassign
             show = !APP.conference.isLocalId(this.id)

modules/UI/videolayout/LocalVideo.js

@@ -1,23 +1,23 @@
-/* global $, config, APP */
+/* global $, config, interfaceConfig, APP */
 
+import Logger from 'jitsi-meet-logger';
 /* eslint-disable no-unused-vars */
 import React, { Component } from 'react';
 import ReactDOM from 'react-dom';
-import { I18nextProvider } from 'react-i18next';
 import { Provider } from 'react-redux';
 
-import { i18next } from '../../../react/features/base/i18n';
 import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet';
 import { VideoTrack } from '../../../react/features/base/media';
 import { updateSettings } from '../../../react/features/base/settings';
 import { getLocalVideoTrack } from '../../../react/features/base/tracks';
-import Thumbnail from '../../../react/features/filmstrip/components/web/Thumbnail';
 import { shouldDisplayTileView } from '../../../react/features/video-layout';
 /* eslint-enable no-unused-vars */
 import UIEvents from '../../../service/UI/UIEvents';
 
 import SmallVideo from './SmallVideo';
 
+const logger = Logger.getLogger(__filename);
+
 /**
  *
  */
@@ -37,7 +37,6 @@ export default class LocalVideo extends SmallVideo {
         this.isLocal = true;
         this._setThumbnailSize();
         this.updateDOMLocation();
-        this.renderThumbnail();
 
         this.localVideoId = null;
         this.bindHoverHandler();
@@ -45,6 +44,7 @@ export default class LocalVideo extends SmallVideo {
             this._buildContextMenu();
         }
         this.emitter = emitter;
+        this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP ? 'left top' : 'top center';
 
         Object.defineProperty(this, 'id', {
             get() {
@@ -53,6 +53,17 @@ export default class LocalVideo extends SmallVideo {
         });
         this.initBrowserSpecificProperties();
 
+        // 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;
     }
 
@@ -65,19 +76,38 @@ export default class LocalVideo extends SmallVideo {
         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;
     }
 
     /**
-     * Renders the thumbnail.
+     * Triggers re-rendering of the display name using current instance state.
+     *
+     * @returns {void}
      */
-    renderThumbnail(isHovered = false) {
-        ReactDOM.render(
-            <Provider store = { APP.store }>
-                <I18nextProvider i18n = { i18next }>
-                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
-                </I18nextProvider>
-            </Provider>, this.container);
+    updateDisplayName() {
+        if (!this.container) {
+            logger.warn(
+                    `Unable to set displayName - ${this.videoSpanId
+                    } does not exist`);
+
+            return;
+        }
+
+        this._renderDisplayName({
+            allowEditing: APP.store.getState()['features/base/jwt'].isGuest,
+            displayNameSuffix: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
+            elementID: 'localDisplayName',
+            participantID: this.id
+        });
     }
 
     /**
@@ -87,6 +117,7 @@ export default class LocalVideo extends SmallVideo {
     changeVideo(stream) {
         this.videoStream = stream;
         this.localVideoId = `localVideo_${stream.getId()}`;
+        this._updateVideoElement();
 
         // eslint-disable-next-line eqeqeq
         const isVideo = stream.videoType != 'desktop';
@@ -96,6 +127,17 @@ export default class LocalVideo extends SmallVideo {
         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);
         };
@@ -211,5 +253,35 @@ export default class LocalVideo extends SmallVideo {
             : document.getElementById('filmstripLocalVideoThumbnail');
 
         appendTarget && appendTarget.appendChild(this.container);
+        this._updateVideoElement();
+    }
+
+    /**
+     * 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. Also, set the playsinline attribute on the
+        // video element so that local video doesn't open in full screen by default
+        // in Safari browser on iOS.
+        const video = this.container.querySelector('video');
+
+        video && video.setAttribute('playsinline', 'true');
+        video && !config.testing?.noAutoPlayVideo && video.play();
     }
 }

modules/UI/videolayout/RemoteVideo.js

@@ -12,14 +12,10 @@ import { i18next } from '../../../react/features/base/i18n';
 import {
     JitsiParticipantConnectionStatus
 } from '../../../react/features/base/lib-jitsi-meet';
-import { MEDIA_TYPE } from '../../../react/features/base/media';
 import {
-    getParticipantById,
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
-import { isRemoteTrackMuted } from '../../../react/features/base/tracks';
-import Thumbnail from '../../../react/features/filmstrip/components/web/Thumbnail';
 import { PresenceLabel } from '../../../react/features/presence-status';
 import {
     REMOTE_CONTROL_MENU_STATES,
@@ -43,6 +39,16 @@ function createContainer(spanId) {
     container.id = spanId;
     container.className = 'videocontainer';
 
+    container.innerHTML = `
+        <div class = 'videocontainer__background'></div>
+        <div class = 'videocontainer__toptoolbar'></div>
+        <div class = 'videocontainer__toolbar'></div>
+        <div class = 'videocontainer__hoverOverlay'></div>
+        <div class = 'displayNameContainer'></div>
+        <div class = 'avatar-container'></div>
+        <div class ='presence-label-container'></div>
+        <span class = 'remotevideomenu'></span>`;
+
     const remoteVideosContainer
         = document.getElementById('filmstripRemoteVideosContainer');
     const localVideoContainer
@@ -73,7 +79,10 @@ export default class RemoteVideo extends SmallVideo {
 
         this._audioStreamElement = null;
         this._supportsRemoteControl = false;
+        this.statsPopoverLocation = interfaceConfig.VERTICAL_FILMSTRIP ? 'left bottom' : 'top center';
         this.addRemoteVideoContainer();
+        this.updateIndicators();
+        this.updateDisplayName();
         this.bindHoverHandler();
         this.flipX = false;
         this.isLocal = false;
@@ -88,6 +97,17 @@ export default class RemoteVideo extends SmallVideo {
          */
         this._canPlayEventReceived = false;
 
+        /**
+         * The flag is set to <tt>true</tt> if remote participant's video gets muted
+         * during his media connection disruption. This is to prevent black video
+         * being render on the thumbnail, because even though once the video has
+         * been played the image usually remains on the video element it seems that
+         * after longer period of the video element being hidden this image can be
+         * lost.
+         * @type {boolean}
+         */
+        this.mutedWhileDisconnected = false;
+
         // Bind event handlers so they are only bound once for every instance.
         // TODO The event handlers should be turned into actions so changes can be
         // handled through reducers and middleware.
@@ -105,26 +125,17 @@ export default class RemoteVideo extends SmallVideo {
     addRemoteVideoContainer() {
         this.container = createContainer(this.videoSpanId);
         this.$container = $(this.container);
-        this.renderThumbnail();
+        this.initializeAvatar();
         this._setThumbnailSize();
         this.initBrowserSpecificProperties();
         this.updateRemoteVideoMenu();
+        this.updateStatusBar();
+        this.addAudioLevelIndicator();
+        this.addPresenceLabel();
 
         return this.container;
     }
 
-    /**
-     * Renders the thumbnail.
-     */
-    renderThumbnail(isHovered = false) {
-        ReactDOM.render(
-            <Provider store = { APP.store }>
-                <I18nextProvider i18n = { i18next }>
-                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
-                </I18nextProvider>
-            </Provider>, this.container);
-    }
-
     /**
      * Generates the popup menu content.
      *
@@ -184,6 +195,7 @@ export default class RemoteVideo extends SmallVideo {
                     <AtlasKitThemeProvider mode = 'dark'>
                         <RemoteVideoMenuTriggerButton
                             initialVolumeValue = { initialVolumeValue }
+                            isAudioMuted = { this.isAudioMuted }
                             menuPosition = { remoteMenuPosition }
                             onMenuDisplay
                                 = {this._onRemoteVideoMenuDisplay.bind(this)}
@@ -287,11 +299,43 @@ export default class RemoteVideo extends SmallVideo {
 
     /**
      * Updates the remote video menu.
+     *
+     * @param isMuted the new muted state to update to
      */
-    updateRemoteVideoMenu() {
+    updateRemoteVideoMenu(isMuted) {
+        if (typeof isMuted !== 'undefined') {
+            this.isAudioMuted = isMuted;
+        }
         this._generatePopupContent();
     }
 
+    /**
+     * @inheritDoc
+     * @override
+     */
+    setVideoMutedView(isMuted) {
+        super.setVideoMutedView(isMuted);
+
+        // Update 'mutedWhileDisconnected' flag
+        this._figureOutMutedWhileDisconnected();
+    }
+
+    /**
+     * Figures out the value of {@link #mutedWhileDisconnected} flag by taking into
+     * account remote participant's network connectivity and video muted status.
+     *
+     * @private
+     */
+    _figureOutMutedWhileDisconnected() {
+        const isActive = this.isConnectionActive();
+
+        if (!isActive && this.isVideoMuted) {
+            this.mutedWhileDisconnected = true;
+        } else if (isActive && !this.isVideoMuted) {
+            this.mutedWhileDisconnected = false;
+        }
+    }
+
     /**
      * Removes the remote stream element corresponding to the given stream and
      * parent container.
@@ -322,6 +366,17 @@ export default class RemoteVideo extends SmallVideo {
         this.updateView();
     }
 
+    /**
+     * Checks whether the remote user associated with this <tt>RemoteVideo</tt>
+     * has connectivity issues.
+     *
+     * @return {boolean} <tt>true</tt> if the user's connection is fine or
+     * <tt>false</tt> otherwise.
+     */
+    isConnectionActive() {
+        return this.user.getConnectionStatus() === JitsiParticipantConnectionStatus.ACTIVE;
+    }
+
     /**
      * The remote video is considered "playable" once the can play event has been received. It will be allowed to
      * display video also in {@link JitsiParticipantConnectionStatus.INTERRUPTED} if the video has received the canplay
@@ -333,13 +388,12 @@ export default class RemoteVideo extends SmallVideo {
      * @override
      */
     isVideoPlayable() {
-        const participant = getParticipantById(APP.store.getState(), this.id);
-        const { connectionStatus, mutedWhileDisconnected } = participant || {};
+        const connectionState = APP.conference.getParticipantConnectionStatus(this.id);
 
         return super.isVideoPlayable()
             && this._canPlayEventReceived
-            && (connectionStatus === JitsiParticipantConnectionStatus.ACTIVE
-                || (connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED && !mutedWhileDisconnected));
+            && (connectionState === JitsiParticipantConnectionStatus.ACTIVE
+                || (connectionState === JitsiParticipantConnectionStatus.INTERRUPTED && !this.mutedWhileDisconnected));
     }
 
     /**
@@ -347,16 +401,34 @@ export default class RemoteVideo extends SmallVideo {
      */
     updateView() {
         this.$container.toggleClass('audio-only', APP.conference.isAudioOnly());
+        this.updateConnectionStatusIndicator();
+
+        // This must be called after 'updateConnectionStatusIndicator' because it
+        // affects the display mode by modifying 'mutedWhileDisconnected' flag
         super.updateView();
     }
 
+    /**
+     * Updates the UI to reflect user's connectivity status.
+     */
+    updateConnectionStatusIndicator() {
+        const connectionStatus = this.user.getConnectionStatus();
+
+        logger.debug(`${this.id} thumbnail connection status: ${connectionStatus}`);
+
+        // FIXME rename 'mutedWhileDisconnected' to 'mutedWhileNotRendering'
+        // Update 'mutedWhileDisconnected' flag
+        this._figureOutMutedWhileDisconnected();
+        this.updateConnectionStatus(connectionStatus);
+    }
+
     /**
      * Removes RemoteVideo from the page.
      */
     remove() {
-        this.removeRemoteVideoMenu();
-        ReactDOM.unmountComponentAtNode(this.container);
         super.remove();
+        this.removePresenceLabel();
+        this.removeRemoteVideoMenu();
     }
 
     /**
@@ -429,6 +501,24 @@ export default class RemoteVideo extends SmallVideo {
         }
     }
 
+    /**
+     * 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
+        });
+    }
+
     /**
      * Removes remote video menu element from video element identified by
      * given <tt>videoElementId</tt>.
@@ -443,4 +533,39 @@ export default class RemoteVideo extends SmallVideo {
             menuSpan.remove();
         }
     }
+
+    /**
+     * Mounts the {@code PresenceLabel} for displaying the participant's current
+     * presence status.
+     *
+     * @return {void}
+     */
+    addPresenceLabel() {
+        const presenceLabelContainer = this.container.querySelector('.presence-label-container');
+
+        if (presenceLabelContainer) {
+            ReactDOM.render(
+                <Provider store = { APP.store }>
+                    <I18nextProvider i18n = { i18next }>
+                        <PresenceLabel
+                            participantID = { this.id }
+                            className = 'presence-label' />
+                    </I18nextProvider>
+                </Provider>,
+                presenceLabelContainer);
+        }
+    }
+
+    /**
+     * Unmounts the {@code PresenceLabel} component.
+     *
+     * @return {void}
+     */
+    removePresenceLabel() {
+        const presenceLabelContainer = this.container.querySelector('.presence-label-container');
+
+        if (presenceLabelContainer) {
+            ReactDOM.unmountComponentAtNode(presenceLabelContainer);
+        }
+    }
 }

modules/UI/videolayout/SmallVideo.js

@@ -11,19 +11,11 @@ import { Provider } from 'react-redux';
 import { AudioLevelIndicator } from '../../../react/features/audio-level-indicator';
 import { Avatar as AvatarDisplay } from '../../../react/features/base/avatar';
 import { i18next } from '../../../react/features/base/i18n';
-import { MEDIA_TYPE } from '../../../react/features/base/media';
 import {
-    getLocalParticipant,
-    getParticipantById,
     getParticipantCount,
     getPinnedParticipant,
     pinParticipant
 } from '../../../react/features/base/participants';
-import {
-    getTrackByMediaTypeAndParticipant,
-    isLocalTrackMuted,
-    isRemoteTrackMuted
-} from '../../../react/features/base/tracks';
 import { ConnectionIndicator } from '../../../react/features/connection-indicator';
 import { DisplayName } from '../../../react/features/display-name';
 import {
@@ -89,12 +81,49 @@ export default class SmallVideo {
      * Constructor.
      */
     constructor(VideoLayout) {
+        this.isAudioMuted = false;
+        this.isVideoMuted = false;
+        this.isScreenSharing = false;
         this.videoStream = null;
         this.audioStream = null;
         this.VideoLayout = VideoLayout;
         this.videoIsHovered = false;
         this.videoType = undefined;
 
+        /**
+         * The current state of the user's bridge connection. The value should be
+         * a string as enumerated in the library's participantConnectionStatus
+         * constants.
+         *
+         * @private
+         * @type {string|null}
+         */
+        this._connectionStatus = null;
+
+        /**
+         * Whether or not the connection indicator should be displayed.
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._showConnectionIndicator = !interfaceConfig.CONNECTION_INDICATOR_DISABLED;
+
+        /**
+         * Whether or not the dominant speaker indicator should be displayed.
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._showDominantSpeaker = false;
+
+        /**
+         * Whether or not the raised hand indicator should be displayed.
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._showRaisedHand = false;
+
         // Bind event handlers so they are only bound once for every instance.
         this.updateView = this.updateView.bind(this);
 
@@ -155,22 +184,156 @@ export default class SmallVideo {
         this.$container.hover(
             () => {
                 this.videoIsHovered = true;
-                this.renderThumbnail(true);
                 this.updateView();
+                this.updateIndicators();
             },
             () => {
                 this.videoIsHovered = false;
-                this.renderThumbnail(false);
                 this.updateView();
+                this.updateIndicators();
             }
         );
     }
 
     /**
-     * Renders the thumbnail.
+     * Unmounts the ConnectionIndicator component.
+
+    * @returns {void}
+    */
+    removeConnectionIndicator() {
+        this._showConnectionIndicator = false;
+        this.updateIndicators();
+    }
+
+    /**
+     * Updates the connectionStatus stat which displays in the ConnectionIndicator.
+
+    * @returns {void}
+    */
+    updateConnectionStatus(connectionStatus) {
+        this._connectionStatus = connectionStatus;
+        this.updateIndicators();
+    }
+
+    /**
+     * Shows / hides the audio muted indicator over small videos.
+     *
+     * @param {boolean} isMuted indicates if the muted element should be shown
+     * or hidden
      */
-    renderThumbnail() {
-        // Should be implemented by in subclasses.
+    showAudioIndicator(isMuted) {
+        this.isAudioMuted = isMuted;
+        this.updateStatusBar();
+    }
+
+    /**
+     * Shows / hides the screen-share indicator over small videos.
+     *
+     * @param {boolean} isScreenSharing indicates if the screen-share element should be shown
+     * or hidden
+     */
+    setScreenSharing(isScreenSharing) {
+        if (isScreenSharing === this.isScreenSharing) {
+            return;
+        }
+
+        this.isScreenSharing = isScreenSharing;
+        this.updateView();
+        this.updateStatusBar();
+    }
+
+    /**
+     * Shows video muted indicator over small videos and disables/enables avatar
+     * if video muted.
+     *
+     * @param {boolean} isMuted indicates if we should set the view to muted view
+     * or not
+     */
+    setVideoMutedView(isMuted) {
+        this.isVideoMuted = isMuted;
+        this.updateView();
+        this.updateStatusBar();
+    }
+
+    /**
+     * Create or updates the ReactElement for displaying status indicators about
+     * audio mute, video mute, and moderator status.
+     *
+     * @returns {void}
+     */
+    updateStatusBar() {
+        const statusBarContainer = this.container.querySelector('.videocontainer__toolbar');
+
+        if (!statusBarContainer) {
+            return;
+        }
+
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <I18nextProvider i18n = { i18next }>
+                    <StatusIndicators
+                        showAudioMutedIndicator = { this.isAudioMuted }
+                        showScreenShareIndicator = { this.isScreenSharing }
+                        showVideoMutedIndicator = { this.isVideoMuted }
+                        participantID = { this.id } />
+                </I18nextProvider>
+            </Provider>,
+            statusBarContainer);
+    }
+
+    /**
+     * Adds the element indicating the audio level of the participant.
+     *
+     * @returns {void}
+     */
+    addAudioLevelIndicator() {
+        let audioLevelContainer = this._getAudioLevelContainer();
+
+        if (audioLevelContainer) {
+            return;
+        }
+
+        audioLevelContainer = document.createElement('span');
+        audioLevelContainer.className = 'audioindicator-container';
+        this.container.appendChild(audioLevelContainer);
+        this.updateAudioLevelIndicator();
+    }
+
+    /**
+     * Removes the element indicating the audio level of the participant.
+     *
+     * @returns {void}
+     */
+    removeAudioLevelIndicator() {
+        const audioLevelContainer = this._getAudioLevelContainer();
+
+        if (audioLevelContainer) {
+            ReactDOM.unmountComponentAtNode(audioLevelContainer);
+        }
+    }
+
+    /**
+     * Updates the audio level for this small video.
+     *
+     * @param lvl the new audio level to set
+     * @returns {void}
+     */
+    updateAudioLevelIndicator(lvl = 0) {
+        const audioLevelContainer = this._getAudioLevelContainer();
+
+        if (audioLevelContainer) {
+            ReactDOM.render(<AudioLevelIndicator audioLevel = { lvl }/>, audioLevelContainer);
+        }
+    }
+
+    /**
+     * Queries the component's DOM for the element that should be the parent to the
+     * AudioLevelIndicator.
+     *
+     * @returns {HTMLElement} The DOM element that holds the AudioLevelIndicator.
+     */
+    _getAudioLevelContainer() {
+        return this.container.querySelector('.audioindicator-container');
     }
 
     /**
@@ -187,6 +350,62 @@ export default class SmallVideo {
         return $($(this.container).find('video')[0]);
     }
 
+    /**
+     * Selects the HTML image element which displays user's avatar.
+     *
+     * @return {jQuery|HTMLElement} a jQuery selector pointing to the HTML image
+     * element which displays the user's avatar.
+     */
+    $avatar() {
+        return this.$container.find('.avatar-container');
+    }
+
+    /**
+     * Returns the display name element, which appears on the video thumbnail.
+     *
+     * @return {jQuery} a jQuery selector pointing to the display name element of
+     * the video thumbnail
+     */
+    $displayName() {
+        return this.$container.find('.displayNameContainer');
+    }
+
+    /**
+     * Creates or updates the participant's display name that is shown over the
+     * video preview.
+     *
+     * @param {Object} props - The React {@code Component} props to pass into the
+     * {@code DisplayName} component.
+     * @returns {void}
+     */
+    _renderDisplayName(props) {
+        const displayNameContainer = this.container.querySelector('.displayNameContainer');
+
+        if (displayNameContainer) {
+            ReactDOM.render(
+                <Provider store = { APP.store }>
+                    <I18nextProvider i18n = { i18next }>
+                        <DisplayName { ...props } />
+                    </I18nextProvider>
+                </Provider>,
+                displayNameContainer);
+        }
+    }
+
+    /**
+     * Removes the component responsible for showing the participant's display name,
+     * if its container is present.
+     *
+     * @returns {void}
+     */
+    removeDisplayName() {
+        const displayNameContainer = this.container.querySelector('.displayNameContainer');
+
+        if (displayNameContainer) {
+            ReactDOM.unmountComponentAtNode(displayNameContainer);
+        }
+    }
+
     /**
      * Enables / disables the css responsible for focusing/pinning a video
      * thumbnail.
@@ -230,18 +449,7 @@ export default class SmallVideo {
      * or <tt>false</tt> otherwise.
      */
     isVideoPlayable() {
-        const state = APP.store.getState();
-        const tracks = state['features/base/tracks'];
-        const participant = this.id ? getParticipantById(state, this.id) : getLocalParticipant(state);
-        let isVideoMuted = true;
-
-        if (participant?.local) {
-            isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
-        } else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
-            isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, this.id);
-        }
-
-        return this.videoStream && !isVideoMuted && !APP.conference.isAudioOnly();
+        return this.videoStream && !this.isVideoMuted && !APP.conference.isAudioOnly();
     }
 
     /**
@@ -271,32 +479,19 @@ export default class SmallVideo {
      * @returns {Object}
      */
     computeDisplayModeInput() {
-        let isScreenSharing = false;
-        let connectionStatus, mutedWhileDisconnected;
-        const state = APP.store.getState();
-        const participant = getParticipantById(state, this.id);
-
-        if (typeof participant !== 'undefined' && !participant.isFakeParticipant && !participant.local) {
-            const tracks = state['features/base/tracks'];
-            const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, this.id);
-
-            isScreenSharing = typeof track !== 'undefined' && track.videoType === 'desktop';
-            connectionStatus = participant.connectionStatus;
-            mutedWhileDisconnected = participant.mutedWhileDisconnected;
-        }
-
         return {
             isCurrentlyOnLargeVideo: this.isCurrentlyOnLargeVideo(),
             isHovered: this._isHovered(),
             isAudioOnly: APP.conference.isAudioOnly(),
-            tileViewActive: shouldDisplayTileView(state),
+            tileViewActive: shouldDisplayTileView(APP.store.getState()),
             isVideoPlayable: this.isVideoPlayable(),
             hasVideo: Boolean(this.selectVideoElement().length),
-            connectionStatus,
-            mutedWhileDisconnected,
+            connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
+            mutedWhileDisconnected: this.mutedWhileDisconnected,
             canPlayEventReceived: this._canPlayEventReceived,
             videoStream: Boolean(this.videoStream),
-            isScreenSharing,
+            isVideoMuted: this.isVideoMuted,
+            isScreenSharing: this.isScreenSharing,
             videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
         };
     }
@@ -355,6 +550,43 @@ export default class SmallVideo {
         }
     }
 
+    /**
+     * Updates the react component displaying the avatar with the passed in avatar
+     * url.
+     *
+     * @returns {void}
+     */
+    initializeAvatar() {
+        const thumbnail = this.$avatar().get(0);
+
+        if (thumbnail) {
+            // Maybe add a special case for local participant, as on init of
+            // LocalVideo.js the id is set to "local" but will get updated later.
+            ReactDOM.render(
+                <Provider store = { APP.store }>
+                    <AvatarDisplay
+                        className = 'userAvatar'
+                        participantId = { this.id } />
+                </Provider>,
+                thumbnail
+            );
+        }
+    }
+
+    /**
+     * Unmounts any attached react components (particular the avatar image) from
+     * the avatar container.
+     *
+     * @returns {void}
+     */
+    removeAvatar() {
+        const thumbnail = this.$avatar().get(0);
+
+        if (thumbnail) {
+            ReactDOM.unmountComponentAtNode(thumbnail);
+        }
+    }
+
     /**
      * Shows or hides the dominant speaker indicator.
      * @param show whether to show or hide.
@@ -371,8 +603,30 @@ export default class SmallVideo {
 
             return;
         }
+        if (this._showDominantSpeaker === show) {
+            return;
+        }
 
-        this.$container.toggleClass('active-speaker', show);
+        this._showDominantSpeaker = show;
+        this.$container.toggleClass('active-speaker', this._showDominantSpeaker);
+        this.updateIndicators();
+        this.updateView();
+    }
+
+    /**
+     * Shows or hides the raised hand indicator.
+     * @param show whether to show or hide.
+     */
+    showRaisedHandIndicator(show) {
+        if (!this.container) {
+            logger.warn(`Unable to raised hand indication - ${
+                this.videoSpanId} does not exist`);
+
+            return;
+        }
+
+        this._showRaisedHand = show;
+        this.updateIndicators();
     }
 
     /**
@@ -403,7 +657,19 @@ export default class SmallVideo {
      */
     remove() {
         logger.log('Remove thumbnail', this.id);
-        this._unmountThumbnail();
+        this.removeAudioLevelIndicator();
+
+        const toolbarContainer
+            = this.container.querySelector('.videocontainer__toolbar');
+
+        if (toolbarContainer) {
+            ReactDOM.unmountComponentAtNode(toolbarContainer);
+        }
+
+        this.removeConnectionIndicator();
+        this.removeDisplayName();
+        this.removeAvatar();
+        this._unmountIndicators();
 
         // Remove whole container
         if (this.container.parentNode) {
@@ -418,9 +684,77 @@ export default class SmallVideo {
      * @returns {void}
      */
     rerender() {
+        this.updateIndicators();
+        this.updateStatusBar();
         this.updateView();
     }
 
+    /**
+     * Updates the React element responsible for showing connection status, dominant
+     * speaker, and raised hand icons. Uses instance variables to get the necessary
+     * state to display. Will create the React element if not already created.
+     *
+     * @private
+     * @returns {void}
+     */
+    updateIndicators() {
+        const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
+
+        if (!indicatorToolbar) {
+            return;
+        }
+
+        const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
+        const iconSize = NORMAL;
+        const showConnectionIndicator = this.videoIsHovered || !interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED;
+        const state = APP.store.getState();
+        const currentLayout = getCurrentLayout(state);
+        const participantCount = getParticipantCount(state);
+        let statsPopoverPosition, tooltipPosition;
+
+        if (currentLayout === LAYOUTS.TILE_VIEW) {
+            statsPopoverPosition = 'right top';
+            tooltipPosition = 'right';
+        } else if (currentLayout === LAYOUTS.VERTICAL_FILMSTRIP_VIEW) {
+            statsPopoverPosition = this.statsPopoverLocation;
+            tooltipPosition = 'left';
+        } else {
+            statsPopoverPosition = this.statsPopoverLocation;
+            tooltipPosition = 'top';
+        }
+
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <I18nextProvider i18n = { i18next }>
+                    <div>
+                        <AtlasKitThemeProvider mode = 'dark'>
+                            { this._showConnectionIndicator
+                                ? <ConnectionIndicator
+                                    alwaysVisible = { showConnectionIndicator }
+                                    connectionStatus = { this._connectionStatus }
+                                    iconSize = { iconSize }
+                                    isLocalVideo = { this.isLocal }
+                                    enableStatsDisplay = { !interfaceConfig.filmStripOnly }
+                                    participantId = { this.id }
+                                    statsPopoverPosition = { statsPopoverPosition } />
+                                : null }
+                            <RaisedHandIndicator
+                                iconSize = { iconSize }
+                                participantId = { this.id }
+                                tooltipPosition = { tooltipPosition } />
+                            { this._showDominantSpeaker && participantCount > 2
+                                ? <DominantSpeakerIndicator
+                                    iconSize = { iconSize }
+                                    tooltipPosition = { tooltipPosition } />
+                                : null }
+                        </AtlasKitThemeProvider>
+                    </div>
+                </I18nextProvider>
+            </Provider>,
+            indicatorToolbar
+        );
+    }
+
     /**
      * Callback invoked when the thumbnail is clicked and potentially trigger
      * pinning of the participant.
@@ -478,10 +812,18 @@ export default class SmallVideo {
     }
 
     /**
-     * Unmounts the thumbnail.
+     * Removes the React element responsible for showing connection status, dominant
+     * speaker, and raised hand icons.
+     *
+     * @private
+     * @returns {void}
      */
-    _unmountThumbnail() {
-        ReactDOM.unmountComponentAtNode(this.container);
+    _unmountIndicators() {
+        const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
+
+        if (indicatorToolbar) {
+            ReactDOM.unmountComponentAtNode(indicatorToolbar);
+        }
     }
 
     /**
@@ -495,6 +837,10 @@ export default class SmallVideo {
         switch (layout) {
         case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: {
             this.$container.css('padding-top', `${heightToWidthPercent}%`);
+            this.$avatar().css({
+                height: '50%',
+                width: `${heightToWidthPercent / 2}%`
+            });
             break;
         }
         case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
@@ -504,6 +850,7 @@ export default class SmallVideo {
 
             if (typeof size !== 'undefined') {
                 const { height, width } = size;
+                const avatarSize = height / 2;
 
                 this.$container.css({
                     height: `${height}px`,
@@ -511,6 +858,10 @@ export default class SmallVideo {
                     'min-width': `${width}px`,
                     width: `${width}px`
                 });
+                this.$avatar().css({
+                    height: `${avatarSize}px`,
+                    width: `${avatarSize}px`
+                });
             }
             break;
         }
@@ -520,6 +871,7 @@ export default class SmallVideo {
 
             if (typeof thumbnailSize !== 'undefined') {
                 const { height, width } = thumbnailSize;
+                const avatarSize = height / 2;
 
                 this.$container.css({
                     height: `${height}px`,
@@ -527,6 +879,10 @@ export default class SmallVideo {
                     'min-width': `${width}px`,
                     width: `${width}px`
                 });
+                this.$avatar().css({
+                    height: `${avatarSize}px`,
+                    width: `${avatarSize}px`
+                });
             }
             break;
         }

modules/UI/videolayout/VideoLayout.js

@@ -116,6 +116,12 @@ const VideoLayout = {
      * @param lvl the new audio level to update to
      */
     setAudioLevel(id, lvl) {
+        const smallVideo = this.getSmallVideo(id);
+
+        if (smallVideo) {
+            smallVideo.updateAudioLevelIndicator(lvl);
+        }
+
         if (largeVideo && id === largeVideo.id) {
             largeVideo.updateLargeVideoAudioLevel(lvl);
         }
@@ -131,6 +137,19 @@ const VideoLayout = {
         this._updateLargeVideoIfDisplayed(localId);
     },
 
+    /**
+     * Get's the localID of the conference and set it to the local video
+     * (small one). This needs to be called as early as possible, when muc is
+     * actually joined. Otherwise events can come with information like email
+     * and setting them assume the id is already set.
+     */
+    mucJoined() {
+        // FIXME: replace this call with a generic update call once SmallVideo
+        // only contains a ReactElement. Then remove this call once the
+        // Filmstrip is fully in React.
+        localVideoThumbnail.updateIndicators();
+    },
+
     /**
      * Shows/hides local video.
      * @param {boolean} true to make the local video visible, false - otherwise
@@ -154,9 +173,11 @@ const VideoLayout = {
         remoteVideo.addRemoteStreamElement(stream);
 
         // Make sure track's muted state is reflected
-        if (stream.getType() !== 'audio') {
-            this.onVideoMute(id);
-            remoteVideo.updateView();
+        if (stream.getType() === 'audio') {
+            this.onAudioMute(id, stream.isMuted());
+        } else {
+            this.onVideoMute(id, stream.isMuted());
+            remoteVideo.setScreenSharing(stream.videoType === 'desktop');
         }
     },
 
@@ -168,7 +189,7 @@ const VideoLayout = {
 
         if (remoteVideo) {
             remoteVideo.removeRemoteStreamElement(stream);
-            remoteVideo.updateView();
+            remoteVideo.setScreenSharing(false);
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
@@ -189,7 +210,7 @@ const VideoLayout = {
             if (mediaType === 'audio') {
                 APP.UI.setAudioMuted(participantId, true);
             } else if (mediaType === 'video') {
-                APP.UI.setVideoMuted(participantId);
+                APP.UI.setVideoMuted(participantId, true);
             } else {
                 logger.error(`Unsupported media type: ${mediaType}`);
             }
@@ -308,17 +329,35 @@ const VideoLayout = {
         this._updateLargeVideoIfDisplayed(resourceJid, true);
     },
 
+    /**
+     * On audio muted event.
+     */
+    onAudioMute(id, isMuted) {
+        if (APP.conference.isLocalId(id)) {
+            localVideoThumbnail.showAudioIndicator(isMuted);
+        } else {
+            const remoteVideo = remoteVideos[id];
+
+            if (!remoteVideo) {
+                return;
+            }
+
+            remoteVideo.showAudioIndicator(isMuted);
+            remoteVideo.updateRemoteVideoMenu();
+        }
+    },
+
     /**
      * On video muted event.
      */
-    onVideoMute(id) {
+    onVideoMute(id, value) {
         if (APP.conference.isLocalId(id)) {
-            localVideoThumbnail && localVideoThumbnail.updateView();
+            localVideoThumbnail && localVideoThumbnail.setVideoMutedView(value);
         } else {
             const remoteVideo = remoteVideos[id];
 
             if (remoteVideo) {
-                remoteVideo.updateView();
+                remoteVideo.setVideoMutedView(value);
             }
         }
 
@@ -326,6 +365,22 @@ const VideoLayout = {
         this._updateLargeVideoIfDisplayed(id, true);
     },
 
+    /**
+     * Display name changed.
+     */
+    onDisplayNameChanged(id) {
+        if (id === 'localVideoContainer'
+            || APP.conference.isLocalId(id)) {
+            localVideoThumbnail.updateDisplayName();
+        } else {
+            const remoteVideo = remoteVideos[id];
+
+            if (remoteVideo) {
+                remoteVideo.updateDisplayName();
+            }
+        }
+    },
+
     /**
      * On dominant speaker changed event.
      *
@@ -356,6 +411,12 @@ const VideoLayout = {
         const remoteVideo = remoteVideos[id];
 
         if (remoteVideo) {
+            // Updating only connection status indicator is not enough, because
+            // when we the connection is restored while the avatar was displayed
+            // (due to 'muted while disconnected' condition) we may want to show
+            // the video stream again and in order to do that the display mode
+            // must be updated.
+            // remoteVideo.updateConnectionStatusIndicator(isActive);
             remoteVideo.updateView();
         }
     },
@@ -392,6 +453,20 @@ const VideoLayout = {
         }
     },
 
+    /**
+     * Hides all the indicators
+     */
+    hideStats() {
+        for (const video in remoteVideos) { // eslint-disable-line guard-for-in
+            const remoteVideo = remoteVideos[video];
+
+            if (remoteVideo) {
+                remoteVideo.removeConnectionIndicator();
+            }
+        }
+        localVideoThumbnail.removeConnectionIndicator();
+    },
+
     removeParticipantContainer(id) {
         // Unlock large video
         if (this.getPinnedId() === id) {
@@ -419,7 +494,7 @@ const VideoLayout = {
         }
 
         logger.info('Peer video type changed: ', id, newVideoType);
-        remoteVideo.updateView();
+        remoteVideo.setScreenSharing(newVideoType === 'desktop');
     },
 
     /**
@@ -442,6 +517,15 @@ const VideoLayout = {
     },
 
     changeUserAvatar(id, avatarUrl) {
+        const smallVideo = VideoLayout.getSmallVideo(id);
+
+        if (smallVideo) {
+            smallVideo.initializeAvatar();
+        } else {
+            logger.warn(
+                `Missed avatar update - no small video yet for ${id}`
+            );
+        }
         if (this.isCurrentlyOnLarge(id)) {
             largeVideo.updateAvatar(avatarUrl);
         }

modules/remotecontrol/RemoteControl.js

@@ -3,7 +3,6 @@
 import EventEmitter from 'events';
 import { getLogger } from 'jitsi-meet-logger';
 
-import JitsiMeetJS from '../../react/features/base/lib-jitsi-meet';
 import { DISCO_REMOTE_CONTROL_FEATURE }
     from '../../service/remotecontrol/Constants';
 import * as RemoteControlEvents
@@ -69,7 +68,9 @@ class RemoteControl extends EventEmitter {
      * @returns {void}
      */
     init() {
-        if (config.disableRemoteControl || this._initialized || !JitsiMeetJS.isDesktopSharingEnabled()) {
+        if (config.disableRemoteControl
+                || this._initialized
+                || !APP.conference.isDesktopSharingEnabled) {
             return;
         }
         logger.log('Initializing remote control.');

package-lock.json

@@ -4922,9 +4922,9 @@
       "dev": true
     },
     "amplitude-js": {
-      "version": "7.3.1",
-      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-7.3.1.tgz",
-      "integrity": "sha512-dsJU9MdtDDAOtKnbHrJuVBgsL5UGxD1P2B7doGdAQ1hxxT/5mFrmJTFzi1tKe+2ir3QtcRa9B0qvH8TMsGw22A==",
+      "version": "7.1.1",
+      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-7.1.1.tgz",
+      "integrity": "sha512-grEQf0p4V/q4aIcGYdGEJ6EquBXu91R/RorsYTQvh9O6sxjpwHf5vSDICQJq7twEElBrSHoSF77GUvC9ZTBj4A==",
       "requires": {
         "@amplitude/ua-parser-js": "0.7.24",
         "blueimp-md5": "^2.10.0",
@@ -10771,8 +10771,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
-      "from": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
+      "version": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
+      "from": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
       "requires": {
         "@jitsi/js-utils": "1.0.2",
         "@jitsi/sdp-interop": "1.0.3",
@@ -14265,9 +14265,9 @@
       "integrity": "sha512-iqdJ1KpZbR4XGahgVmaeibB7kDhyMT7wrylINgJaYBY38IAiI0LF32VX1umO4pko6n21YF5I/kSeNQ+OXGqqow=="
     },
     "react-native-webrtc": {
-      "version": "1.84.1",
-      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-1.84.1.tgz",
-      "integrity": "sha512-ewZBgKE+YhLaivo9Wh6aiaEp8ZRvFMqblrkDl1nptQiNNH6CungoAzSOxGDnHWAxepRfiUrW5qnADrsYKmaNeQ==",
+      "version": "1.84.0",
+      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-1.84.0.tgz",
+      "integrity": "sha512-xPOFbrcehuBzLnFy3keCM2HyMsyCVDQjQNAn8SIHKH/PA8Q7kZ4spuytc2E1hBTr7zH/vQ2Px+DWqu7on12jag==",
       "requires": {
         "base64-js": "^1.1.2",
         "event-target-shim": "^1.0.5",

package.json

@@ -40,7 +40,7 @@
     "@svgr/webpack": "4.3.2",
     "@tensorflow-models/body-pix": "2.0.4",
     "@tensorflow/tfjs": "1.5.1",
-    "amplitude-js": "7.3.1",
+    "amplitude-js": "7.1.1",
     "base64-js": "1.3.1",
     "bc-css-flags": "3.0.0",
     "dropbox": "4.0.9",
@@ -56,7 +56,7 @@
     "jquery-i18next": "1.2.1",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#3ed4e3caeeaba37f8eae6854b1b7dc9c334adba7",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.19",
     "moment": "2.19.4",
@@ -84,7 +84,7 @@
     "react-native-svg-transformer": "0.14.3",
     "react-native-url-polyfill": "1.2.0",
     "react-native-watch-connectivity": "0.4.3",
-    "react-native-webrtc": "1.84.1",
+    "react-native-webrtc": "1.84.0",
     "react-native-webview": "10.9.0",
     "react-native-youtube-iframe": "1.2.3",
     "react-redux": "7.1.0",
@@ -92,7 +92,7 @@
     "react-transition-group": "2.4.0",
     "redux": "4.0.4",
     "redux-thunk": "2.2.0",
-    "rnnoise-wasm": "github:jitsi/rnnoise-wasm#566a16885897704d6e6d67a1d5ac5d39781db2af",
+    "rnnoise-wasm": "github:jitsi/rnnoise-wasm.git#566a16885897704d6e6d67a1d5ac5d39781db2af",
     "rtcstats": "github:jitsi/rtcstats#v6.2.0",
     "stackblur-canvas": "2.3.0",
     "styled-components": "3.4.9",

react/features/analytics/AnalyticsEvents.js

@@ -772,22 +772,6 @@ export function createTrackMutedEvent(mediaType, reason, muted = true) {
     };
 }
 
-/**
- * Creates an event for joining a vpaas conference.
- *
- * @param {string} tenant - The conference tenant.
- * @returns {Object} The event in a format suitable for sending via
- * sendAnalytics.
- */
-export function createVpaasConferenceJoinedEvent(tenant) {
-    return {
-        action: 'vpaas.conference.joined',
-        attributes: {
-            tenant
-        }
-    };
-}
-
 /**
  * Creates an event for an action on the welcome page.
  *

react/features/app/actions.js

@@ -16,7 +16,7 @@ import { connect, disconnect, setLocationURL } from '../base/connection';
 import { loadConfig } from '../base/lib-jitsi-meet';
 import { MEDIA_TYPE } from '../base/media';
 import { toState } from '../base/redux';
-import { createDesiredLocalTracks, isLocalCameraTrackMuted, isLocalTrackMuted } from '../base/tracks';
+import { createDesiredLocalTracks, isLocalVideoTrackMuted, isLocalTrackMuted } from '../base/tracks';
 import {
     addHashParamsToURL,
     getBackendSafeRoomName,
@@ -232,7 +232,7 @@ export function reloadNow() {
 function addTrackStateToURL(url, stateful) {
     const state = toState(stateful);
     const tracks = state['features/base/tracks'];
-    const isVideoMuted = isLocalCameraTrackMuted(tracks);
+    const isVideoMuted = isLocalVideoTrackMuted(tracks);
     const isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
 
     return addHashParamsToURL(new URL(url), { // use new URL object in order to not pollute the passed parameter.

react/features/base/conference/actionTypes.js

@@ -140,6 +140,18 @@ export const P2P_STATUS_CHANGED = 'P2P_STATUS_CHANGED';
  */
 export const SEND_TONES = 'SEND_TONES';
 
+/**
+ * The type of (redux) action which sets the desktop sharing enabled flag for
+ * the current conference.
+ *
+ * {
+ *     type: SET_DESKTOP_SHARING_ENABLED,
+ *     desktopSharingEnabled: boolean
+ * }
+ */
+export const SET_DESKTOP_SHARING_ENABLED
+    = 'SET_DESKTOP_SHARING_ENABLED';
+
 /**
  * The type of (redux) action which updates the current known status of the
  * Follow Me feature.

react/features/base/conference/actions.js

@@ -43,6 +43,7 @@ import {
     LOCK_STATE_CHANGED,
     P2P_STATUS_CHANGED,
     SEND_TONES,
+    SET_DESKTOP_SHARING_ENABLED,
     SET_FOLLOW_ME,
     SET_PASSWORD,
     SET_PASSWORD_FAILED,
@@ -572,6 +573,22 @@ export function sendTones(tones: string, duration: number, pause: number) {
     };
 }
 
+/**
+ * Sets the flag for indicating if desktop sharing is enabled.
+ *
+ * @param {boolean} desktopSharingEnabled - True if desktop sharing is enabled.
+ * @returns {{
+ *     type: SET_DESKTOP_SHARING_ENABLED,
+ *     desktopSharingEnabled: boolean
+ * }}
+ */
+export function setDesktopSharingEnabled(desktopSharingEnabled: boolean) {
+    return {
+        type: SET_DESKTOP_SHARING_ENABLED,
+        desktopSharingEnabled
+    };
+}
+
 /**
  * Enables or disables the Follow Me feature.
  *

react/features/base/conference/functions.js

@@ -73,7 +73,6 @@ export function commonUserJoinedHandling(
     } else {
         dispatch(participantJoined({
             botType: user.getBotType(),
-            connectionStatus: user.getConnectionStatus(),
             conference,
             id,
             name: displayName,

react/features/base/conference/middleware.js

@@ -128,6 +128,9 @@ function _conferenceFailed({ dispatch, getState }, next, action) {
             titleKey: 'dialog.sessTerminated'
         }));
 
+        if (typeof APP !== 'undefined') {
+            APP.UI.hideStats();
+        }
         break;
     }
     case JitsiConferenceErrors.CONNECTION_ERROR: {

react/features/base/conference/middleware.native.js

@@ -1,74 +0,0 @@
-// @flow
-
-import { setPictureInPictureDisabled } from '../../mobile/picture-in-picture/functions';
-import { setAudioOnly } from '../audio-only';
-import JitsiMeetJS from '../lib-jitsi-meet';
-import { MiddlewareRegistry } from '../redux';
-import { TOGGLE_SCREENSHARING } from '../tracks/actionTypes';
-import { destroyLocalDesktopTrackIfExists, replaceLocalTrack } from '../tracks/actions';
-import { getLocalVideoTrack, isLocalVideoTrackDesktop } from '../tracks/functions';
-
-import './middleware.any';
-
-MiddlewareRegistry.register(store => next => action => {
-    switch (action.type) {
-    case TOGGLE_SCREENSHARING: {
-        _toggleScreenSharing(store);
-        break;
-    }
-    }
-
-    return next(action);
-});
-
-/**
- * Toggles screen sharing.
- *
- * @private
- * @param {Store} store - The redux.
- * @returns {void}
- */
-function _toggleScreenSharing(store) {
-    const { dispatch, getState } = store;
-    const state = getState();
-
-    const isSharing = isLocalVideoTrackDesktop(state);
-
-    if (isSharing) {
-        dispatch(destroyLocalDesktopTrackIfExists());
-    } else {
-        _startScreenSharing(dispatch, state);
-    }
-}
-
-/**
- * Creates desktop track and replaces the local one.
- *
- * @private
- * @param {Dispatch} dispatch - The redux {@code dispatch} function.
- * @param {Object} state - The redux state.
- * @returns {void}
- */
-function _startScreenSharing(dispatch, state) {
-    setPictureInPictureDisabled(true);
-
-    JitsiMeetJS.createLocalTracks({ devices: [ 'desktop' ] })
-    .then(tracks => {
-        const track = tracks[0];
-        const currentLocalTrack = getLocalVideoTrack(state['features/base/tracks']);
-        const currentJitsiTrack = currentLocalTrack && currentLocalTrack.jitsiTrack;
-
-        dispatch(replaceLocalTrack(currentJitsiTrack, track));
-
-        const { enabled: audioOnly } = state['features/base/audio-only'];
-
-        if (audioOnly) {
-            dispatch(setAudioOnly(false));
-        }
-    })
-    .catch(error => {
-        console.log('ERROR creating ScreeSharing stream ', error);
-
-        setPictureInPictureDisabled(false);
-    });
-}

react/features/base/conference/middleware.web.js

@@ -1,23 +0,0 @@
-// @flow
-
-import UIEvents from '../../../../service/UI/UIEvents';
-import { MiddlewareRegistry } from '../redux';
-import { TOGGLE_SCREENSHARING } from '../tracks/actionTypes';
-
-import './middleware.any';
-
-declare var APP: Object;
-
-MiddlewareRegistry.register((/* store */) => next => action => {
-    switch (action.type) {
-    case TOGGLE_SCREENSHARING: {
-        if (typeof APP === 'object') {
-            APP.UI.emitEvent(UIEvents.TOGGLE_SCREENSHARING);
-        }
-
-        break;
-    }
-    }
-
-    return next(action);
-});

react/features/base/conference/reducer.js

@@ -16,6 +16,7 @@ import {
     CONFERENCE_WILL_LEAVE,
     LOCK_STATE_CHANGED,
     P2P_STATUS_CHANGED,
+    SET_DESKTOP_SHARING_ENABLED,
     SET_FOLLOW_ME,
     SET_PASSWORD,
     SET_PENDING_SUBJECT_CHANGE,
@@ -75,6 +76,9 @@ ReducerRegistry.register(
         case P2P_STATUS_CHANGED:
             return _p2pStatusChanged(state, action);
 
+        case SET_DESKTOP_SHARING_ENABLED:
+            return _setDesktopSharingEnabled(state, action);
+
         case SET_FOLLOW_ME:
             return set(state, 'followMeEnabled', action.enabled);
 
@@ -339,6 +343,21 @@ function _p2pStatusChanged(state, action) {
     return set(state, 'p2p', action.p2p);
 }
 
+/**
+ * Reduces a specific Redux action SET_DESKTOP_SHARING_ENABLED of the feature
+ * base/conference.
+ *
+ * @param {Object} state - The Redux state of the feature base/conference.
+ * @param {Action} action - The Redux action SET_DESKTOP_SHARING_ENABLED to
+ * reduce.
+ * @private
+ * @returns {Object} The new state of the feature base/conference after the
+ * reduction of the specified action.
+ */
+function _setDesktopSharingEnabled(state, action) {
+    return set(state, 'desktopSharingEnabled', action.desktopSharingEnabled);
+}
+
 /**
  * Reduces a specific Redux action SET_PASSWORD of the feature base/conference.
  *

react/features/base/config/configWhitelist.js

@@ -91,6 +91,7 @@ export default [
     'disableSimulcast',
     'disableSuspendVideo',
     'disableThirdPartyRequests',
+    'displayJids',
     'doNotStoreRoom',
     'e2eping',
     'enableDisplayNameInStats',

react/features/base/connection/functions.js

@@ -59,7 +59,7 @@ export function getInviteURL(stateOrGetState: Function | Object): string {
 
     if (inviteDomain) {
         const meetingId
-            = state['features/base/config'].brandingRoomAlias || urlWithoutParams.pathname.replace('/', '');
+            = state['features/base/config'].brandingRoomAlias || urlWithoutParams.pathname;
 
         return `${inviteDomain}/${meetingId}`;
     }

react/features/base/icons/svg/calendar-plus.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.99996 2.50002C4.99996 2.03978 5.37306 1.66669 5.83329 1.66669C6.29353 1.66669 6.66663 2.03978 6.66663 2.50002V3.33335H13.3333V2.50002C13.3333 2.03978 13.7064 1.66669 14.1666 1.66669C14.6269 1.66669 15 2.03978 15 2.50002V3.33335H16.6666C17.5871 3.33335 18.3333 4.07955 18.3333 5.00002V16.6667C18.3333 17.5872 17.5871 18.3334 16.6666 18.3334H3.33329C2.41282 18.3334 1.66663 17.5872 1.66663 16.6667V5.00002C1.66663 4.07955 2.41282 3.33335 3.33329 3.33335H4.99996V2.50002ZM3.33329 16.6667V5.00002H16.6666V16.6667H3.33329ZM9.99996 6.66669C9.53972 6.66669 9.16663 7.03978 9.16663 7.50002V10H6.66662C6.20639 10 5.83329 10.3731 5.83329 10.8334C5.83329 11.2936 6.20639 11.6667 6.66662 11.6667H9.16663V14.1667C9.16663 14.6269 9.53972 15 9.99996 15C10.4602 15 10.8333 14.6269 10.8333 14.1667V11.6667H13.3333C13.7935 11.6667 14.1666 11.2936 14.1666 10.8334C14.1666 10.3731 13.7935 10 13.3333 10H10.8333V7.50002C10.8333 7.03978 10.4602 6.66669 9.99996 6.66669Z" fill="#0163FF"/>
+</svg>

react/features/base/icons/svg/index.js

@@ -11,6 +11,7 @@ export { default as IconAudioOnly } from './visibility.svg';
 export { default as IconAudioOnlyOff } from './visibility-off.svg';
 export { default as IconAudioRoute } from './volume.svg';
 export { default as IconBlurBackground } from './blur-background.svg';
+export { default as IconPlusCalendar } from './calendar-plus.svg';
 export { default as IconCamera } from './camera.svg';
 export { default as IconCameraDisabled } from './camera-disabled.svg';
 export { default as IconCancelSelection } from './cancel.svg';

react/features/base/jwt/functions.js

@@ -1,7 +1,5 @@
 /* @flow */
 
-import jwtDecode from 'jwt-decode';
-
 import { parseURLParams } from '../util';
 
 /**
@@ -16,15 +14,3 @@ import { parseURLParams } from '../util';
 export function parseJWTFromURLParams(url: URL = window.location) {
     return parseURLParams(url, true, 'search').jwt;
 }
-
-/**
- * Returns the user name after decoding the jwt.
- *
- * @param {Object} state - The app state.
- * @returns {string}
- */
-export function getJwtName(state: Object) {
-    const jwtData = jwtDecode(state['features/base/jwt'].jwt);
-
-    return jwtData?.context?.user?.name || '';
-}

react/features/base/lastn/middleware.js

@@ -16,7 +16,6 @@ import {
     getParticipantCount
 } from '../participants/functions';
 import { MiddlewareRegistry } from '../redux';
-import { isLocalVideoTrackDesktop } from '../tracks/functions';
 
 import { limitLastN } from './functions';
 import logger from './logger';
@@ -79,7 +78,7 @@ function _updateLastN({ getState }) {
     }
 
     if (typeof appState !== 'undefined' && appState !== 'active') {
-        lastN = isLocalVideoTrackDesktop(state) ? 1 : 0;
+        lastN = 0;
     } else if (audioOnly) {
         const { screenShares, tileViewEnabled } = state['features/video-layout'];
         const largeVideoParticipantId = state['features/large-video'].participantId;

react/features/base/lib-jitsi-meet/middleware.js

@@ -104,10 +104,8 @@ function _setErrorHandlers() {
 
         // eslint-disable-next-line max-params
         window.onerror = (message, source, lineno, colno, error) => {
-            const errMsg = message || (error && error.message);
-            const stack = error && error.stack;
-
-            JitsiMeetJS.getGlobalOnErrorHandler(errMsg, source, lineno, colno, stack);
+            JitsiMeetJS.getGlobalOnErrorHandler(
+                message, source, lineno, colno, error);
 
             if (oldOnErrorHandler) {
                 oldOnErrorHandler(message, source, lineno, colno, error);
@@ -117,14 +115,8 @@ function _setErrorHandlers() {
         const oldOnUnhandledRejection = window.onunhandledrejection;
 
         window.onunhandledrejection = function(event) {
-            let message = event.reason;
-            let stack = 'n/a';
-
-            if (event.reason instanceof Error) {
-                ({ message, stack } = event.reason);
-            }
-
-            JitsiMeetJS.getGlobalOnErrorHandler(message, null, null, null, stack);
+            JitsiMeetJS.getGlobalOnErrorHandler(
+                null, null, null, null, event.reason);
 
             if (oldOnUnhandledRejection) {
                 oldOnUnhandledRejection(event);

react/features/base/media/components/web/Video.js

@@ -99,13 +99,6 @@ class Video extends Component<Props> {
         }
 
         this._attachTrack(this.props.videoTrack);
-
-        if (this._videoElement && this.props.autoPlay) {
-            // 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.
-            this._videoElement.play();
-        }
     }
 
     /**
@@ -149,8 +142,6 @@ class Video extends Component<Props> {
      * @returns {ReactElement}
      */
     render() {
-        // NOTE: Maybe we should render null if we don't have video track or if the video track has ended.
-
         return (
             <video
                 autoPlay = { this.props.autoPlay }

react/features/base/media/functions.js

@@ -1,30 +1,9 @@
 /* @flow */
 
 import { toState } from '../redux';
-import { getPropertyValue } from '../settings';
 
 import { VIDEO_MUTISM_AUTHORITY } from './constants';
 
-
-// XXX The configurations/preferences/settings startWithAudioMuted and startWithVideoMuted were introduced for
-// conferences/meetings. So it makes sense for these to not be considered outside of conferences/meetings
-// (e.g. WelcomePage). Later on, though, we introduced a "Video <-> Voice" toggle on the WelcomePage which utilizes
-// startAudioOnly outside of conferences/meetings so that particular configuration/preference/setting employs slightly
-// exclusive logic.
-const START_WITH_AUDIO_VIDEO_MUTED_SOURCES = {
-    // We have startWithAudioMuted and startWithVideoMuted here:
-    config: true,
-    settings: true,
-
-    // XXX We've already overwritten base/config with urlParams. However,
-    // settings are more important than the server-side config.
-    // Consequently, we need to read from urlParams anyway:
-    urlParams: true,
-
-    // We don't have startWithAudioMuted and startWithVideoMuted here:
-    jwt: false
-};
-
 /**
  * Determines whether audio is currently muted.
  *
@@ -68,26 +47,6 @@ function _isVideoMutedByAuthority(
     return Boolean(muted & videoMutismAuthority);
 }
 
-/**
- * Computes the startWithAudioMuted by retrieving its values from config, URL and settings.
- *
- * @param {Object|Function} stateful - The redux state object or {@code getState} function.
- * @returns {boolean} - The computed startWithAudioMuted value that will be used.
- */
-export function getStartWithAudioMuted(stateful: Object | Function) {
-    return Boolean(getPropertyValue(stateful, 'startWithAudioMuted', START_WITH_AUDIO_VIDEO_MUTED_SOURCES));
-}
-
-/**
- * Computes the startWithAudioMuted by retrieving its values from config, URL and settings.
- *
- * @param {Object|Function} stateful - The redux state object or {@code getState} function.
- * @returns {boolean} - The computed startWithAudioMuted value that will be used.
- */
-export function getStartWithVideoMuted(stateful: Object | Function) {
-    return Boolean(getPropertyValue(stateful, 'startWithVideoMuted', START_WITH_AUDIO_VIDEO_MUTED_SOURCES));
-}
-
 /**
  * Determines whether video is currently muted by the user authority.
  *

react/features/base/media/middleware.js

@@ -13,7 +13,7 @@ import { isRoomValid, SET_ROOM } from '../conference';
 import JitsiMeetJS from '../lib-jitsi-meet';
 import { MiddlewareRegistry } from '../redux';
 import { getPropertyValue } from '../settings';
-import { isLocalVideoTrackDesktop, setTrackMuted, TRACK_ADDED } from '../tracks';
+import { setTrackMuted, TRACK_ADDED } from '../tracks';
 
 import { setAudioMuted, setCameraFacingMode, setVideoMuted } from './actions';
 import {
@@ -21,7 +21,6 @@ import {
     MEDIA_TYPE,
     VIDEO_MUTISM_AUTHORITY
 } from './constants';
-import { getStartWithAudioMuted, getStartWithVideoMuted } from './functions';
 import logger from './logger';
 import {
     _AUDIO_INITIAL_MEDIA_STATE,
@@ -73,15 +72,13 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _appStateChanged({ dispatch, getState }, next, action) {
-    if (navigator.product === 'ReactNative') {
-        const { appState } = action;
-        const mute = appState !== 'active' && !isLocalVideoTrackDesktop(getState());
+function _appStateChanged({ dispatch }, next, action) {
+    const { appState } = action;
+    const mute = appState !== 'active'; // Note that 'background' and 'inactive' are treated equal.
 
-        sendAnalytics(createTrackMutedEvent('video', 'background mode', mute));
+    sendAnalytics(createTrackMutedEvent('video', 'background mode', mute));
 
-        dispatch(setVideoMuted(mute, MEDIA_TYPE.VIDEO, VIDEO_MUTISM_AUTHORITY.BACKGROUND));
-    }
+    dispatch(setVideoMuted(mute, MEDIA_TYPE.VIDEO, VIDEO_MUTISM_AUTHORITY.BACKGROUND));
 
     return next(action);
 }
@@ -136,8 +133,37 @@ function _setRoom({ dispatch, getState }, next, action) {
     const state = getState();
     const { room } = action;
     const roomIsValid = isRoomValid(room);
-    const audioMuted = roomIsValid ? getStartWithAudioMuted(state) : _AUDIO_INITIAL_MEDIA_STATE.muted;
-    const videoMuted = roomIsValid ? getStartWithVideoMuted(state) : _VIDEO_INITIAL_MEDIA_STATE.muted;
+
+    // XXX The configurations/preferences/settings startWithAudioMuted,
+    // startWithVideoMuted, and startAudioOnly were introduced for
+    // conferences/meetings. So it makes sense for these to not be considered
+    // outside of conferences/meetings (e.g. WelcomePage). Later on, though, we
+    // introduced a "Video <-> Voice" toggle on the WelcomePage which utilizes
+    // startAudioOnly outside of conferences/meetings so that particular
+    // configuration/preference/setting employs slightly exclusive logic.
+    const mutedSources = {
+        // We have startWithAudioMuted and startWithVideoMuted here:
+        config: true,
+        settings: true,
+
+        // XXX We've already overwritten base/config with urlParams. However,
+        // settings are more important than the server-side config.
+        // Consequently, we need to read from urlParams anyway:
+        urlParams: true,
+
+        // We don't have startWithAudioMuted and startWithVideoMuted here:
+        jwt: false
+    };
+    const audioMuted
+        = roomIsValid
+            ? Boolean(
+                getPropertyValue(state, 'startWithAudioMuted', mutedSources))
+            : _AUDIO_INITIAL_MEDIA_STATE.muted;
+    const videoMuted
+        = roomIsValid
+            ? Boolean(
+                getPropertyValue(state, 'startWithVideoMuted', mutedSources))
+            : _VIDEO_INITIAL_MEDIA_STATE.muted;
 
     sendAnalytics(
         createStartMutedConfigurationEvent('local', audioMuted, videoMuted));

react/features/base/participants/actions.js

@@ -19,8 +19,7 @@ import {
 import {
     getLocalParticipant,
     getNormalizedDisplayName,
-    getParticipantDisplayName,
-    figureOutMutedWhileDisconnectedStatus
+    getParticipantDisplayName
 } from './functions';
 
 /**
@@ -217,15 +216,12 @@ export function muteRemoteParticipant(id) {
  * }}
  */
 export function participantConnectionStatusChanged(id, connectionStatus) {
-    return (dispatch, getState) => {
-        return {
-            type: PARTICIPANT_UPDATED,
-            participant: {
-                connectionStatus,
-                id,
-                mutedWhileDisconnected: figureOutMutedWhileDisconnectedStatus(getState(), id, connectionStatus)
-            }
-        };
+    return {
+        type: PARTICIPANT_UPDATED,
+        participant: {
+            connectionStatus,
+            id
+        }
     };
 }
 

react/features/base/participants/functions.js

@@ -5,7 +5,7 @@ import { getGravatarURL } from '@jitsi/js-utils/avatar';
 import { JitsiParticipantConnectionStatus } from '../lib-jitsi-meet';
 import { MEDIA_TYPE, shouldRenderVideoTrack } from '../media';
 import { toState } from '../redux';
-import { getTrackByMediaTypeAndParticipant, isRemoteTrackMuted } from '../tracks';
+import { getTrackByMediaTypeAndParticipant } from '../tracks';
 import { createDeferred } from '../util';
 
 import {
@@ -366,45 +366,6 @@ export function shouldRenderParticipantVideo(stateful: Object | Function, id: st
     return participantIsInLargeVideoWithScreen;
 }
 
-/**
- * Figures out the value of mutedWhileDisconnected status by taking into
- * account remote participant's network connectivity and video muted status.
- * The flag is set to <tt>true</tt> if remote participant's video gets muted
- * during his media connection disruption. This is to prevent black video
- * being render on the thumbnail, because even though once the video has
- * been played the image usually remains on the video element it seems that
- * after longer period of the video element being hidden this image can be
- * lost.
- *
- * @param {Object|Function} stateful - Object or function that can be resolved
- * to the Redux state.
- * @param {string} participantID - The ID of the participant.
- * @param {string} [connectionStatus] - A connection status to be used.
- * @returns {boolean} - The mutedWhileDisconnected value.
- */
-export function figureOutMutedWhileDisconnectedStatus(
-        stateful: Function | Object, participantID: string, connectionStatus: ?string) {
-    const state = toState(stateful);
-    const participant = getParticipantById(state, participantID);
-
-    if (!participant || participant.local) {
-        return undefined;
-    }
-
-    const isActive = (connectionStatus || participant.connectionStatus) === JitsiParticipantConnectionStatus.ACTIVE;
-    const isVideoMuted = isRemoteTrackMuted(state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantID);
-    let mutedWhileDisconnected = participant.mutedWhileDisconnected || false;
-
-    if (!isActive && isVideoMuted) {
-        mutedWhileDisconnected = true;
-    } else if (isActive && !isVideoMuted) {
-        mutedWhileDisconnected = false;
-    }
-
-    return mutedWhileDisconnected;
-}
-
-
 /**
  * Resolves the first loadable avatar URL for a participant.
  *

react/features/base/participants/middleware.js

@@ -12,7 +12,6 @@ import {
 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import { MiddlewareRegistry, StateListenerRegistry } from '../redux';
 import { playSound, registerSound, unregisterSound } from '../sounds';
-import { getTrackByJitsiTrack, TRACK_ADDED, TRACK_REMOVED, TRACK_UPDATED } from '../tracks';
 
 import {
     DOMINANT_SPEAKER_CHANGED,
@@ -42,8 +41,7 @@ import {
     getLocalParticipant,
     getParticipantById,
     getParticipantCount,
-    getParticipantDisplayName,
-    figureOutMutedWhileDisconnectedStatus
+    getParticipantDisplayName
 } from './functions';
 import { PARTICIPANT_JOINED_FILE, PARTICIPANT_LEFT_FILE } from './sounds';
 
@@ -136,11 +134,6 @@ MiddlewareRegistry.register(store => next => action => {
 
     case PARTICIPANT_UPDATED:
         return _participantJoinedOrUpdated(store, next, action);
-
-    case TRACK_ADDED:
-    case TRACK_REMOVED:
-    case TRACK_UPDATED:
-        return _trackChanged(store, next, action);
     }
 
     return next(action);
@@ -459,55 +452,6 @@ function _registerSounds({ dispatch }) {
     dispatch(registerSound(PARTICIPANT_LEFT_SOUND_ID, PARTICIPANT_LEFT_FILE));
 }
 
-/**
- * Notifies the feature base/participants that the action there has been a change in the tracks of the participants.
- *
- * @param {Store} store - The redux store in which the specified {@code action} is being dispatched.
- * @param {Dispatch} next - The redux {@code dispatch} function to dispatch the specified {@code action} in the
- * specified {@code store}.
- * @param {Action} action - The redux action {@code PARTICIPANT_JOINED} or {@code PARTICIPANT_UPDATED} which is being
- * dispatched in the specified {@code store}.
- * @private
- * @returns {Object} The value returned by {@code next(action)}.
- */
-function _trackChanged({ dispatch, getState }, next, action) {
-    const { jitsiTrack } = action.track;
-    let track;
-
-    if (action.type === TRACK_REMOVED) {
-        track = getTrackByJitsiTrack(getState()['features/base/tracks'], jitsiTrack);
-    }
-
-    const result = next(action);
-
-    if (action.type !== TRACK_REMOVED) {
-        track = getTrackByJitsiTrack(getState()['features/base/tracks'], jitsiTrack);
-    }
-
-    if (typeof track === 'undefined' || track.local) {
-        return result;
-    }
-
-    const { participantId } = track;
-    const state = getState();
-    const participant = getParticipantById(state, participantId);
-
-    if (!participant) {
-        return result;
-    }
-
-    const mutedWhileDisconnected = figureOutMutedWhileDisconnectedStatus(state, participantId);
-
-    if (participant.mutedWhileDisconnected !== mutedWhileDisconnected) {
-        dispatch(participantUpdated({
-            id: participantId,
-            mutedWhileDisconnected
-        }));
-    }
-
-    return result;
-}
-
 /**
  * Unregisters sounds related with the participants feature.
  *

react/features/base/participants/reducer.js

@@ -221,7 +221,6 @@ function _participantJoined({ participant }) {
         isJigasi,
         loadableAvatarUrl,
         local: local || false,
-        mutedWhileDisconnected: local ? undefined : false,
         name,
         pinned: pinned || false,
         presence,

react/features/base/react/components/web/MeetingsList.js

@@ -6,6 +6,7 @@ import {
     getLocalizedDateFormatter,
     getLocalizedDurationFormatter
 } from '../../../i18n';
+import { Icon, IconTrash } from '../../../icons';
 
 import Container from './Container';
 import Text from './Text';
@@ -38,9 +39,9 @@ type Props = {
     meetings: Array<Object>,
 
     /**
-     * Defines what happens when  an item in the section list is clicked
+     * Handler for deleting an item.
      */
-    onItemClick: Function
+    onItemDelete?: Function
 };
 
 /**
@@ -138,6 +139,25 @@ export default class MeetingsList extends Component<Props> {
         return null;
     }
 
+    _onDelete: Object => Function;
+
+    /**
+     * Returns a function that is used on the onDelete callback.
+     *
+     * @param {Object} item - The item to be deleted.
+     * @private
+     * @returns {Function}
+     */
+    _onDelete(item) {
+        const { onItemDelete } = this.props;
+
+        return evt => {
+            evt.stopPropagation();
+
+            onItemDelete && onItemDelete(item);
+        };
+    }
+
     _renderItem: (Object, number) => React$Node;
 
     /**
@@ -156,7 +176,7 @@ export default class MeetingsList extends Component<Props> {
             title,
             url
         } = meeting;
-        const { hideURL = false } = this.props;
+        const { hideURL = false, onItemDelete } = this.props;
         const onPress = this._onPress(url);
         const rootClassName
             = `item ${
@@ -168,10 +188,10 @@ export default class MeetingsList extends Component<Props> {
                 key = { index }
                 onClick = { onPress }>
                 <Container className = 'left-column'>
-                    <Text className = 'date'>
+                    <Text className = 'title'>
                         { _toDateString(date) }
                     </Text>
-                    <Text>
+                    <Text className = 'subtitle'>
                         { _toTimeString(time) }
                     </Text>
                 </Container>
@@ -187,13 +207,18 @@ export default class MeetingsList extends Component<Props> {
                     }
                     {
                         typeof duration === 'number' ? (
-                            <Text>
+                            <Text className = 'subtitle'>
                                 { getLocalizedDurationFormatter(duration) }
                             </Text>) : null
                     }
                 </Container>
                 <Container className = 'actions'>
                     { elementAfter || null }
+
+                    { onItemDelete && <Icon
+                        className = 'delete-meeting'
+                        onClick = { this._onDelete(meeting) }
+                        src = { IconTrash } />}
                 </Container>
             </Container>
         );

react/features/base/settings/middleware.js

@@ -1,11 +1,9 @@
 // @flow
 import _ from 'lodash';
 
-import { PREJOIN_INITIALIZED } from '../../prejoin/actionTypes';
 import { APP_WILL_MOUNT } from '../app';
 import { setAudioOnly } from '../audio-only';
 import { SET_LOCATION_URL } from '../connection/actionTypes'; // minimize imports to avoid circular imports
-import { getJwtName } from '../jwt/functions';
 import { getLocalParticipant, participantUpdated } from '../participants';
 import { MiddlewareRegistry } from '../redux';
 import { parseURLParams } from '../util';
@@ -29,10 +27,6 @@ MiddlewareRegistry.register(store => next => action => {
     case APP_WILL_MOUNT:
         _initializeCallIntegration(store);
         break;
-    case PREJOIN_INITIALIZED: {
-        _maybeUpdateDisplayName(store);
-        break;
-    }
     case SETTINGS_UPDATED:
         _maybeHandleCallIntegrationChange(action);
         _maybeSetAudioOnly(store, action);
@@ -121,26 +115,6 @@ function _maybeSetAudioOnly(
     }
 }
 
-/**
- * Updates the display name to the one in JWT if there is one.
- *
- * @param {Store} store - The redux store.
- * @private
- * @returns {void}
- */
-function _maybeUpdateDisplayName({ dispatch, getState }) {
-    const state = getState();
-    const hasJwt = Boolean(state['features/base/jwt'].jwt);
-
-    if (hasJwt) {
-        const displayName = getJwtName(state);
-
-        dispatch(updateSettings({
-            displayName
-        }));
-    }
-}
-
 /**
  * Updates the local participant according to settings changes.
  *

react/features/base/tracks/actions.js

@@ -9,8 +9,7 @@ import {
     MEDIA_TYPE,
     setAudioMuted,
     setVideoMuted,
-    VIDEO_MUTISM_AUTHORITY,
-    VIDEO_TYPE
+    VIDEO_MUTISM_AUTHORITY
 } from '../media';
 import { getLocalParticipant } from '../participants';
 
@@ -25,13 +24,7 @@ import {
     TRACK_UPDATED,
     TRACK_WILL_CREATE
 } from './actionTypes';
-import {
-    createLocalTracksF,
-    getLocalTrack,
-    getLocalTracks,
-    getLocalVideoTrack,
-    getTrackByJitsiTrack
-} from './functions';
+import { createLocalTracksF, getLocalTrack, getLocalTracks, getTrackByJitsiTrack } from './functions';
 import logger from './logger';
 
 /**
@@ -47,8 +40,6 @@ export function createDesiredLocalTracks(...desiredTypes) {
     return (dispatch, getState) => {
         const state = getState();
 
-        dispatch(destroyLocalDesktopTrackIfExists());
-
         if (desiredTypes.length === 0) {
             const { audio, video } = state['features/base/media'];
 
@@ -672,22 +663,6 @@ function _trackCreateCanceled(mediaType) {
     };
 }
 
-/**
- * If thee local track if of type Desktop, it calls _disposeAndRemoveTracks) on it.
- *
- * @returns {Function}
- */
-export function destroyLocalDesktopTrackIfExists() {
-    return (dispatch, getState) => {
-        const videoTrack = getLocalVideoTrack(getState()['features/base/tracks']);
-        const isDesktopTrack = videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
-
-        if (isDesktopTrack) {
-            dispatch(_disposeAndRemoveTracks([ videoTrack.jitsiTrack ]));
-        }
-    };
-}
-
 /**
  * Sets UID of the displayed no data from source notification. Used to track
  * if the notification was previously displayed in this context.

react/features/base/tracks/functions.js

@@ -1,7 +1,7 @@
 /* global APP */
 
 import JitsiMeetJS, { JitsiTrackErrors, browser } from '../lib-jitsi-meet';
-import { MEDIA_TYPE, VIDEO_TYPE, setAudioMuted } from '../media';
+import { MEDIA_TYPE, setAudioMuted } from '../media';
 import {
     getUserSelectedCameraDeviceId,
     getUserSelectedMicDeviceId
@@ -346,12 +346,12 @@ export function getTracksByMediaType(tracks, mediaType) {
 }
 
 /**
- * Checks if the local video camera track in the given set of tracks is muted.
+ * Checks if the local video track in the given set of tracks is muted.
  *
  * @param {Track[]} tracks - List of all tracks.
  * @returns {Track[]}
  */
-export function isLocalCameraTrackMuted(tracks) {
+export function isLocalVideoTrackMuted(tracks) {
     const presenterTrack = getLocalTrack(tracks, MEDIA_TYPE.PRESENTER);
     const videoTrack = getLocalTrack(tracks, MEDIA_TYPE.VIDEO);
 
@@ -383,19 +383,6 @@ export function isLocalTrackMuted(tracks, mediaType) {
     return !track || track.muted;
 }
 
-/**
- * Checks if the local video track is of type DESKtOP.
- *
- * @param {Object} state - The redux state.
- * @returns {boolean}
- */
-export function isLocalVideoTrackDesktop(state) {
-    const videoTrack = getLocalVideoTrack(state['features/base/tracks']);
-
-    return videoTrack && videoTrack.videoType === VIDEO_TYPE.DESKTOP;
-}
-
-
 /**
  * Returns true if the remote track of the given media type and the given
  * participant is muted, false otherwise.

react/features/base/tracks/middleware.js

@@ -159,7 +159,7 @@ MiddlewareRegistry.register(store => next => action => {
                 } else if (jitsiTrack.isLocal()) {
                     APP.conference.setVideoMuteStatus(muted);
                 } else {
-                    APP.UI.setVideoMuted(participantID);
+                    APP.UI.setVideoMuted(participantID, muted);
                 }
                 APP.UI.onPeerVideoTypeChanged(participantID, jitsiTrack.videoType);
             } else if (jitsiTrack.isLocal()) {

react/features/billing-counter/middleware.js

@@ -1,11 +1,9 @@
-import { sendAnalytics, createVpaasConferenceJoinedEvent } from '../analytics';
-import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
 import { PARTICIPANT_JOINED } from '../base/participants/actionTypes';
 import { MiddlewareRegistry } from '../base/redux';
 
 import { SET_BILLING_ID } from './actionTypes';
 import { countEndpoint } from './actions';
-import { isVpaasMeeting, extractVpaasTenantFromPath, setBillingId } from './functions';
+import { setBillingId } from './functions';
 
 /**
  * The redux middleware for billing counter.
@@ -16,11 +14,6 @@ import { isVpaasMeeting, extractVpaasTenantFromPath, setBillingId } from './func
 
 MiddlewareRegistry.register(store => next => async action => {
     switch (action.type) {
-    case CONFERENCE_JOINED: {
-        _maybeTrackVpaasConferenceJoin(store.getState());
-
-        break;
-    }
     case SET_BILLING_ID: {
         setBillingId(action.value);
 
@@ -41,17 +34,3 @@ MiddlewareRegistry.register(store => next => async action => {
 
     return next(action);
 });
-
-/**
- * Tracks the conference join event if the meeting is a vpaas one.
- *
- * @param {Store} state - The app state.
- * @returns {Function}
- */
-function _maybeTrackVpaasConferenceJoin(state) {
-    if (isVpaasMeeting(state)) {
-        sendAnalytics(createVpaasConferenceJoinedEvent(
-            extractVpaasTenantFromPath(
-                state['features/base/connection'].locationURL.pathname)));
-    }
-}

react/features/calendar-sync/components/CalendarList.web.js

@@ -8,6 +8,7 @@ import {
     sendAnalytics
 } from '../../analytics';
 import { translate } from '../../base/i18n';
+import { Icon, IconPlusCalendar } from '../../base/icons';
 import { AbstractPage } from '../../base/react';
 import { connect } from '../../base/redux';
 import { openSettingsDialog, SETTINGS_TABS } from '../../settings';
@@ -185,16 +186,22 @@ class CalendarList extends AbstractPage<Props> {
 
         return (
             <div className = 'meetings-list-empty'>
-                <p className = 'description'>
+                <div className = 'meetings-list-empty-image'>
+                    <img src = '/images/calendar.svg' />
+                </div>
+                <div className = 'description'>
                     { t('welcomepage.connectCalendarText', {
                         app: interfaceConfig.APP_NAME,
                         provider: interfaceConfig.PROVIDER_NAME
                     }) }
-                </p>
+                </div>
                 <div
-                    className = 'button'
+                    className = 'meetings-list-empty-button'
                     onClick = { this._onOpenSettings }>
-                    { t('welcomepage.connectCalendarButton') }
+                    <Icon
+                        className = 'meetings-list-empty-icon'
+                        src = { IconPlusCalendar } />
+                    <span>{ t('welcomepage.connectCalendarButton') }</span>
                 </div>
             </div>
         );

react/features/calendar-sync/components/JoinButton.web.js

@@ -4,6 +4,7 @@ import Tooltip from '@atlaskit/tooltip';
 import React, { Component } from 'react';
 
 import { translate } from '../../base/i18n';
+import { Icon, IconAdd } from '../../base/icons';
 
 /**
  * The type of the React {@code Component} props of {@link JoinButton}.
@@ -60,7 +61,9 @@ class JoinButton extends Component<Props> {
                 <div
                     className = 'button join-button'
                     onClick = { this._onClick }>
-                    { t('calendarSync.join') }
+                    <Icon
+                        size = '14'
+                        src = { IconAdd } />
                 </div>
             </Tooltip>
         );

react/features/connection-indicator/components/web/ConnectionIndicator.js

@@ -7,7 +7,6 @@ import { translate } from '../../../base/i18n';
 import { Icon, IconConnectionActive, IconConnectionInactive } from '../../../base/icons';
 import { JitsiParticipantConnectionStatus } from '../../../base/lib-jitsi-meet';
 import { MEDIA_TYPE } from '../../../base/media';
-import { getLocalParticipant, getParticipantById } from '../../../base/participants';
 import { Popover } from '../../../base/popover';
 import { connect } from '../../../base/redux';
 import { getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
@@ -62,12 +61,6 @@ const QUALITY_TO_WIDTH: Array<Object> = [
  */
 type Props = AbstractProps & {
 
-    /**
-     * The current condition of the user's connection, matching one of the
-     * enumerated values in the library.
-     */
-    _connectionStatus: string,
-
     /**
      * Whether or not the component should ignore setting a visibility class for
      * hiding the component when the connection quality is not strong.
@@ -79,6 +72,12 @@ type Props = AbstractProps & {
      */
     audioSsrc: number,
 
+    /**
+     * The current condition of the user's connection, matching one of the
+     * enumerated values in the library.
+     */
+    connectionStatus: string,
+
     /**
      * The Redux dispatch function.
      */
@@ -201,13 +200,13 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {string}
      */
     _getConnectionColorClass() {
-        const { _connectionStatus } = this.props;
+        const { connectionStatus } = this.props;
         const { percent } = this.state.stats;
         const { INACTIVE, INTERRUPTED } = JitsiParticipantConnectionStatus;
 
-        if (_connectionStatus === INACTIVE) {
+        if (connectionStatus === INACTIVE) {
             return 'status-other';
-        } else if (_connectionStatus === INTERRUPTED) {
+        } else if (connectionStatus === INTERRUPTED) {
             return 'status-lost';
         } else if (typeof percent === 'undefined') {
             return 'status-high';
@@ -225,7 +224,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
     _getConnectionStatusTip() {
         let tipKey;
 
-        switch (this.props._connectionStatus) {
+        switch (this.props.connectionStatus) {
         case JitsiParticipantConnectionStatus.INTERRUPTED:
             tipKey = 'connectionindicator.quality.lost';
             break;
@@ -276,12 +275,12 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {string}
      */
     _getVisibilityClass() {
-        const { _connectionStatus } = this.props;
+        const { connectionStatus } = this.props;
 
         return this.state.showIndicator
             || this.props.alwaysVisible
-            || _connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED
-            || _connectionStatus === JitsiParticipantConnectionStatus.INACTIVE
+            || connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED
+            || connectionStatus === JitsiParticipantConnectionStatus.INACTIVE
             ? 'show-connection-indicator' : 'hide-connection-indicator';
     }
 
@@ -305,7 +304,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
      * @returns {ReactElement}
      */
     _renderIcon() {
-        if (this.props._connectionStatus
+        if (this.props.connectionStatus
             === JitsiParticipantConnectionStatus.INACTIVE) {
             return (
                 <span className = 'connection_ninja'>
@@ -320,7 +319,7 @@ class ConnectionIndicator extends AbstractConnectionIndicator<Props, State> {
         let iconWidth;
         let emptyIconWrapperClassName = 'connection_empty';
 
-        if (this.props._connectionStatus
+        if (this.props.connectionStatus
             === JitsiParticipantConnectionStatus.INTERRUPTED) {
 
             // emptyIconWrapperClassName is used by the torture tests to
@@ -435,29 +434,21 @@ export function _mapDispatchToProps(dispatch: Dispatch<any>) {
  * @returns {Props}
  */
 export function _mapStateToProps(state: Object, ownProps: Props) {
-    const { participantId } = ownProps;
+
     const conference = state['features/base/conference'].conference;
-    const participant
-        = typeof participantId === 'undefined' ? getLocalParticipant(state) : getParticipantById(state, participantId);
-    const props = {
-        _connectionStatus: participant?.connectionStatus
-    };
 
     if (conference) {
         const firstVideoTrack = getTrackByMediaTypeAndParticipant(
-            state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantId);
+            state['features/base/tracks'], MEDIA_TYPE.VIDEO, ownProps.participantId);
         const firstAudioTrack = getTrackByMediaTypeAndParticipant(
-            state['features/base/tracks'], MEDIA_TYPE.AUDIO, participantId);
+            state['features/base/tracks'], MEDIA_TYPE.AUDIO, ownProps.participantId);
 
         return {
-            ...props,
             audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
             videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
         };
     }
 
-    return {
-        ...props
-    };
+    return {};
 }
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(ConnectionIndicator));

react/features/filmstrip/components/web/StatusIndicators.js

@@ -2,10 +2,8 @@
 
 import React, { Component } from 'react';
 
-import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, getParticipantById, PARTICIPANT_ROLE } from '../../../base/participants';
 import { connect } from '../../../base/redux';
-import { getTrackByMediaTypeAndParticipant, isLocalTrackMuted, isRemoteTrackMuted } from '../../../base/tracks';
 import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
@@ -25,25 +23,25 @@ type Props = {
      */
     _currentLayout: string,
 
-    /**
-     * Indicates if the audio muted indicator should be visible or not.
-     */
-    _showAudioMutedIndicator: Boolean,
-
     /**
      * Indicates if the moderator indicator should be visible or not.
      */
     _showModeratorIndicator: Boolean,
 
+    /**
+     * Indicates if the audio muted indicator should be visible or not.
+     */
+    showAudioMutedIndicator: Boolean,
+
     /**
      * Indicates if the screen share indicator should be visible or not.
      */
-    _showScreenShareIndicator: Boolean,
+    showScreenShareIndicator: Boolean,
 
     /**
      * Indicates if the video muted indicator should be visible or not.
      */
-    _showVideoMutedIndicator: Boolean,
+    showVideoMutedIndicator: Boolean,
 
     /**
      * The ID of the participant for which the status bar is rendered.
@@ -66,10 +64,10 @@ class StatusIndicators extends Component<Props> {
     render() {
         const {
             _currentLayout,
-            _showAudioMutedIndicator,
             _showModeratorIndicator,
-            _showScreenShareIndicator,
-            _showVideoMutedIndicator
+            showAudioMutedIndicator,
+            showScreenShareIndicator,
+            showVideoMutedIndicator
         } = this.props;
         let tooltipPosition;
 
@@ -86,9 +84,9 @@ class StatusIndicators extends Component<Props> {
 
         return (
             <div>
-                { _showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
-                { _showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
-                { _showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
+                { showAudioMutedIndicator ? <AudioMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
+                { showScreenShareIndicator ? <ScreenShareIndicator tooltipPosition = { tooltipPosition } /> : null }
+                { showVideoMutedIndicator ? <VideoMutedIndicator tooltipPosition = { tooltipPosition } /> : null }
                 { _showModeratorIndicator ? <ModeratorIndicator tooltipPosition = { tooltipPosition } /> : null }
             </div>
         );
@@ -103,8 +101,7 @@ class StatusIndicators extends Component<Props> {
  * @private
  * @returns {{
  *     _currentLayout: string,
- *     _showModeratorIndicator: boolean,
- *     _showVideoMutedIndicator: boolean
+ *     _showModeratorIndicator: boolean
  * }}
 */
 function _mapStateToProps(state, ownProps) {
@@ -113,29 +110,10 @@ function _mapStateToProps(state, ownProps) {
     // Only the local participant won't have id for the time when the conference is not yet joined.
     const participant = participantID ? getParticipantById(state, participantID) : getLocalParticipant(state);
 
-    const tracks = state['features/base/tracks'];
-    let isVideoMuted = true;
-    let isAudioMuted = true;
-    let isScreenSharing = false;
-
-    if (participant?.local) {
-        isVideoMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.VIDEO);
-        isAudioMuted = isLocalTrackMuted(tracks, MEDIA_TYPE.AUDIO);
-    } else if (!participant?.isFakeParticipant) { // remote participants excluding shared video
-        const track = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, participantID);
-
-        isScreenSharing = track?.videoType === 'desktop';
-        isVideoMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.VIDEO, participantID);
-        isAudioMuted = isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID);
-    }
-
     return {
         _currentLayout: getCurrentLayout(state),
-        _showAudioMutedIndicator: isAudioMuted,
         _showModeratorIndicator:
-            !interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR,
-        _showScreenShareIndicator: isScreenSharing,
-        _showVideoMutedIndicator: isVideoMuted
+            !interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR
     };
 }
 

react/features/filmstrip/components/web/Thumbnail.js

@@ -1,567 +0,0 @@
-// @flow
-
-import { AtlasKitThemeProvider } from '@atlaskit/theme';
-import React, { Component } from 'react';
-
-import { AudioLevelIndicator } from '../../../audio-level-indicator';
-import { Avatar } from '../../../base/avatar';
-import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
-import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
-import {
-    getLocalParticipant,
-    getParticipantById,
-    getParticipantCount
-} from '../../../base/participants';
-import { connect } from '../../../base/redux';
-import { getLocalAudioTrack, getLocalVideoTrack, getTrackByMediaTypeAndParticipant } from '../../../base/tracks';
-import { ConnectionIndicator } from '../../../connection-indicator';
-import { DisplayName } from '../../../display-name';
-import { StatusIndicators, RaisedHandIndicator, DominantSpeakerIndicator } from '../../../filmstrip';
-import { PresenceLabel } from '../../../presence-status';
-import { getCurrentLayout, LAYOUTS } from '../../../video-layout';
-
-const JitsiTrackEvents = JitsiMeetJS.events.track;
-
-declare var interfaceConfig: Object;
-
-type State = {
-    audioLevel: number
-};
-
-/**
- * The type of the React {@code Component} props of {@link Thumbnail}.
- */
-type Props = {
-
-    /**
-     * The current layout of the filmstrip.
-     */
-    _currentLayout: string,
-
-    _height: number,
-
-    _heightToWidthPercent: number,
-
-    /**
-     * The video track that will be displayed in the thumbnail.
-     */
-    _videoTrack: ?Object,
-
-    /**
-     * The audio track related to the participant.
-     */
-    _audioTrack: ?Object,
-
-    _width: number,
-
-
-    /**
-     * The ID of the participant related to the thumbnaul.
-     */
-    _participant: Object,
-    _defaultLocalDisplayName: string,
-    _isGuest: boolean,
-    _participantCount: number,
-    _isFilmstripOnly: boolean,
-    _connectionIndicatorDisabled: boolean,
-    _connectionIndicatorAutoHideEnabled: boolean,
-    _isDominantSpeakerDisabled: boolean,
-    participantID: ?string,
-    isHovered: ?boolean,
-
-    dispatch: Function
-};
-
-/**
- * TODO.
- *
- * @returns {number}
- */
-function _getIndicatorsIconSize() {
-    const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
-
-    return NORMAL;
-}
-
-/**
- * Implements a thumbnail.
- *
- * @extends Component
- */
-class Thumbnail extends Component<Props, State> {
-
-    /**
-     * Initializes a new Thumbnail instance.
-     *
-     * @param {Object} props - The read-only React Component props with which
-     * the new instance is to be initialized.
-     */
-    constructor(props: Props) {
-        super(props);
-
-        this.state = {
-            audioLevel: 0
-        };
-
-        this._updateAudioLevel = this._updateAudioLevel.bind(this);
-    }
-
-    /**
-     * Starts listening for audio level updates after the initial render.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidMount() {
-        this._listenForAudioUpdates();
-    }
-
-    /**
-     * Stops listening for audio level updates on the old track and starts
-     * listening instead on the new track.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentDidUpdate(prevProps: Props) {
-        if (prevProps._audioTrack !== this.props._audioTrack) {
-            this._stopListeningForAudioUpdates(prevProps._audioTrack);
-            this._listenForAudioUpdates();
-            this._updateAudioLevel(0);
-        }
-    }
-
-    /**
-     * Unsubscribe from audio level updates.
-     *
-     * @inheritdoc
-     * @returns {void}
-     */
-    componentWillUnmount() {
-        this._stopListeningForAudioUpdates(this.props._audioTrack);
-    }
-
-    /**
-     * Starts listening for audio level updates from the library.
-     *
-     * @private
-     * @returns {void}
-     */
-    _listenForAudioUpdates() {
-        const { _audioTrack } = this.props;
-
-        if (_audioTrack) {
-            const { jitsiTrack } = _audioTrack;
-
-            jitsiTrack && jitsiTrack.on(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, this._updateAudioLevel);
-        }
-    }
-
-    /**
-     * Stops listening to further updates from the passed track.
-     *
-     * @param {Object} audioTrack - The track.
-     * @private
-     * @returns {void}
-     */
-    _stopListeningForAudioUpdates(audioTrack) {
-        if (audioTrack) {
-            const { jitsiTrack } = audioTrack;
-
-            jitsiTrack && jitsiTrack.off(JitsiTrackEvents.TRACK_AUDIO_LEVEL_CHANGED, this._updateAudioLevel);
-        }
-    }
-
-    _updateAudioLevel: (number) => void;
-
-    /**
-     * Updates the internal state of the last know audio level. The level should
-     * be between 0 and 1, as the level will be used as a percentage out of 1.
-     *
-     * @param {number} audioLevel - The new audio level for the track.
-     * @private
-     * @returns {void}
-     */
-    _updateAudioLevel(audioLevel) {
-        this.setState({
-            audioLevel
-        });
-    }
-
-    /**
-     * Returns an object with the styles for the video container and the avatar container.
-     *
-     * @returns {Object} - The styles for the video container and the avatar container.
-     */
-    _getStyles(): Object {
-        const { _height, _heightToWidthPercent, _currentLayout } = this.props;
-        let styles;
-
-        switch (_currentLayout) {
-        case LAYOUTS.TILE_VIEW:
-        case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
-            const avatarSize = _height / 2;
-
-            styles = {
-                avatarContainer: {
-                    height: `${avatarSize}px`,
-                    width: `${avatarSize}px`
-                }
-            };
-            break;
-        }
-        case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: {
-            styles = {
-                avatarContainer: {
-                    height: '50%',
-                    width: `${_heightToWidthPercent / 2}%`
-                }
-            };
-            break;
-        }
-        }
-
-        return styles;
-    }
-
-    /**
-     * Renders  a fake participant (youtube video) thumbnail.
-     *
-     * @param {string} id - The id of the participant.
-     * @returns {ReactElement}
-     */
-    _renderFakeParticipant(id) {
-        return (
-            <>
-                <img
-                    className = 'sharedVideoAvatar'
-                    src = { `https://img.youtube.com/vi/${id}/0.jpg` } />
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        elementID = 'sharedVideoContainer_name'
-                        participantID = { id } />
-                </div>
-            </>
-        );
-    }
-
-    /**
-     * Renders the local participant's thumbnail.
-     *
-     * @param {string} id - The ID of the participant.
-     * @returns {ReactElement}
-     */
-    _renderLocalParticipant(id) {
-        const styles = this._getStyles();
-        const {
-            _participant,
-            _participantCount,
-            _videoTrack,
-            _defaultLocalDisplayName,
-            _isGuest,
-            _isFilmstripOnly,
-            _isDominantSpeakerDisabled,
-            _connectionIndicatorDisabled,
-            _connectionIndicatorAutoHideEnabled,
-            _currentLayout
-        } = this.props;
-        const { audioLevel = 0 } = this.state;
-        const iconSize = _getIndicatorsIconSize();
-        const showConnectionIndicator = this.props.isHovered || !_connectionIndicatorAutoHideEnabled;
-        const { dominantSpeaker = false } = _participant;
-        const showDominantSpeaker = !_isDominantSpeakerDisabled && dominantSpeaker;
-
-        let statsPopoverPosition, tooltipPosition;
-
-        switch (_currentLayout) {
-        case LAYOUTS.TILE_VIEW:
-            statsPopoverPosition = 'right top';
-            tooltipPosition = 'right';
-            break;
-        case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-            statsPopoverPosition = 'left top';
-            tooltipPosition = 'left';
-            break;
-        default:
-            statsPopoverPosition = 'top center';
-            tooltipPosition = 'top';
-        }
-
-        return (
-            <>
-                <div className = 'videocontainer__background' />
-                <span id = 'localVideoWrapper'>
-                    <VideoTrack
-                        id = 'localVideo_container'
-                        videoTrack = { _videoTrack } />
-                </span>
-                <div className = 'videocontainer__toolbar'>
-                    <StatusIndicators participantID = { id } />
-                </div>
-                <div className = 'videocontainer__toptoolbar'>
-                    <div>
-                        <AtlasKitThemeProvider mode = 'dark'>
-                            { _connectionIndicatorDisabled
-                                ? null
-                                : <ConnectionIndicator
-                                    alwaysVisible = { showConnectionIndicator }
-                                    enableStatsDisplay = { !_isFilmstripOnly }
-                                    iconSize = { iconSize }
-                                    isLocalVideo = { true }
-                                    participantId = { id }
-                                    statsPopoverPosition = { statsPopoverPosition } />
-                            }
-                            <RaisedHandIndicator
-                                iconSize = { iconSize }
-                                participantId = { id }
-                                tooltipPosition = { tooltipPosition } />
-                            { showDominantSpeaker && _participantCount > 2
-                                ? <DominantSpeakerIndicator
-                                    iconSize = { iconSize }
-                                    tooltipPosition = { tooltipPosition } />
-                                : null }
-                        </AtlasKitThemeProvider>
-                    </div>
-                </div>
-                <div className = 'videocontainer__hoverOverlay' />
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        allowEditing = { _isGuest }
-                        displayNameSuffix = { _defaultLocalDisplayName }
-                        elementID = 'localDisplayName'
-                        participantID = { _participant?.id } />
-                </div>
-                <div
-                    className = 'avatar-container'
-                    style = { styles.avatarContainer }>
-                    <Avatar
-                        className = 'userAvatar'
-                        participantId = { id } />
-                </div>
-                <span className = 'audioindicator-container'>
-                    <AudioLevelIndicator audioLevel = { audioLevel } />
-                </span>
-            </>
-        );
-    }
-
-
-    /**
-     * Renders a remote participant's 'thumbnail.
-     *
-     * @param {string} id - The id of the participant.
-     * @returns {ReactElement}
-     */
-    _renderRemoteParticipant(id) {
-        const styles = this._getStyles();
-        const {
-            _participant,
-            _participantCount,
-            _isFilmstripOnly,
-            _currentLayout,
-            _connectionIndicatorDisabled,
-            _connectionIndicatorAutoHideEnabled,
-            _isDominantSpeakerDisabled
-        } = this.props;
-        const { audioLevel = 0 } = this.state;
-        const showConnectionIndicator = this.props.isHovered || !_connectionIndicatorAutoHideEnabled;
-        const { dominantSpeaker = false } = _participant;
-        const showDominantSpeaker = !_isDominantSpeakerDisabled && dominantSpeaker;
-        const iconSize = _getIndicatorsIconSize();
-        let remoteMenuPosition, statsPopoverPosition, tooltipPosition;
-
-        switch (_currentLayout) {
-        case LAYOUTS.TILE_VIEW:
-            statsPopoverPosition = 'right top';
-            tooltipPosition = 'right';
-            remoteMenuPosition = 'left top';
-            break;
-        case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-            statsPopoverPosition = 'left bottom';
-            tooltipPosition = 'left';
-            remoteMenuPosition = 'left bottom';
-            break;
-        default:
-            statsPopoverPosition = 'top center';
-            tooltipPosition = 'top';
-            remoteMenuPosition = 'top center';
-        }
-
-        return (
-            <>
-                <div className = 'videocontainer__background' />
-                <div className = 'videocontainer__toptoolbar'>
-                    <div>
-                        <AtlasKitThemeProvider mode = 'dark'>
-                            { _connectionIndicatorDisabled
-                                ? null
-                                : <ConnectionIndicator
-                                    alwaysVisible = { showConnectionIndicator }
-                                    enableStatsDisplay = { !_isFilmstripOnly }
-                                    iconSize = { iconSize }
-                                    isLocalVideo = { false }
-                                    participantId = { id }
-                                    statsPopoverPosition = { statsPopoverPosition } />
-                            }
-                            <RaisedHandIndicator
-                                iconSize = { iconSize }
-                                participantId = { id }
-                                tooltipPosition = { tooltipPosition } />
-                            { showDominantSpeaker && _participantCount > 2
-                                ? <DominantSpeakerIndicator
-                                    iconSize = { iconSize }
-                                    tooltipPosition = { tooltipPosition } />
-                                : null }
-                        </AtlasKitThemeProvider>
-                    </div>
-                </div>
-                <div className = 'videocontainer__toolbar'>
-                    <StatusIndicators participantID = { id } />
-                </div>
-                <div className = 'videocontainer__hoverOverlay' />
-                <div className = 'displayNameContainer'>
-                    <DisplayName
-                        elementID = { `participant_${id}_name` }
-                        participantID = { id } />
-                </div>
-                <div
-                    className = 'avatar-container'
-                    style = { styles.avatarContainer }>
-                    <Avatar
-                        className = 'userAvatar'
-                        participantId = { id } />
-                </div>
-                <div className = 'presence-label-container'>
-                    <PresenceLabel
-                        className = 'presence-label'
-                        participantID = { id } />
-                </div>
-                <span className = 'remotevideomenu'>
-                    {/* <AtlasKitThemeProvider mode = 'dark'>
-                        <RemoteVideoMenuTriggerButton
-                            initialVolumeValue = { initialVolumeValue }
-                            menuPosition = { remoteMenuPosition }
-                            onMenuDisplay = {this._onRemoteVideoMenuDisplay.bind(this)}
-                            onRemoteControlToggle = { onRemoteControlToggle }
-                            onVolumeChange = { onVolumeChange }
-                            participantID = { participantID }
-                            remoteControlState = { remoteControlState } />
-                    </AtlasKitThemeProvider> */}
-                </span>
-                <span className = 'audioindicator-container'>
-                    <AudioLevelIndicator audioLevel = { audioLevel } />
-                </span>
-            </>
-        );
-    }
-
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { _participant } = this.props;
-
-        if (!_participant) {
-            return null;
-        }
-
-        const { id, isFakeParticipant, local = false } = _participant;
-
-        if (local) {
-            return this._renderLocalParticipant(id);
-        }
-
-        if (isFakeParticipant) {
-            return this._renderFakeParticipant(id);
-        }
-
-        return this._renderRemoteParticipant(id);
-    }
-}
-
-/**
- * Maps (parts of) the redux state to the associated props for this component.
- *
- * @param {Object} state - The Redux state.
- * @param {Object} ownProps - The own props of the component.
- * @private
- * @returns {{
- *     _videoTrack: Object
- * }}
- */
-function _mapStateToProps(state, ownProps): Object {
-    const { participantID } = ownProps;
-
-
-    // Only the local participant won't have id for the time when the conference is not yet joined.
-    const participant = participantID ? getParticipantById(state, participantID) : getLocalParticipant(state);
-    const isLocal = participant?.local ?? true;
-    const _videoTrack = isLocal
-        ? getLocalVideoTrack(state['features/base/tracks'])
-        : getTrackByMediaTypeAndParticipant(state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantID);
-    const _audioTrack = isLocal
-        ? getLocalAudioTrack(state['features/base/tracks'])
-        : getTrackByMediaTypeAndParticipant(state['features/base/tracks'], MEDIA_TYPE.AUDIO, participantID);
-    const _currentLayout = getCurrentLayout(state);
-    let size = {};
-    const _isGuest = state['features/base/jwt'].isGuest;
-
-
-    switch (_currentLayout) {
-    case LAYOUTS.HORIZONTAL_FILMSTRIP_VIEW: {
-        const {
-            horizontalViewDimensions = {
-                local: {},
-                remote: {}
-            }
-        } = state['features/filmstrip'];
-        const { local, remote } = horizontalViewDimensions;
-        const { width, height } = isLocal ? local : remote;
-
-        size = {
-            _width: width,
-            _height: height
-        };
-
-        break;
-    }
-    case LAYOUTS.VERTICAL_FILMSTRIP_VIEW:
-        size = {
-            _heightToWidthPercent: isLocal
-                ? 100 / interfaceConfig.LOCAL_THUMBNAIL_RATIO
-                : 100 / interfaceConfig.REMOTE_THUMBNAIL_RATIO
-        };
-        break;
-    case LAYOUTS.TILE_VIEW: {
-        const { width, height } = state['features/filmstrip'].tileViewDimensions.thumbnailSize;
-
-        size = {
-            _width: width,
-            _height: height
-        };
-        break;
-    }
-    }
-
-
-    return {
-        _isGuest,
-        _videoTrack,
-        _audioTrack,
-        _currentLayout,
-        _participant: participant,
-        _participantCount: getParticipantCount(state),
-        _isFilmstripOnly: interfaceConfig.filmStripOnly,
-        _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
-        _connectionIndicatorDisabled: interfaceConfig.CONNECTION_INDICATOR_DISABLED,
-        _connectionIndicatorAutoHideEnabled: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
-        _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
-        ...size
-    };
-}
-
-export default connect(_mapStateToProps)(Thumbnail);

react/features/large-video/actions.web.js

@@ -17,30 +17,20 @@ export function captureLargeVideoScreenshot() {
     return (dispatch: Dispatch<any>, getState: Function): Promise<string> => {
         const state = getState();
         const largeVideo = state['features/large-video'];
-        const promise = Promise.resolve();
 
         if (!largeVideo) {
-            return promise;
+            return Promise.resolve();
         }
         const tracks = state['features/base/tracks'];
-        const participantTrack = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, largeVideo.participantId);
-
-        // Participants that join the call video muted do not have a jitsiTrack attached.
-        if (!(participantTrack && participantTrack.jitsiTrack)) {
-            return promise;
-        }
-        const videoStream = participantTrack.jitsiTrack.getOriginalStream();
-
-        if (!videoStream) {
-            return promise;
-        }
+        const { jitsiTrack } = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, largeVideo.participantId);
+        const videoStream = jitsiTrack.getOriginalStream();
 
         // Get the video element for the large video, cast HTMLElement to HTMLVideoElement to make flow happy.
         /* eslint-disable-next-line no-extra-parens*/
         const videoElement = ((document.getElementById('largeVideo'): any): HTMLVideoElement);
 
         if (!videoElement) {
-            return promise;
+            return Promise.resolve();
         }
 
         // Create a HTML canvas and draw video on to the canvas.

react/features/large-video/components/LargeVideo.native.js

@@ -3,10 +3,9 @@
 import React, { PureComponent } from 'react';
 
 import { ColorSchemeRegistry } from '../../base/color-scheme';
-import { ParticipantView, getParticipantById } from '../../base/participants';
+import { ParticipantView } from '../../base/participants';
 import { connect } from '../../base/redux';
 import { StyleType } from '../../base/styles';
-import { isLocalVideoTrackDesktop } from '../../base/tracks/functions';
 
 import { AVATAR_SIZE } from './styles';
 
@@ -15,11 +14,6 @@ import { AVATAR_SIZE } from './styles';
  */
 type Props = {
 
-    /**
-     * Whether video should be disabled.
-     */
-    _disableVideo: boolean,
-
     /**
      * Application's viewport height.
      */
@@ -118,7 +112,6 @@ class LargeVideo extends PureComponent<Props, State> {
             useConnectivityInfoLabel
         } = this.state;
         const {
-            _disableVideo,
             _participantId,
             _styles,
             onClick
@@ -127,7 +120,6 @@ class LargeVideo extends PureComponent<Props, State> {
         return (
             <ParticipantView
                 avatarSize = { avatarSize }
-                disableVideo = { _disableVideo }
                 onPress = { onClick }
                 participantId = { _participantId }
                 style = { _styles.largeVideo }
@@ -147,19 +139,11 @@ class LargeVideo extends PureComponent<Props, State> {
  * @returns {Props}
  */
 function _mapStateToProps(state) {
-    const { participantId } = state['features/large-video'];
-    const participant = getParticipantById(state, participantId);
     const { clientHeight: height, clientWidth: width } = state['features/base/responsive-ui'];
-    let disableVideo = false;
-
-    if (participant?.local) {
-        disableVideo = isLocalVideoTrackDesktop(state);
-    }
 
     return {
-        _disableVideo: disableVideo,
         _height: height,
-        _participantId: participantId,
+        _participantId: state['features/large-video'].participantId,
         _styles: ColorSchemeRegistry.get(state, 'LargeVideo'),
         _width: width
     };

react/features/mobile/picture-in-picture/components/PictureInPictureButton.js

@@ -7,7 +7,6 @@ import { translate } from '../../../base/i18n';
 import { IconMenuDown } from '../../../base/icons';
 import { connect } from '../../../base/redux';
 import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { isLocalVideoTrackDesktop } from '../../../base/tracks/functions';
 import { enterPictureInPicture } from '../actions';
 
 type Props = AbstractButtonProps & {
@@ -64,7 +63,7 @@ class PictureInPictureButton extends AbstractButton<Props, *> {
  */
 function _mapStateToProps(state): Object {
     const flag = Boolean(getFeatureFlag(state, PIP_ENABLED));
-    let enabled = flag && !isLocalVideoTrackDesktop(state);
+    let enabled = flag;
 
     // Override flag for Android, since it might be unsupported.
     if (Platform.OS === 'android' && !NativeModules.PictureInPicture.SUPPORTED) {

react/features/mobile/picture-in-picture/functions.js

@@ -1,15 +0,0 @@
-// @flow
-
-import { NativeModules } from 'react-native';
-
-/**
- * Enabled/Disables the PictureInPicture mode in PiP native module.
- *
- * @param {boolean} disabled - Whether the PiP mode should be disabled.
- * @returns {void}
- */
-export function setPictureInPictureDisabled(disabled: boolean) {
-    const { PictureInPicture } = NativeModules;
-
-    PictureInPicture.setPictureInPictureDisabled(disabled);
-}

react/features/mobile/picture-in-picture/index.js

@@ -1,4 +1,3 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './components';
-export * from './functions';

react/features/prejoin/actionTypes.js

@@ -4,11 +4,6 @@
  */
 export const PREJOIN_START_CONFERENCE = 'PREJOIN_START_CONFERENCE';
 
-/**
- * Action type to signal that prejoin page was initialized.
- */
-export const PREJOIN_INITIALIZED = 'PREJOIN_INITIALIZED';
-
 /**
  * Action type to set the status of the device.
  */

react/features/prejoin/actions.js

@@ -18,7 +18,6 @@ import { executeDialOutRequest, executeDialOutStatusRequest, getDialInfoPageURL
 import { showErrorNotification } from '../notifications';
 
 import {
-    PREJOIN_INITIALIZED,
     PREJOIN_START_CONFERENCE,
     SET_DEVICE_STATUS,
     SET_DIALOUT_COUNTRY,
@@ -196,7 +195,7 @@ export function dialOut(onSuccess: Function, onFail: Function) {
 export function initPrejoin(tracks: Object[], errors: Object) {
     return async function(dispatch: Function) {
         dispatch(setPrejoinDeviceErrors(errors));
-        dispatch(prejoinInitialized());
+
 
         tracks.forEach(track => dispatch(trackAdded(track)));
     };
@@ -270,17 +269,6 @@ export function openDialInPage() {
     };
 }
 
-/**
- * Action used to signal that the prejoin page has been initialized.
- *
- * @returns {Object}
- */
-function prejoinInitialized() {
-    return {
-        type: PREJOIN_INITIALIZED
-    };
-}
-
 /**
  * Creates a new audio track based on a device id and replaces the current one.
  *

react/features/recent-list/components/RecentList.web.js

@@ -6,6 +6,7 @@ import type { Dispatch } from 'redux';
 import { translate } from '../../base/i18n';
 import { MeetingsList } from '../../base/react';
 import { connect } from '../../base/redux';
+import { deleteRecentListEntry } from '../actions';
 import { isRecentListEnabled, toDisplayableList } from '../functions';
 
 import AbstractRecentList from './AbstractRecentList';
@@ -55,6 +56,19 @@ class RecentList extends AbstractRecentList<Props> {
         this._getRenderListEmptyComponent
             = this._getRenderListEmptyComponent.bind(this);
         this._onPress = this._onPress.bind(this);
+        this._onItemDelete = this._onItemDelete.bind(this);
+    }
+
+    _onItemDelete: Object => void;
+
+    /**
+     * Deletes a recent entry.
+     *
+     * @param {Object} entry - The entry to be deleted.
+     * @inheritdoc
+     */
+    _onItemDelete(entry) {
+        this.props.dispatch(deleteRecentListEntry(entry));
     }
 
     /**
@@ -78,6 +92,7 @@ class RecentList extends AbstractRecentList<Props> {
                 hideURL = { true }
                 listEmptyComponent = { this._getRenderListEmptyComponent() }
                 meetings = { recentList }
+                onItemDelete = { this._onItemDelete }
                 onPress = { this._onPress } />
         );
     }

react/features/recent-list/functions.web.js

@@ -12,7 +12,7 @@ import { parseURIString, safeDecodeURIComponent } from '../base/util';
  */
 export function toDisplayableList(recentList) {
     return (
-        recentList.slice(-3).reverse()
+        recentList.reverse()
             .map(item => {
                 return {
                     date: item.date,

react/features/remote-video-menu/components/web/RemoteVideoMenuTriggerButton.js

@@ -3,11 +3,9 @@
 import React, { Component } from 'react';
 
 import { Icon, IconMenuThumb } from '../../../base/icons';
-import { MEDIA_TYPE } from '../../../base/media';
 import { getLocalParticipant, PARTICIPANT_ROLE } from '../../../base/participants';
 import { Popover } from '../../../base/popover';
 import { connect } from '../../../base/redux';
-import { isRemoteTrackMuted } from '../../../base/tracks';
 
 import {
     GrantModeratorButton,
@@ -39,11 +37,6 @@ type Props = {
      */
     _disableRemoteMute: Boolean,
 
-    /**
-     * Whether or not the participant is currently muted.
-     */
-    _isAudioMuted: boolean,
-
     /**
      * Whether or not the participant is a conference moderator.
      */
@@ -55,6 +48,11 @@ type Props = {
      */
     initialVolumeValue: number,
 
+    /**
+     * Whether or not the participant is currently muted.
+     */
+    isAudioMuted: boolean,
+
     /**
      * Callback to invoke when the popover has been displayed.
      */
@@ -172,9 +170,9 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
         const {
             _disableKick,
             _disableRemoteMute,
-            _isAudioMuted,
             _isModerator,
             initialVolumeValue,
+            isAudioMuted,
             onRemoteControlToggle,
             onVolumeChange,
             remoteControlState,
@@ -187,7 +185,7 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
             if (!_disableRemoteMute) {
                 buttons.push(
                     <MuteButton
-                        isAudioMuted = { _isAudioMuted }
+                        isAudioMuted = { isAudioMuted }
                         key = 'mute'
                         participantID = { participantID } />
                 );
@@ -260,16 +258,13 @@ class RemoteVideoMenuTriggerButton extends Component<Props> {
  *     _isModerator: boolean
  * }}
  */
-function _mapStateToProps(state, ownProps) {
-    const { participantID } = ownProps;
-    const tracks = state['features/base/tracks'];
-    const localParticipant = getLocalParticipant(state);
+function _mapStateToProps(state) {
+    const participant = getLocalParticipant(state);
     const { remoteVideoMenu = {}, disableRemoteMute } = state['features/base/config'];
     const { disableKick } = remoteVideoMenu;
 
     return {
-        _isAudioMuted: isRemoteTrackMuted(tracks, MEDIA_TYPE.AUDIO, participantID) || false,
-        _isModerator: Boolean(localParticipant?.role === PARTICIPANT_ROLE.MODERATOR),
+        _isModerator: Boolean(participant?.role === PARTICIPANT_ROLE.MODERATOR),
         _disableKick: Boolean(disableKick),
         _disableRemoteMute: Boolean(disableRemoteMute)
     };

react/features/stream-effects/presenter/JitsiStreamPresenterEffect.js

@@ -141,14 +141,7 @@ export default class JitsiStreamPresenterEffect {
             timeMs: 1000 / this._frameRate
         });
 
-        const capturedStream = this._canvas.captureStream(this._frameRate);
-
-        // Put emphasis on the text details for the presenter's stream
-        // See https://www.w3.org/TR/mst-content-hint/
-        // $FlowExpectedError
-        capturedStream.getVideoTracks()[0].contentHint = 'text';
-
-        return capturedStream;
+        return this._canvas.captureStream(this._frameRate);
     }
 
     /**

react/features/toolbox/components/VideoMuteButton.js

@@ -9,6 +9,7 @@ import {
     sendAnalytics
 } from '../../analytics';
 import { setAudioOnly } from '../../base/audio-only';
+import { hasAvailableDevices } from '../../base/devices';
 import { translate } from '../../base/i18n';
 import {
     VIDEO_MUTISM_AUTHORITY,
@@ -17,8 +18,7 @@ import {
 import { connect } from '../../base/redux';
 import { AbstractVideoMuteButton } from '../../base/toolbox/components';
 import type { AbstractButtonProps } from '../../base/toolbox/components';
-import { getLocalVideoType, isLocalCameraTrackMuted } from '../../base/tracks';
-import { isVideoMuteButtonDisabled } from '../functions';
+import { getLocalVideoType, isLocalVideoTrackMuted } from '../../base/tracks';
 
 declare var APP: Object;
 
@@ -190,9 +190,9 @@ function _mapStateToProps(state): Object {
 
     return {
         _audioOnly: Boolean(audioOnly),
-        _videoDisabled: isVideoMuteButtonDisabled(state),
+        _videoDisabled: !hasAvailableDevices(state, 'videoInput'),
         _videoMediaType: getLocalVideoType(tracks),
-        _videoMuted: isLocalCameraTrackMuted(tracks)
+        _videoMuted: isLocalVideoTrackMuted(tracks)
     };
 }
 

react/features/toolbox/components/native/OverflowMenu.js

@@ -23,7 +23,6 @@ import HelpButton from '../HelpButton';
 import AudioOnlyButton from './AudioOnlyButton';
 import MoreOptionsButton from './MoreOptionsButton';
 import RaiseHandButton from './RaiseHandButton';
-import ScreenSharingButton from './ScreenSharingButton.js';
 import ToggleCameraButton from './ToggleCameraButton';
 import styles from './styles';
 
@@ -132,7 +131,6 @@ class OverflowMenu extends PureComponent<Props, State> {
                 <AudioOnlyButton { ...buttonProps } />
                 <RaiseHandButton { ...buttonProps } />
                 <LobbyModeButton { ...buttonProps } />
-                <ScreenSharingButton { ...buttonProps } />
                 <MoreOptionsButton { ...moreOptionsButtonProps } />
                 <Collapsible collapsed = { !showMore }>
                     <ToggleCameraButton { ...buttonProps } />

react/features/toolbox/components/native/ScreenSharingButton.js

@@ -1,77 +0,0 @@
-// @flow
-
-import { Platform } from 'react-native';
-
-import { translate } from '../../../base/i18n';
-import { IconShareDesktop } from '../../../base/icons';
-import { connect } from '../../../base/redux';
-import { AbstractButton, type AbstractButtonProps } from '../../../base/toolbox/components';
-import { toggleScreensharing, isLocalVideoTrackDesktop } from '../../../base/tracks';
-
-/**
- * The type of the React {@code Component} props of {@link ScreenSharingButton}.
- */
-type Props = AbstractButtonProps & {
-
-    /**
-     * Whether video is currently muted or not.
-     */
-    _screensharing: boolean,
-
-    /**
-     * The redux {@code dispatch} function.
-     */
-    dispatch: Function
-};
-
-/**
- * An implementation of a button for toggling screen sharing.
- */
-class ScreenSharingButton extends AbstractButton<Props, *> {
-    accessibilityLabel = 'toolbar.accessibilityLabel.shareYourScreen';
-    icon = IconShareDesktop;
-    label = 'toolbar.startScreenSharing';
-    toggledLabel = 'toolbar.stopScreenSharing';
-
-    /**
-     * Handles clicking / pressing the button.
-     *
-     * @override
-     * @protected
-     * @returns {void}
-     */
-    _handleClick() {
-        this.props.dispatch(toggleScreensharing());
-    }
-
-    /**
-     * Indicates whether this button is in toggled state or not.
-     *
-     * @override
-     * @protected
-     * @returns {boolean}
-     */
-    _isToggled() {
-        return this.props._screensharing;
-    }
-}
-
-/**
- * Maps (parts of) the redux state to the associated props for the
- * {@code ToggleCameraButton} component.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{
- *     _disabled: boolean,
- *     _screensharing: boolean
- * }}
- */
-function _mapStateToProps(state): Object {
-    return {
-        _screensharing: isLocalVideoTrackDesktop(state),
-        visible: Platform.OS === 'android'
-    };
-}
-
-export default translate(connect(_mapStateToProps)(ScreenSharingButton));

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

@@ -25,7 +25,6 @@ import {
     IconShareDesktop,
     IconShareVideo
 } from '../../../base/icons';
-import JitsiMeetJS from '../../../base/lib-jitsi-meet';
 import {
     getLocalParticipant,
     getParticipants,
@@ -1404,7 +1403,7 @@ class Toolbox extends Component<Props, State> {
  */
 function _mapStateToProps(state) {
     const { conference, locked } = state['features/base/conference'];
-    let desktopSharingEnabled = JitsiMeetJS.isDesktopSharingEnabled();
+    let { desktopSharingEnabled } = state['features/base/conference'];
     const {
         callStatsID,
         enableFeaturesBasedOnToken

react/features/toolbox/functions.native.js

@@ -1,9 +1,7 @@
 // @flow
 
-import { hasAvailableDevices } from '../base/devices';
 import { TOOLBOX_ALWAYS_VISIBLE, getFeatureFlag } from '../base/flags';
 import { toState } from '../base/redux';
-import { isLocalVideoTrackDesktop } from '../base/tracks';
 
 /**
  * Returns true if the toolbox is visible.
@@ -20,13 +18,3 @@ export function isToolboxVisible(stateful: Object | Function) {
 
     return enabled && (alwaysVisible || visible || participantCount === 1 || flag);
 }
-
-/**
- * Indicates if the video mute button is disabled or not.
- *
- * @param {string} state - The state from the Redux store.
- * @returns {boolean}
- */
-export function isVideoMuteButtonDisabled(state: Object) {
-    return !hasAvailableDevices(state, 'videoInput') || isLocalVideoTrackDesktop(state);
-}

react/features/toolbox/functions.web.js

@@ -77,13 +77,3 @@ export function isAudioSettingsButtonDisabled(state: Object) {
 export function isVideoSettingsButtonDisabled(state: Object) {
     return !hasAvailableDevices(state, 'videoInput');
 }
-
-/**
- * Indicates if the video mute button is disabled or not.
- *
- * @param {string} state - The state from the Redux store.
- * @returns {boolean}
- */
-export function isVideoMuteButtonDisabled(state: Object) {
-    return !hasAvailableDevices(state, 'videoInput');
-}

react/features/video-layout/middleware.web.js

@@ -1,7 +1,7 @@
 // @flow
 
 import VideoLayout from '../../../modules/UI/videolayout/VideoLayout.js';
-import { CONFERENCE_WILL_LEAVE } from '../base/conference';
+import { CONFERENCE_JOINED, CONFERENCE_WILL_LEAVE } from '../base/conference';
 import {
     DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_JOINED,
@@ -33,6 +33,10 @@ MiddlewareRegistry.register(store => next => action => {
     const result = next(action);
 
     switch (action.type) {
+    case CONFERENCE_JOINED:
+        VideoLayout.mucJoined();
+        break;
+
     case CONFERENCE_WILL_LEAVE:
         VideoLayout.reset();
         break;

react/features/welcome/components/Tabs.js

@@ -47,9 +47,6 @@ export default class Tabs extends Component<Props> {
 
         return (
             <div className = 'tab-container'>
-                <div className = 'tab-content'>
-                    { content }
-                </div>
                 { tabs.length > 1 ? (
                     <div className = 'tab-buttons'>
                         {
@@ -64,6 +61,9 @@ export default class Tabs extends Component<Props> {
                         }
                     </div>) : null
                 }
+                <div className = 'tab-content'>
+                    { content }
+                </div>
             </div>
         );
     }

react/features/welcome/components/WelcomePage.native.js

@@ -19,7 +19,6 @@ import { connect } from '../../base/redux';
 import { ColorPalette } from '../../base/styles';
 import {
     createDesiredLocalTracks,
-    destroyLocalDesktopTrackIfExists,
     destroyLocalTracks
 } from '../../base/tracks';
 import { HelpView } from '../../help';
@@ -82,8 +81,6 @@ class WelcomePage extends AbstractWelcomePage {
         if (this.props._settings.startAudioOnly) {
             dispatch(destroyLocalTracks());
         } else {
-            dispatch(destroyLocalDesktopTrackIfExists());
-
             // Make sure we don't request the permission for the camera from
             // the start. We will, however, create a video track iff the user
             // already granted the permission.

react/features/welcome/components/WelcomePage.web.js

@@ -20,12 +20,6 @@ import Tabs from './Tabs';
  */
 export const ROOM_NAME_VALIDATE_PATTERN_STR = '^[^?&:\u0022\u0027%#]+$';
 
-/**
- * Maximum number of pixels corresponding to a mobile layout.
- * @type {number}
- */
-const WINDOW_WIDTH_THRESHOLD = 425;
-
 /**
  * The Web container rendering the welcome page.
  *
@@ -78,6 +72,17 @@ class WelcomePage extends AbstractWelcomePage {
          */
         this._additionalToolbarContentRef = null;
 
+        this._additionalCardRef = null;
+
+        /**
+         * The template to use as the additional card displayed near the main one.
+         *
+         * @private
+         * @type {HTMLTemplateElement|null}
+         */
+        this._additionalCardTemplate = document.getElementById(
+            'welcome-page-additional-card-template');
+
         /**
          * The template to use as the main content for the welcome page. If
          * not found then only the welcome page head will display.
@@ -102,12 +107,14 @@ class WelcomePage extends AbstractWelcomePage {
         // Bind event handlers so they are only bound once per instance.
         this._onFormSubmit = this._onFormSubmit.bind(this);
         this._onRoomChange = this._onRoomChange.bind(this);
+        this._setAdditionalCardRef = this._setAdditionalCardRef.bind(this);
         this._setAdditionalContentRef
             = this._setAdditionalContentRef.bind(this);
         this._setRoomInputRef = this._setRoomInputRef.bind(this);
         this._setAdditionalToolbarContentRef
             = this._setAdditionalToolbarContentRef.bind(this);
         this._onTabSelected = this._onTabSelected.bind(this);
+        this._renderFooter = this._renderFooter.bind(this);
     }
 
     /**
@@ -137,6 +144,12 @@ class WelcomePage extends AbstractWelcomePage {
                 this._additionalToolbarContentTemplate.content.cloneNode(true)
             );
         }
+
+        if (this._shouldShowAdditionalCard()) {
+            this._additionalCardRef.appendChild(
+                this._additionalCardTemplate.content.cloneNode(true)
+            );
+        }
     }
 
     /**
@@ -159,10 +172,10 @@ class WelcomePage extends AbstractWelcomePage {
      */
     render() {
         const { _moderatedRoomServiceUrl, t } = this.props;
-        const { APP_NAME, DEFAULT_WELCOME_PAGE_LOGO_URL } = interfaceConfig;
+        const { DEFAULT_WELCOME_PAGE_LOGO_URL, DISPLAY_WELCOME_FOOTER } = interfaceConfig;
+        const showAdditionalCard = this._shouldShowAdditionalCard();
         const showAdditionalContent = this._shouldShowAdditionalContent();
         const showAdditionalToolbarContent = this._shouldShowAdditionalToolbarContent();
-        const showResponsiveText = this._shouldShowResponsiveText();
 
         return (
             <div
@@ -172,6 +185,7 @@ class WelcomePage extends AbstractWelcomePage {
                 <div className = 'welcome-watermark'>
                     <Watermarks defaultJitsiLogoURL = { DEFAULT_WELCOME_PAGE_LOGO_URL } />
                 </div>
+
                 <div className = 'header'>
                     <div className = 'welcome-page-settings'>
                         <SettingsButton
@@ -184,64 +198,82 @@ class WelcomePage extends AbstractWelcomePage {
                         }
                     </div>
                     <div className = 'header-image' />
-                    <div className = 'header-text'>
+                    <div className = 'header-container'>
                         <h1 className = 'header-text-title'>
-                            { t('welcomepage.title') }
+                            { t('welcomepage.jitsiMeet') }
                         </h1>
-                        <p className = 'header-text-description'>
-                            { t('welcomepage.appDescription',
-                                { app: APP_NAME }) }
-                        </p>
-                    </div>
-                    <div id = 'enter_room'>
-                        <div className = 'enter-room-input-container'>
-                            <div className = 'enter-room-title'>
-                                { t('welcomepage.enterRoomTitle') }
+                        <span className = 'header-text-subtitle'>
+                            { t('welcomepage.secureMeetings')}
+                        </span>
+                        <div id = 'enter_room'>
+                            <div className = 'enter-room-input-container'>
+                                <form onSubmit = { this._onFormSubmit }>
+                                    <input
+                                        aria-disabled = 'false'
+                                        aria-label = 'Meeting name input'
+                                        autoFocus = { true }
+                                        className = 'enter-room-input'
+                                        id = 'enter_room_field'
+                                        onChange = { this._onRoomChange }
+                                        pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
+                                        placeholder = { this.state.roomPlaceholder }
+                                        ref = { this._setRoomInputRef }
+                                        title = { t('welcomepage.roomNameAllowedChars') }
+                                        type = 'text'
+                                        value = { this.state.room } />
+                                    <div
+                                        className = { _moderatedRoomServiceUrl
+                                            ? 'warning-with-link'
+                                            : 'warning-without-link' }>
+                                        { this._renderInsecureRoomNameWarning() }
+                                    </div>
+                                </form>
                             </div>
-                            <form onSubmit = { this._onFormSubmit }>
-                                <input
-                                    autoFocus = { true }
-                                    className = 'enter-room-input'
-                                    id = 'enter_room_field'
-                                    onChange = { this._onRoomChange }
-                                    pattern = { ROOM_NAME_VALIDATE_PATTERN_STR }
-                                    placeholder = { this.state.roomPlaceholder }
-                                    ref = { this._setRoomInputRef }
-                                    title = { t('welcomepage.roomNameAllowedChars') }
-                                    type = 'text'
-                                    value = { this.state.room } />
-                                { this._renderInsecureRoomNameWarning() }
-                            </form>
+                            <button
+                                aria-disabled = 'false'
+                                aria-label = 'Start meeting'
+                                className = 'welcome-page-button'
+                                id = 'enter_room_button'
+                                onClick = { this._onFormSubmit }
+                                tabIndex = '0'
+                                type = 'button'>
+                                { t('welcomepage.startMeeting') }
+                            </button>
                         </div>
-                        <div
-                            className = 'welcome-page-button'
-                            id = 'enter_room_button'
-                            onClick = { this._onFormSubmit }>
-                            {
-                                showResponsiveText
-                                    ? t('welcomepage.goSmall')
-                                    : t('welcomepage.go')
-                            }
-                        </div>
-                    </div>
-                    { _moderatedRoomServiceUrl && (
-                        <div id = 'moderated-meetings'>
-                            <p>
-                                {
-                                    translateToHTML(
+
+                        { _moderatedRoomServiceUrl && (
+                            <div id = 'moderated-meetings'>
+                                <p>
+                                    {
+                                        translateToHTML(
                                         t, 'welcomepage.moderatedMessage', { url: _moderatedRoomServiceUrl })
-                                }
-                            </p>
-                        </div>
-                    ) }
-                    { this._renderTabs() }
+                                    }
+                                </p>
+                            </div>)}
+                    </div>
                 </div>
-                { showAdditionalContent
-                    ? <div
-                        className = 'welcome-page-content'
-                        ref = { this._setAdditionalContentRef } />
-                    : null }
+
+                <div className = 'welcome-cards-container'>
+                    <div className = 'welcome-card-row'>
+                        <div className = 'welcome-tabs welcome-card welcome-card--blue'>
+                            { this._renderTabs() }
+                        </div>
+                        { showAdditionalCard
+                            ? <div
+                                className = 'welcome-card welcome-card--dark'
+                                ref = { this._setAdditionalCardRef } />
+                            : null }
+                    </div>
+
+                    { showAdditionalContent
+                        ? <div
+                            className = 'welcome-page-content'
+                            ref = { this._setAdditionalContentRef } />
+                        : null }
+                </div>
+                { DISPLAY_WELCOME_FOOTER && this._renderFooter()}
             </div>
+
         );
     }
 
@@ -302,6 +334,45 @@ class WelcomePage extends AbstractWelcomePage {
         this.setState({ selectedTab: tabIndex });
     }
 
+    /**
+     * Renders the footer.
+     *
+     * @returns {ReactElement}
+     */
+    _renderFooter() {
+        const { t } = this.props;
+        const {
+            MOBILE_DOWNLOAD_LINK_ANDROID,
+            MOBILE_DOWNLOAD_LINK_F_DROID,
+            MOBILE_DOWNLOAD_LINK_IOS
+        } = interfaceConfig;
+
+        return (<footer className = 'welcome-footer'>
+            <div className = 'welcome-footer-centered'>
+                <div className = 'welcome-footer-padded'>
+                    <div className = 'welcome-footer-row-block welcome-footer--row-1'>
+                        <div className = 'welcome-footer-row-1-text'>{t('welcomepage.jitsiOnMobile')}</div>
+                        <a
+                            className = 'welcome-badge'
+                            href = { MOBILE_DOWNLOAD_LINK_IOS }>
+                            <img src = './images/app-store-badge.png' />
+                        </a>
+                        <a
+                            className = 'welcome-badge'
+                            href = { MOBILE_DOWNLOAD_LINK_ANDROID }>
+                            <img src = './images/google-play-badge.png' />
+                        </a>
+                        <a
+                            className = 'welcome-badge'
+                            href = { MOBILE_DOWNLOAD_LINK_F_DROID }>
+                            <img src = './images/f-droid-badge.png' />
+                        </a>
+                    </div>
+                </div>
+            </div>
+        </footer>);
+    }
+
     /**
      * Renders tabs to show previous meetings and upcoming calendar events. The
      * tabs are purposefully hidden on mobile browsers.
@@ -342,6 +413,19 @@ class WelcomePage extends AbstractWelcomePage {
                 tabs = { tabs } />);
     }
 
+    /**
+     * Sets the internal reference to the HTMLDivElement used to hold the
+     * additional card shown near the tabs card.
+     *
+     * @param {HTMLDivElement} el - The HTMLElement for the div that is the root
+     * of the welcome page content.
+     * @private
+     * @returns {void}
+     */
+    _setAdditionalCardRef(el) {
+        this._additionalCardRef = el;
+    }
+
     /**
      * Sets the internal reference to the HTMLDivElement used to hold the
      * welcome page content.
@@ -380,6 +464,19 @@ class WelcomePage extends AbstractWelcomePage {
         this._roomInputRef = el;
     }
 
+    /**
+     * Returns whether or not an additional card should be displayed near the tabs.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _shouldShowAdditionalCard() {
+        return interfaceConfig.DISPLAY_WELCOME_PAGE_ADDITIONAL_CARD
+            && this._additionalCardTemplate
+            && this._additionalCardTemplate.content
+            && this._additionalCardTemplate.innerHTML.trim();
+    }
+
     /**
      * Returns whether or not additional content should be displayed below
      * the welcome page's header for entering a room name.
@@ -407,20 +504,6 @@ class WelcomePage extends AbstractWelcomePage {
             && this._additionalToolbarContentTemplate.content
             && this._additionalToolbarContentTemplate.innerHTML.trim();
     }
-
-    /**
-     * Returns whether or not the screen has a size smaller than a custom margin
-     * and therefore display different text in the go button.
-     *
-     * @private
-     * @returns {boolean}
-     */
-    _shouldShowResponsiveText() {
-        const { innerWidth } = window;
-
-        return innerWidth <= WINDOW_WIDTH_THRESHOLD;
-    }
-
 }
 
 export default translate(connect(_mapStateToProps)(WelcomePage));

resources/prosody-plugins/mod_jibri_queue.lua

@@ -0,0 +1,5 @@
+local jibri_queue_component
+    = module:get_option_string(
+        "jibri_queue_component", "jibriqueue"..module.host);
+
+module:add_identity("component", "jibri-queue", jibri_queue_component);

resources/prosody-plugins/mod_jibri_queue_component.lua

@@ -0,0 +1,559 @@
+local st = require "util.stanza";
+local jid = require "util.jid";
+local http = require "net.http";
+local json = require "cjson";
+local inspect = require('inspect');
+local socket = require "socket";
+local uuid_gen = require "util.uuid".generate;
+local jwt = require "luajwtjitsi";
+local it = require "util.iterators";
+local neturl = require "net.url";
+local parse = neturl.parseQuery;
+
+local get_room_from_jid = module:require "util".get_room_from_jid;
+local room_jid_match_rewrite = module:require "util".room_jid_match_rewrite;
+local is_healthcheck_room = module:require "util".is_healthcheck_room;
+local room_jid_split_subdomain = module:require "util".room_jid_split_subdomain;
+local internal_room_jid_match_rewrite = module:require "util".internal_room_jid_match_rewrite;
+local async_handler_wrapper = module:require "util".async_handler_wrapper;
+
+-- this basically strips the domain from the conference.domain address
+local parentHostName = string.gmatch(tostring(module.host), "%w+.(%w.+)")();
+if parentHostName == nil then
+    log("error", "Failed to start - unable to get parent hostname");
+    return;
+end
+
+local parentCtx = module:context(parentHostName);
+if parentCtx == nil then
+    log("error",
+        "Failed to start - unable to get parent context for host: %s",
+        tostring(parentHostName));
+    return;
+end
+local token_util = module:require "token/util".new(parentCtx);
+
+local ASAPKeyServer;
+local ASAPKeyPath;
+local ASAPKeyId;
+local ASAPIssuer;
+local ASAPAudience;
+local ASAPAcceptedIssuers;
+local ASAPAcceptedAudiences;
+local ASAPTTL;
+local ASAPTTL_THRESHOLD;
+local ASAPKey;
+local JibriRegion;
+local disableTokenVerification;
+local muc_component_host;
+local external_api_url;
+local jwtKeyCacheSize;
+local jwtKeyCache;
+
+local function load_config()
+    ASAPKeyServer = module:get_option_string("asap_key_server");
+
+    if ASAPKeyServer then
+        module:log("debug", "ASAP Public Key URL %s", ASAPKeyServer);
+        token_util:set_asap_key_server(ASAPKeyServer);
+    end
+
+    ASAPKeyPath
+        = module:get_option_string("asap_key_path", '/etc/prosody/certs/asap.key');
+
+    ASAPKeyId
+        = module:get_option_string("asap_key_id", 'jitsi');        
+
+    ASAPIssuer
+        = module:get_option_string("asap_issuer", 'jitsi');
+
+    ASAPAudience
+        = module:get_option_string("asap_audience", 'jibri-queue');
+
+    ASAPAcceptedIssuers
+        = module:get_option_array('asap_accepted_issuers',{'jibri-queue'});
+    module:log("debug", "ASAP Accepted Issuers %s", ASAPAcceptedIssuers);
+    token_util:set_asap_accepted_issuers(ASAPAcceptedIssuers);
+
+    ASAPAcceptedAudiences 
+        = module:get_option_array('asap_accepted_audiences',{'*'});
+    module:log("debug", "ASAP Accepted Audiences %s", ASAPAcceptedAudiences);
+    token_util:set_asap_accepted_audiences(ASAPAcceptedAudiences);
+
+    -- do not require room to be set on tokens for jibri queue
+    token_util:set_asap_require_room_claim(false);
+
+    ASAPTTL
+        = module:get_option_number("asap_ttl", 3600);
+ 
+    ASAPTTL_THRESHOLD
+        = module:get_option_number("asap_ttl_threshold", 600);
+
+    queueServiceURL
+        = module:get_option_string("jibri_queue_url");
+
+    JibriRegion
+        = module:get_option_string("jibri_region", 'default');
+
+    -- option to enable/disable token verifications
+    disableTokenVerification
+        = module:get_option_boolean("disable_jibri_queue_token_verification", false);
+
+    muc_component_host 
+        = module:get_option_string("muc_component");
+
+    external_api_url = module:get_option_string("external_api_url",tostring(parentHostName));
+    module:log("debug", "External advertised API URL", external_api_url);
+
+
+    -- TODO: Figure out a less arbitrary default cache size.
+    jwtKeyCacheSize 
+        = module:get_option_number("jwt_pubkey_cache_size", 128);
+    jwtKeyCache = require"util.cache".new(jwtKeyCacheSize);
+
+    if queueServiceURL == nil then
+        log("error", "No jibri_queue_url specified. No service to contact!");
+        return;
+    end
+
+    if muc_component_host == nil then
+        log("error", "No muc_component specified. No muc to operate on for jibri queue!");
+        return;
+    end
+
+    -- Read ASAP key once on module startup
+    local f = io.open(ASAPKeyPath, "r");
+    if f then
+        ASAPKey = f:read("*all");
+        f:close();
+        if not ASAPKey then
+            module:log("warn", "No ASAP Key read from %s, disabling jibri queue component plugin", ASAPKeyPath);
+            return
+        end
+    else
+        module:log("warn", "Error reading ASAP Key %s, disabling jibri queue component plugin", ASAPKeyPath);
+        return
+    end
+
+    return true;
+end
+
+local function reload_config()
+    module:log("info", "Reloading configuration for jibri queue component");
+    local config_success = load_config();
+
+    -- clear ASAP public key cache on config reload
+    token_util:clear_asap_cache();
+
+    if not config_success then
+        log("error", "Unsuccessful reconfiguration, jibri queue component may misbehave");
+    end
+end
+
+local config_success = load_config();
+
+if not config_success then
+    log("error", "Unsuccessful configuration step, jibri queue component disabled")
+    return;
+end
+
+
+local http_headers = {
+    ["User-Agent"] = "Prosody ("..prosody.version.."; "..prosody.platform..")",
+    ["Content-Type"] = "application/json"
+};
+
+-- we use async to detect Prosody 0.10 and earlier
+local have_async = pcall(require, "util.async");
+if not have_async then
+    module:log("warn", "conference duration will not work with Prosody version 0.10 or less.");
+    return;
+end
+
+
+log("info", "Starting jibri queue handling for %s", muc_component_host);
+
+local function round(num, numDecimalPlaces)
+    local mult = 10^(numDecimalPlaces or 0)
+    return math.floor(num * mult + 0.5) / mult
+end
+      
+local function generateToken(audience)
+    audience = audience or ASAPAudience
+    local t = os.time()
+    local err
+    local exp_key = 'asap_exp.'..audience
+    local token_key = 'asap_token.'..audience
+    local exp = jwtKeyCache:get(exp_key)
+    local token = jwtKeyCache:get(token_key)
+
+    --if we find a token and it isn't too far from expiry, then use it
+    if token ~= nil and exp ~= nil then
+        exp = tonumber(exp)
+        if (exp - t) > ASAPTTL_THRESHOLD then
+            return token
+        end
+    end
+
+    --expiry is the current time plus TTL
+    exp = t + ASAPTTL
+    local payload = {
+        iss = ASAPIssuer,
+        aud = audience,
+        nbf = t,
+        exp = exp,
+    }
+
+    -- encode
+    local alg = "RS256"
+    token, err = jwt.encode(payload, ASAPKey, alg, {kid = ASAPKeyId})
+    if not err then
+        token = 'Bearer '..token
+        jwtKeyCache:set(exp_key,exp)
+        jwtKeyCache:set(token_key,token)
+        return token
+    else
+        return ''
+    end
+end
+
+local function sendIq(participant,action,requestId,time,position,token)
+    local iqId = uuid_gen();
+    local from = module:get_host();
+    local outStanza = st.iq({type = 'set', from = from, to = participant, id = iqId}):tag("jibri-queue", 
+       { xmlns = 'http://jitsi.org/protocol/jibri-queue', requestId = requestId, action = action });
+
+    if token then
+        outStanza:tag("token"):text(token):up()
+    end
+    if time then
+        outStanza:tag("time"):text(tostring(time)):up()
+    end
+    if position then
+        outStanza:tag("position"):text(tostring(position)):up()
+    end
+
+    module:send(outStanza);
+end
+
+local function cb(content_, code_, response_, request_)
+    if code_ == 200 or code_ == 204 then
+        module:log("debug", "URL Callback: Code %s, Content %s, Request (host %s, path %s, body %s), Response: %s",
+                code_, content_, request_.host, request_.path, inspect(request_.body), inspect(response_));
+    else
+        module:log("warn", "URL Callback non successful: Code %s, Content %s, Request (%s), Response: %s",
+                code_, content_, inspect(request_), inspect(response_));
+    end
+end
+
+local function sendEvent(type,room_address,participant,requestId,replyIq,replyError)
+    local event_ts = round(socket.gettime()*1000);
+    local node, host, resource, target_subdomain = room_jid_split_subdomain(room_address);
+    local room_param = '';
+    if target_subdomain then
+        room_param = target_subdomain..'/'..node;
+    else
+        room_param = node;
+    end
+
+    local out_event = {
+        ["conference"] = room_address,
+        ["roomParam"] = room_param,
+        ["eventType"] = type,
+        ["participant"] = participant,
+        ["externalApiUrl"] = external_api_url.."/jibriqueue/update",
+        ["requestId"] = requestId,
+        ["region"] = JibriRegion,
+    }
+    module:log("debug","Sending event %s",inspect(out_event));
+
+    local headers = http_headers or {}
+    headers['Authorization'] = generateToken()
+
+    module:log("debug","Sending headers %s",inspect(headers));
+    local requestURL = queueServiceURL.."/job/recording"
+    if type=="LeaveQueue" then
+        requestURL = requestURL .."/cancel"
+    end
+    local request = http.request(requestURL, {
+        headers = headers,
+        method = "POST",
+        body = json.encode(out_event)
+    }, function (content_, code_, response_, request_)
+        if code_ == 200 or code_ == 204 then
+            module:log("debug", "URL Callback: Code %s, Content %s, Request (host %s, path %s, body %s), Response: %s",
+                    code_, content_, request_.host, request_.path, inspect(request_.body), inspect(response_));
+            if (replyIq) then
+                module:log("debug", "sending reply IQ %s",inspect(replyIq));
+                module:send(replyIq);
+            end
+        else
+            module:log("warn", "URL Callback non successful: Code %s, Content %s, Request (%s), Response: %s",
+                    code_, content_, inspect(request_), inspect(response_));
+            if (replyError) then
+                module:log("warn", "sending reply error IQ %s",inspect(replyError));
+                module:send(replyError);
+            end
+        end
+    end);
+end
+
+function clearRoomQueueByOccupant(room, occupant)
+    room.jibriQueue[occupant.jid] = nil;
+end
+
+function addRoomQueueByOccupant(room, occupant, requestId)
+    room.jibriQueue[occupant.jid] = requestId;
+end
+
+-- receives iq from client currently connected to the room
+function on_iq(event)
+    local requestId;
+    -- Check the type of the incoming stanza to avoid loops:
+    if event.stanza.attr.type == "error" then
+        return; -- We do not want to reply to these, so leave.
+    end
+    if event.stanza.attr.to == module:get_host() then
+        if event.stanza.attr.type == "set" then
+            local reply = st.reply(event.stanza);
+            local replyError = st.error_reply(event.stanza,'cancel','internal-server-error',"Queue Server Error");
+
+            local jibriQueue
+                = event.stanza:get_child('jibri-queue', 'http://jitsi.org/protocol/jibri-queue');
+            if jibriQueue then
+                module:log("debug", "Received Jibri Queue Request: %s ",inspect(jibriQueue));
+
+                local roomAddress = jibriQueue.attr.room;
+                local room = get_room_from_jid(room_jid_match_rewrite(roomAddress));
+
+                if not room then
+                    module:log("warn", "No room found %s", roomAddress);
+                    return false;
+                end
+
+                local from = event.stanza.attr.from;
+
+                local occupant = room:get_occupant_by_real_jid(from);
+                if not occupant then
+                    module:log("warn", "No occupant %s found for %s", from, roomAddress);
+                    return false;
+                end
+
+                local action = jibriQueue.attr.action;
+                if action == 'join' then
+                    -- join action, so send event out
+                    requestId = uuid_gen();
+                    module:log("debug","Received join queue request for jid %s occupant %s requestId %s",roomAddress,occupant.jid,requestId);
+
+                    -- now handle new jibri queue message
+                    addRoomQueueByOccupant(room, occupant, requestId);
+                    reply:add_child(st.stanza("jibri-queue", { xmlns = 'http://jitsi.org/protocol/jibri-queue', requestId = requestId})):up()
+                    replyError:add_child(st.stanza("jibri-queue", { xmlns = 'http://jitsi.org/protocol/jibri-queue', requestId = requestId})):up()
+
+                    module:log("debug","Sending JoinQueue event for jid %s occupant %s reply %s",roomAddress,occupant.jid,inspect(reply));
+                    sendEvent('JoinQueue',roomAddress,occupant.jid,requestId,reply,replyError);
+                end
+                if action == 'leave' then
+                    requestId = jibriQueue.attr.requestId;
+                    module:log("debug","Received leave queue request for jid %s occupant %s requestId %s",roomAddress,occupant.jid,requestId);
+
+                    -- TODO: check that requestId is the same as cached value
+                    clearRoomQueueByOccupant(room, occupant);
+                    reply:add_child(st.stanza("jibri-queue", { xmlns = 'http://jitsi.org/protocol/jibri-queue', requestId = requestId})):up()
+                    replyError:add_child(st.stanza("jibri-queue", { xmlns = 'http://jitsi.org/protocol/jibri-queue', requestId = requestId})):up()
+
+                    module:log("debug","Sending LeaveQueue event for jid %s occupant %s reply %s",roomAddress,occupant.jid,inspect(reply));
+                    sendEvent('LeaveQueue',roomAddress,occupant.jid,requestId,reply,replyError);
+                end
+            else
+                module:log("warn","Jibri Queue Stanza missing child %s",inspect(event.stanza))
+            end
+        end
+    end
+    return true
+end
+
+-- create recorder queue cache for the room
+function room_created(event)
+    local room = event.room;
+
+    if is_healthcheck_room(room.jid) then
+        return;
+    end
+
+    room.jibriQueue = {};
+end
+
+-- Conference ended, clear all queue cache jids
+function room_destroyed(event)
+    local room = event.room;
+
+    if is_healthcheck_room(room.jid) then
+        return;
+    end
+    for jid, x in pairs(room.jibriQueue) do
+        if x then
+            sendEvent('LeaveQueue',internal_room_jid_match_rewrite(room.jid),jid,x);
+        end
+    end
+end
+
+-- Occupant left remove it from the queue if it joined the queue
+function occupant_leaving(event)
+    local room = event.room;
+
+    if is_healthcheck_room(room.jid) then
+        return;
+    end
+
+    local occupant = event.occupant;
+    local requestId = room.jibriQueue[occupant.jid];
+    -- check if user has cached queue request
+    if requestId then
+        -- remove occupant from queue cache, signal backend
+        room.jibriQueue[occupant.jid] = nil;
+        sendEvent('LeaveQueue',internal_room_jid_match_rewrite(room.jid),occupant.jid,requestId);
+    end
+end
+
+module:hook("iq/host", on_iq);
+
+-- executed on every host added internally in prosody, including components
+function process_host(host)
+    if host == muc_component_host then -- the conference muc component
+        module:log("debug","Hook to muc events on %s", host);
+
+        local muc_module = module:context(host);
+        muc_module:hook("muc-room-created", room_created, -1);
+        -- muc_module:hook("muc-occupant-joined", occupant_joined, -1);
+        muc_module:hook("muc-occupant-pre-leave", occupant_leaving, -1);
+        muc_module:hook("muc-room-destroyed", room_destroyed, -1);
+    end
+end
+
+if prosody.hosts[muc_component_host] == nil then
+    module:log("debug","No muc component found, will listen for it: %s", muc_component_host)
+
+    -- when a host or component is added
+    prosody.events.add_handler("host-activated", process_host);
+else
+    process_host(muc_component_host);
+end
+
+module:log("info", "Loading jibri_queue_component");
+
+--- Verifies room name, domain name with the values in the token
+-- @param token the token we received
+-- @param room_name the room name
+-- @param group name of the group (optional)
+-- @param session the session to use for storing token specific fields
+-- @return true if values are ok or false otherwise
+function verify_token(token, room_jid, session)
+    if disableTokenVerification then
+        return true;
+    end
+
+    -- if not disableTokenVerification and we do not have token
+    -- stop here, cause the main virtual host can have guest access enabled
+    -- (allowEmptyToken = true) and we will allow access to rooms info without
+    -- a token
+    if token == nil then
+        log("warn", "no token provided");
+        return false;
+    end
+
+    session.auth_token = token;
+    local verified, reason, message = token_util:process_and_verify_token(session);
+    if not verified then
+        log("warn", "not a valid token %s: %s", tostring(reason), tostring(message));
+        log("debug", "invalid token %s", token);
+        return false;
+    end
+
+    return true;
+end
+
+--- Handles request for updating jibri queue status
+-- @param event the http event, holds the request query
+-- @return GET response, containing a json with response details
+function handle_update_jibri_queue(event)
+    local body = json.decode(event.request.body);
+
+    module:log("debug","Update Jibri Queue Event Received: %s",inspect(body));
+
+    local token = event.request.headers["authorization"];
+    if not token then
+        token = ''
+    else
+        local prefixStart, prefixEnd = token:find("Bearer ");
+        if prefixStart ~= 1 then
+            module:log("error", "REST event: Invalid authorization header format. The header must start with the string 'Bearer '");
+            return { status_code = 403; };
+        end
+        token = token:sub(prefixEnd + 1);
+    end
+
+    local user_jid = body["participant"];
+    local roomAddress = body["conference"];
+    local userJWT = body["token"];
+    local action = body["action"];
+    local time = body["time"];
+    local position = body["position"];
+    local requestId = body["requestId"];
+
+    if not action then
+        if userJWT then
+            action = 'token';
+        else
+            action = 'info';
+        end
+    end
+
+    local room_jid = room_jid_match_rewrite(roomAddress);
+
+    if not verify_token(token, room_jid, {}) then
+        log("error", "REST event: Invalid token for room %s to route action %s for requestId %s", roomAddress, action, requestId);
+        return { status_code = 403; };
+    end
+
+    local room = get_room_from_jid(room_jid);
+    if (not room) then
+        log("error", "REST event: no room found %s to route action %s for requestId %s", roomAddress, action, requestId);
+        return { status_code = 404; };
+    end
+
+    local occupant = room:get_occupant_by_real_jid(user_jid);
+    if not occupant then
+        log("warn", "REST event: No occupant %s found for %s to route action %s for requestId %s", user_jid, roomAddress, action, requestId);
+        return { status_code = 404; };
+    end
+
+    if not room.jibriQueue[occupant.jid] then
+        log("warn", "REST event: No queue request found for occupant %s in conference %s to route action %s for requestId %s",occupant.jid,room.jid, action, requestId)
+        return { status_code = 404; };
+    end
+
+    if not requestId then
+        requestId = room.jibriQueue[occupant.jid];
+    end
+
+    if action == 'token' and userJWT then
+        log("debug", "REST event: Token received for occupant %s in conference %s requestId %s, clearing room queue");
+        clearRoomQueueByOccupant(room, occupant);
+    end
+
+    log("debug", "REST event: Sending update for occupant %s in conference %s to route action %s for requestId %s",occupant.jid,room.jid, action, requestId);
+    sendIq(occupant.jid,action,requestId,time,position,userJWT);
+    return { status_code = 200; };
+end
+
+module:depends("http");
+module:provides("http", {
+    default_path = "/";
+    name = "jibriqueue";
+    route = {
+        ["POST /jibriqueue/update"] = function (event) return async_handler_wrapper(event,handle_update_jibri_queue) end;
+    };
+});
+
+module:hook_global('config-reloaded', reload_config);

resources/prosody-plugins/mod_muc_domain_mapper.lua

@@ -7,32 +7,99 @@ local jid = require "util.jid";
 
 local filters = require "util.filters";
 
+local muc_domain_prefix = module:get_option_string("muc_mapper_domain_prefix", "conference");
+
 local muc_domain_base = module:get_option_string("muc_mapper_domain_base");
 if not muc_domain_base then
     module:log("warn", "No 'muc_mapper_domain_base' option set, disabling muc_mapper plugin inactive");
     return
 end
 
-local util = module:require "util";
-local room_jid_match_rewrite = util.room_jid_match_rewrite;
-local internal_room_jid_match_rewrite = util.internal_room_jid_match_rewrite;
+-- The "real" MUC domain that we are proxying to
+local muc_domain = module:get_option_string("muc_mapper_domain", muc_domain_prefix.."."..muc_domain_base);
+
+local escaped_muc_domain_base = muc_domain_base:gsub("%p", "%%%1");
+local escaped_muc_domain_prefix = muc_domain_prefix:gsub("%p", "%%%1");
+-- The pattern used to extract the target subdomain (e.g. extract 'foo' from 'foo.muc.example.com')
+local target_subdomain_pattern = "^"..escaped_muc_domain_prefix..".([^%.]+)%."..escaped_muc_domain_base;
+
+-- table to store all incoming iqs without roomname in it, like discoinfo to the muc compoent
+local roomless_iqs = {};
+
+if not muc_domain then
+    module:log("warn", "No 'muc_mapper_domain' option set, disabling muc_mapper plugin inactive");
+    return
+end
+
+
+-- Utility function to check and convert a room JID from virtual room1@muc.foo.example.com to real [foo]room1@muc.example.com
+local function match_rewrite_to_jid(room_jid, stanza)
+    local node, host, resource = jid.split(room_jid);
+    local target_subdomain = host and host:match(target_subdomain_pattern);
+    if not target_subdomain then
+        module:log("debug", "No need to rewrite out 'to' %s", room_jid);
+        return room_jid;
+    end
+    -- Ok, rewrite room_jid  address to new format
+    local new_node, new_host, new_resource;
+    if node then
+        new_node, new_host, new_resource = "["..target_subdomain.."]"..node, muc_domain, resource;
+    else
+        module:log("debug", "No room name provided so rewriting only host 'to' %s", room_jid);
+        new_host, new_resource = muc_domain, resource;
+
+        if (stanza.attr and stanza.attr.id) then
+            roomless_iqs[stanza.attr.id] = stanza.attr.to;
+        end
+    end
+    room_jid = jid.join(new_node, new_host, new_resource);
+    module:log("debug", "Rewrote to %s", room_jid);
+    return room_jid
+end
+
+-- Utility function to check and convert a room JID from real [foo]room1@muc.example.com to virtual room1@muc.foo.example.com
+local function match_rewrite_from_jid(room_jid, stanza)
+    local node, host, resource = jid.split(room_jid);
+    if host ~= muc_domain or not node then
+        module:log("debug", "No need to rewrite %s (not from the MUC host) %s, %s", room_jid, stanza.attr.id, roomless_iqs[stanza.attr.id]);
+
+        if (stanza.attr and stanza.attr.id and roomless_iqs[stanza.attr.id]) then
+            local result = roomless_iqs[stanza.attr.id];
+            roomless_iqs[stanza.attr.id] = nil;
+            return result;
+        end
+
+        return room_jid;
+    end
+    local target_subdomain, target_node = node:match("^%[([^%]]+)%](.+)$");
+    if not (target_node and target_subdomain) then
+        module:log("debug", "Not rewriting... unexpected node format: %s", node);
+        return room_jid;
+    end
+    -- Ok, rewrite room_jid address to pretty format
+    local new_node, new_host, new_resource = target_node, muc_domain_prefix..".".. target_subdomain.."."..muc_domain_base, resource;
+    room_jid = jid.join(new_node, new_host, new_resource);
+    module:log("debug", "Rewrote to %s", room_jid);
+    return room_jid
+end
+
 
 -- We must filter stanzas in order to hook in to all incoming and outgoing messaging which skips the stanza routers
 function filter_stanza(stanza)
     if stanza.name == "message" or stanza.name == "iq" or stanza.name == "presence" then
-        -- module:log("debug", "Filtering stanza type %s  to %s from %s",stanza.name,stanza.attr.to,stanza.attr.from);
+        module:log("debug", "Filtering stanza type %s  to %s from %s",stanza.name,stanza.attr.to,stanza.attr.from);
         if stanza.name == "iq" then
             local conf = stanza:get_child('conference')
             if conf then
-                -- module:log("debug", "Filtering stanza conference %s to %s from %s",conf.attr.room,stanza.attr.to,stanza.attr.from);
-                conf.attr.room = room_jid_match_rewrite(conf.attr.room, stanza)
+                module:log("debug", "Filtering stanza conference %s to %s from %s",conf.attr.room,stanza.attr.to,stanza.attr.from);
+                conf.attr.room = match_rewrite_to_jid(conf.attr.room, stanza)
             end
         end
         if stanza.attr.to then
-            stanza.attr.to = room_jid_match_rewrite(stanza.attr.to, stanza)
+            stanza.attr.to = match_rewrite_to_jid(stanza.attr.to, stanza)
         end
         if stanza.attr.from then
-            stanza.attr.from = internal_room_jid_match_rewrite(stanza.attr.from, stanza)
+            stanza.attr.from = match_rewrite_from_jid(stanza.attr.from, stanza)
         end
     end
     return stanza;
@@ -40,6 +107,7 @@ end
 
 function filter_session(session)
     module:log("warn", "Session filters applied");
+--    filters.add_filter(session, "stanzas/in", filter_stanza_in);
     filters.add_filter(session, "stanzas/out", filter_stanza);
 end
 
@@ -60,14 +128,14 @@ end
 local function outgoing_stanza_rewriter(event)
     local stanza = event.stanza;
     if stanza.attr.to then
-        stanza.attr.to = room_jid_match_rewrite(stanza.attr.to, stanza)
+        stanza.attr.to = match_rewrite_to_jid(stanza.attr.to, stanza)
     end
 end
 
 local function incoming_stanza_rewriter(event)
     local stanza = event.stanza;
     if stanza.attr.from then
-        stanza.attr.from = internal_room_jid_match_rewrite(stanza.attr.from, stanza)
+        stanza.attr.from = match_rewrite_from_jid(stanza.attr.from, stanza)
     end
 end
 

resources/prosody-plugins/mod_muc_lobby_rooms.lua

@@ -166,7 +166,7 @@ function attach_lobby_room(room)
         new_room:set_persistent(true);
         module:log("debug","Lobby room jid = %s created",lobby_room_jid);
         new_room.main_room = room;
-        room._data.lobbyroom = new_room.jid;
+        room._data.lobbyroom = new_room;
         room:save(true);
         return true
     end
@@ -178,12 +178,9 @@ function destroy_lobby_room(room, newjid, message)
     if not message then
         message = 'Lobby room closed.';
     end
-    if lobby_muc_service and room and room._data.lobbyroom then
-        local lobby_room_obj = lobby_muc_service.get_room_from_jid(room._data.lobbyroom);
-        if lobby_room_obj then
-            lobby_room_obj:set_persistent(false);
-            lobby_room_obj:destroy(newjid, message);
-        end
+    if room and room._data.lobbyroom then
+        room._data.lobbyroom:set_persistent(false);
+        room._data.lobbyroom:destroy(newjid, message);
         room._data.lobbyroom = nil;
     end
 end
@@ -318,7 +315,7 @@ process_host_module(main_muc_component_config, function(host_module, host)
                 label = 'Lobby room jid';
                 value = '';
             });
-            event.formdata['muc#roominfo_lobbyroom'] = room._data.lobbyroom;
+            event.formdata['muc#roominfo_lobbyroom'] = room._data.lobbyroom.jid;
         end
     end);
 
@@ -367,7 +364,7 @@ process_host_module(main_muc_component_config, function(host_module, host)
             local reply = st.error_reply(stanza, 'auth', 'registration-required'):up();
             reply.tags[1].attr.code = '407';
             reply:tag('x', {xmlns = MUC_NS}):up();
-            reply:tag('lobbyroom'):text(room._data.lobbyroom);
+            reply:tag('lobbyroom'):text(room._data.lobbyroom.jid);
             event.origin.send(reply:tag('x', {xmlns = MUC_NS}));
             return true;
         end
@@ -380,16 +377,13 @@ process_host_module(main_muc_component_config, function(host_module, host)
         local from = stanza:get_child('x', 'http://jabber.org/protocol/muc#user')
             :get_child('invite').attr.from;
 
-        if lobby_muc_service and room._data.lobbyroom then
-            local lobby_room_obj = lobby_muc_service.get_room_from_jid(room._data.lobbyroom);
-            if lobby_room_obj then
-                local occupant = lobby_room_obj:get_occupant_by_real_jid(invitee);
-                if occupant then
-                    local display_name = occupant:get_presence():get_child_text(
-                            'nick', 'http://jabber.org/protocol/nick');
+        if room._data.lobbyroom then
+            local occupant = room._data.lobbyroom:get_occupant_by_real_jid(invitee);
+            if occupant then
+                local display_name = occupant:get_presence():get_child_text(
+                    'nick', 'http://jabber.org/protocol/nick');
 
-                    notify_lobby_access(room, from, occupant.nick, display_name, true);
-                end
+                notify_lobby_access(room, from, occupant.nick, display_name, true);
             end
         end
     end);

resources/prosody-plugins/mod_smacks.lua

@@ -17,7 +17,7 @@ local cache = dep.softreq("util.cache");	-- only available in prosody 0.10+
 local uuid_generate = require "util.uuid".generate;
 local jid = require "util.jid";
 
-local t_remove = table.remove;
+local t_insert, t_remove = table.insert, table.remove;
 local math_min = math.min;
 local math_max = math.max;
 local os_time = os.time;
@@ -26,7 +26,6 @@ local add_filter = require "util.filters".add_filter;
 local timer = require "util.timer";
 local datetime = require "util.datetime";
 
-local xmlns_mam2 = "urn:xmpp:mam:2";
 local xmlns_sm2 = "urn:xmpp:sm:2";
 local xmlns_sm3 = "urn:xmpp:sm:3";
 local xmlns_errors = "urn:ietf:params:xml:ns:xmpp-stanzas";
@@ -35,11 +34,11 @@ local xmlns_delay = "urn:xmpp:delay";
 local sm2_attr = { xmlns = xmlns_sm2 };
 local sm3_attr = { xmlns = xmlns_sm3 };
 
-local resume_timeout = module:get_option_number("smacks_hibernation_time", 600);
+local resume_timeout = module:get_option_number("smacks_hibernation_time", 300);
 local s2s_smacks = module:get_option_boolean("smacks_enabled_s2s", false);
 local s2s_resend = module:get_option_boolean("smacks_s2s_resend", false);
 local max_unacked_stanzas = module:get_option_number("smacks_max_unacked_stanzas", 0);
-local delayed_ack_timeout = module:get_option_number("smacks_max_ack_delay", 30);
+local delayed_ack_timeout = module:get_option_number("smacks_max_ack_delay", 60);
 local max_hibernated_sessions = module:get_option_number("smacks_max_hibernated_sessions", 10);
 local max_old_sessions = module:get_option_number("smacks_max_old_sessions", 10);
 local core_process_stanza = prosody.core_process_stanza;
@@ -201,15 +200,8 @@ local function request_ack_if_needed(session, force, reason)
 end
 
 local function outgoing_stanza_filter(stanza, session)
-	-- XXX: Normally you wouldn't have to check the xmlns for a stanza as it's
-	-- supposed to be nil.
-	-- However, when using mod_smacks with mod_websocket, then mod_websocket's
-	-- stanzas/out filter can get called before this one and adds the xmlns.
-	local is_stanza = stanza.attr and
-		(not stanza.attr.xmlns or stanza.attr.xmlns == 'jabber:client')
-		and not stanza.name:find":";
-
-	if is_stanza and not stanza._cached then
+	local is_stanza = stanza.attr and not stanza.attr.xmlns and not stanza.name:find":";
+	if is_stanza and not stanza._cached then -- Stanza in default stream namespace
 		local queue = session.outgoing_stanza_queue;
 		local cached_stanza = st.clone(stanza);
 		cached_stanza._cached = true;
@@ -408,14 +400,12 @@ local function handle_unacked_stanzas(session)
 		session.outgoing_stanza_queue = {};
 		for i=1,#queue do
 			if not module:fire_event("delivery/failure", { session = session, stanza = queue[i] }) then
-				if queue[i].attr.type ~= "error" then
-					local reply = st.reply(queue[i]);
-					if reply.attr.to ~= session.full_jid then
-						reply.attr.type = "error";
-						reply:tag("error", error_attr)
-							:tag("recipient-unavailable", {xmlns = "urn:ietf:params:xml:ns:xmpp-stanzas"});
-						core_process_stanza(session, reply);
-					end
+				local reply = st.reply(queue[i]);
+				if reply.attr.to ~= session.full_jid then
+					reply.attr.type = "error";
+					reply:tag("error", error_attr)
+						:tag("recipient-unavailable", {xmlns = "urn:ietf:params:xml:ns:xmpp-stanzas"});
+					core_process_stanza(session, reply);
 				end
 			end
 		end
@@ -423,46 +413,37 @@ local function handle_unacked_stanzas(session)
 end
 
 -- don't send delivery errors for messages which will be delivered by mam later on
--- check if stanza was archived --> this will allow us to send back errors for stanzas not archived
--- because the user configured the server to do so ("no-archive"-setting for one special contact for example)
-local function get_stanza_id(stanza, by_jid)
-	for tag in stanza:childtags("stanza-id", "urn:xmpp:sid:0") do
-		if tag.attr.by == by_jid then
-			return tag.attr.id;
-		end
-	end
-	return nil;
-end
 module:hook("delivery/failure", function(event)
 	local session, stanza = event.session, event.stanza;
 	-- Only deal with authenticated (c2s) sessions
 	if session.username then
 		if stanza.name == "message" and stanza.attr.xmlns == nil and
 				( stanza.attr.type == "chat" or ( stanza.attr.type or "normal" ) == "normal" ) then
-			-- don't store messages in offline store if they are mam results
-			local mam_result = stanza:get_child("result", xmlns_mam2);
-			if mam_result ~= nil then
-				return true;		-- stanza already "handled", don't send an error and don't add it to offline storage
-			end
 			-- do nothing here for normal messages and don't send out "message delivery errors",
 			-- because messages are already in MAM at this point (no need to frighten users)
-			local stanza_id = get_stanza_id(stanza, jid.bare(session.full_jid));
-			if session.mam_requested and stanza_id ~= nil then
-				session.log("debug", "mod_smacks delivery/failure returning true for mam-handled stanza: mam-archive-id=%s", tostring(stanza_id));
+			if session.mam_requested and stanza._was_archived then
 				return true;		-- stanza handled, don't send an error
 			end
 			-- store message in offline store, if this client does not use mam *and* was the last client online
 			local sessions = prosody.hosts[module.host].sessions[session.username] and
 					prosody.hosts[module.host].sessions[session.username].sessions or nil;
 			if sessions and next(sessions) == session.resource and next(sessions, session.resource) == nil then
-				local ok = module:fire_event("message/offline/handle", { origin = session, stanza = stanza } );
-				session.log("debug", "mod_smacks delivery/failuere returning %s for offline-handled stanza", tostring(ok));
-				return ok;			-- if stanza was handled, don't send an error
+				module:fire_event("message/offline/handle", { origin = session, stanza = stanza } );
+				return true;		-- stanza handled, don't send an error
 			end
 		end
 	end
 end);
 
+-- mark stanzas as archived --> this will allow us to send back errors for stanzas not archived
+-- because the user configured the server to do so ("no-archive"-setting for one special contact for example)
+module:hook("archive-message-added", function(event)
+	local session, stanza, for_user, stanza_id  = event.origin, event.stanza, event.for_user, event.id;
+	if session then session.log("debug", "Marking stanza as archived, archive_id: %s, stanza: %s", tostring(stanza_id), tostring(stanza:top_tag())); end
+	if not session then module:log("debug", "Marking stanza as archived in unknown session, archive_id: %s, stanza: %s", tostring(stanza_id), tostring(stanza:top_tag())); end
+	stanza._was_archived = true;
+end);
+
 module:hook("pre-resource-unbind", function (event)
 	local session, err = event.session, event.error;
 	if session.smacks then

resources/prosody-plugins/mod_speakerstats_component.lua

@@ -93,7 +93,8 @@ end
 -- saves start time if it is new dominat speaker
 -- or calculates and accumulates time of speaking
 function SpeakerStats:setDominantSpeaker(isNowDominantSpeaker)
-    -- log("debug", "set isDominant %s for %s", tostring(isNowDominantSpeaker), self.nick);
+    log("debug",
+        "set isDominant %s for %s", tostring(isNowDominantSpeaker), self.nick);
 
     if not self:isDominantSpeaker() and isNowDominantSpeaker then
         self._dominantSpeakerStart = socket.gettime()*1000;