ref(Thumbnail): Create React component.

fix(jaas) fix double slash for branded invite urls

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

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

ConferenceEvents.js

@@ -2,10 +2,3 @@
  * 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,6 +18,10 @@ 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,8 +34,7 @@
             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
@@ -46,7 +45,9 @@
             </intent-filter>
         </service>
 
-        <service android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService" />
+        <service
+            android:name="org.jitsi.meet.sdk.JitsiMeetOngoingConferenceService"
+            android:foregroundServiceType="mediaProjection" />
     </application>
 
 </manifest>

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

@@ -43,6 +43,7 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
     private static final String TAG = NAME;
 
     private static boolean isSupported;
+    private boolean isDisabled;
 
     public PictureInPictureModule(ReactApplicationContext reactContext) {
         super(reactContext);
@@ -83,6 +84,10 @@ 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");
         }
@@ -126,6 +131,11 @@ class PictureInPictureModule extends ReactContextBaseJavaModule {
         }
     }
 
+    @ReactMethod
+    public void setPictureInPictureDisabled(Boolean disabled) {
+        this.isDisabled = disabled;
+    }
+
     public boolean isPictureInPictureSupported() {
         return isSupported;
     }

conference.js

@@ -24,7 +24,6 @@ import {
     reloadWithStoredParams
 } from './react/features/app/actions';
 import {
-    AVATAR_ID_COMMAND,
     AVATAR_URL_COMMAND,
     EMAIL_COMMAND,
     authStatusChanged,
@@ -42,8 +41,7 @@ import {
     lockStateChanged,
     onStartMutedPolicyChanged,
     p2pStatusChanged,
-    sendLocalParticipant,
-    setDesktopSharingEnabled
+    sendLocalParticipant
 } from './react/features/base/conference';
 import {
     checkAndNotifyForNewDevice,
@@ -66,6 +64,8 @@ import {
     JitsiTrackEvents
 } from './react/features/base/lib-jitsi-meet';
 import {
+    getStartWithAudioMuted,
+    getStartWithVideoMuted,
     isVideoMutedByUser,
     MEDIA_TYPE,
     setAudioAvailable,
@@ -97,7 +97,7 @@ import {
     destroyLocalTracks,
     getLocalJitsiAudioTrack,
     getLocalJitsiVideoTrack,
-    isLocalVideoTrackMuted,
+    isLocalCameraTrackMuted,
     isLocalTrackMuted,
     isUserInteractionRequiredForUnmute,
     replaceLocalTrack,
@@ -169,7 +169,6 @@ window.JitsiMeetScreenObtainer = {
  * Known custom conference commands.
  */
 const commands = {
-    AVATAR_ID: AVATAR_ID_COMMAND,
     AVATAR_URL: AVATAR_URL_COMMAND,
     CUSTOM_ROLE: 'custom-role',
     EMAIL: EMAIL_COMMAND,
@@ -441,17 +440,8 @@ 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,
+    isSharingScreen: false,
 
     /**
      * The local audio track (if any).
@@ -679,14 +669,6 @@ 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();
 
@@ -733,10 +715,10 @@ export default {
         const initialOptions = {
             startAudioOnly: config.startAudioOnly,
             startScreenSharing: config.startScreenSharing,
-            startWithAudioMuted: config.startWithAudioMuted
+            startWithAudioMuted: getStartWithAudioMuted(APP.store.getState())
                 || config.startSilent
                 || isUserInteractionRequiredForUnmute(APP.store.getState()),
-            startWithVideoMuted: config.startWithVideoMuted
+            startWithVideoMuted: getStartWithVideoMuted(APP.store.getState())
                 || isUserInteractionRequiredForUnmute(APP.store.getState())
         };
 
@@ -811,7 +793,7 @@ export default {
     isLocalVideoMuted() {
         // If the tracks are not ready, read from base/media state
         return this._localTracksInitialized
-            ? isLocalVideoTrackMuted(
+            ? isLocalCameraTrackMuted(
                 APP.store.getState()['features/base/tracks'])
             : isVideoMutedByUser(APP.store);
     },
@@ -1134,20 +1116,6 @@ 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>.
@@ -1546,9 +1514,8 @@ export default {
         if (this.videoSwitchInProgress) {
             return Promise.reject('Switch in progress.');
         }
-        if (!this.isDesktopSharingEnabled) {
-            return Promise.reject(
-                'Cannot toggle screen sharing: not supported.');
+        if (!JitsiMeetJS.isDesktopSharingEnabled()) {
+            return Promise.reject('Cannot toggle screen sharing: not supported.');
         }
 
         if (this.isAudioOnly()) {
@@ -2025,7 +1992,6 @@ export default {
                             formattedDisplayName
                                 || interfaceConfig.DEFAULT_REMOTE_DISPLAY_NAME)
                 });
-                APP.UI.changeDisplayName(id, formattedDisplayName);
             }
         );
         room.on(
@@ -2088,10 +2054,7 @@ 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) => {
@@ -2136,16 +2099,6 @@ export default {
                     }));
             });
 
-        room.addCommandListener(this.commands.defaults.AVATAR_ID,
-            (data, from) => {
-                APP.store.dispatch(
-                    participantUpdated({
-                        conference: room,
-                        id: from,
-                        avatarID: data.value
-                    }));
-            });
-
         APP.UI.addListener(UIEvents.NICKNAME_CHANGED,
             this.changeLocalDisplayName.bind(this));
 
@@ -2434,11 +2387,6 @@ export default {
         APP.keyboardshortcut.init();
 
         APP.store.dispatch(conferenceJoined(room));
-
-        const displayName
-            = APP.store.getState()['features/base/settings'].displayName;
-
-        APP.UI.changeDisplayName('localVideoContainer', displayName);
     },
 
     /**
@@ -2614,6 +2562,20 @@ 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,
@@ -2922,10 +2884,6 @@ export default {
         APP.store.dispatch(updateSettings({
             displayName: formattedNickname
         }));
-
-        if (room) {
-            APP.UI.changeDisplayName(id, formattedNickname);
-        }
     },
 
     /**
@@ -3035,7 +2993,7 @@ export default {
      * @param {boolean} muted - New muted status.
      */
     setVideoMuteStatus(muted) {
-        APP.UI.setVideoMuted(this.getMyUserId(), muted);
+        APP.UI.setVideoMuted(this.getMyUserId());
         APP.API.notifyVideoMutedStatusChanged(muted);
     },
 

css/_prejoin.scss

@@ -62,12 +62,15 @@
     &-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,6 +104,7 @@
         flex: 1;
         flex-direction: column;
         justify-content: flex-end;
+        padding-bottom: 24px;
         z-index: $toolbarZ + 2;
 
         .title {

debian/jitsi-meet-web.install

@@ -13,3 +13,5 @@ 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/

index.html

@@ -9,9 +9,13 @@
 
     <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
     <link rel="stylesheet" href="css/all.css">
-    <link rel="manifest" href="static/pwa/manifest.json">
+    <link rel="manifest" id="manifest-placeholder">
 
     <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;
@@ -20,7 +24,21 @@
             JitsiMeetJS.app.renderEntryPoint({
                 Component: JitsiMeetJS.app.entryPoints.APP
             })
-        })
+
+            const isElectron = navigator.userAgent.includes('Electron');
+            const shouldRegisterWorker = !isElectron && 'serviceWorker' in navigator;
+
+            if (shouldRegisterWorker) {
+                navigator.serviceWorker
+                    .register(window.location.origin + '/pwa-worker.js')
+                    .then(reg => {
+                        console.log('Service worker registered.', reg);
+                    })
+                    .catch(err => {
+                        console.log(err);
+                    });
+            }
+        });
     </script>
     <script>
         // IE11 and earlier can be identified via their user agent and be
@@ -161,7 +179,6 @@
     <script><!--#include virtual="/logging_config.js" --></script>
     <script src="libs/lib-jitsi-meet.min.js?v=139"></script>
     <script src="libs/app.bundle.min.js?v=139"></script>
-    <script src="static/pwa/registrator.js" async></script>
     <!--#include virtual="title.html" -->
     <!--#include virtual="plugin.head.html" -->
     <!--#include virtual="static/welcomePageAdditionalContent.html" -->

ios/Podfile.lock

@@ -293,8 +293,8 @@ PODS:
     - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webrtc (1.84.0):
-    - React
+  - react-native-webrtc (1.84.1):
+    - React-Core
   - 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: 9268ae9a2bc9730796b0968d012327e92c392adf
+  react-native-webrtc: edd689b0d5a462d7a6f6f52bca3f9414fc0ee11c
   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 ? Vôtre micro est coupé.",
+        "talkWhileMutedPopup": "Vous voulez parler ? Votre 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 jours, 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 jour, 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 (optionel)",
+        "enableDialogPasswordField": "Définir le mot de passe (optionnel)",
         "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,6 +512,12 @@
     "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.",

manifest.json

@@ -11,20 +11,20 @@
   "name": "Jitsi Meet",
   "icons": [
     {
-      "src": "icons/icon192.png",
+      "src": "static/pwa/icons/icon192.png",
       "type": "image/png",
       "sizes": "192x192"
     },
     {
-      "src": "icons/icon512.png",
+      "src": "static/pwa/icons/icon512.png",
       "type": "image/png",
       "sizes": "512x512"
     },
     {
-      "src": "icons/iconMask.png",
-      "sizes": "196x196",
+      "src": "static/pwa/icons/iconMask.png",
+      "sizes": "512x512",
       "type": "image/png",
-      "purpose": "any maskable"
+      "purpose": "maskable"
     }
   ],
   "start_url": "/",

modules/API/API.js

@@ -2,7 +2,6 @@
 
 import Logger from 'jitsi-meet-logger';
 
-import * as JitsiMeetConferenceEvents from '../../ConferenceEvents';
 import {
     createApiEvent,
     sendAnalytics
@@ -14,7 +13,7 @@ import {
     setSubject
 } from '../../react/features/base/conference';
 import { parseJWTFromURLParams } from '../../react/features/base/jwt';
-import { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
+import JitsiMeetJS, { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
 import { pinParticipant } from '../../react/features/base/participants';
 import {
     processExternalDeviceRequest
@@ -46,14 +45,6 @@ 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.
  *
@@ -223,7 +214,8 @@ function initCommands() {
         },
 
         /**
-         * Starts a file recording or streaming depending on the passed on params.
+         * Starts a file recording or streaming session depending on the passed on params.
+         * For RTMP streams, `rtmpStreamKey` must be passed on. `rtmpBroadcastID` is optional.
          * For youtube streams, `youtubeStreamKey` must be passed on. `youtubeBroadcastID` is optional.
          * For dropbox recording, recording `mode` should be `file` and a dropbox oauth2 token must be provided.
          * For file recording, recording `mode` should be `file` and optionally `shouldShare` could be passed on.
@@ -231,13 +223,23 @@ function initCommands() {
          *
          * @param { string } arg.mode - Recording mode, either `file` or `stream`.
          * @param { string } arg.dropboxToken - Dropbox oauth2 token.
+         * @param { string } arg.rtmpStreamKey - The RTMP stream key.
+         * @param { string } arg.rtmpBroadcastID - The RTMP braodcast ID.
          * @param { boolean } arg.shouldShare - Whether the recording should be shared with the participants or not.
          * Only applies to certain jitsi meet deploys.
          * @param { string } arg.youtubeStreamKey - The youtube stream key.
          * @param { string } arg.youtubeBroadcastID - The youtube broacast ID.
          * @returns {void}
          */
-        'start-recording': ({ mode, dropboxToken, shouldShare, youtubeStreamKey, youtubeBroadcastID }) => {
+        'start-recording': ({
+            mode,
+            dropboxToken,
+            shouldShare,
+            rtmpStreamKey,
+            rtmpBroadcastID,
+            youtubeStreamKey,
+            youtubeBroadcastID
+        }) => {
             const state = APP.store.getState();
             const conference = getCurrentConference(state);
 
@@ -253,8 +255,8 @@ function initCommands() {
                 return;
             }
 
-            if (mode === JitsiRecordingConstants.mode.STREAM && !youtubeStreamKey) {
-                logger.error('Failed starting recording: missing youtube stream key');
+            if (mode === JitsiRecordingConstants.mode.STREAM && !(youtubeStreamKey || rtmpStreamKey)) {
+                logger.error('Failed starting recording: missing youtube or RTMP stream key');
 
                 return;
             }
@@ -286,9 +288,9 @@ function initCommands() {
                 }
             } else if (mode === JitsiRecordingConstants.mode.STREAM) {
                 recordingConfig = {
-                    broadcastId: youtubeBroadcastID,
+                    broadcastId: youtubeBroadcastID || rtmpBroadcastID,
                     mode: JitsiRecordingConstants.mode.STREAM,
-                    streamId: youtubeStreamKey
+                    streamId: youtubeStreamKey || rtmpStreamKey
                 };
             } else {
                 logger.error('Invalid recording mode provided');
@@ -419,19 +421,6 @@ 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.
  *
@@ -459,12 +448,10 @@ function shouldBeEnabled() {
  * @returns {void}
  */
 function toggleScreenSharing(enable) {
-    if (APP.conference.isDesktopSharingEnabled) {
-
-        // eslint-disable-next-line no-empty-function
-        APP.conference.toggleScreenSharing(enable).catch(() => {});
-    } else {
-        initialScreenSharingState = !initialScreenSharingState;
+    if (JitsiMeetJS.isDesktopSharingEnabled()) {
+        APP.conference.toggleScreenSharing(enable).catch(() => {
+            logger.warn('Failed to toggle screen-sharing');
+        });
     }
 }
 
@@ -497,10 +484,6 @@ class API {
          */
         this._enabled = true;
 
-        APP.conference.addListener(
-            JitsiMeetConferenceEvents.DESKTOP_SHARING_ENABLED_CHANGED,
-            onDesktopSharingEnabledChanged);
-
         initCommands();
     }
 
@@ -1047,9 +1030,6 @@ class API {
     dispose() {
         if (this._enabled) {
             this._enabled = false;
-            APP.conference.removeListener(
-                JitsiMeetConferenceEvents.DESKTOP_SHARING_ENABLED_CHANGED,
-                onDesktopSharingEnabledChanged);
         }
     }
 }

modules/API/external/external_api.js

@@ -1047,6 +1047,39 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         return setVideoInputDevice(this._transport, label, deviceId);
     }
 
+    /**
+     * Starts a file recording or streaming session depending on the passed on params.
+     * For RTMP streams, `rtmpStreamKey` must be passed on. `rtmpBroadcastID` is optional.
+     * For youtube streams, `youtubeStreamKey` must be passed on. `youtubeBroadcastID` is optional.
+     * For dropbox recording, recording `mode` should be `file` and a dropbox oauth2 token must be provided.
+     * For file recording, recording `mode` should be `file` and optionally `shouldShare` could be passed on.
+     * No other params should be passed.
+     *
+     * @param {Object} options - An object with config options to pass along.
+     * @param { string } options.mode - Recording mode, either `file` or `stream`.
+     * @param { string } options.dropboxToken - Dropbox oauth2 token.
+     * @param { boolean } options.shouldShare - Whether the recording should be shared with the participants or not.
+     * Only applies to certain jitsi meet deploys.
+     * @param { string } options.rtmpStreamKey - The RTMP stream key.
+     * @param { string } options.rtmpBroadcastID - The RTMP broacast ID.
+     * @param { string } options.youtubeStreamKey - The youtube stream key.
+     * @param { string } options.youtubeBroadcastID - The youtube broacast ID.
+     * @returns {void}
+     */
+    startRecording(options) {
+        this.executeCommand('startRecording', options);
+    }
+
+    /**
+     * Stops a recording or streaming session that is in progress.
+     *
+     * @param {string} mode - `file` or `stream`.
+     * @returns {void}
+     */
+    stopRecording(mode) {
+        this.executeCommand('startRecording', mode);
+    }
+
     /**
      * Returns the configuration for electron for the windows that are open
      * from Jitsi Meet.

modules/UI/UI.js

@@ -7,7 +7,6 @@ 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';
@@ -99,29 +98,11 @@ 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);
-    }
 };
 
 /**
@@ -247,19 +228,12 @@ 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);
-    }
 };
 
 /**
@@ -356,8 +330,8 @@ UI.askForNickname = function() {
 /**
  * Sets muted audio state for participant
  */
-UI.setAudioMuted = function(id, muted) {
-    VideoLayout.onAudioMute(id, muted);
+UI.setAudioMuted = function(id) {
+    // FIXME: Maybe this can be removed!
     if (APP.conference.isLocalId(id)) {
         APP.conference.updateAudioIconEnabled();
     }
@@ -366,8 +340,8 @@ UI.setAudioMuted = function(id, muted) {
 /**
  * Sets muted video state for participant
  */
-UI.setVideoMuted = function(id, muted) {
-    VideoLayout.onVideoMute(id, muted);
+UI.setVideoMuted = function(id) {
+    VideoLayout.onVideoMute(id);
     if (APP.conference.isLocalId(id)) {
         APP.conference.updateVideoIconEnabled();
     }
@@ -494,14 +468,6 @@ 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,10 +1,15 @@
-/* global $ */
+/* global $, 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 Thumbnail from '../../../react/features/filmstrip/components/web/Thumbnail';
 import SmallVideo from '../videolayout/SmallVideo';
-
-const logger = Logger.getLogger(__filename);
+/* eslint-enable no-unused-vars */
 
 /**
  *
@@ -24,18 +29,12 @@ 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
@@ -46,18 +45,6 @@ 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
@@ -69,21 +56,14 @@ export default class SharedVideoThumb extends SmallVideo {
     }
 
     /**
-     * Triggers re-rendering of the display name using current instance state.
-     *
-     * @returns {void}
+     * Renders the thumbnail.
      */
-    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
-        });
+    renderThumbnail(isHovered = false) {
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <I18nextProvider i18n = { i18next }>
+                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
+                </I18nextProvider>
+            </Provider>, this.container);
     }
 }

modules/UI/videolayout/Filmstrip.js

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

modules/UI/videolayout/LargeVideoManager.js

@@ -12,6 +12,7 @@ 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
@@ -224,9 +225,8 @@ export default class LargeVideoManager {
             const wasUsersImageCached
                 = !isUserSwitch && container.wasVideoRendered;
             const isVideoMuted = !stream || stream.isMuted();
-
-            const connectionStatus
-                = APP.conference.getParticipantConnectionStatus(id);
+            const participant = getParticipantById(APP.store.getState(), id);
+            const connectionStatus = participant?.connectionStatus;
             const isVideoRenderable
                 = !isVideoMuted
                     && (APP.conference.isLocalId(id)
@@ -356,17 +356,12 @@ export default class LargeVideoManager {
         let widthToUse = this.preferredWidth || window.innerWidth;
         const { isOpen } = APP.store.getState()['features/chat'];
 
-        /**
-         * If chat state is open, we re-compute the container width by subtracting the default width of
-         * the chat. We re-compute the width again after the chat window is closed. This is needed when
-         * custom styling is configured on the large video container through the iFrame API.
-         */
-        if (isOpen && !this.resizedForChat) {
+        if (isOpen) {
+            /**
+             * If chat state is open, we re-compute the container width
+             * by subtracting the default width of the chat.
+             */
             widthToUse -= CHAT_SIZE;
-            this.resizedForChat = true;
-        } else if (this.resizedForChat) {
-            this.resizedForChat = false;
-            widthToUse += CHAT_SIZE;
         }
 
         this.width = widthToUse;
@@ -484,8 +479,8 @@ export default class LargeVideoManager {
      */
     showRemoteConnectionMessage(show) {
         if (typeof show !== 'boolean') {
-            const connStatus
-                = APP.conference.getParticipantConnectionStatus(this.id);
+            const participant = getParticipantById(APP.store.getState(), this.id);
+            const connStatus = participant?.connectionStatus;
 
             // eslint-disable-next-line no-param-reassign
             show = !APP.conference.isLocalId(this.id)

modules/UI/videolayout/LocalVideo.js

@@ -1,23 +1,23 @@
-/* global $, config, interfaceConfig, APP */
+/* global $, config, 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,6 +37,7 @@ export default class LocalVideo extends SmallVideo {
         this.isLocal = true;
         this._setThumbnailSize();
         this.updateDOMLocation();
+        this.renderThumbnail();
 
         this.localVideoId = null;
         this.bindHoverHandler();
@@ -44,7 +45,6 @@ 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,17 +53,6 @@ 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;
     }
 
@@ -76,38 +65,19 @@ 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;
     }
 
     /**
-     * Triggers re-rendering of the display name using current instance state.
-     *
-     * @returns {void}
+     * Renders the thumbnail.
      */
-    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
-        });
+    renderThumbnail(isHovered = false) {
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <I18nextProvider i18n = { i18next }>
+                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
+                </I18nextProvider>
+            </Provider>, this.container);
     }
 
     /**
@@ -117,7 +87,6 @@ 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';
@@ -127,17 +96,6 @@ 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);
         };
@@ -253,35 +211,5 @@ 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,10 +12,14 @@ 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,
@@ -39,16 +43,6 @@ 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
@@ -79,14 +73,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;
-        this.popupMenuIsHovered = false;
         this._isRemoteControlSessionActive = false;
 
         /**
@@ -98,17 +88,6 @@ 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.
@@ -126,26 +105,24 @@ export default class RemoteVideo extends SmallVideo {
     addRemoteVideoContainer() {
         this.container = createContainer(this.videoSpanId);
         this.$container = $(this.container);
-        this.initializeAvatar();
+        this.renderThumbnail();
         this._setThumbnailSize();
         this.initBrowserSpecificProperties();
         this.updateRemoteVideoMenu();
-        this.updateStatusBar();
-        this.addAudioLevelIndicator();
-        this.addPresenceLabel();
 
         return this.container;
     }
 
     /**
-     * Checks whether current video is considered hovered. Currently it is hovered
-     * if the mouse is over the video, or if the connection indicator or the popup
-     * menu is shown(hovered).
-     * @private
-     * NOTE: extends SmallVideo's method
+     * Renders the thumbnail.
      */
-    _isHovered() {
-        return super._isHovered() || this.popupMenuIsHovered;
+    renderThumbnail(isHovered = false) {
+        ReactDOM.render(
+            <Provider store = { APP.store }>
+                <I18nextProvider i18n = { i18next }>
+                    <Thumbnail participantID = { this.id } isHovered = { isHovered } />
+                </I18nextProvider>
+            </Provider>, this.container);
     }
 
     /**
@@ -207,7 +184,6 @@ export default class RemoteVideo extends SmallVideo {
                     <AtlasKitThemeProvider mode = 'dark'>
                         <RemoteVideoMenuTriggerButton
                             initialVolumeValue = { initialVolumeValue }
-                            isAudioMuted = { this.isAudioMuted }
                             menuPosition = { remoteMenuPosition }
                             onMenuDisplay
                                 = {this._onRemoteVideoMenuDisplay.bind(this)}
@@ -311,43 +287,11 @@ export default class RemoteVideo extends SmallVideo {
 
     /**
      * Updates the remote video menu.
-     *
-     * @param isMuted the new muted state to update to
      */
-    updateRemoteVideoMenu(isMuted) {
-        if (typeof isMuted !== 'undefined') {
-            this.isAudioMuted = isMuted;
-        }
+    updateRemoteVideoMenu() {
         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.
@@ -378,17 +322,6 @@ 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
@@ -400,12 +333,13 @@ export default class RemoteVideo extends SmallVideo {
      * @override
      */
     isVideoPlayable() {
-        const connectionState = APP.conference.getParticipantConnectionStatus(this.id);
+        const participant = getParticipantById(APP.store.getState(), this.id);
+        const { connectionStatus, mutedWhileDisconnected } = participant || {};
 
         return super.isVideoPlayable()
             && this._canPlayEventReceived
-            && (connectionState === JitsiParticipantConnectionStatus.ACTIVE
-                || (connectionState === JitsiParticipantConnectionStatus.INTERRUPTED && !this.mutedWhileDisconnected));
+            && (connectionStatus === JitsiParticipantConnectionStatus.ACTIVE
+                || (connectionStatus === JitsiParticipantConnectionStatus.INTERRUPTED && !mutedWhileDisconnected));
     }
 
     /**
@@ -413,34 +347,16 @@ 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() {
-        super.remove();
-        this.removePresenceLabel();
         this.removeRemoteVideoMenu();
+        ReactDOM.unmountComponentAtNode(this.container);
+        super.remove();
     }
 
     /**
@@ -513,24 +429,6 @@ 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>.
@@ -545,39 +443,4 @@ 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,11 +11,19 @@ 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 {
@@ -81,60 +89,13 @@ 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 ConnectionIndicator's popover is hovered. Modifies
-         * how the video overlays display based on hover state.
-         *
-         * @private
-         * @type {boolean}
-         */
-        this._popoverIsHovered = false;
-
-        /**
-         * 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._onPopoverHover = this._onPopoverHover.bind(this);
         this.updateView = this.updateView.bind(this);
 
         this._onContainerClick = this._onContainerClick.bind(this);
@@ -194,156 +155,22 @@ 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();
             }
         );
     }
 
     /**
-     * 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
+     * Renders the thumbnail.
      */
-    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');
+    renderThumbnail() {
+        // Should be implemented by in subclasses.
     }
 
     /**
@@ -360,62 +187,6 @@ 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.
@@ -459,7 +230,18 @@ export default class SmallVideo {
      * or <tt>false</tt> otherwise.
      */
     isVideoPlayable() {
-        return this.videoStream && !this.isVideoMuted && !APP.conference.isAudioOnly();
+        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();
     }
 
     /**
@@ -489,19 +271,32 @@ 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(APP.store.getState()),
+            tileViewActive: shouldDisplayTileView(state),
             isVideoPlayable: this.isVideoPlayable(),
             hasVideo: Boolean(this.selectVideoElement().length),
-            connectionStatus: APP.conference.getParticipantConnectionStatus(this.id),
-            mutedWhileDisconnected: this.mutedWhileDisconnected,
+            connectionStatus,
+            mutedWhileDisconnected,
             canPlayEventReceived: this._canPlayEventReceived,
             videoStream: Boolean(this.videoStream),
-            isVideoMuted: this.isVideoMuted,
-            isScreenSharing: this.isScreenSharing,
+            isScreenSharing,
             videoStreamMuted: this.videoStream ? this.videoStream.isMuted() : 'no stream'
         };
     }
@@ -513,7 +308,7 @@ export default class SmallVideo {
      * @private
      */
     _isHovered() {
-        return this.videoIsHovered || this._popoverIsHovered;
+        return this.videoIsHovered;
     }
 
     /**
@@ -560,43 +355,6 @@ 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.
@@ -613,30 +371,8 @@ export default class SmallVideo {
 
             return;
         }
-        if (this._showDominantSpeaker === show) {
-            return;
-        }
 
-        this._showDominantSpeaker = show;
-        this.$container.toggleClass('active-speaker', this._showDominantSpeaker);
-        this.updateIndicators();
-        this.updateView();
-    }
-
-    /**
-     * Shows or hides the raised hand indicator.
-     * @param show whether to show or hide.
-     */
-    showRaisedHandIndicator(show) {
-        if (!this.container) {
-            logger.warn(`Unable to raised hand indication - ${
-                this.videoSpanId} does not exist`);
-
-            return;
-        }
-
-        this._showRaisedHand = show;
-        this.updateIndicators();
+        this.$container.toggleClass('active-speaker', show);
     }
 
     /**
@@ -667,19 +403,7 @@ export default class SmallVideo {
      */
     remove() {
         logger.log('Remove thumbnail', this.id);
-        this.removeAudioLevelIndicator();
-
-        const toolbarContainer
-            = this.container.querySelector('.videocontainer__toolbar');
-
-        if (toolbarContainer) {
-            ReactDOM.unmountComponentAtNode(toolbarContainer);
-        }
-
-        this.removeConnectionIndicator();
-        this.removeDisplayName();
-        this.removeAvatar();
-        this._unmountIndicators();
+        this._unmountThumbnail();
 
         // Remove whole container
         if (this.container.parentNode) {
@@ -694,77 +418,9 @@ 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.
@@ -822,31 +478,10 @@ export default class SmallVideo {
     }
 
     /**
-     * Removes the React element responsible for showing connection status, dominant
-     * speaker, and raised hand icons.
-     *
-     * @private
-     * @returns {void}
+     * Unmounts the thumbnail.
      */
-    _unmountIndicators() {
-        const indicatorToolbar = this.container.querySelector('.videocontainer__toptoolbar');
-
-        if (indicatorToolbar) {
-            ReactDOM.unmountComponentAtNode(indicatorToolbar);
-        }
-    }
-
-    /**
-     * Updates the current state of the connection indicator popover being hovered.
-     * If hovered, display the small video as if it is hovered.
-     *
-     * @param {boolean} popoverIsHovered - Whether or not the mouse cursor is
-     * currently over the connection indicator popover.
-     * @returns {void}
-     */
-    _onPopoverHover(popoverIsHovered) {
-        this._popoverIsHovered = popoverIsHovered;
-        this.updateView();
+    _unmountThumbnail() {
+        ReactDOM.unmountComponentAtNode(this.container);
     }
 
     /**
@@ -860,10 +495,6 @@ 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: {
@@ -873,7 +504,6 @@ export default class SmallVideo {
 
             if (typeof size !== 'undefined') {
                 const { height, width } = size;
-                const avatarSize = height / 2;
 
                 this.$container.css({
                     height: `${height}px`,
@@ -881,10 +511,6 @@ export default class SmallVideo {
                     'min-width': `${width}px`,
                     width: `${width}px`
                 });
-                this.$avatar().css({
-                    height: `${avatarSize}px`,
-                    width: `${avatarSize}px`
-                });
             }
             break;
         }
@@ -894,7 +520,6 @@ export default class SmallVideo {
 
             if (typeof thumbnailSize !== 'undefined') {
                 const { height, width } = thumbnailSize;
-                const avatarSize = height / 2;
 
                 this.$container.css({
                     height: `${height}px`,
@@ -902,10 +527,6 @@ 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,12 +116,6 @@ 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);
         }
@@ -137,19 +131,6 @@ 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
@@ -173,11 +154,9 @@ const VideoLayout = {
         remoteVideo.addRemoteStreamElement(stream);
 
         // Make sure track's muted state is reflected
-        if (stream.getType() === 'audio') {
-            this.onAudioMute(id, stream.isMuted());
-        } else {
-            this.onVideoMute(id, stream.isMuted());
-            remoteVideo.setScreenSharing(stream.videoType === 'desktop');
+        if (stream.getType() !== 'audio') {
+            this.onVideoMute(id);
+            remoteVideo.updateView();
         }
     },
 
@@ -189,7 +168,7 @@ const VideoLayout = {
 
         if (remoteVideo) {
             remoteVideo.removeRemoteStreamElement(stream);
-            remoteVideo.setScreenSharing(false);
+            remoteVideo.updateView();
         }
 
         this.updateMutedForNoTracks(id, stream.getType());
@@ -210,7 +189,7 @@ const VideoLayout = {
             if (mediaType === 'audio') {
                 APP.UI.setAudioMuted(participantId, true);
             } else if (mediaType === 'video') {
-                APP.UI.setVideoMuted(participantId, true);
+                APP.UI.setVideoMuted(participantId);
             } else {
                 logger.error(`Unsupported media type: ${mediaType}`);
             }
@@ -329,35 +308,17 @@ 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, value) {
+    onVideoMute(id) {
         if (APP.conference.isLocalId(id)) {
-            localVideoThumbnail && localVideoThumbnail.setVideoMutedView(value);
+            localVideoThumbnail && localVideoThumbnail.updateView();
         } else {
             const remoteVideo = remoteVideos[id];
 
             if (remoteVideo) {
-                remoteVideo.setVideoMutedView(value);
+                remoteVideo.updateView();
             }
         }
 
@@ -365,22 +326,6 @@ 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.
      *
@@ -411,12 +356,6 @@ 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();
         }
     },
@@ -453,20 +392,6 @@ 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) {
@@ -494,7 +419,7 @@ const VideoLayout = {
         }
 
         logger.info('Peer video type changed: ', id, newVideoType);
-        remoteVideo.setScreenSharing(newVideoType === 'desktop');
+        remoteVideo.updateView();
     },
 
     /**
@@ -517,15 +442,6 @@ 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,6 +3,7 @@
 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
@@ -68,9 +69,7 @@ class RemoteControl extends EventEmitter {
      * @returns {void}
      */
     init() {
-        if (config.disableRemoteControl
-                || this._initialized
-                || !APP.conference.isDesktopSharingEnabled) {
+        if (config.disableRemoteControl || this._initialized || !JitsiMeetJS.isDesktopSharingEnabled()) {
             return;
         }
         logger.log('Initializing remote control.');

package-lock.json

@@ -4922,9 +4922,9 @@
       "dev": true
     },
     "amplitude-js": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-7.1.1.tgz",
-      "integrity": "sha512-grEQf0p4V/q4aIcGYdGEJ6EquBXu91R/RorsYTQvh9O6sxjpwHf5vSDICQJq7twEElBrSHoSF77GUvC9ZTBj4A==",
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/amplitude-js/-/amplitude-js-7.3.1.tgz",
+      "integrity": "sha512-dsJU9MdtDDAOtKnbHrJuVBgsL5UGxD1P2B7doGdAQ1hxxT/5mFrmJTFzi1tKe+2ir3QtcRa9B0qvH8TMsGw22A==",
       "requires": {
         "@amplitude/ua-parser-js": "0.7.24",
         "blueimp-md5": "^2.10.0",
@@ -6405,8 +6405,7 @@
     "chownr": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
-      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
-      "dev": true
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg=="
     },
     "chrome-trace-event": {
       "version": "1.0.2",
@@ -8855,6 +8854,15 @@
         "universalify": "^0.1.0"
       }
     },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "optional": true,
+      "requires": {
+        "minipass": "^2.6.0"
+      }
+    },
     "fs-write-stream-atomic": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/fs-write-stream-atomic/-/fs-write-stream-atomic-1.0.10.tgz",
@@ -8926,12 +8934,6 @@
             "concat-map": "0.0.1"
           }
         },
-        "chownr": {
-          "version": "1.1.1",
-          "resolved": false,
-          "integrity": "sha512-j38EvO5+LHX84jlo6h4UzmOwi0UgW61WRyPtJz4qaadK5eY3BTS5TY/S1Stc3Uk2lIM6TPevAlULiEJwie860g==",
-          "optional": true
-        },
         "code-point-at": {
           "version": "1.1.0",
           "resolved": false,
@@ -8983,15 +8985,6 @@
           "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
           "optional": true
         },
-        "fs-minipass": {
-          "version": "1.2.5",
-          "resolved": false,
-          "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
         "fs.realpath": {
           "version": "1.0.0",
           "resolved": false,
@@ -9098,38 +9091,13 @@
             "brace-expansion": "^1.1.7"
           }
         },
-        "minimist": {
-          "version": "0.0.8",
-          "resolved": false,
-          "integrity": "sha1-hX/Kv8M5fSYluCKCYuhqp6ARsF0=",
-          "optional": true
-        },
-        "minipass": {
-          "version": "2.3.5",
-          "resolved": false,
-          "integrity": "sha512-Gi1W4k059gyRbyVUZQ4mEqLm0YIUiGYfvxhF6SIlk3ui1WVxMTGfGdQ2SInh3PDrRTVvPKgULkpJtT4RH10+VA==",
-          "optional": true,
-          "requires": {
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.0"
-          }
-        },
-        "minizlib": {
-          "version": "1.2.1",
-          "resolved": false,
-          "integrity": "sha512-7+4oTUOWKg7AuL3vloEWekXY2/D20cevzsrNT2kGWm+39J9hGTCBv8VI5Pm5lXZ/o3/mdR4f8rflAPhnQb8mPA==",
-          "optional": true,
-          "requires": {
-            "minipass": "^2.2.1"
-          }
-        },
         "mkdirp": {
-          "version": "0.5.1",
-          "resolved": false,
-          "integrity": "sha1-MAV0OOrGz3+MR2fzhkjWaX11yQM=",
+          "version": "0.5.5",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+          "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
           "optional": true,
           "requires": {
-            "minimist": "0.0.8"
+            "minimist": "^1.2.5"
           }
         },
         "ms": {
@@ -9273,9 +9241,9 @@
           },
           "dependencies": {
             "minimist": {
-              "version": "1.2.0",
-              "resolved": false,
-              "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
+              "version": "1.2.5",
+              "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+              "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
               "optional": true
             }
           }
@@ -9375,21 +9343,6 @@
           "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
           "optional": true
         },
-        "tar": {
-          "version": "4.4.8",
-          "resolved": false,
-          "integrity": "sha512-LzHF64s5chPQQS0IYBn9IN5h3i98c12bo4NCO7e0sGM2llXQ3p2FGC5sdENN4cTW48O915Sh+x+EXx7XW96xYQ==",
-          "optional": true,
-          "requires": {
-            "chownr": "^1.1.1",
-            "fs-minipass": "^1.2.5",
-            "minipass": "^2.3.4",
-            "minizlib": "^1.1.1",
-            "mkdirp": "^0.5.0",
-            "safe-buffer": "^5.1.2",
-            "yallist": "^3.0.2"
-          }
-        },
         "util-deprecate": {
           "version": "1.0.2",
           "resolved": false,
@@ -9410,12 +9363,6 @@
           "resolved": false,
           "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
           "optional": true
-        },
-        "yallist": {
-          "version": "3.0.3",
-          "resolved": false,
-          "integrity": "sha512-S+Zk8DEWE6oKpV+vI3qWkaK+jSbIK86pCwe2IF/xwIpQ8jEuxpw9NyaGjmp9+BoJv5FV2piqCDcoCtStppiq2A==",
-          "optional": true
         }
       }
     },
@@ -10824,8 +10771,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#4980889b24716c383311aadd760d958f6ff58277",
-      "from": "github:jitsi/lib-jitsi-meet#4980889b24716c383311aadd760d958f6ff58277",
+      "version": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
+      "from": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
       "requires": {
         "@jitsi/js-utils": "1.0.2",
         "@jitsi/sdp-interop": "1.0.3",
@@ -11932,6 +11879,39 @@
       "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
       "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw=="
     },
+    "minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "optional": true
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "optional": true
+        }
+      }
+    },
+    "minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "optional": true,
+      "requires": {
+        "minipass": "^2.9.0"
+      }
+    },
     "mississippi": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/mississippi/-/mississippi-3.0.0.tgz",
@@ -12145,9 +12125,9 @@
       }
     },
     "node-forge": {
-      "version": "0.9.0",
-      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
-      "integrity": "sha512-7ASaDa3pD+lJ3WvXFsxekJQelBKRpne+GOVbLbtHYdd7pFspyeuJHnWfLplGf3SwKGbfs/aYl5V/JCIaHVUKKQ==",
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.10.0.tgz",
+      "integrity": "sha512-PPmu8eEeG9saEUvI97fm4OYxXVB6bFvyNTyiUOBichBpFG8A1Ljw3bY62+5oOjDEMHRnd0Y7HQ+x7uzxOzC6JA==",
       "dev": true
     },
     "node-int64": {
@@ -14285,9 +14265,9 @@
       "integrity": "sha512-iqdJ1KpZbR4XGahgVmaeibB7kDhyMT7wrylINgJaYBY38IAiI0LF32VX1umO4pko6n21YF5I/kSeNQ+OXGqqow=="
     },
     "react-native-webrtc": {
-      "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==",
+      "version": "1.84.1",
+      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-1.84.1.tgz",
+      "integrity": "sha512-ewZBgKE+YhLaivo9Wh6aiaEp8ZRvFMqblrkDl1nptQiNNH6CungoAzSOxGDnHWAxepRfiUrW5qnADrsYKmaNeQ==",
       "requires": {
         "base64-js": "^1.1.2",
         "event-target-shim": "^1.0.5",
@@ -15033,12 +15013,12 @@
       "dev": true
     },
     "selfsigned": {
-      "version": "1.10.7",
-      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.7.tgz",
-      "integrity": "sha512-8M3wBCzeWIJnQfl43IKwOmC4H/RAp50S8DF60znzjW5GVqTcSe2vWclt7hmYVPkKPlHWOu5EaWOMZ2Y6W8ZXTA==",
+      "version": "1.10.8",
+      "resolved": "https://registry.npmjs.org/selfsigned/-/selfsigned-1.10.8.tgz",
+      "integrity": "sha512-2P4PtieJeEwVgTU9QEcwIRDQ/mXJLX8/+I3ur+Pg16nS8oNbrGxEso9NyYWy8NAmXiNl4dlAp5MwoNeCWzON4w==",
       "dev": true,
       "requires": {
-        "node-forge": "0.9.0"
+        "node-forge": "^0.10.0"
       }
     },
     "semver": {
@@ -16357,6 +16337,35 @@
       "integrity": "sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==",
       "dev": true
     },
+    "tar": {
+      "version": "4.4.13",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.13.tgz",
+      "integrity": "sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==",
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.1",
+        "fs-minipass": "^1.2.5",
+        "minipass": "^2.8.6",
+        "minizlib": "^1.2.1",
+        "mkdirp": "^0.5.0",
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.3"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "optional": true
+        },
+        "yallist": {
+          "version": "3.1.1",
+          "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+          "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+          "optional": true
+        }
+      }
+    },
     "temp": {
       "version": "0.8.3",
       "resolved": "https://registry.npmjs.org/temp/-/temp-0.8.3.tgz",

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.1.1",
+    "amplitude-js": "7.3.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#4980889b24716c383311aadd760d958f6ff58277",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#6bb0b86c0a7dd22bb5798236d9b80ca578b28d21",
     "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.0",
+    "react-native-webrtc": "1.84.1",
     "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.git#566a16885897704d6e6d67a1d5ac5d39781db2af",
+    "rnnoise-wasm": "github:jitsi/rnnoise-wasm#566a16885897704d6e6d67a1d5ac5d39781db2af",
     "rtcstats": "github:jitsi/rtcstats#v6.2.0",
     "stackblur-canvas": "2.3.0",
     "styled-components": "3.4.9",

react/features/analytics/AnalyticsEvents.js

@@ -772,6 +772,22 @@ 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, isLocalVideoTrackMuted, isLocalTrackMuted } from '../base/tracks';
+import { createDesiredLocalTracks, isLocalCameraTrackMuted, 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 = isLocalVideoTrackMuted(tracks);
+    const isVideoMuted = isLocalCameraTrackMuted(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,18 +140,6 @@ 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,7 +43,6 @@ import {
     LOCK_STATE_CHANGED,
     P2P_STATUS_CHANGED,
     SEND_TONES,
-    SET_DESKTOP_SHARING_ENABLED,
     SET_FOLLOW_ME,
     SET_PASSWORD,
     SET_PASSWORD_FAILED,
@@ -52,7 +51,6 @@ import {
     SET_START_MUTED_POLICY
 } from './actionTypes';
 import {
-    AVATAR_ID_COMMAND,
     AVATAR_URL_COMMAND,
     EMAIL_COMMAND,
     JITSI_CONFERENCE_URL_KEY
@@ -198,13 +196,6 @@ function _addConferenceListeners(conference, dispatch) {
             botType
         })));
 
-    conference.addCommandListener(
-        AVATAR_ID_COMMAND,
-        (data, id) => dispatch(participantUpdated({
-            conference,
-            id,
-            avatarID: data.value
-        })));
     conference.addCommandListener(
         AVATAR_URL_COMMAND,
         (data, id) => dispatch(participantUpdated({
@@ -581,22 +572,6 @@ 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/constants.js

@@ -1,10 +1,3 @@
-/**
- * The command type for updating a participant's avatar ID.
- *
- * @type {string}
- */
-export const AVATAR_ID_COMMAND = 'avatar-id';
-
 /**
  * The command type for updating a participant's avatar URL.
  *

react/features/base/conference/functions.js

@@ -14,7 +14,6 @@ import { toState } from '../redux';
 import { safeDecodeURIComponent } from '../util';
 
 import {
-    AVATAR_ID_COMMAND,
     AVATAR_URL_COMMAND,
     EMAIL_COMMAND,
     JITSI_CONFERENCE_URL_KEY
@@ -74,6 +73,7 @@ export function commonUserJoinedHandling(
     } else {
         dispatch(participantJoined({
             botType: user.getBotType(),
+            connectionStatus: user.getConnectionStatus(),
             conference,
             id,
             name: displayName,
@@ -316,16 +316,12 @@ export function sendLocalParticipant(
             setDisplayName: Function,
             setLocalParticipantProperty: Function }) {
     const {
-        avatarID,
         avatarURL,
         email,
         features,
         name
     } = getLocalParticipant(stateful);
 
-    avatarID && conference.sendCommand(AVATAR_ID_COMMAND, {
-        value: avatarID
-    });
     avatarURL && conference.sendCommand(AVATAR_URL_COMMAND, {
         value: avatarURL
     });

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

@@ -128,9 +128,6 @@ 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

@@ -0,0 +1,74 @@
+// @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

@@ -0,0 +1,23 @@
+// @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,7 +16,6 @@ import {
     CONFERENCE_WILL_LEAVE,
     LOCK_STATE_CHANGED,
     P2P_STATUS_CHANGED,
-    SET_DESKTOP_SHARING_ENABLED,
     SET_FOLLOW_ME,
     SET_PASSWORD,
     SET_PENDING_SUBJECT_CHANGE,
@@ -76,9 +75,6 @@ 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);
 
@@ -343,21 +339,6 @@ 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,7 +91,6 @@ 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;
+            = state['features/base/config'].brandingRoomAlias || urlWithoutParams.pathname.replace('/', '');
 
         return `${inviteDomain}/${meetingId}`;
     }

react/features/base/jwt/functions.js

@@ -1,5 +1,7 @@
 /* @flow */
 
+import jwtDecode from 'jwt-decode';
+
 import { parseURLParams } from '../util';
 
 /**
@@ -14,3 +16,15 @@ 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

@@ -4,7 +4,6 @@ import { SET_FILMSTRIP_ENABLED } from '../../filmstrip/actionTypes';
 import { SELECT_LARGE_VIDEO_PARTICIPANT } from '../../large-video/actionTypes';
 import { APP_STATE_CHANGED } from '../../mobile/background/actionTypes';
 import { SCREEN_SHARE_PARTICIPANTS_UPDATED, SET_TILE_VIEW } from '../../video-layout/actionTypes';
-import { shouldDisplayTileView } from '../../video-layout/functions';
 import { SET_AUDIO_ONLY } from '../audio-only/actionTypes';
 import { CONFERENCE_JOINED } from '../conference/actionTypes';
 import {
@@ -17,6 +16,7 @@ import {
     getParticipantCount
 } from '../participants/functions';
 import { MiddlewareRegistry } from '../redux';
+import { isLocalVideoTrackDesktop } from '../tracks/functions';
 
 import { limitLastN } from './functions';
 import logger from './logger';
@@ -79,14 +79,16 @@ function _updateLastN({ getState }) {
     }
 
     if (typeof appState !== 'undefined' && appState !== 'active') {
-        lastN = 0;
+        lastN = isLocalVideoTrackDesktop(state) ? 1 : 0;
     } else if (audioOnly) {
-        const { screenShares } = state['features/video-layout'];
-        const tileViewEnabled = shouldDisplayTileView(state);
+        const { screenShares, tileViewEnabled } = state['features/video-layout'];
         const largeVideoParticipantId = state['features/large-video'].participantId;
         const largeVideoParticipant
             = largeVideoParticipantId ? getParticipantById(state, largeVideoParticipantId) : undefined;
 
+        // Use tileViewEnabled state from redux here instead of determining if client should be in tile
+        // view since we make an exception only for screenshare when in audio-only mode. If the user unpins
+        // the screenshare, lastN will be set to 0 here. It will be set to 1 if screenshare has been auto pinned.
         if (!tileViewEnabled && largeVideoParticipant && !largeVideoParticipant.local) {
             lastN = (screenShares || []).includes(largeVideoParticipantId) ? 1 : 0;
         } else {

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

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

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

@@ -99,6 +99,13 @@ 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();
+        }
     }
 
     /**
@@ -142,6 +149,8 @@ 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,9 +1,30 @@
 /* @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.
  *
@@ -47,6 +68,26 @@ 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 { setTrackMuted, TRACK_ADDED } from '../tracks';
+import { isLocalVideoTrackDesktop, setTrackMuted, TRACK_ADDED } from '../tracks';
 
 import { setAudioMuted, setCameraFacingMode, setVideoMuted } from './actions';
 import {
@@ -21,6 +21,7 @@ import {
     MEDIA_TYPE,
     VIDEO_MUTISM_AUTHORITY
 } from './constants';
+import { getStartWithAudioMuted, getStartWithVideoMuted } from './functions';
 import logger from './logger';
 import {
     _AUDIO_INITIAL_MEDIA_STATE,
@@ -72,13 +73,15 @@ MiddlewareRegistry.register(store => next => action => {
  * @private
  * @returns {Object} The value returned by {@code next(action)}.
  */
-function _appStateChanged({ dispatch }, next, action) {
-    const { appState } = action;
-    const mute = appState !== 'active'; // Note that 'background' and 'inactive' are treated equal.
+function _appStateChanged({ dispatch, getState }, next, action) {
+    if (navigator.product === 'ReactNative') {
+        const { appState } = action;
+        const mute = appState !== 'active' && !isLocalVideoTrackDesktop(getState());
 
-    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);
 }
@@ -133,37 +136,8 @@ function _setRoom({ dispatch, getState }, next, action) {
     const state = getState();
     const { room } = action;
     const roomIsValid = isRoomValid(room);
-
-    // 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;
+    const audioMuted = roomIsValid ? getStartWithAudioMuted(state) : _AUDIO_INITIAL_MEDIA_STATE.muted;
+    const videoMuted = roomIsValid ? getStartWithVideoMuted(state) : _VIDEO_INITIAL_MEDIA_STATE.muted;
 
     sendAnalytics(
         createStartMutedConfigurationEvent('local', audioMuted, videoMuted));

react/features/base/participants/actions.js

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

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 } from '../tracks';
+import { getTrackByMediaTypeAndParticipant, isRemoteTrackMuted } from '../tracks';
 import { createDeferred } from '../util';
 
 import {
@@ -366,6 +366,45 @@ 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,6 +12,7 @@ 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,
@@ -41,7 +42,8 @@ import {
     getLocalParticipant,
     getParticipantById,
     getParticipantCount,
-    getParticipantDisplayName
+    getParticipantDisplayName,
+    figureOutMutedWhileDisconnectedStatus
 } from './functions';
 import { PARTICIPANT_JOINED_FILE, PARTICIPANT_LEFT_FILE } from './sounds';
 
@@ -134,6 +136,11 @@ 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);
@@ -283,7 +290,6 @@ function _localParticipantJoined({ getState, dispatch }, next, action) {
     const settings = getState()['features/base/settings'];
 
     dispatch(localParticipantJoined({
-        avatarID: settings.avatarID,
         avatarURL: settings.avatarURL,
         email: settings.email,
         name: settings.displayName
@@ -453,6 +459,55 @@ 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

@@ -181,7 +181,6 @@ function _participant(state: Object = {}, action) {
  */
 function _participantJoined({ participant }) {
     const {
-        avatarID,
         avatarURL,
         botType,
         connectionStatus,
@@ -211,7 +210,6 @@ function _participantJoined({ participant }) {
     }
 
     return {
-        avatarID,
         avatarURL,
         botType,
         conference,
@@ -223,6 +221,7 @@ function _participantJoined({ participant }) {
         isJigasi,
         loadableAvatarUrl,
         local: local || false,
+        mutedWhileDisconnected: local ? undefined : false,
         name,
         pinned: pinned || false,
         presence,

react/features/base/settings/actionTypes.js

@@ -5,7 +5,6 @@
  *     type: SETTINGS_UPDATED,
  *     settings: {
  *         audioOutputDeviceId: string,
- *         avatarID: string,
  *         avatarURL: string,
  *         cameraDeviceId: string,
  *         displayName: string,

react/features/base/settings/actions.js

@@ -8,7 +8,6 @@ import { SETTINGS_UPDATED } from './actionTypes';
  *     type: SETTINGS_UPDATED,
  *     settings: {
  *         audioOutputDeviceId: string,
- *         avatarID: string,
  *         avatarURL: string,
  *         cameraDeviceId: string,
  *         displayName: string,

react/features/base/settings/middleware.js

@@ -1,9 +1,11 @@
 // @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';
@@ -27,6 +29,10 @@ 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);
@@ -115,6 +121,26 @@ 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/settings/reducer.js

@@ -1,7 +1,6 @@
 // @flow
 
 import { jitsiLocalStorage } from '@jitsi/js-utils';
-import { randomHexString } from '@jitsi/js-utils/random';
 import _ from 'lodash';
 
 import { APP_WILL_MOUNT } from '../app/actionTypes';
@@ -19,7 +18,6 @@ import logger from './logger';
  */
 const DEFAULT_STATE = {
     audioOutputDeviceId: undefined,
-    avatarID: undefined,
     avatarURL: undefined,
     cameraDeviceId: undefined,
     disableCallIntegration: undefined,
@@ -126,24 +124,16 @@ function _initSettings(featureState) {
     // jibri, and remove the old settings.js values.
     const savedDisplayName = jitsiLocalStorage.getItem('displayname');
     const savedEmail = jitsiLocalStorage.getItem('email');
-    let avatarID = _.escape(jitsiLocalStorage.getItem('avatarId'));
 
     // The helper _.escape will convert null to an empty strings. The empty
     // string will be saved in settings. On app re-load, because an empty string
     // is a defined value, it will override any value found in local storage.
     // The workaround is sidestepping _.escape when the value is not set in
     // local storage.
-    const displayName
-        = savedDisplayName === null ? undefined : _.escape(savedDisplayName);
+    const displayName = savedDisplayName === null ? undefined : _.escape(savedDisplayName);
     const email = savedEmail === null ? undefined : _.escape(savedEmail);
 
-    if (!avatarID) {
-        // if there is no avatar id, we generate a unique one and use it forever
-        avatarID = randomHexString(32);
-    }
-
     settings = assignIfDefined({
-        avatarID,
         displayName,
         email
     }, settings);

react/features/base/tracks/actions.js

@@ -9,7 +9,8 @@ import {
     MEDIA_TYPE,
     setAudioMuted,
     setVideoMuted,
-    VIDEO_MUTISM_AUTHORITY
+    VIDEO_MUTISM_AUTHORITY,
+    VIDEO_TYPE
 } from '../media';
 import { getLocalParticipant } from '../participants';
 
@@ -24,7 +25,13 @@ import {
     TRACK_UPDATED,
     TRACK_WILL_CREATE
 } from './actionTypes';
-import { createLocalTracksF, getLocalTrack, getLocalTracks, getTrackByJitsiTrack } from './functions';
+import {
+    createLocalTracksF,
+    getLocalTrack,
+    getLocalTracks,
+    getLocalVideoTrack,
+    getTrackByJitsiTrack
+} from './functions';
 import logger from './logger';
 
 /**
@@ -40,6 +47,8 @@ export function createDesiredLocalTracks(...desiredTypes) {
     return (dispatch, getState) => {
         const state = getState();
 
+        dispatch(destroyLocalDesktopTrackIfExists());
+
         if (desiredTypes.length === 0) {
             const { audio, video } = state['features/base/media'];
 
@@ -663,6 +672,22 @@ 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, setAudioMuted } from '../media';
+import { MEDIA_TYPE, VIDEO_TYPE, setAudioMuted } from '../media';
 import {
     getUserSelectedCameraDeviceId,
     getUserSelectedMicDeviceId
@@ -346,12 +346,12 @@ export function getTracksByMediaType(tracks, mediaType) {
 }
 
 /**
- * Checks if the local video track in the given set of tracks is muted.
+ * Checks if the local video camera track in the given set of tracks is muted.
  *
  * @param {Track[]} tracks - List of all tracks.
  * @returns {Track[]}
  */
-export function isLocalVideoTrackMuted(tracks) {
+export function isLocalCameraTrackMuted(tracks) {
     const presenterTrack = getLocalTrack(tracks, MEDIA_TYPE.PRESENTER);
     const videoTrack = getLocalTrack(tracks, MEDIA_TYPE.VIDEO);
 
@@ -383,6 +383,19 @@ 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, muted);
+                    APP.UI.setVideoMuted(participantID);
                 }
                 APP.UI.onPeerVideoTypeChanged(participantID, jitsiTrack.videoType);
             } else if (jitsiTrack.isLocal()) {

react/features/billing-counter/middleware.js

@@ -1,9 +1,11 @@
+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 { setBillingId } from './functions';
+import { isVpaasMeeting, extractVpaasTenantFromPath, setBillingId } from './functions';
 
 /**
  * The redux middleware for billing counter.
@@ -14,6 +16,11 @@ import { setBillingId } from './functions';
 
 MiddlewareRegistry.register(store => next => async action => {
     switch (action.type) {
+    case CONFERENCE_JOINED: {
+        _maybeTrackVpaasConferenceJoin(store.getState());
+
+        break;
+    }
     case SET_BILLING_ID: {
         setBillingId(action.value);
 
@@ -34,3 +41,17 @@ 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/chrome-extension-banner/components/ChromeExtensionBanner.web.js

@@ -152,6 +152,7 @@ class ChromeExtensionBanner extends PureComponent<Props, State> {
     _isSupportedEnvironment() {
         return interfaceConfig.SHOW_CHROME_EXTENSION_BANNER
             && browser.isChrome()
+            && !browser.isTwa()
             && !isMobileBrowser()
             && !this.props.isVpaas;
     }

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

@@ -7,6 +7,7 @@ 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';
@@ -61,6 +62,12 @@ 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.
@@ -72,12 +79,6 @@ 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.
      */
@@ -200,13 +201,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';
@@ -224,7 +225,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;
@@ -275,12 +276,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';
     }
 
@@ -304,7 +305,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'>
@@ -319,7 +320,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
@@ -434,21 +435,29 @@ 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, ownProps.participantId);
+            state['features/base/tracks'], MEDIA_TYPE.VIDEO, participantId);
         const firstAudioTrack = getTrackByMediaTypeAndParticipant(
-            state['features/base/tracks'], MEDIA_TYPE.AUDIO, ownProps.participantId);
+            state['features/base/tracks'], MEDIA_TYPE.AUDIO, participantId);
 
         return {
+            ...props,
             audioSsrc: firstAudioTrack ? conference.getSsrcByTrack(firstAudioTrack.jitsiTrack) : undefined,
             videoSsrc: firstVideoTrack ? conference.getSsrcByTrack(firstVideoTrack.jitsiTrack) : undefined
         };
     }
 
-    return {};
+    return {
+        ...props
+    };
 }
 export default translate(connect(_mapStateToProps, _mapDispatchToProps)(ConnectionIndicator));

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

@@ -2,8 +2,10 @@
 
 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';
@@ -23,25 +25,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.
@@ -64,10 +66,10 @@ class StatusIndicators extends Component<Props> {
     render() {
         const {
             _currentLayout,
+            _showAudioMutedIndicator,
             _showModeratorIndicator,
-            showAudioMutedIndicator,
-            showScreenShareIndicator,
-            showVideoMutedIndicator
+            _showScreenShareIndicator,
+            _showVideoMutedIndicator
         } = this.props;
         let tooltipPosition;
 
@@ -84,9 +86,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>
         );
@@ -101,7 +103,8 @@ class StatusIndicators extends Component<Props> {
  * @private
  * @returns {{
  *     _currentLayout: string,
- *     _showModeratorIndicator: boolean
+ *     _showModeratorIndicator: boolean,
+ *     _showVideoMutedIndicator: boolean
  * }}
 */
 function _mapStateToProps(state, ownProps) {
@@ -110,10 +113,29 @@ 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
+            !interfaceConfig.DISABLE_FOCUS_INDICATOR && participant && participant.role === PARTICIPANT_ROLE.MODERATOR,
+        _showScreenShareIndicator: isScreenSharing,
+        _showVideoMutedIndicator: isVideoMuted
     };
 }
 

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

@@ -0,0 +1,567 @@
+// @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,20 +17,30 @@ 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.resolve();
+            return promise;
         }
         const tracks = state['features/base/tracks'];
-        const { jitsiTrack } = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.VIDEO, largeVideo.participantId);
-        const videoStream = jitsiTrack.getOriginalStream();
+        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;
+        }
 
         // 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.resolve();
+            return promise;
         }
 
         // Create a HTML canvas and draw video on to the canvas.

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

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

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

@@ -7,6 +7,7 @@ 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 & {
@@ -63,7 +64,7 @@ class PictureInPictureButton extends AbstractButton<Props, *> {
  */
 function _mapStateToProps(state): Object {
     const flag = Boolean(getFeatureFlag(state, PIP_ENABLED));
-    let enabled = flag;
+    let enabled = flag && !isLocalVideoTrackDesktop(state);
 
     // Override flag for Android, since it might be unsupported.
     if (Platform.OS === 'android' && !NativeModules.PictureInPicture.SUPPORTED) {

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

@@ -0,0 +1,15 @@
+// @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,3 +1,4 @@
 export * from './actions';
 export * from './actionTypes';
 export * from './components';
+export * from './functions';

react/features/prejoin/actionTypes.js

@@ -4,6 +4,11 @@
  */
 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,6 +18,7 @@ import { executeDialOutRequest, executeDialOutStatusRequest, getDialInfoPageURL
 import { showErrorNotification } from '../notifications';
 
 import {
+    PREJOIN_INITIALIZED,
     PREJOIN_START_CONFERENCE,
     SET_DEVICE_STATUS,
     SET_DIALOUT_COUNTRY,
@@ -195,7 +196,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)));
     };
@@ -269,6 +270,17 @@ 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/remote-video-menu/components/web/RemoteVideoMenuTriggerButton.js

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

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

@@ -141,7 +141,14 @@ export default class JitsiStreamPresenterEffect {
             timeMs: 1000 / this._frameRate
         });
 
-        return this._canvas.captureStream(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;
     }
 
     /**

react/features/toolbox/components/VideoMuteButton.js

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

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

@@ -23,6 +23,7 @@ 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';
 
@@ -131,6 +132,7 @@ 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

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

react/features/toolbox/functions.native.js

@@ -1,7 +1,9 @@
 // @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.
@@ -18,3 +20,13 @@ 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,3 +77,13 @@ 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_JOINED, CONFERENCE_WILL_LEAVE } from '../base/conference';
+import { CONFERENCE_WILL_LEAVE } from '../base/conference';
 import {
     DOMINANT_SPEAKER_CHANGED,
     PARTICIPANT_JOINED,
@@ -33,10 +33,6 @@ 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/WelcomePage.native.js

@@ -19,6 +19,7 @@ import { connect } from '../../base/redux';
 import { ColorPalette } from '../../base/styles';
 import {
     createDesiredLocalTracks,
+    destroyLocalDesktopTrackIfExists,
     destroyLocalTracks
 } from '../../base/tracks';
 import { HelpView } from '../../help';
@@ -81,6 +82,8 @@ 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.

resources/prosody-plugins/mod_jibri_queue.lua

@@ -1,5 +0,0 @@
-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

@@ -1,559 +0,0 @@
-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,99 +7,32 @@ 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
 
--- 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
-
+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;
 
 -- 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 = match_rewrite_to_jid(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 = room_jid_match_rewrite(conf.attr.room, stanza)
             end
         end
         if stanza.attr.to then
-            stanza.attr.to = match_rewrite_to_jid(stanza.attr.to, stanza)
+            stanza.attr.to = room_jid_match_rewrite(stanza.attr.to, stanza)
         end
         if stanza.attr.from then
-            stanza.attr.from = match_rewrite_from_jid(stanza.attr.from, stanza)
+            stanza.attr.from = internal_room_jid_match_rewrite(stanza.attr.from, stanza)
         end
     end
     return stanza;
@@ -107,7 +40,6 @@ 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
 
@@ -128,14 +60,14 @@ end
 local function outgoing_stanza_rewriter(event)
     local stanza = event.stanza;
     if stanza.attr.to then
-        stanza.attr.to = match_rewrite_to_jid(stanza.attr.to, stanza)
+        stanza.attr.to = room_jid_match_rewrite(stanza.attr.to, stanza)
     end
 end
 
 local function incoming_stanza_rewriter(event)
     local stanza = event.stanza;
     if stanza.attr.from then
-        stanza.attr.from = match_rewrite_from_jid(stanza.attr.from, stanza)
+        stanza.attr.from = internal_room_jid_match_rewrite(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;
+        room._data.lobbyroom = new_room.jid;
         room:save(true);
         return true
     end
@@ -178,9 +178,12 @@ function destroy_lobby_room(room, newjid, message)
     if not message then
         message = 'Lobby room closed.';
     end
-    if room and room._data.lobbyroom then
-        room._data.lobbyroom:set_persistent(false);
-        room._data.lobbyroom:destroy(newjid, message);
+    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
         room._data.lobbyroom = nil;
     end
 end
@@ -315,7 +318,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.jid;
+            event.formdata['muc#roominfo_lobbyroom'] = room._data.lobbyroom;
         end
     end);
 
@@ -364,7 +367,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.jid);
+            reply:tag('lobbyroom'):text(room._data.lobbyroom);
             event.origin.send(reply:tag('x', {xmlns = MUC_NS}));
             return true;
         end
@@ -377,13 +380,16 @@ 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 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');
+        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');
 
-                notify_lobby_access(room, from, occupant.nick, display_name, true);
+                    notify_lobby_access(room, from, occupant.nick, display_name, true);
+                end
             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_insert, t_remove = table.insert, table.remove;
+local t_remove = table.remove;
 local math_min = math.min;
 local math_max = math.max;
 local os_time = os.time;
@@ -26,6 +26,7 @@ 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";
@@ -34,11 +35,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", 300);
+local resume_timeout = module:get_option_number("smacks_hibernation_time", 600);
 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", 60);
+local delayed_ack_timeout = module:get_option_number("smacks_max_ack_delay", 30);
 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;
@@ -200,8 +201,15 @@ local function request_ack_if_needed(session, force, reason)
 end
 
 local function outgoing_stanza_filter(stanza, session)
-	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
+	-- 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 queue = session.outgoing_stanza_queue;
 		local cached_stanza = st.clone(stanza);
 		cached_stanza._cached = true;
@@ -400,12 +408,14 @@ 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
-				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);
+				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
 				end
 			end
 		end
@@ -413,37 +423,46 @@ 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)
-			if session.mam_requested and stanza._was_archived then
+			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));
 				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
-				module:fire_event("message/offline/handle", { origin = session, stanza = stanza } );
-				return true;		-- stanza handled, don't send an error
+				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
 			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

@@ -40,6 +40,11 @@ function on_message(event)
             log("warn", "No room found %s", roomAddress);
             return false;
         end
+ 
+        if not room.speakerStats then
+            log("warn", "No speakerStats found for %s", roomAddress);
+            return false;
+        end
 
         local roomSpeakerStats = room.speakerStats;
         local from = event.stanza.attr.from;
@@ -88,8 +93,7 @@ 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;
@@ -187,6 +191,10 @@ function occupant_leaving(event)
     if is_healthcheck_room(room.jid) then
         return;
     end
+ 
+    if not room.speakerStats then
+        return;
+    end
 
     local occupant = event.occupant;
 

resources/prosody-plugins/mod_websocket_smacks.patch

@@ -1,101 +0,0 @@
---- mod_websocket.lua
-+++ mod_websocket.lua
-@@ -163,34 +163,34 @@ function handle_request(event)
- 		return 403;
- 	end
- 
--	local function websocket_close(code, message)
-+	local function websocket_close(conn, code, message)
- 		conn:write(build_close(code, message));
- 		conn:close();
- 	end
- 
- 	local dataBuffer;
--	local function handle_frame(frame)
-+	local function handle_frame(conn, frame)
- 		local opcode = frame.opcode;
- 		local length = frame.length;
- 		module:log("debug", "Websocket received frame: opcode=%0x, %i bytes", frame.opcode, #frame.data);
- 
- 		-- Error cases
- 		if frame.RSV1 or frame.RSV2 or frame.RSV3 then -- Reserved bits non zero
--			websocket_close(1002, "Reserved bits not zero");
-+			websocket_close(conn, 1002, "Reserved bits not zero");
- 			return false;
- 		end
- 
- 		if opcode == 0x8 then -- close frame
- 			if length == 1 then
--				websocket_close(1002, "Close frame with payload, but too short for status code");
-+				websocket_close(conn, 1002, "Close frame with payload, but too short for status code");
- 				return false;
- 			elseif length >= 2 then
- 				local status_code = parse_close(frame.data)
- 				if status_code < 1000 then
--					websocket_close(1002, "Closed with invalid status code");
-+					websocket_close(conn, 1002, "Closed with invalid status code");
- 					return false;
- 				elseif ((status_code > 1003 and status_code < 1007) or status_code > 1011) and status_code < 3000 then
--					websocket_close(1002, "Closed with reserved status code");
-+					websocket_close(conn, 1002, "Closed with reserved status code");
- 					return false;
- 				end
- 			end
-@@ -198,28 +198,28 @@ function handle_request(event)
- 
- 		if opcode >= 0x8 then
- 			if length > 125 then -- Control frame with too much payload
--				websocket_close(1002, "Payload too large");
-+				websocket_close(conn, 1002, "Payload too large");
- 				return false;
- 			end
- 
- 			if not frame.FIN then -- Fragmented control frame
--				websocket_close(1002, "Fragmented control frame");
-+				websocket_close(conn, 1002, "Fragmented control frame");
- 				return false;
- 			end
- 		end
- 
- 		if (opcode > 0x2 and opcode < 0x8) or (opcode > 0xA) then
--			websocket_close(1002, "Reserved opcode");
-+			websocket_close(conn, 1002, "Reserved opcode");
- 			return false;
- 		end
- 
- 		if opcode == 0x0 and not dataBuffer then
--			websocket_close(1002, "Unexpected continuation frame");
-+			websocket_close(conn, 1002, "Unexpected continuation frame");
- 			return false;
- 		end
- 
- 		if (opcode == 0x1 or opcode == 0x2) and dataBuffer then
--			websocket_close(1002, "Continuation frame expected");
-+			websocket_close(conn, 1002, "Continuation frame expected");
- 			return false;
- 		end
- 
-@@ -229,11 +229,11 @@ function handle_request(event)
- 		elseif opcode == 0x1 then -- Text frame
- 			dataBuffer = {frame.data};
- 		elseif opcode == 0x2 then -- Binary frame
--			websocket_close(1003, "Only text frames are supported");
-+			websocket_close(conn, 1003, "Only text frames are supported");
- 			return;
- 		elseif opcode == 0x8 then -- Close request
--			websocket_close(1000, "Goodbye");
--			return;
-+			websocket_close(conn, 1000, "Goodbye");
-+			return "";
- 		elseif opcode == 0x9 then -- Ping frame
- 			frame.opcode = 0xA;
- 			conn:write(build_frame(frame));
-@@ -276,7 +276,7 @@ function handle_request(event)
- 
- 		while frame do
- 			frameBuffer = frameBuffer:sub(length + 1);
--			local result = handle_frame(frame);
-+			local result = handle_frame(session.conn, frame);
- 			if not result then return; end
- 			cache[#cache+1] = filter_open_close(result);
- 			frame, length = parse_frame(frameBuffer);

resources/prosody-plugins/token/util.lib.lua

@@ -142,40 +142,44 @@ function Util:get_public_key(keyId)
 end
 
 --- Verifies issuer part of token
--- @param 'iss' claim from the token to verify
+-- @param 'issClaim' claim from the token to verify
 -- @param 'acceptedIssuers' list of issuers to check
 -- @return nil and error string or true for accepted claim
 function Util:verify_issuer(issClaim, acceptedIssuers)
     if not acceptedIssuers then
         acceptedIssuers = self.acceptedIssuers
     end
-    module:log("debug","verify_issuer claim: %s against accepted: %s",issClaim, acceptedIssuers);
+    module:log("debug", "verify_issuer claim: %s against accepted: %s", issClaim, acceptedIssuers);
     for i, iss in ipairs(acceptedIssuers) do
+        if iss == '*' then
+            -- "*" indicates to accept any issuer in the claims so return success
+            return true;
+        end
         if issClaim == iss then
-            --claim matches an accepted issuer so return success
+            -- claim matches an accepted issuer so return success
             return true;
         end
     end
-    --if issClaim not found in acceptedIssuers, fail claim
+    -- if issClaim not found in acceptedIssuers, fail claim
     return nil, "Invalid issuer ('iss' claim)";
 end
 
 --- Verifies audience part of token
--- @param 'aud' claim from the token to verify
+-- @param 'audClaim' claim from the token to verify
 -- @return nil and error string or true for accepted claim
 function Util:verify_audience(audClaim)
-    module:log("debug","verify_audience claim: %s against accepted: %s",audClaim, self.acceptedAudiences);
+    module:log("debug", "verify_audience claim: %s against accepted: %s", audClaim, self.acceptedAudiences);
     for i, aud in ipairs(self.acceptedAudiences) do
         if aud == '*' then
-            --* indicates to accept any audience in the claims so return success
+            -- "*" indicates to accept any audience in the claims so return success
             return true;
         end
         if audClaim == aud then
-            --claim matches an accepted audience so return success
+            -- claim matches an accepted audience so return success
             return true;
         end
     end
-    --if issClaim not found in acceptedIssuers, fail claim
+    -- if audClaim not found in acceptedAudiences, fail claim
     return nil, "Invalid audience ('aud' claim)";
 end
 

resources/prosody-plugins/util.lib.lua

@@ -22,11 +22,15 @@ local muc_domain = module:get_option_string(
 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')
+-- (e.g. extract 'foo' from 'conference.foo.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 = {};
+
 -- Utility function to split room JID to include room name and subdomain
+-- (e.g. from room1@conference.foo.example.com/res returns (room1, example.com, res, foo))
 local function room_jid_split_subdomain(room_jid)
     local node, host, resource = jid.split(room_jid);
     local target_subdomain = host and host:match(target_subdomain_pattern);
@@ -34,39 +38,57 @@ local function room_jid_split_subdomain(room_jid)
 end
 
 --- Utility function to check and convert a room JID from
--- virtual room1@muc.foo.example.com to real [foo]room1@muc.example.com
+--- virtual room1@conference.foo.example.com to real [foo]room1@conference.example.com
 -- @param room_jid the room jid to match and rewrite if needed
--- @return returns room jid [foo]room1@muc.example.com when it has subdomain
--- otherwise room1@muc.example.com(the room_jid value untouched)
-local function room_jid_match_rewrite(room_jid)
-    local node, host, resource, target_subdomain = room_jid_split_subdomain(room_jid);
+-- @param stanza the stanza
+-- @return returns room jid [foo]room1@conference.example.com when it has subdomain
+-- otherwise room1@conference.example.com(the room_jid value untouched)
+local function room_jid_match_rewrite(room_jid, stanza)
+    local node, _, resource, target_subdomain = room_jid_split_subdomain(room_jid);
     if not target_subdomain then
-        module:log("debug", "No need to rewrite out 'to' %s", room_jid);
+        -- 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
-        = "["..target_subdomain.."]"..node, muc_domain, resource;
+    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 and 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);
+    -- module:log("debug", "Rewrote to %s", room_jid);
     return room_jid
 end
 
-local function internal_room_jid_match_rewrite(room_jid)
+-- 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 internal_room_jid_match_rewrite(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)", room_jid);
+        -- module:log("debug", "No need to rewrite %s (not from the MUC host)", room_jid);
+
+        if (stanza and 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);
+        -- 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);
+    -- module:log("debug", "Rewrote to %s", room_jid);
     return room_jid
 end
 
@@ -216,8 +238,8 @@ function is_healthcheck_room(room_jid)
     return false;
 end
 
--- Utility function to make an http get request and
--- retry @param retry number of times
+--- Utility function to make an http get request and
+--- retry @param retry number of times
 -- @param url endpoint to be called
 -- @param retry nr of retries, if retry is
 -- nil there will be no retries

static/pwa/registrator.js

@@ -1,12 +0,0 @@
-if ('serviceWorker' in navigator) {
-    window.addEventListener('load', () => {
-        navigator.serviceWorker
-      .register('pwa-worker.js')
-      .then(reg => {
-          console.log('Service worker registered.', reg);
-      })
-      .catch(err => {
-          console.log(err);
-      });
-    });
-}

twa/app/src/main/res/mipmap-anydpi-v26/ic_launcher.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>

twa/app/src/main/res/mipmap-anydpi-v26/ic_launcher_round.xml

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?>
+<adaptive-icon xmlns:android="http://schemas.android.com/apk/res/android">
+    <background android:drawable="@color/ic_launcher_background"/>
+    <foreground android:drawable="@mipmap/ic_launcher_foreground"/>
+</adaptive-icon>