feat(rn,filmstrip) add 1on1 mode

When there are only 2 participants in a call, don't show the remote thumbnail,
unless the `disable1On1Mode` config option is set or the local participant pin
themselves.

android/gradle.properties

@@ -25,5 +25,5 @@ android.enableDexingArtifactTransform.desugaring=false
 android.useAndroidX=true
 android.enableJetifier=true
 
-appVersion=21.2.0
-sdkVersion=3.7.0
+appVersion=21.3.0
+sdkVersion=3.8.0

android/sdk/build.gradle

@@ -70,11 +70,13 @@ dependencies {
     implementation project(':react-native-default-preference')
     implementation project(':react-native-immersive')
     implementation project(':react-native-keep-awake')
+    implementation project(':react-native-slider')
     implementation project(':react-native-sound')
+    implementation project(':react-native-splash-screen')
     implementation project(':react-native-svg')
+    implementation project(':react-native-video')
     implementation project(':react-native-webrtc')
     implementation project(':react-native-webview')
-    implementation project(':react-native-splash-screen')
 
     testImplementation 'junit:junit:4.12'
 }

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

@@ -187,9 +187,11 @@ class ReactInstanceManagerHolder {
                 new com.ocetnik.timer.BackgroundTimerPackage(),
                 new com.reactnativecommunity.asyncstorage.AsyncStoragePackage(),
                 new com.reactnativecommunity.netinfo.NetInfoPackage(),
+                new com.reactnativecommunity.slider.ReactSliderPackage(),
                 new com.reactnativecommunity.webview.RNCWebViewPackage(),
                 new com.rnimmersive.RNImmersivePackage(),
                 new com.zmxv.RNSound.RNSoundPackage(),
+                new com.brentvatne.react.ReactVideoPackage(),
                 new ReactPackageAdapter() {
                     @Override
                     public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {

android/settings.gradle

@@ -19,13 +19,17 @@ include ':react-native-immersive'
 project(':react-native-immersive').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-immersive/android')
 include ':react-native-keep-awake'
 project(':react-native-keep-awake').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-keep-awake/android')
+include ':react-native-slider'
+project(':react-native-slider').projectDir = new File(rootProject.projectDir, '../node_modules/@react-native-community/slider/android')
 include ':react-native-sound'
 project(':react-native-sound').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-sound/android')
 include ':react-native-splash-screen'
 project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android')
 include ':react-native-svg'
 project(':react-native-svg').projectDir = new File(rootProject.projectDir, 	'../node_modules/react-native-svg/android')
+include ':react-native-video'
+project(':react-native-video').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-video/android')
 include ':react-native-webrtc'
 project(':react-native-webrtc').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webrtc/android')
 include ':react-native-webview'
-project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')
+project(':react-native-webview').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-webview/android')

conference.js

@@ -39,6 +39,7 @@ import {
     conferenceWillJoin,
     conferenceWillLeave,
     dataChannelOpened,
+    getConferenceOptions,
     kickedOut,
     lockStateChanged,
     onStartMutedPolicyChanged,
@@ -111,7 +112,6 @@ import {
     trackRemoved
 } from './react/features/base/tracks';
 import { downloadJSON } from './react/features/base/util/downloadJSON';
-import { getConferenceOptions } from './react/features/conference/functions';
 import { showDesktopPicker } from './react/features/desktop-picker';
 import { appendSuffix } from './react/features/display-name';
 import {
@@ -132,6 +132,7 @@ import { setScreenAudioShareState, isScreenAudioShared } from './react/features/
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createPresenterEffect } from './react/features/stream-effects/presenter';
+import { createRnnoiseProcessor } from './react/features/stream-effects/rnnoise';
 import { endpointMessageReceived } from './react/features/subtitles';
 import UIEvents from './service/UI/UIEvents';
 
@@ -1357,7 +1358,11 @@ export default {
     },
 
     _getConferenceOptions() {
-        return getConferenceOptions(APP.store.getState());
+        const options = getConferenceOptions(APP.store.getState());
+
+        options.createVADProcessor = createRnnoiseProcessor;
+
+        return options;
     },
 
     /**

config.js

@@ -70,6 +70,9 @@ var config = {
         // callStatsThreshold: 5 // enable callstats for 5% of the users.
     },
 
+    // Enables reactions feature.
+    // enableReactions: false,
+
     // Disables ICE/UDP by filtering out local and remote UDP candidates in
     // signalling.
     // webrtcIceUdpDisable: false,
@@ -459,11 +462,38 @@ var config = {
     // - 'desktop' controls the "Share your screen" button
     // - if `toolbarButtons` is undefined, we fallback to enabling all buttons on the UI
     // toolbarButtons: [
-    //    'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
-    //    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-    //    'livestreaming', 'etherpad', 'sharedvideo', 'shareaudio', 'settings', 'raisehand',
-    //    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-    //    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
+    //    'camera',
+    //    'chat',
+    //    'closedcaptions',
+    //    'desktop',
+    //    'download',
+    //    'embedmeeting',
+    //    'etherpad',
+    //    'feedback',
+    //    'filmstrip',
+    //    'fullscreen',
+    //    'hangup',
+    //    'help',
+    //    'invite',
+    //    'livestreaming',
+    //    'microphone',
+    //    'mute-everyone',
+    //    'mute-video-everyone',
+    //    'participants-pane',
+    //    'profile',
+    //    'raisehand',
+    //    'recording',
+    //    'security',
+    //    'select-background',
+    //    'settings',
+    //    'shareaudio',
+    //    'sharedvideo',
+    //    'shortcuts',
+    //    'stats',
+    //    'tileview',
+    //    'toggle-camera',
+    //    'videoquality',
+    //    '__end'
     // ],
 
     // Stats
@@ -603,6 +633,9 @@ var config = {
     // conference (if set to true, these sounds will not be played).
     // disableJoinLeaveSounds: false,
 
+    // Disables the sounds that play when a chat message is received.
+    // disableIncomingMessageSound: false,
+
     // Information for the chrome extension banner
     // chromeExtensionBanner: {
     //     // The chrome extension to be installed address
@@ -732,6 +765,9 @@ var config = {
     // Hides the conference subject
     // hideConferenceSubject: true,
 
+    // Hides the recording label
+    // hideRecordingLabel: false,
+
     // Hides the conference timer.
     // hideConferenceTimer: true,
 

connection.js

@@ -17,8 +17,7 @@ import {
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
-import { isVpaasMeeting } from './react/features/billing-counter/functions';
-import { getJaasJWT } from './react/features/jaas/functions';
+import { isVpaasMeeting, getJaasJWT } from './react/features/jaas/functions';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);
 
@@ -89,8 +88,9 @@ export async function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
     const state = APP.store.getState();
     let { jwt } = state['features/base/jwt'];
+    const { iAmRecorder, iAmSipGateway } = state['features/base/config'];
 
-    if (!jwt && isVpaasMeeting(state)) {
+    if (!iAmRecorder && !iAmSipGateway && !jwt && isVpaasMeeting(state)) {
         jwt = await getJaasJWT(state);
         APP.store.dispatch(setJWT(jwt));
     }

css/_drawer.scss

@@ -4,16 +4,28 @@
     right: 0;
     bottom: 0;
     z-index: $drawerZ;
-    background-color: #141414;
     border-radius: 16px 16px 0 0;
 }
 
+.drawer-portal::after {
+    content: '';
+    background-color: $participantsPaneBgColor;
+    margin-bottom: env(safe-area-inset-bottom, 0);
+}
+
+.drawer-menu-container {
+    height: 100vh;
+    display: flex;
+    align-items: flex-end;
+}
+
 .drawer-menu {
     max-height: calc(80vh - 64px);
     background: #242528;
     border-radius: 16px 16px 0 0;
     overflow-y: hidden;
     margin-bottom: env(safe-area-inset-bottom, 0);
+    width: 100%;
 
     .drawer-toggle {
         display: flex;

css/_reactions-menu.scss

@@ -90,7 +90,7 @@
 	width: 20%;
 	bottom: 0;
 	left: 40%;
-	height: 48px;
+	height: 0;
 }
 
 .reactions-menu-popup-container,
@@ -111,8 +111,8 @@ $reactionCount: 20;
 	line-height: 32px;
 	width: 32px;
 	height: 32px;
-	top: 32px;
-	left: 10px;
+	top: 0;
+	left: 20px;
 	opacity: 0;
 	z-index: 1;
 
@@ -123,8 +123,8 @@ $reactionCount: 20;
 	@for $i from 1 through $reactionCount {
 	&.reaction-#{$i} {
 		animation: animation-#{$i} 5s forwards ease-in-out;
-		top: #{random(50, 0)}px;
-		left: #{random(-10, 10)}px;
+		top: #{random(-40, 10)}px;
+		left: #{random(0, 30)}px;
 	}
 }
 }

css/_subject.scss

@@ -9,8 +9,31 @@
     z-index: $zindex3;
 
     &.visible {
-        top: 0px;
+        top: 0;
     }
+
+    &.recording {
+        top: 0;
+
+        .subject-details-container {
+            opacity: 0;
+            transition: opacity .3s ease-in;
+        }
+
+        .subject-info-container .show-always {
+            transition: margin-left .3s ease-in;
+        }
+
+        &.visible {
+            .subject-details-container {
+                opacity: 1;
+            }
+        }
+    }
+}
+
+.subject-details-container {
+    display: flex;
 }
 
 .subject-info-container {

css/_toolbars.scss

@@ -105,12 +105,15 @@
     margin: 0 auto;
     max-width: 100%;
     pointer-events: all;
-    background-color: #131519;
-    padding-bottom: env(safe-area-inset-bottom, 0);
-    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
     border-radius: 6px;
 }
 
+.toolbox-content-wrapper::after {
+    content: '';
+    background: $newToolbarBackgroundColor;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+}
+
 .toolbox-content-items {
     background: $newToolbarBackgroundColor;
     border-radius: 6px;
@@ -118,6 +121,7 @@
     padding: 6px;
     text-align: center;
     pointer-events: all;
+    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
 
     >div {
         margin-left: 8px;

css/_transcription-subtitles.scss

@@ -16,8 +16,8 @@
     z-index: $subtitlesZ;
 
     &.lifted {
-        // Lift subtitle above toolbar+invite box.
-        bottom: $newToolbarSize + 112px + 40px;
+        // Lift subtitle above toolbar+dominant speaker box.
+        bottom: $newToolbarSize + 36px + 40px;
     }
 
     span {

css/_variables.scss

@@ -46,6 +46,7 @@ $menuBG:#242528;
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
 $newToolbarSize: 48px;
+$newToolbarSizeMobile: 60px;
 $newToolbarSizeWithPadding: calc(#{$newToolbarSize} + 24px);
 $toolbarTitleFontSize: 19px;
 $overflowMenuItemColor: #fff;

css/filmstrip/_tile_view.scss

@@ -35,6 +35,7 @@
         display: flex;
         justify-content: center;
         align-items: center;
+        transition: margin-bottom .3s ease-in;
     }
 
     .filmstrip {
@@ -52,11 +53,23 @@
                 margin-left: $sidebarWidth;
                 width: calc(100% - #{$sidebarWidth});
 
-                .remote-videos{
+                .remote-videos {
                     width: calc(100vw - #{$sidebarWidth});
                 }
             }
         }
+
+        &.collapse {
+            #remoteVideos {
+                height: calc(100% - #{$newToolbarSizeMobile}) !important;
+                margin-bottom: $newToolbarSizeMobile;
+            }
+
+            .remote-videos {
+                // !important is needed here as overflow is set via element.style in a FixedSizeGrid.
+                overflow: hidden auto !important;
+            }
+        }
     }
 
     /**

css/modals/virtual-background/_virtual-background.scss

@@ -14,11 +14,7 @@
     .virtual-background-none:hover {
         opacity: 0.5;
         border: 2px solid #99bbf3;
-        @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
-            height: 60px;
-            width: 60px;
-        }
-        @media (max-width: 432px) {
+        @media (max-width: 632px) {
             height: 60px;
             width: 60px;
         }
@@ -87,7 +83,7 @@
         padding: 0 10px;
     }
 
-    @media (min-width: 432px) and (max-width: 632px) {
+    @media (max-width: 632px) {
         font-size: 1.5vw;
         .desktop-share,
         .virtual-background-none,
@@ -106,29 +102,8 @@
             width: 60px;
         }
     }
-    @media (max-width: 432px) {
+    @media (max-width: 360px) {
         grid-template-columns: auto auto auto;
-        font-size: 1.5vw;
-        .desktop-share,
-        .virtual-background-none,
-        .thumbnail,
-        .blur,
-        .slight-blur {
-            height: 60px;
-            width: 60px;
-        }
-        .desktop-share-selected,
-        .thumbnail-selected,
-        .none-selected,
-        .blur-selected,
-        .slight-blur-selected {
-            height: 60px;
-            width: 60px;
-        }
-    }
-    @media (max-width: 320px) {
-        grid-template-columns: auto auto auto;
-        font-size: 1.5vw;
     }
 }
 
@@ -163,7 +138,7 @@
     display: none;
     left: 96;
     bottom: 51;
-    @media (min-width: 432px) and (max-width: 632px) {
+    @media (max-width: 632px) {
         left: 51px;
     }
 }
@@ -196,10 +171,7 @@
     width: 570px;
     margin-bottom: 8px;
     z-index: 2;
-    @media (min-width: 432px) and (max-width: 632px) {
-        max-width: 336;
-    }
-    @media (max-width: 432px) {
+    @media (max-width: 632px) {
         max-width: 336;
     }
 }

interface_config.js

@@ -174,7 +174,7 @@ var interfaceConfig = {
     RECENT_LIST_ENABLED: true,
     REMOTE_THUMBNAIL_RATIO: 1, // 1:1
 
-    SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar' ],
+    SETTINGS_SECTIONS: [ 'devices', 'language', 'moderator', 'profile', 'calendar', 'sounds' ],
 
     /**
      * Specify which sharing features should be displayed. If the value is not set
@@ -208,13 +208,7 @@ var interfaceConfig = {
      * DEPRECATED!
      * This config was moved to config.js as `toolbarButtons`.
      */
-    // TOOLBAR_BUTTONS: [
-    //     'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
-    //     'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-    //     'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
-    //     'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
-    //     'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
-    // ],
+    // TOOLBAR_BUTTONS: [],
 
     TOOLBAR_TIMEOUT: 4000,
 

ios/Podfile

@@ -58,7 +58,9 @@ target 'JitsiMeetSDK' do
   pod 'react-native-calendar-events', :path => '../node_modules/react-native-calendar-events'
   pod 'react-native-keep-awake', :path => '../node_modules/react-native-keep-awake'
   pod 'react-native-netinfo', :path => '../node_modules/@react-native-community/netinfo'
+  pod 'react-native-slider', :path => '../node_modules/@react-native-community/slider'
   pod 'react-native-splash-screen', :path => '../node_modules/react-native-splash-screen'
+  pod 'react-native-video', :path => '../node_modules/react-native-video/react-native-video.podspec'
   pod 'react-native-webview', :path => '../node_modules/react-native-webview'
   pod 'react-native-webrtc', :path => '../node_modules/react-native-webrtc'
   pod 'RNCAsyncStorage', :path => '../node_modules/@react-native-async-storage/async-storage'

ios/Podfile.lock

@@ -1,9 +1,9 @@
 PODS:
-  - AppAuth (1.2.0):
-    - AppAuth/Core (= 1.2.0)
-    - AppAuth/ExternalUserAgent (= 1.2.0)
-  - AppAuth/Core (1.2.0)
-  - AppAuth/ExternalUserAgent (1.2.0)
+  - AppAuth (1.4.0):
+    - AppAuth/Core (= 1.4.0)
+    - AppAuth/ExternalUserAgent (= 1.4.0)
+  - AppAuth/Core (1.4.0)
+  - AppAuth/ExternalUserAgent (1.4.0)
   - boost-for-react-native (1.63.0)
   - CocoaLumberjack (3.5.3):
     - CocoaLumberjack/Core (= 3.5.3)
@@ -48,7 +48,7 @@ PODS:
     - GoogleUtilities/Environment (~> 6.7)
     - GoogleUtilities/Logger (~> 6.7)
     - nanopb (~> 1.30906.0)
-  - FirebaseCrashlytics (4.6.1):
+  - FirebaseCrashlytics (4.6.2):
     - FirebaseCore (~> 6.10)
     - FirebaseInstallations (~> 1.6)
     - GoogleDataTransport (~> 7.2)
@@ -77,9 +77,9 @@ PODS:
     - GoogleUtilities/Network (~> 6.7)
     - "GoogleUtilities/NSData+zlib (~> 6.7)"
     - nanopb (~> 1.30906.0)
-  - GoogleDataTransport (7.4.0):
+  - GoogleDataTransport (7.5.1):
     - nanopb (~> 1.30906.0)
-  - GoogleSignIn (5.0.1):
+  - GoogleSignIn (5.0.2):
     - AppAuth (~> 1.2)
     - GTMAppAuth (~> 1.0)
     - GTMSessionFetcher/Core (~> 1.1)
@@ -102,21 +102,17 @@ PODS:
     - GoogleUtilities/Logger
   - GoogleUtilities/UserDefaults (6.7.2):
     - GoogleUtilities/Logger
-  - GTMAppAuth (1.0.0):
-    - AppAuth/Core (~> 1.0)
-    - GTMSessionFetcher (~> 1.1)
-  - GTMSessionFetcher (1.2.2):
-    - GTMSessionFetcher/Full (= 1.2.2)
-  - GTMSessionFetcher/Core (1.2.2)
-  - GTMSessionFetcher/Full (1.2.2):
-    - GTMSessionFetcher/Core (= 1.2.2)
+  - GTMAppAuth (1.2.2):
+    - AppAuth/Core (~> 1.4)
+    - GTMSessionFetcher/Core (~> 1.5)
+  - GTMSessionFetcher/Core (1.6.1)
   - nanopb (1.30906.0):
     - nanopb/decode (= 1.30906.0)
     - nanopb/encode (= 1.30906.0)
   - nanopb/decode (1.30906.0)
   - nanopb/encode (1.30906.0)
   - ObjectiveDropboxOfficial (3.9.4)
-  - PromisesObjC (1.2.10)
+  - PromisesObjC (1.2.12)
   - RCTRequired (0.61.5-jitsi.2)
   - RCTTypeSafety (0.61.5-jitsi.2):
     - FBLazyVector (= 0.61.5-jitsi.2)
@@ -288,9 +284,16 @@ PODS:
     - React
   - react-native-netinfo (4.1.5):
     - React
+  - react-native-slider (3.0.3):
+    - React
   - react-native-splash-screen (3.2.0):
     - React
-  - react-native-webrtc (1.89.1):
+  - react-native-video (5.1.1):
+    - React-Core
+    - react-native-video/Video (= 5.1.1)
+  - react-native-video/Video (5.1.1):
+    - React-Core
+  - react-native-webrtc (1.92.0):
     - React-Core
   - react-native-webview (11.0.2):
     - React-Core
@@ -348,8 +351,8 @@ PODS:
     - React-jsi (= 0.61.5-jitsi.2)
     - ReactCommon/jscallinvoker (= 0.61.5-jitsi.2)
     - ReactCommon/turbomodule/core (= 0.61.5-jitsi.2)
-  - RNCAsyncStorage (1.13.2):
-    - React
+  - RNCAsyncStorage (1.15.5):
+    - React-Core
   - RNDefaultPreference (1.4.2):
     - React
   - RNDeviceInfo (8.0.0):
@@ -394,7 +397,9 @@ DEPENDENCIES:
   - react-native-calendar-events (from `../node_modules/react-native-calendar-events`)
   - react-native-keep-awake (from `../node_modules/react-native-keep-awake`)
   - "react-native-netinfo (from `../node_modules/@react-native-community/netinfo`)"
+  - "react-native-slider (from `../node_modules/@react-native-community/slider`)"
   - react-native-splash-screen (from `../node_modules/react-native-splash-screen`)
+  - react-native-video (from `../node_modules/react-native-video/react-native-video.podspec`)
   - react-native-webrtc (from `../node_modules/react-native-webrtc`)
   - react-native-webview (from `../node_modules/react-native-webview`)
   - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
@@ -475,8 +480,12 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-keep-awake"
   react-native-netinfo:
     :path: "../node_modules/@react-native-community/netinfo"
+  react-native-slider:
+    :path: "../node_modules/@react-native-community/slider"
   react-native-splash-screen:
     :path: "../node_modules/react-native-splash-screen"
+  react-native-video:
+    :path: "../node_modules/react-native-video/react-native-video.podspec"
   react-native-webrtc:
     :path: "../node_modules/react-native-webrtc"
   react-native-webview:
@@ -519,7 +528,7 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native/ReactCommon/yoga"
 
 SPEC CHECKSUMS:
-  AppAuth: bce82c76043657c99d91e7882e8a9e1a93650cd4
+  AppAuth: 31bcec809a638d7bd2f86ea8a52bd45f6e81e7c7
   boost-for-react-native: 39c7adb57c4e60d6c5479dd8623128eb5b3f0f2c
   CocoaLumberjack: 2f44e60eb91c176d471fdba43b9e3eae6a721947
   DoubleConversion: 5805e889d232975c086db112ece9ed034df7a0b2
@@ -529,20 +538,20 @@ SPEC CHECKSUMS:
   FirebaseAnalytics: 5dd088bd2e67bb9d13dbf792d1164ceaf3052193
   FirebaseCore: d889d9e12535b7f36ac8bfbf1713a0836a3012cd
   FirebaseCoreDiagnostics: 770ac5958e1372ce67959ae4b4f31d8e127c3ac1
-  FirebaseCrashlytics: 5777d3462fb8c3ab9e80a2473bd7d667a2e8411c
+  FirebaseCrashlytics: 1a747c9cc084a24dc6d9511c991db1cd078154eb
   FirebaseDynamicLinks: 6eac37d86910382eafb6315d952cc44c9e176094
   FirebaseInstallations: 466c7b4d1f58fe16707693091da253726a731ed2
   Folly: 30e7936e1c45c08d884aa59369ed951a8e68cf51
   glog: 1f3da668190260b06b429bb211bfbee5cd790c28
   GoogleAppMeasurement: 966e88df9d19c15715137bb2ddaf52373f111436
-  GoogleDataTransport: b7f406340a291370045a270c599e53c6fa6ec20f
-  GoogleSignIn: 3a51b9bb8e48b635fd7f4272cee06ca260345b86
+  GoogleDataTransport: f56af7caa4ed338dc8e138a5d7c5973e66440833
+  GoogleSignIn: 7137d297ddc022a7e0aa4619c86d72c909fa7213
   GoogleUtilities: 7f2f5a07f888cdb145101d6042bc4422f57e70b3
-  GTMAppAuth: 4deac854479704f348309e7b66189e604cf5e01e
-  GTMSessionFetcher: 61bb0f61a4cb560030f1222021178008a5727a23
+  GTMAppAuth: ad5c2b70b9a8689e1a04033c9369c4915bfcbe89
+  GTMSessionFetcher: 36689134877faeb055b27dfa4ccc9ceaa42e029e
   nanopb: 59317e09cf1f1a0af72f12af412d54edf52603fc
   ObjectiveDropboxOfficial: a5afefc83f6467c42c45f2253f583f2ad1ffc701
-  PromisesObjC: b14b1c6b68e306650688599de8a45e49fae81151
+  PromisesObjC: 3113f7f76903778cf4a0586bd1ab89329a0b7b97
   RCTRequired: a686731276578c125dff205f08b6ec9cee6ede32
   RCTTypeSafety: 88e5500e801c00d16a3d1895e3470d13beed6584
   React: 8b2bcf6a93846e47a7a365a54ec6edeb78b37701
@@ -556,8 +565,10 @@ SPEC CHECKSUMS:
   react-native-calendar-events: 1442fad71a00388f933cfa25512588fec300fcf8
   react-native-keep-awake: eba3137546b10003361b37c761f6c429b59814ae
   react-native-netinfo: 8d8db463bcc5db66a8ac5c48a7d86beb3b92f61a
+  react-native-slider: b733e17fdd31186707146debf1f04b5d94aa1a93
   react-native-splash-screen: 200d11d188e2e78cea3ad319964f6142b6384865
-  react-native-webrtc: ccb0c21eb4fb04326648fbdb4a5d49977e2cf274
+  react-native-video: 1574074179ecaf6a9dd067116c8f31bf9fec15c8
+  react-native-webrtc: bbb644859dcc37ccb7edaec860ca62ed47bf996c
   react-native-webview: b2542d6fd424bcc3e3b2ec5f854f0abb4ec86c87
   React-RCTActionSheet: bcbc311dc3b47bc8efb2737ff0940239a45789a9
   React-RCTAnimation: 65f61080ce632f6dea23d52e354ffac9948396c6
@@ -569,7 +580,7 @@ SPEC CHECKSUMS:
   React-RCTText: 4f1b99f228278d2a5e9008eced8dc9c974c4a270
   React-RCTVibration: c1041024893fdfdb8371e7c720c437751b711676
   ReactCommon: 18014e1d98dbeb9141e935cfe35fc93bd511ffb6
-  RNCAsyncStorage: bc2f81cc1df90c267ce9ed30bb2dbc93b945a8ee
+  RNCAsyncStorage: 8324611026e8dc3706f829953aa6e3899f581589
   RNDefaultPreference: 56a405ce61033ac77b95004dccd7ac54c2eb50d1
   RNDeviceInfo: 72ded653ce636b3f03571e90bed99309a714944e
   RNGoogleSignin: 39336070b35fc4cea6a98cf111e00480317be0ae
@@ -578,6 +589,6 @@ SPEC CHECKSUMS:
   RNWatch: a5320c959c75e72845c07985f3e935e58998f1d3
   Yoga: 96b469c5e81ff51b917b92e8c3390642d4ded30c
 
-PODFILE CHECKSUM: d059cebf82da14a53940a16c24c3330752d4b0c8
+PODFILE CHECKSUM: f4db44d934caeae7212dbaa33abe62ed164363e8
 
 COCOAPODS: 1.10.1

ios/app/broadcast-extension/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>NSExtension</key>

ios/app/src/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleSignature</key>
 	<string>????</string>
 	<key>CFBundleURLTypes</key>

ios/app/watchos/app/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>APPL</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>UISupportedInterfaceOrientations</key>

ios/app/watchos/extension/Info.plist

@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>XPC!</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.2.0</string>
+	<string>21.3.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>CLKComplicationPrincipalClass</key>

ios/sdk/src/Info.plist

@@ -15,7 +15,7 @@
 	<key>CFBundlePackageType</key>
 	<string>FMWK</string>
 	<key>CFBundleShortVersionString</key>
-	<string>3.7.0</string>
+	<string>3.8.0</string>
 	<key>CFBundleVersion</key>
 	<string>$(CURRENT_PROJECT_VERSION)</string>
 	<key>NSPrincipalClass</key>

ios/sdk/src/JitsiMeet.h

@@ -59,6 +59,16 @@
 
 #pragma mark - Utility methods
 
+/**
+ * Once  the react native bridge is destroyed you are responsible for reinstantiating it back. Use this method to do so.
+ */
+- (void)instantiateReactNativeBridge;
+
+/**
+ * Helper method to destroy the react native bridge, cleaning up resources in the process. Once the react native bridge is destroyed you are responsible for reinstantiating it back using `instantiateReactNativeBridge` method.
+ */
+- (void)destroyReactNativeBridge;
+
 - (JitsiMeetConferenceOptions *_Nonnull)getInitialConferenceOptions;
 
 - (BOOL)isCrashReportingDisabled;

ios/sdk/src/JitsiMeet.m

@@ -28,7 +28,6 @@
 #import <RNGoogleSignin/RNGoogleSignin.h>
 #import <WebRTC/RTCLogging.h>
 
-
 @implementation JitsiMeet {
     RCTBridgeWrapper *_bridgeWrapper;
     NSDictionary *_launchOptions;
@@ -50,7 +49,7 @@
 
 - (instancetype)init {
     if (self = [super init]) {
-        // Initialize the on and only bridge for interfacing with React Native.
+        // Initialize the one and only bridge for interfacing with React Native.
         _bridgeWrapper = [[RCTBridgeWrapper alloc] init];
         
         // Initialize the listener for handling start/stop screensharing notifications.
@@ -119,6 +118,18 @@
 
 #pragma mark - Utility methods
 
+- (void)instantiateReactNativeBridge {
+    if (_bridgeWrapper != nil) {
+        return;
+    };
+    
+    _bridgeWrapper = [[RCTBridgeWrapper alloc] init];
+}
+
+- (void)destroyReactNativeBridge {
+    _bridgeWrapper = nil;
+}
+
 - (JitsiMeetConferenceOptions *)getInitialConferenceOptions {
     if (_launchOptions[UIApplicationLaunchOptionsURLKey]) {
         NSURL *url = _launchOptions[UIApplicationLaunchOptionsURLKey];

lang/main-de.json

@@ -24,7 +24,7 @@
         "shareInvite": "Einladung zur Versammlung teilen",
         "shareLink": "Teilen Sie den Konferenzlink, um andere einzuladen",
         "shareStream": "Den Livestreaminglink freigeben",
-        "sip": "SIP: {{address}}",
+        "sipAddresses": "SIP-Adressen",
         "telephone": "Telefon: {{number}}",
         "title": "Personen zu dieser Konferenz einladen",
         "yahooEmail": "Yahoo-E-Mail"
@@ -215,6 +215,7 @@
         "gracefulShutdown": "Der Dienst steht momentan wegen Wartungsarbeiten nicht zur Verfügung. Bitte versuchen Sie es später noch einmal.",
         "grantModeratorDialog": "Möchten Sie wirklich Moderationsrechte an diese Person vergeben?",
         "grantModeratorTitle": "Moderationsrechte vergeben",
+        "hideShareAudioHelper": "Diese Meldung nicht mehr anzeigen",
         "IamHost": "Ich leite das Meeting",
         "incorrectRoomLockPassword": "Falsches Passwort",
         "incorrectPassword": "Name oder Passwort ungültig",
@@ -257,16 +258,21 @@
         "muteParticipantBody": "Sie können die Stummschaltung anderer Personen nicht aufheben, aber eine Person kann ihre eigene Stummschaltung jederzeit beenden.",
         "muteParticipantButton": "Stummschalten",
         "muteParticipantDialog": "Wollen Sie diese Person wirklich stummschalten? Sie können die Stummschaltung nicht wieder aufheben, die Person kann dies aber jederzeit selbst tun.",
+        "muteParticipantsVideoDialog": "Wollen Sie die Kamera dieser Person wirklich deaktivieren? Sie können die Kamera nicht wieder aktivieren, die Person kann dies aber jederzeit selbst tun.",
         "muteParticipantTitle": "Person stummschalten?",
         "muteParticipantsVideoButton": "Kamera ausschalten",
         "muteParticipantsVideoTitle": "Die Kamera von dieser Person ausschalten?",
         "muteParticipantsVideoBody": "Sie können die Kamera nicht wieder aktivieren, die Teilnehmer können dies aber jederzeit wieder ändern.",
+        "noDropboxToken": "Kein gültiges Dropbox-Token",
         "Ok": "OK",
         "password": "Passwort",
         "passwordLabel": "Dieses Meeting wurde gesichert. Bitte geben Sie das $t(lockRoomPasswordUppercase) ein, um dem Meeting beizutreten.",
         "passwordNotSupported": "Das Festlegen eines Konferenzpassworts wird nicht unterstützt.",
         "passwordNotSupportedTitle": "$t(lockRoomPasswordUppercase) nicht unterstützt",
         "passwordRequired": "$t(lockRoomPasswordUppercase) erforderlich",
+        "permissionErrorTitle": "Berechtigung benötigt",
+        "permissionCameraRequiredError": "Der Zugriff auf die Kamera wird benötigt, um in Videokonferenzen teilzunehmen. Bitte in den Einstellungen zulassen",
+        "permissionMicRequiredError": "Der Zugriff auf das Mikrofon wird benötigt, um an Konferenzen mit Ton teilzunehmen. Bitte in den Einstellungen zulassen",
         "popupError": "Ihr Browser blockiert Pop-ups von dieser Website. Bitte aktivieren Sie Pop-ups in den Sicherheitseinstellungen des Browsers und versuchen Sie es erneut.",
         "popupErrorTitle": "Pop-up blockiert",
         "readMore": "mehr",
@@ -300,6 +306,13 @@
         "sessTerminated": "Konferenz beendet",
         "sessionRestarted": "Konferenz neugestartet",
         "Share": "Teilen",
+        "shareAudio": "Fortfahren",
+        "shareAudioTitle" : "Wie kann Audio geteilt werden",
+        "shareAudioWarningTitle": "Sie müssen die Bildschirmfreigabe ausschalten, bevor Sie Audio teilen können",
+        "shareAudioWarningH1": "Wenn Sie Ihr Audio teilen wollen:",
+        "shareAudioWarningD1": "müssen Sie Ihre Bildschirmfreigabe stoppen, bevor Sie Audio teilen können.",
+        "shareAudioWarningD2": "müssen Sie Ihre Bildschirmfreigabe neustarten und die Option \"Audio freigeben\" auswählen.",
+        "shareMediaWarningGenericH2": "Wenn Sie Ihren Bildschirm und Audio teilen wollen",
         "shareVideoLinkError": "Bitte einen gültigen YouTube-Link angeben.",
         "shareVideoTitle": "Video teilen",
         "shareYourScreen": "Bildschirmfreigabe ein-/ausschalten",
@@ -307,6 +320,10 @@
         "startLiveStreaming": "Livestream starten",
         "startRecording": "Aufnahme starten",
         "startRemoteControlErrorMessage": "Beim Versuch, die Fernsteuerung zu starten, ist ein Fehler aufgetreten!",
+        "shareScreenWarningTitle": "Sie müssen die Audiofreigabe beenden, bevor Sie den Bildschirm freigeben können",
+        "shareScreenWarningH1": "Wenn Sie Ihren Bildschirm freigeben wollen:",
+        "shareScreenWarningD1": "müssen Sie Ihre Audiofreigabe stoppen, bevor Sie ihren Bildschirm freigeben.",
+        "shareScreenWarningD2": "müssen Sie Ihre Audiofreigabe stoppen und dann die Bildschirmfreigabe mit der Option \"Audio freigeben\" starten.",
         "stopLiveStreaming": "Livestream stoppen",
         "stopRecording": "Aufnahme stoppen",
         "stopRecordingWarning": "Sind Sie sicher, dass Sie die Aufnahme stoppen möchten?",
@@ -323,6 +340,9 @@
         "userIdentifier": "Benutzername",
         "userPassword": "Passwort",
         "videoLink": "Video-Link",
+        "viewUpgradeOptions": "Upgradeoptionen anzeigen",
+        "viewUpgradeOptionsContent": "Sie müssen Ihren Tarif erweitern, um Premium-Features wie Aufnahme, Transkription, RTMP-Streaming und mehr zu nutzen.",
+        "viewUpgradeOptionsTitle": "Sie haben ein Premium-Feature entdeckt!",
         "WaitForHostMsg": "Die Konferenz <b>{{room}}</b> wurde noch nicht gestartet. Falls Sie die Konferenz leiten, authentifizieren Sie sich bitte. Warten Sie andernfalls, bis die Konferenz gestartet wird.",
         "WaitForHostMsgWOk": "Die Konferenz <b>{{room}}</b> wurde noch nicht gestartet. Falls Sie die Konferenz leiten, authentifizieren Sie sich bitte. Warten Sie andernfalls, bis die Konferenz gestartet wird.",
         "WaitingForHostTitle": "Warten auf den Beginn der Konferenz …",
@@ -349,7 +369,6 @@
         "blur": "Hintergrund unscharf",
         "slightBlur": "Hintergrund leicht unscharf",
         "removeBackground": "Hintergrund entfernen",
-        "uploadImage": "Bild hochladen",
         "addBackground": "Hintergrund hinzufügen",
         "pleaseWait": "Bitte warten...",
         "none": "keiner",
@@ -363,7 +382,8 @@
         "image6" : "Wald",
         "image7" : "Sonnenaufgang",
         "desktopShareError": "Desktop konnte nicht freigegeben werden",
-        "desktopShare":"Desktopfreigabe"
+        "desktopShare": "Desktopfreigabe",
+        "webAssemblyWarning": "WebAssembly wird nicht unterstützt"
     },
     "feedback": {
         "average": "Durchschnittlich",
@@ -400,6 +420,10 @@
         "invitePhone": "Wenn Sie stattdessen per Telefon beitreten möchten, wählen sie: {{number}},,{{conferenceID}}#\n",
         "invitePhoneAlternatives": "Suchen Sie nach einer anderen Einwahlnummer ?\nEinwahlnummern der Konferenz anzeigen: {{url}}\n\n\nWenn Sie sich auch über ein Raumtelefon einwählen, nehmen Sie teil, ohne sich mit dem Ton zu verbinden: {{silentUrl}}",
         "inviteSipEndpoint": "Um mit SIP teilzunehmen, folgende Adresse nutzen: {{sipUri}}",
+        "inviteTextiOSPersonal": "{{name}} lädt Sie zu einem Meeting ein.",
+        "inviteTextiOSJoinSilent": "Wenn Sie über ein Konferenztelefon teilnehmen, können Sie diesen Link nutzen um ohne Ton an der Konferenz teilzunehmen: {{silentUrl}}.",
+        "inviteTextiOSInviteUrl": "Am Meeting teilnehmen: {{inviteUrl}}.",
+        "inviteTextiOSPhone": "Nutzen Sie folgende Nummer um via Telefon teilzunehmen: {{number}},,{{conferenceID}}#. Wenn Sie nach einer anderen Einwahlnummer suchen, finden Sie die vollständige Liste hier: {{didUrl}}.",
         "inviteURLFirstPartGeneral": "Sie wurden zur Teilnahme an einem Meeting eingeladen.",
         "inviteURLFirstPartPersonal": "{{name}} lädt Sie zu einem Meeting ein.\n",
         "inviteURLSecondPart": "\nAm Meeting teilnehmen:\n{{url}}\n",
@@ -410,6 +434,7 @@
         "noRoom": "Keine Konferenz für die Einwahlinformationen angegeben.",
         "numbers": "Einwahlnummern",
         "password": "$t(lockRoomPasswordUppercase):",
+        "sip": "SIP-Adresse",
         "title": "Teilen",
         "tooltip": "Freigabe-Link und Einwahlinformationen für dieses Meeting",
         "label": "Einwahlinformationen"
@@ -520,6 +545,7 @@
         "focus": "Konferenzleitung",
         "focusFail": "{{component}} ist im Moment nicht verfügbar – wiederholen in {{ms}} Sekunden",
         "grantedTo": "Moderationsrechte an {{to}} vergeben!",
+        "hostAskedUnmute": "Die Moderation bittet Sie, das Mikrofon zu aktivieren",
         "invitedOneMember": "{{name}} wurde eingeladen",
         "invitedThreePlusMembers": "{{name}} und {{count}} andere wurden eingeladen",
         "invitedTwoMembers": "{{first}} und {{second}} wurden eingeladen",
@@ -535,7 +561,7 @@
         "passwordRemovedRemotely": "$t(lockRoomPasswordUppercase) von einer anderen Person entfernt",
         "passwordSetRemotely": "$t(lockRoomPasswordUppercase) von einer anderen Person gesetzt",
         "raisedHand": "{{name}} möchte sprechen.",
-        "screenShareNoAudio": " Share audio box was not checked in the window selection screen.",
+        "screenShareNoAudio": "Die Option \"Audio freigeben\" wurde bei der Auswahl des Fensters nicht ausgewählt.",
         "screenShareNoAudioTitle": "Share audio was not checked",
         "somebody": "Jemand",
         "startSilentTitle": "Sie sind ohne Audioausgabe beigetreten!",
@@ -550,28 +576,40 @@
         "oldElectronClientDescription1": "Sie scheinen eine alte Version des Jitsi-Meet-Clients zu nutzen. Diese hat bekannte Schwachstellen. Bitte aktualisieren Sie auf unsere ",
         "oldElectronClientDescription2": "aktuelle Version",
         "oldElectronClientDescription3": "!",
+        "moderationInEffectDescription": "Bitte melden um zu sprechen",
+        "moderationInEffectCSDescription": "Bitte melden um ein Video zu teilen",
+        "moderationInEffectVideoDescription": "Bitte melden um die Kamera zu starten",
+        "moderationInEffectTitle": "Das Mikrofon ist von der Moderation gesperrt",
+        "moderationInEffectCSTitle": "Die Videofreigabe ist von der Moderation gesperrt",
+        "moderationInEffectVideoTitle": "Die Kamera ist von der Moderation gesperrt",
+        "moderationRequestFromModerator": "Die Moderation bittet Sie, das Mikrofon zu aktivieren",
+        "moderationRequestFromParticipant": "möchte sprechen",
+        "moderationStartedTitle": "Moderation gestartet",
+        "moderationStoppedTitle": "Moderation gestoppt",
+        "moderationToggleDescription": "von {{participantDisplayName}}",
+        "raiseHandAction": "Melden",
         "groupTitle": "Benachrichtigungen"
     },
     "participantsPane": {
         "close": "Schließen",
+        "header": "Anwesende",
         "headings": {
             "lobby": "Lobby ({{count}})",
-            "participantsList": "Teilnehmer ({{count}})"
-        },
-        "actions": {
-            "muteAll": "Alle stummschalten",
-            "stopVideo": "Video stoppen"
-        }
-    },
-    "participantsPane": {
-        "headings": {
-            "lobby": "Lobby ({{count}})",
-            "participantsList": "Anwesende ({{count}})"
+            "participantsList": "Anwesende ({{count}})",
+            "waitingLobby": "In der Lobby ({{count}})"
         },
         "actions": {
+            "allow": "Anwesenden erlauben:",
+            "blockEveryoneMicCamera": "Kamera und Mikrofon von allen sperren",
             "invite": "Person einladen",
+            "askUnmute": "Anfragen, Stummschaltung aufzuheben",
+            "mute": "Stummschalten",
             "muteAll": "Alle stummschalten",
-            "stopVideo": "Kamera ausschalten"
+            "muteEveryoneElse": "Alle anderen stummschalten",
+            "startModeration": "Stummschaltung aufheben oder Kamera aktivieren",
+            "stopEveryonesVideo": "Alle Kameras ausschalten",
+            "stopVideo": "Kamera ausschalten",
+            "unblockEveryoneMicCamera": "Kamera und Mikrofon von allen entsperren"
         }
     },
     "passwordSetRemotely": "von einer anderen Person gesetzt",
@@ -626,9 +664,9 @@
         "linkCopied": "Link in die Zwischenablage kopiert",
         "lookGood": "Ihr Mikrofon scheint zu funktionieren.",
         "or": "oder",
-        "keyboardShortcuts" : "Tastaturkurzbefehle aktivieren",
         "premeeting": "Vorschau",
         "showScreen": "Konferenzvorschau aktivieren",
+        "keyboardShortcuts" : "Tastaturkurzbefehle aktivieren",
         "startWithPhone": "Mit Telefonaudio starten",
         "screenSharingError": "Fehler bei Bildschirmfreigabe:",
         "videoOnlyError": "Videofehler:",
@@ -665,12 +703,15 @@
         "beta": "BETA",
         "busy": "Es werden Ressourcen für eine Aufnahme bereitgestellt. Bitte in ein paar Minuten erneut versuchen.",
         "busyTitle": "Alle Aufnahme-Instanzen sind in Gebrauch",
+        "copyLink": "Link kopieren",
         "error": "Die Aufzeichnung ist fehlgeschlagen. Bitte versuchen Sie es erneut.",
+        "errorFetchingLink": "Der Link zur Aufzeichnung konnte nicht geladen werden.",
         "expandedOff": "Aufzeichnung wurde gestoppt",
         "expandedOn": "Das Meeting wird momentan aufgezeichnet.",
         "expandedPending": "Aufzeichnung wird gestartet…",
         "failedToStart": "Die Aufnahme konnte nicht gestartet werden",
         "fileSharingdescription": "Aufzeichnung mit den Personen der Konferenz teilen",
+        "linkGenerated": "Link zur Aufzeichnung wurde generiert.",
         "live": "LIVE",
         "loggedIn": "Als {{userName}} angemeldet",
         "off": "Aufnahme gestoppt",
@@ -685,7 +726,8 @@
         "signIn": "Anmelden",
         "signOut": "Abmelden",
         "unavailable": "Oh! Der {{serviceName}} ist aktuell nicht verfügbar. Wir arbeiten an der Behebung des Problems. Bitte versuchen Sie es später noch einmal.",
-        "unavailableTitle": "Aufnahme nicht verfügbar"
+        "unavailableTitle": "Aufnahme nicht verfügbar",
+        "uploadToCloud": "In die Cloud hochladen"
     },
     "sectionList": {
         "pullToRefresh": "Ziehen, um zu aktualisieren"
@@ -704,8 +746,13 @@
             "signedIn": "Momentan wird auf Kalendertermine von {{email}} zugegriffen. Klicken Sie auf die folgende Schaltfläche „Trennen“, um den Zugriff auf die Kalendertermine zu stoppen.",
             "title": "Kalender"
         },
+        "desktopShareFramerate": "Framerate für Bildschirmfreigabe",
+        "desktopShareWarning": "Sie müssen die Bildschirmfreigabe neustarten, damit die Einstellung übernommen wird.",
+        "desktopShareHighFpsWarning": "Eine höhere Framerate könnte sich auf Ihre Datenrate auswirken. Sie müssen die Bildschirmfreigabe neustarten, damit die Einstellung übernommen wird.",
         "devices": "Geräte",
         "followMe": "Follow-me für alle Personen",
+        "framesPerSecond": "FPS",
+        "incomingMessage": "Eingehende Nachricht",
         "language": "Sprache",
         "loggedIn": "Als {{name}} angemeldet",
         "microphones": "Mikrofon",
@@ -713,12 +760,18 @@
         "more": "Mehr",
         "name": "Name",
         "noDevice": "Kein",
+        "participantJoined": "Neue Person nimmt teil",
+        "participantLeft": "Person verlässt die Konferenz",
+        "playSounds": "Hinweistöne aktiviert",
+        "sameAsSystem": "Wie System ({{label}})",
         "selectAudioOutput": "Audioausgabe",
         "selectCamera": "Kamera",
         "selectMic": "Mikrofon",
+        "sounds": "Hinweistöne",
         "speakers": "Lautsprecher",
-        "startAudioMuted": "Alle Personen treten stumm geschaltet bei",
+        "startAudioMuted": "Alle Personen treten stummgeschaltet bei",
         "startVideoMuted": "Alle Personen treten ohne Video bei",
+        "talkWhileMuted": "Wenn bei Stummschaltung gesprochen wird",
         "title": "Einstellungen"
     },
     "settingsView": {
@@ -767,12 +820,14 @@
         "title": "Die Konferenz wurde unterbrochen, weil der Standby-Modus aktiviert wurde."
     },
     "toolbar": {
-            "accessibilityLabel": {
+        "accessibilityLabel": {
             "audioOnly": "„Nur Audio“ ein-/ausschalten",
             "audioRoute": "Audiogerät auswählen",
+            "boo": "Buhen",
             "callQuality": "Qualitätseinstellungen",
             "cc": "Untertitel ein-/ausschalten",
             "chat": "Chatfenster öffnen / schließen",
+            "clap": "Klatschen",
             "document": "Geteiltes Dokument schließen",
             "download": "Unsere Apps herunterladen",
             "embedMeeting": "Konferenz einbetten",
@@ -783,6 +838,8 @@
             "help": "Hilfe",
             "invite": "Person einladen",
             "kick": "Person entfernen",
+            "laugh": "Lachen",
+            "like": "Daumen nach oben",
             "lobbyButton": "Lobbymodus ein-/ausschalten",
             "localRecording": "Lokale Aufzeichnungssteuerelemente ein-/ausschalten",
             "lockRoom": "Konferenzpasswort ein-/ausschalten",
@@ -795,10 +852,12 @@
             "muteEveryonesVideo": "Alle Kameras ausschalten",
             "muteEveryoneElsesVideo": "Alle anderen Kameras ausschalten",
             "participants": "Anwesende",
+            "party": "Konfetti",
             "pip": "Bild-in-Bild-Modus ein-/ausschalten",
             "privateMessage": "Private Nachricht senden",
             "profile": "Profil bearbeiten",
             "raiseHand": "Hand erheben / senken",
+            "reactionsMenu": "Interaktionsmenü öffnen / schließen",
             "recording": "Aufzeichnung ein-/ausschalten",
             "remoteMute": "Personen stummschalten",
             "remoteVideoMute": "Kamera von dieser Person ausschalten",
@@ -811,23 +870,29 @@
             "shortcuts": "Tastenkombinationen ein-/ausblenden",
             "show": "Im Vordergrund anzeigen",
             "speakerStats": "Sprechstatistik ein-/ausblenden",
+            "surprised": "Überrascht",
             "tileView": "Kachelansicht ein-/ausschalten",
             "toggleCamera": "Kamera wechseln",
             "toggleFilmstrip": "Miniaturansichten ein-/ausschalten",
             "videomute": "„Video stummschalten“ ein-/ausschalten",
+            "videoblur": "Unscharfer Hintergrund ein-/ausschalten",
             "selectBackground": "Hintergrund auswählen",
             "expand": "Ausklappen",
             "collapse": "Einklappen"
         },
         "addPeople": "Personen zur Konferenz hinzufügen",
         "audioSettings": "Ton-Einstellungen",
+        "videoSettings": "Kameraeinstellungen",
         "audioOnlyOff": "Modus „Nur Audio“ deaktivieren",
         "audioOnlyOn": "Modus „Nur Audio“ aktivieren",
         "audioRoute": "Audiogerät auswählen",
         "authenticate": "Anmelden",
+        "boo": "Buhen",
         "callQuality": "Qualitätseinstellungen",
         "chat": "Chat öffnen / schließen",
+        "clap": "Klatschen",
         "closeChat": "Chat schließen",
+        "closeReactionsMenu": "Interationsmenü schließen",
         "documentClose": "Geteiltes Dokument schließen",
         "documentOpen": "Geteiltes Dokument öffnen",
         "download": "Unsere Apps herunterladen",
@@ -841,6 +906,8 @@
         "hangup": "Konferenz verlassen",
         "help": "Hilfe",
         "invite": "Personen einladen",
+        "laugh": "Lachen",
+        "like": "Daumen hoch",
         "lobbyButtonDisable": "Lobbymodus deaktivieren",
         "lobbyButtonEnable": "Lobbymodus aktivieren",
         "login": "Anmelden",
@@ -859,12 +926,20 @@
         "noisyAudioInputTitle": "Ihr Mikrofon scheint lärmintensiv zu sein!",
         "noisyAudioInputDesc": "Es klingt, als ob Ihr Mikrofon Störgeräusche verursacht. Bitte überlegen Sie, ob Sie das Gerät stummschalten oder austauschen wollen.",
         "openChat": "Chat öffnen",
+        "openReactionsMenu": "Interationsmenü öffnen",
         "participants": "Anwesende",
+        "party": "Konfetti",
         "pip": "Bild-in-Bild-Modus einschalten",
         "privateMessage": "Private Nachricht senden",
         "profile": "Profil bearbeiten",
         "raiseHand": "Hand erheben / senken",
         "raiseYourHand": "Melden",
+        "reactionBoo": "Buhen senden",
+        "reactionClap": "Klatschen senden",
+        "reactionLaugh": "Lachen senden",
+        "reactionLike": "Daumen hoch senden",
+        "reactionParty": "Konfetti senden",
+        "reactionSurprised": "Überrascht senden",
         "security": "Sicherheitsoptionen",
         "Settings": "Einstellungen",
         "shareaudio": "Audio teilen",
@@ -874,14 +949,15 @@
         "speakerStats": "Sprechstatistik",
         "startScreenSharing": "Bildschirmfreigabe starten",
         "startSubtitles": "Untertitel einschalten",
+        "stopAudioSharing": "Audiofreigabe stoppen",
         "stopScreenSharing": "Bildschirmfreigabe stoppen",
         "stopSubtitles": "Untertitel ausschalten",
         "stopSharedVideo": "YouTube-Video stoppen",
+        "surprised": "Überrascht",
         "talkWhileMutedPopup": "Versuchen Sie zu sprechen? Ihr Mikrofon ist stummgeschaltet.",
         "tileViewToggle": "Kachelansicht ein-/ausschalten",
         "toggleCamera": "Kamera wechseln",
         "videomute": "Kamera starten / stoppen",
-        "videoSettings": "Video-Einstellungen",
         "selectBackground": "Hintergrund auswählen"
     },
     "transcribing": {
@@ -975,10 +1051,10 @@
         "info": "Einwahlinformationen",
         "join": "ERSTELLEN / BEITRETEN",
         "jitsiOnMobile": "Jitsi unterwegs – einfach unsere Apps herunterladen und Meetings von überall starten",
-        "moderatedMessage": "Oder <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">reservieren Sie sich eine Konferenz-URL</a>, die nur Sie moderieren.",
         "mobileDownLoadLinkIos": "iOS App Download",
         "mobileDownLoadLinkAndroid": "Android App Download",
         "mobileDownLoadLinkFDroid": "F-Droid App Download",
+        "moderatedMessage": "Oder <a href=\"{{url}}\" rel=\"noopener noreferrer\" target=\"_blank\">reservieren Sie sich eine Konferenz-URL</a>, die nur Sie moderieren.",
         "privacy": "Datenschutz",
         "recentList": "Verlauf",
         "recentListDelete": "Eintrag löschen",
@@ -1009,6 +1085,7 @@
     },
     "lobby": {
         "admit": "Zulassen",
+        "admitAll": "Alle zulassen",
         "knockingParticipantList": "Liste anklopfender Personen",
         "allow": "Annehmen",
         "backToKnockModeButton": "Kein Passwort, stattdessen Beitritt anfragen",
@@ -1039,6 +1116,7 @@
         "passwordField": "Konferenzpasswort eingeben",
         "passwordJoinButton": "Beitreten",
         "reject": "Ablehnen",
+        "rejectAll": "Alle ablehnen",
         "toggleLabel": "Lobby aktivieren"
     }
 }

lang/main-pt.json

@@ -1,22 +1,33 @@
 {
     "addPeople": {
         "add": "Convidar",
-        "countryNotSupported": "Ainda não suportamos este destino.",
-        "countryReminder": "Está a ligar de fora dos EUA? Por favor, certifique-se de começar com o código do país!",
-        "disabled": "Você não pode convidar pessoas.",
+        "addContacts": "Convidar os seus contactos",
+        "copyInvite": "Cópia do convite para reunião",
+        "copyLink": "Cópia do link da reunião",
+        "copyStream": "Copiar do link de transmissão em direto",
+        "contacts": "contactos",
+        "countryNotSupported": "Ainda não temos suporte para este destino.",
+        "countryReminder": "Está a telefonar para fora dos EUA? Por favor, certifique-se de que começa com o código do país!",
+        "defaultEmail": "O seu e-mail predefinido",
+        "disabled": "Não pode convidar outras pessoas.",
         "failedToAdd": "Falha ao adicionar participantes",
-        "footerText": "Digitação está desativada.",
-        "inviteMorePrompt": "Convide mais pessoas",
-        "loading": "A procurar por pessoas e números de telefone",
-        "loadingNumber": "A validar o número de telefone",
-        "loadingPeople": "A procurar pessoas para convidar",
-        "noResults": "Nenhum resultado de busca correspondente",
-        "noValidNumbers": "Por favor, digite um número de telefone",
-        "searchNumbers": "Adicionar números de telefone",
-        "searchPeople": "Pesquisar pessoas",
-        "searchPeopleAndNumbers": "Pesquisar por pessoas ou adicionar os seus números de telefone",
+        "footerText": "A marcação está desactivada.",
+        "googleEmail": "E-mail do Google",
+        "inviteMoreHeader": "Você é o único na reunião",
+        "inviteMoreMailSubject": "Participar na reunião {{appName}}",
+        "inviteMorePrompt": "Convidar mais pessoas",
+        "linkCopied": "Link copiado para a área de transferência",
+        "noResults": "Sem resultados de pesquisa correspondentes",
+        "outlookEmail": "E-mail do Outlook",
+        "phoneNumbers": "números de telefone",
+        "searching": "A pesquisar...",
+        "shareInvite": "Partilhar convite de reunião",
+        "shareLink": "Partilhar o link da reunião para convidar outras pessoas",
+        "shareStream": "Partilhar o link de transmissão em direto",
+        "sipAddresses": "endereços SIP",
         "telephone": "Telefone: {{number}}",
-        "title": "Convide pessoas para sua reunião"
+        "title": "Convidar pessoas para esta reunião",
+        "yahooEmail": "E-mail do Yahoo"
     },
     "audioDevices": {
         "bluetooth": "Bluetooth",
@@ -591,26 +602,39 @@
     },
     "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.",
-            "disconnect": "Desconectar",
-            "microsoftSignIn": "Entrar com Microsoft",
-            "signedIn": "Atualmente acessando eventos do calendário para {{email}}. Clique no botão Desconectar abaixo para parar de acessar os eventos da agenda.",
+            "about": "A integração do calendário {{appName}} é utilizada para aceder com segurança ao seu calendário para que este possa ler os próximos eventos.",
+            "disconnect": "Desligar",
+            "microsoftSignIn": "Iniciar sessão com a Microsoft",
+            "signedIn": "Atualmente a aceder a eventos de calendário por {{email}}. Clique no botão Desconectar abaixo para parar de aceder a eventos de calendário.",
             "title": "Calendário"
         },
+        "desktopShareFramerate": "Taxa de fotogramas para partilha do ambiente de trabalho",
+        "desktopShareWarning": "É necessário reiniciar a partilha do ecrã para que as novas definições entrem em vigor.",
+        "desktopShareHighFpsWarning": "Uma taxa de fotogramas mais elevada para a partilha do ambiente de trabalho pode afectar a sua largura de banda. É necessário reiniciar a partilha de ecrã para que as novas definições entrem em vigor.",
         "devices": "Dispositivos",
         "followMe": "Todos me seguem",
+        "framesPerSecond": "fotogramas-por-segundo",
+        "incomingMessage": "Receber mensagem",
         "language": "Idioma",
-        "loggedIn": "Conectado como {{name}}",
+        "loggedIn": "Sessão iniciada como {{name}}",
+        "microphones": "Microfones",
         "moderator": "Moderador",
         "more": "Mais",
         "name": "Nome",
         "noDevice": "Nenhum",
+        "participantJoined": "Entrar participante",
+        "participantLeft": "Sair participante",
+        "playSounds": "Reproduzir som quando",
+        "sameAsSystem": "O mesmo que o sistema ({{label}})",
         "selectAudioOutput": "Saída de áudio",
-        "selectCamera": "Câmera",
+        "selectCamera": "Câmara",
         "selectMic": "Microfone",
-        "startAudioMuted": "Todos iniciam mudos",
-        "startVideoMuted": "Todos iniciam ocultos",
-        "title": "Configurações"
+        "sounds": "Sons",
+        "speakers": "Participantes",
+        "startAudioMuted": "Todos começam com microfone desligado",
+        "startVideoMuted": "Todos começam com câmara desligada",
+        "talkWhileMuted": "se fala e está com microfone desligado",
+        "title": "Definições"
     },
     "settingsView": {
         "advanced": "",
@@ -703,7 +727,7 @@
         "toggleFilmstrip": "Mudar para película de filme",
         "videomute": "Iniciar / Parar câmara",
         "videoblur": "Mudar o desfoque de vídeo",
-        "selectBackground": "Selecionar o fundo",
+        "selectBackground": "Selecionar plano de fundo",
         "expand": "Expandir",
         "collapse": "Colapsar"
     },
@@ -770,7 +794,7 @@
     "tileViewToggle": "Mudar para vista em quadrícula",
     "toggleCamera": "Mudar a câmara",
     "videomute": "Iniciar / Parar câmara",
-    "selectBackground": "Selecionar o fundo"
+    "selectBackground": "Selecionar plano de fundo"
     },
     "transcribing": {
         "ccButtonTooltip": "Iniciar/parar legendas",

lang/main.json

@@ -258,10 +258,12 @@
         "muteParticipantBody": "You won't be able to unmute them, but they can unmute themselves at any time.",
         "muteParticipantButton": "Mute",
         "muteParticipantDialog": "Are you sure you want to mute this participant? You won't be able to unmute them, but they can unmute themselves at any time.",
+        "muteParticipantsVideoDialog": "Are you sure you want to turn off this participant's camera? You won't be able to turn the camera back on, but they can turn it back on at any time.",
         "muteParticipantTitle": "Mute this participant?",
         "muteParticipantsVideoButton": "Disable camera",
         "muteParticipantsVideoTitle": "Disable camera of this participant?",
         "muteParticipantsVideoBody": "You won't be able to turn the camera back on, but they can turn it back on at any time.",
+        "noDropboxToken": "No valid Dropbox token",
         "Ok": "OK",
         "password": "Password",
         "passwordLabel": "The meeting has been locked by a participant. Please enter the $t(lockRoomPassword) to join.",
@@ -590,18 +592,24 @@
     },
     "participantsPane": {
         "close": "Close",
+        "header": "Participants",
         "headings": {
             "lobby": "Lobby ({{count}})",
-            "participantsList": "Meeting participants ({{count}})"
+            "participantsList": "Meeting participants ({{count}})",
+            "waitingLobby": "Waiting in lobby ({{count}})"
         },
         "actions": {
             "allow": "Allow attendees to:",
+            "blockEveryoneMicCamera": "Block everyone's mic and camera",
             "invite": "Invite Someone",
             "askUnmute": "Ask to unmute",
+            "mute": "Mute",
             "muteAll": "Mute all",
+            "muteEveryoneElse": "Mute everyone else",
             "startModeration": "Unmute themselves or start video",
             "stopEveryonesVideo": "Stop everyone's video",
-            "stopVideo": "Stop video"
+            "stopVideo": "Stop video",
+            "unblockEveryoneMicCamera": "Unblock everyone's mic and camera"
         }
     },
     "passwordSetRemotely": "Set by another participant",
@@ -744,6 +752,7 @@
         "devices": "Devices",
         "followMe": "Everyone follows me",
         "framesPerSecond": "frames-per-second",
+        "incomingMessage": "Incoming message",
         "language": "Language",
         "loggedIn": "Logged in as {{name}}",
         "microphones": "Microphones",
@@ -751,13 +760,18 @@
         "more": "More",
         "name": "Name",
         "noDevice": "None",
+        "participantJoined": "Participant Joined",
+        "participantLeft": "Participant Left",
+        "playSounds": "Play sound on",
         "sameAsSystem": "Same as system ({{label}})",
         "selectAudioOutput": "Audio output",
         "selectCamera": "Camera",
         "selectMic": "Microphone",
+        "sounds": "Sounds",
         "speakers": "Speakers",
         "startAudioMuted": "Everyone starts muted",
         "startVideoMuted": "Everyone starts hidden",
+        "talkWhileMuted": "Talk while muted",
         "title": "Settings"
     },
     "settingsView": {
@@ -823,8 +837,8 @@
             "hangup": "Leave the meeting",
             "help": "Help",
             "invite": "Invite people",
-            "joy": "Laugh",
             "kick": "Kick participant",
+            "laugh": "Laugh",
             "like": "Thumbs Up",
             "lobbyButton": "Enable/disable lobby mode",
             "localRecording": "Toggle local recording controls",
@@ -892,7 +906,7 @@
         "hangup": "Leave the meeting",
         "help": "Help",
         "invite": "Invite people",
-        "joy": "Laugh",
+        "laugh": "Laugh",
         "like": "Thumbs Up",
         "lobbyButtonDisable": "Disable lobby mode",
         "lobbyButtonEnable": "Enable lobby mode",
@@ -922,7 +936,7 @@
         "raiseYourHand": "Raise your hand",
         "reactionBoo": "Send boo reaction",
         "reactionClap": "Send clap reaction",
-        "reactionJoy": "Send laugh reaction",
+        "reactionLaugh": "Send laugh reaction",
         "reactionLike": "Send thumbs up reaction",
         "reactionParty": "Send party popper reaction",
         "reactionSurprised": "Send surprised reaction",
@@ -1102,6 +1116,7 @@
         "passwordField": "Enter meeting password",
         "passwordJoinButton": "Join",
         "reject": "Reject",
+        "rejectAll": "Reject all",
         "toggleLabel": "Enable lobby"
     }
 }

logging_config.js

@@ -12,6 +12,9 @@ var loggingConfig = {
     // {@link #defaultLogLevel}:
     'modules/RTC/TraceablePeerConnection.js': 'info',
     'modules/statistics/CallStats.js': 'info',
+    'modules/sdp/SDPUtil.js': 'info',
+    'modules/xmpp/JingleSessionPC.js': 'info',
+    'modules/xmpp/strophe.jingle.js': 'info',
     'modules/xmpp/strophe.util.js': 'log'
 };
 

modules/API/API.js

@@ -574,6 +574,12 @@ function initCommands() {
             });
             break;
         }
+        case 'get-custom-avatar-backgrounds' : {
+            callback({
+                avatarBackgrounds: APP.store.getState()['features/dynamic-branding'].avatarBackgrounds
+            });
+            break;
+        }
         default:
             return false;
         }

modules/API/external/external_api.js

@@ -170,7 +170,7 @@ function parseArguments(args) {
 
     switch (typeof firstArg) {
     case 'string': // old arguments format
-    case undefined: {
+    case 'undefined': {
         // Not sure which format but we are trying to parse the old
         // format because if the new format is used everything will be undefined
         // anyway.
@@ -769,6 +769,17 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         return getCurrentDevices(this._transport);
     }
 
+    /**
+     * Returns any custom avatars backgrounds.
+     *
+     * @returns {Promise} - Resolves with the list of custom avatar backgrounds.
+     */
+    getCustomAvatarBackgrounds() {
+        return this._transport.sendRequest({
+            name: 'get-custom-avatar-backgrounds'
+        });
+    }
+
     /**
      * Returns the current livestream url.
      *

package-lock.json

@@ -2913,9 +2913,9 @@
       "integrity": "sha512-cPqjjzuFWNK3BSKLm0abspP0sp/IGOli4p5I5fKFAzdS8fvjdOwDCfZqAaIiXd9lPkOWi3SUUfZof3hEb7J/uw=="
     },
     "@react-native-async-storage/async-storage": {
-      "version": "1.13.2",
-      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.13.2.tgz",
-      "integrity": "sha512-isTDvUApRJPVWFxV15yrQSOGqarX7cIedq/y4N5yWSnotf68D9qvDEv1I7rCXhkBDi0u4OJt6GA9dksUT0D3wg==",
+      "version": "1.15.5",
+      "resolved": "https://registry.npmjs.org/@react-native-async-storage/async-storage/-/async-storage-1.15.5.tgz",
+      "integrity": "sha512-4AYehLH39B9a8UXCMf3ieOK+G61wGMP72ikx6/XSMA0DUnvx0PgaeaT2Wyt06kTrDTy8edewKnbrbeqwaM50TQ==",
       "requires": {
         "deep-assign": "^3.0.0"
       }
@@ -3102,6 +3102,11 @@
       "resolved": "https://registry.npmjs.org/@react-native-community/netinfo/-/netinfo-4.1.5.tgz",
       "integrity": "sha512-lagdZr9UiVAccNXYfTEj+aUcPCx9ykbMe9puffeIyF3JsRuMmlu3BjHYx1klUHX7wNRmFNC8qVP0puxUt1sZ0A=="
     },
+    "@react-native-community/slider": {
+      "version": "3.0.3",
+      "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-3.0.3.tgz",
+      "integrity": "sha512-8IeHfDwJ9/CTUwFs6x90VlobV3BfuPgNLjTgC6dRZovfCWigaZwVNIFFJnHBakK3pW2xErAPwhdvNR4JeNoYbw=="
+    },
     "@svgr/babel-plugin-add-jsx-attribute": {
       "version": "4.2.0",
       "resolved": "https://registry.npmjs.org/@svgr/babel-plugin-add-jsx-attribute/-/babel-plugin-add-jsx-attribute-4.2.0.tgz",
@@ -7534,6 +7539,11 @@
         }
       }
     },
+    "eme-encryption-scheme-polyfill": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/eme-encryption-scheme-polyfill/-/eme-encryption-scheme-polyfill-2.0.3.tgz",
+      "integrity": "sha512-44CNFMsqzHdKHrzWxlS7xZ8KUHn5XutBqpmCuWzNIynmAyFInHrrD3ozv/RvK9ZhgV6QY6Easx8EWAmxteNodg=="
+    },
     "emoji-regex": {
       "version": "6.5.1",
       "resolved": "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.5.1.tgz",
@@ -8239,7 +8249,8 @@
     "events": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.1.0.tgz",
-      "integrity": "sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg=="
+      "integrity": "sha512-Rv+u8MLHNOdMjTAFeT3nCjHn2aGlx435FP/sDHNaRhDEMwyI/aB22Kj2qIN8R0cw3z28psEQLYwxVKLsKrMgWg==",
+      "dev": true
     },
     "eventsource": {
       "version": "1.0.7",
@@ -11011,6 +11022,11 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-2.2.0.tgz",
       "integrity": "sha1-fYa9VmefWM5qhHBKZX3TkruoGnk="
     },
+    "keymirror": {
+      "version": "0.1.1",
+      "resolved": "https://registry.npmjs.org/keymirror/-/keymirror-0.1.1.tgz",
+      "integrity": "sha1-kYiJ6hP40KQufFVyUO7nE63JXDU="
+    },
     "killable": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/killable/-/killable-1.0.1.tgz",
@@ -11071,8 +11087,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "github:jitsi/lib-jitsi-meet#053a26604da568188a1f99a45a275d1d04e7b8d9",
-      "from": "github:jitsi/lib-jitsi-meet#053a26604da568188a1f99a45a275d1d04e7b8d9",
+      "version": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
+      "from": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
       "requires": {
         "@jitsi/js-utils": "1.0.2",
         "@jitsi/sdp-interop": "github:jitsi/sdp-interop#5fc4af6dcf8a6e6af9fedbcd654412fd47b1b4ae",
@@ -15138,14 +15154,25 @@
         "whatwg-url-without-unicode": "8.0.0-3"
       }
     },
+    "react-native-video": {
+      "version": "5.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-video/-/react-native-video-5.1.1.tgz",
+      "integrity": "sha512-zee8gRUrjPWRoZSEBiMebClqu1iAuCQNLjzqpmXFrRWEoJj7azM3BPqLQWJgsnfLiYUYGySeApC/G60THM5+tw==",
+      "requires": {
+        "keymirror": "^0.1.1",
+        "prop-types": "^15.7.2",
+        "shaka-player": "^2.5.9"
+      }
+    },
     "react-native-watch-connectivity": {
       "version": "0.4.3",
       "resolved": "https://registry.npmjs.org/react-native-watch-connectivity/-/react-native-watch-connectivity-0.4.3.tgz",
       "integrity": "sha512-iqdJ1KpZbR4XGahgVmaeibB7kDhyMT7wrylINgJaYBY38IAiI0LF32VX1umO4pko6n21YF5I/kSeNQ+OXGqqow=="
     },
     "react-native-webrtc": {
-      "version": "github:react-native-webrtc/react-native-webrtc#510d20dd62c1768885a98f36fde83f9e48a723fa",
-      "from": "github:react-native-webrtc/react-native-webrtc#510d20dd62c1768885a98f36fde83f9e48a723fa",
+      "version": "1.92.0",
+      "resolved": "https://registry.npmjs.org/react-native-webrtc/-/react-native-webrtc-1.92.0.tgz",
+      "integrity": "sha512-nztKQ/SmO1DgA3QWCDHHK8ZVDf+5rLbmH42Ukoqnld7ut8/ehmFZXc17aSV/BN0H60jPigGqAMYopt/LZak7Sg==",
       "requires": {
         "base64-js": "^1.1.2",
         "cross-os": "^1.3.0",
@@ -15186,11 +15213,18 @@
       }
     },
     "react-native-youtube-iframe": {
-      "version": "1.2.3",
-      "resolved": "https://registry.npmjs.org/react-native-youtube-iframe/-/react-native-youtube-iframe-1.2.3.tgz",
-      "integrity": "sha512-3O8OFJyohGNlYX4D97aWfLLlhEHhlLHDCLgXM+SsQBwP9r1oLnKgXWoy1gce+Vr8qgrqeQgmx1ki+10AAd4KWQ==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/react-native-youtube-iframe/-/react-native-youtube-iframe-2.1.1.tgz",
+      "integrity": "sha512-vnLzA5zcnMwa1gMqGfvkjaE82NW1Nd2Up4Q1OUz6IKm69xSG/9/m4APZ5fCN8UMhy6lH95iagd497J7jwEwz3w==",
       "requires": {
-        "events": "^3.0.0"
+        "events": "^3.2.0"
+      },
+      "dependencies": {
+        "events": {
+          "version": "3.3.0",
+          "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
+          "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q=="
+        }
       }
     },
     "react-node-resolver": {
@@ -16064,6 +16098,14 @@
         "safe-buffer": "^5.0.1"
       }
     },
+    "shaka-player": {
+      "version": "2.5.22",
+      "resolved": "https://registry.npmjs.org/shaka-player/-/shaka-player-2.5.22.tgz",
+      "integrity": "sha512-PAoeNLUQ/hT/9dY7QvNFgIiDtXSqbYVFuXXtLHh7ytVVqTvI/p4HLwfYShiR+sE/sbsDOr9D5l9D/ztLPhxgtw==",
+      "requires": {
+        "eme-encryption-scheme-polyfill": "^2.0.1"
+      }
+    },
     "shallow-clone": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/shallow-clone/-/shallow-clone-0.1.2.tgz",

package.json

@@ -36,9 +36,10 @@
     "@jitsi/js-utils": "1.0.6",
     "@material-ui/core": "4.11.3",
     "@microsoft/microsoft-graph-client": "1.1.0",
-    "@react-native-async-storage/async-storage": "1.13.2",
+    "@react-native-async-storage/async-storage": "1.15.5",
     "@react-native-community/google-signin": "3.0.1",
     "@react-native-community/netinfo": "4.1.5",
+    "@react-native-community/slider": "3.0.3",
     "@svgr/webpack": "4.3.2",
     "amplitude-js": "8.2.1",
     "base64-js": "1.3.1",
@@ -55,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#053a26604da568188a1f99a45a275d1d04e7b8d9",
+    "lib-jitsi-meet": "github:jitsi/lib-jitsi-meet#6a3df11ffa7a2204b579326e23cdaa85a79521d1",
     "libflacjs": "github:mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.21",
     "moment": "2.29.1",
@@ -86,10 +87,11 @@
     "react-native-svg": "12.1.0",
     "react-native-svg-transformer": "0.14.3",
     "react-native-url-polyfill": "1.2.0",
+    "react-native-video": "5.1.1",
     "react-native-watch-connectivity": "0.4.3",
-    "react-native-webrtc": "github:react-native-webrtc/react-native-webrtc#510d20dd62c1768885a98f36fde83f9e48a723fa",
+    "react-native-webrtc": "1.92.0",
     "react-native-webview": "11.0.2",
-    "react-native-youtube-iframe": "1.2.3",
+    "react-native-youtube-iframe": "2.1.1",
     "react-redux": "7.1.0",
     "react-textarea-autosize": "8.3.0",
     "react-transition-group": "2.4.0",

react/features/always-on-top/AlwaysOnTop.js

@@ -21,6 +21,7 @@ const TOOLBAR_TIMEOUT = 4000;
  */
 type State = {
     avatarURL: string,
+    customAvatarBackgrounds: Array<string>,
     displayName: string,
     formattedDisplayName: string,
     isVideoDisplayed: boolean,
@@ -48,6 +49,7 @@ export default class AlwaysOnTop extends Component<*, State> {
 
         this.state = {
             avatarURL: '',
+            customAvatarBackgrounds: [],
             displayName: '',
             formattedDisplayName: '',
             isVideoDisplayed: true,
@@ -178,7 +180,14 @@ export default class AlwaysOnTop extends Component<*, State> {
      * @returns {ReactElement}
      */
     _renderVideoNotAvailableScreen() {
-        const { avatarURL, displayName, formattedDisplayName, isVideoDisplayed, userID } = this.state;
+        const {
+            avatarURL,
+            customAvatarBackgrounds,
+            displayName,
+            formattedDisplayName,
+            isVideoDisplayed,
+            userID
+        } = this.state;
 
         if (isVideoDisplayed) {
             return null;
@@ -188,7 +197,7 @@ export default class AlwaysOnTop extends Component<*, State> {
             <div id = 'videoNotAvailableScreen'>
                 <div id = 'avatarContainer'>
                     <StatelessAvatar
-                        color = { getAvatarColor(userID) }
+                        color = { getAvatarColor(userID, customAvatarBackgrounds) }
                         id = 'avatar'
                         initials = { getInitials(displayName) }
                         url = { avatarURL } />)
@@ -218,6 +227,12 @@ export default class AlwaysOnTop extends Component<*, State> {
         window.addEventListener('mousemove', this._mouseMove);
 
         this._hideToolbarAfterTimeout();
+        api.getCustomAvatarBackgrounds()
+            .then(res =>
+                this.setState({
+                    customAvatarBackgrounds: res.avatarBackgrounds || []
+                }))
+            .catch(console.error);
     }
 
     /**

react/features/analytics/AnalyticsEvents.js

@@ -795,6 +795,23 @@ export function createToolbarEvent(buttonName, attributes = {}) {
     };
 }
 
+/**
+ * Creates an event associated with a reaction button being clicked/pressed.
+ *
+ * @param {string} buttonName - The identifier of the reaction button which was
+ * clicked/pressed.
+ * @returns {Object} The event in a format suitable for sending via
+ * sendAnalytics.
+ */
+export function createReactionMenuEvent(buttonName) {
+    return {
+        action: 'clicked',
+        actionSubject: buttonName,
+        source: 'reaction.button',
+        type: TYPE_UI
+    };
+}
+
 /**
  * Creates an event which indicates that a local track was muted.
  *

react/features/app/actions.js

@@ -24,7 +24,7 @@ import {
     parseURIString,
     toURLString
 } from '../base/util';
-import { isVpaasMeeting } from '../billing-counter/functions';
+import { isVpaasMeeting } from '../jaas/functions';
 import { clearNotifications, showNotification } from '../notifications';
 import { setFatalError } from '../overlay';
 

react/features/app/components/App.native.js

@@ -11,7 +11,6 @@ import { getFeatureFlag } from '../../base/flags/functions';
 import { Platform } from '../../base/react';
 import { DimensionsDetector, clientResized } from '../../base/responsive-ui';
 import { updateSettings } from '../../base/settings';
-import JitsiThemePaperProvider from '../../base/ui/components/JitsiThemeProvider.native';
 import logger from '../logger';
 
 import { AbstractApp } from './AbstractApp';
@@ -128,12 +127,10 @@ export class App extends AbstractApp {
      */
     _createMainElement(component, props) {
         return (
-            <JitsiThemePaperProvider>
-                <DimensionsDetector
-                    onDimensionsChanged = { this._onDimensionsChanged }>
-                    { super._createMainElement(component, props) }
-                </DimensionsDetector>
-            </JitsiThemePaperProvider>
+            <DimensionsDetector
+                onDimensionsChanged = { this._onDimensionsChanged }>
+                { super._createMainElement(component, props) }
+            </DimensionsDetector>
         );
     }
 

react/features/app/middlewares.any.js

@@ -18,7 +18,6 @@ import '../base/sounds/middleware';
 import '../base/testing/middleware';
 import '../base/tracks/middleware';
 import '../base/user-interaction/middleware';
-import '../billing-counter/middleware';
 import '../calendar-sync/middleware';
 import '../chat/middleware';
 import '../conference/middleware';

react/features/app/reducers.any.js

@@ -25,7 +25,6 @@ import '../base/sounds/reducer';
 import '../base/testing/reducer';
 import '../base/tracks/reducer';
 import '../base/user-interaction/reducer';
-import '../billing-counter/reducer';
 import '../calendar-sync/reducer';
 import '../chat/reducer';
 import '../deep-linking/reducer';
@@ -41,6 +40,7 @@ import '../large-video/reducer';
 import '../lobby/reducer';
 import '../notifications/reducer';
 import '../overlay/reducer';
+import '../participants-pane/reducer';
 import '../reactions/reducer';
 import '../recent-list/reducer';
 import '../recording/reducer';

react/features/base/avatar/components/Avatar.js

@@ -10,6 +10,11 @@ import { StatelessAvatar } from '.';
 
 export type Props = {
 
+    /**
+     * Custom avatar backgrounds from branding.
+     */
+    _customAvatarBackgrounds: Array<string>,
+
     /**
      * The string we base the initials on (this is generated from a list of precedences).
      */
@@ -133,6 +138,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
      */
     render() {
         const {
+            _customAvatarBackgrounds,
             _initialsBase,
             _loadableAvatarUrl,
             className,
@@ -172,7 +178,7 @@ class Avatar<P: Props> extends PureComponent<P, State> {
 
         if (initials) {
             if (dynamicColor) {
-                avatarProps.color = getAvatarColor(colorBase || _initialsBase);
+                avatarProps.color = getAvatarColor(colorBase || _initialsBase, _customAvatarBackgrounds);
             }
 
             avatarProps.initials = initials;
@@ -211,6 +217,7 @@ export function _mapStateToProps(state: Object, ownProps: Props) {
     const _initialsBase = _participant?.name ?? displayName;
 
     return {
+        _customAvatarBackgrounds: state['features/dynamic-branding'].avatarBackgrounds,
         _initialsBase,
         _loadableAvatarUrl: _participant?.loadableAvatarUrl,
         colorBase: !colorBase && _participant ? _participant.id : colorBase

react/features/base/avatar/components/web/StatelessAvatar.js

@@ -125,7 +125,7 @@ export default class StatelessAvatar extends AbstractStatelessAvatar<Props> {
         const { size } = this.props;
 
         return {
-            backgroundColor: color || undefined,
+            background: color || undefined,
             fontSize: size ? size * 0.5 : '180%',
             height: size || '100%',
             width: size || '100%'

react/features/base/avatar/functions.js

@@ -16,9 +16,13 @@ const AVATAR_OPACITY = 0.4;
  * Generates the background color of an initials based avatar.
  *
  * @param {string?} initials - The initials of the avatar.
+ * @param {Array<strig>} customAvatarBackgrounds - Custom avatar background values.
  * @returns {string}
  */
-export function getAvatarColor(initials: ?string) {
+export function getAvatarColor(initials: ?string, customAvatarBackgrounds: Array<string>) {
+    const hasCustomAvatarBackgronds = customAvatarBackgrounds && customAvatarBackgrounds.length;
+    const colorsBase = hasCustomAvatarBackgronds ? customAvatarBackgrounds : AVATAR_COLORS;
+
     let colorIndex = 0;
 
     if (initials) {
@@ -28,10 +32,10 @@ export function getAvatarColor(initials: ?string) {
             nameHash += s.codePointAt(0);
         }
 
-        colorIndex = nameHash % AVATAR_COLORS.length;
+        colorIndex = nameHash % colorsBase.length;
     }
 
-    return `rgba(${AVATAR_COLORS[colorIndex]}, ${AVATAR_OPACITY})`;
+    return hasCustomAvatarBackgronds ? colorsBase[colorIndex] : `rgba(${colorsBase[colorIndex]}, ${AVATAR_OPACITY})`;
 }
 
 /**

react/features/base/conference/actions.js

@@ -6,7 +6,6 @@ import {
     createStartMutedConfigurationEvent,
     sendAnalytics
 } from '../../analytics';
-import { getName } from '../../app/functions';
 import { endpointMessageReceived } from '../../subtitles';
 import { getReplaceParticipant } from '../config/functions';
 import { JITSI_CONNECTION_CONFERENCE_KEY } from '../connection';
@@ -14,7 +13,6 @@ import { JitsiConferenceEvents } from '../lib-jitsi-meet';
 import { MEDIA_TYPE, setAudioMuted, setVideoMuted } from '../media';
 import {
     dominantSpeakerChanged,
-    getLocalParticipant,
     getNormalizedDisplayName,
     participantConnectionStatusChanged,
     participantKicked,
@@ -24,11 +22,7 @@ import {
     participantUpdated
 } from '../participants';
 import { getLocalTracks, replaceLocalTrack, trackAdded, trackRemoved } from '../tracks';
-import {
-    getBackendSafePath,
-    getBackendSafeRoomName,
-    getJitsiMeetGlobalNS
-} from '../util';
+import { getBackendSafeRoomName } from '../util';
 
 import {
     AUTH_STATUS_CHANGED,
@@ -61,6 +55,7 @@ import {
     _addLocalTracksToConference,
     commonUserJoinedHandling,
     commonUserLeftHandling,
+    getConferenceOptions,
     getCurrentConference,
     sendLocalParticipant
 } from './functions';
@@ -434,22 +429,7 @@ export function createConference() {
             throw new Error('Cannot join a conference without a room name!');
         }
 
-        const config = state['features/base/config'];
-        const { tenant } = state['features/base/jwt'];
-        const { email, name: nick } = getLocalParticipant(state);
-
-        const conference
-            = connection.initJitsiConference(
-
-                getBackendSafeRoomName(room), {
-                    ...config,
-                    applicationName: getName(),
-                    getWiFiStatsMethod: getJitsiMeetGlobalNS().getWiFiStats,
-                    confID: `${locationURL.host}${getBackendSafePath(locationURL.pathname)}`,
-                    siteID: tenant,
-                    statisticsDisplayName: config.enableDisplayNameInStats ? nick : undefined,
-                    statisticsId: config.enableEmailInStats ? email : undefined
-                });
+        const conference = connection.initJitsiConference(getBackendSafeRoomName(room), getConferenceOptions(state));
 
         connection[JITSI_CONNECTION_CONFERENCE_KEY] = conference;
 

react/features/base/conference/functions.js

@@ -2,6 +2,7 @@
 
 import _ from 'lodash';
 
+import { getName } from '../../app/functions';
 import { JitsiTrackErrors } from '../lib-jitsi-meet';
 import {
     getLocalParticipant,
@@ -11,7 +12,7 @@ import {
     participantLeft
 } from '../participants';
 import { toState } from '../redux';
-import { safeDecodeURIComponent } from '../util';
+import { getBackendSafePath, getJitsiMeetGlobalNS, safeDecodeURIComponent } from '../util';
 
 import {
     AVATAR_URL_COMMAND,
@@ -198,6 +199,53 @@ export function getConferenceNameForTitle(stateful: Function | Object) {
     return safeStartCase(safeDecodeURIComponent(getConferenceState(toState(stateful)).room));
 }
 
+/**
+ * Returns an object aggregating the conference options.
+ *
+ * @param {Object|Function} stateful - The redux store state.
+ * @returns {Object} - Options object.
+ */
+export function getConferenceOptions(stateful: Function | Object) {
+    const state = toState(stateful);
+
+    const config = state['features/base/config'];
+    const { locationURL } = state['features/base/connection'];
+    const { tenant } = state['features/base/jwt'];
+    const { email, name: nick } = getLocalParticipant(state);
+    const options = { ...config };
+
+    if (tenant) {
+        options.siteID = tenant;
+    }
+
+    if (options.enableDisplayNameInStats && nick) {
+        options.statisticsDisplayName = nick;
+    }
+
+    if (options.enableEmailInStats && email) {
+        options.statisticsId = email;
+    }
+
+    if (locationURL) {
+        options.confID = `${locationURL.host}${getBackendSafePath(locationURL.pathname)}`;
+    }
+
+    options.applicationName = getName();
+
+    // Disable analytics, if requessted.
+    if (options.disableThirdPartyRequests) {
+        delete config.analytics.scriptURLs;
+        delete config.analytics.amplitudeAPPKey;
+        delete config.analytics.googleAnalyticsTrackingId;
+        delete options.callStatsID;
+        delete options.callStatsSecret;
+    } else {
+        options.getWiFiStatsMethod = getWiFiStatsMethod;
+    }
+
+    return options;
+}
+
 /**
 * Returns the UTC timestamp when the first participant joined the conference.
 *
@@ -244,6 +292,21 @@ export function getRoomName(state: Object): string {
     return getConferenceState(state).room;
 }
 
+/**
+ * Returns the result of getWiFiStats from the global NS or does nothing
+ * (returns empty result).
+ * Fixes a concurrency problem where we need to pass a function when creating
+ * a JitsiConference, but that method is added to the context later.
+ *
+ * @returns {Promise}
+ * @private
+ */
+function getWiFiStatsMethod() {
+    const gloabalNS = getJitsiMeetGlobalNS();
+
+    return gloabalNS.getWiFiStats ? gloabalNS.getWiFiStats() : Promise.resolve('{}');
+}
+
 /**
  * Handle an error thrown by the backend (i.e. {@code lib-jitsi-meet}) while
  * manipulating a conference participant (e.g. Pin or select participant).

react/features/base/config/configWhitelist.js

@@ -87,6 +87,7 @@ export default [
     'disableH264',
     'disableHPF',
     'disableInviteFunctions',
+    'disableIncomingMessageSound',
     'disableJoinLeaveSounds',
     'disableLocalVideoFlip',
     'disableNS',
@@ -130,6 +131,7 @@ export default [
     'gatherStats',
     'googleApiApplicationClientID',
     'hideConferenceSubject',
+    'hideRecordingLabel',
     'hideParticipantsStats',
     'hideConferenceTimer',
     'hiddenDomain',

react/features/base/config/constants.js

@@ -14,10 +14,35 @@ export const _CONFIG_STORE_PREFIX = 'config.js';
  * @type Array<string>
  */
 export const TOOLBAR_BUTTONS = [
-    'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
-    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-    'livestreaming', 'etherpad', 'sharedvideo', 'shareaudio', 'settings', 'raisehand',
-    'videoquality', 'filmstrip', 'participants-pane', 'feedback', 'stats', 'shortcuts',
-    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone',
-    'security'
+    'camera',
+    'chat',
+    'closedcaptions',
+    'desktop',
+    'download',
+    'embedmeeting',
+    'etherpad',
+    'feedback',
+    'filmstrip',
+    'fullscreen',
+    'hangup',
+    'help',
+    'invite',
+    'livestreaming',
+    'microphone',
+    'mute-everyone',
+    'mute-video-everyone',
+    'participants-pane',
+    'profile',
+    'raisehand',
+    'recording',
+    'security',
+    'select-background',
+    'settings',
+    'shareaudio',
+    'sharedvideo',
+    'shortcuts',
+    'stats',
+    'tileview',
+    'toggle-camera',
+    'videoquality'
 ];

react/features/base/config/functions.any.js

@@ -60,8 +60,6 @@ export function getRecordingSharingUrl(state: Object) {
     return state['features/base/config'].recordingSharingUrl;
 }
 
-/* eslint-disable max-params, no-shadow */
-
 /**
  * Overrides JSON properties in {@code config} and
  * {@code interfaceConfig} Objects with the values from {@code newConfig}.

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

@@ -25,11 +25,21 @@ const GESTURE_SPEED_THRESHOLD = 0.2;
  */
 type Props = {
 
+    /**
+     * The height of the screen.
+     */
+    _height: number,
+
     /**
      * The color-schemed stylesheet of the feature.
      */
     _styles: StyleType,
 
+    /**
+     * Whether to add padding to scroll view.
+     */
+    addScrollViewPadding?: boolean,
+
     /**
      * The children to be displayed within this component.
      */
@@ -57,9 +67,14 @@ type Props = {
     renderFooter: ?Function,
 
     /**
-    * The height of the screen.
-    */
-    _height: number
+     * Whether to show sliding view or not.
+     */
+    showSlidingView?: boolean,
+
+    /**
+     * The component's external style
+     */
+    style: Object
 };
 
 /**
@@ -68,6 +83,16 @@ type Props = {
 class BottomSheet extends PureComponent<Props> {
     panResponder: Object;
 
+    /**
+     * Default values for {@code BottomSheet} component's properties.
+     *
+     * @static
+     */
+    static defaultProps = {
+        addScrollViewPadding: true,
+        showSlidingView: true
+    };
+
     /**
      * Instantiates a new component.
      *
@@ -90,7 +115,15 @@ class BottomSheet extends PureComponent<Props> {
      * @returns {ReactElement}
      */
     render() {
-        const { _styles, renderHeader, renderFooter, _height } = this.props;
+        const {
+            _height,
+            _styles,
+            addScrollViewPadding,
+            renderHeader,
+            renderFooter,
+            showSlidingView,
+            style
+        } = this.props;
 
         return (
             <SlidingView
@@ -98,7 +131,7 @@ class BottomSheet extends PureComponent<Props> {
                 accessibilityViewIsModal = { true }
                 onHide = { this.props.onCancel }
                 position = 'bottom'
-                show = { true }>
+                show = { showSlidingView }>
                 <View
                     pointerEvents = 'box-none'
                     style = { styles.sheetContainer }>
@@ -109,7 +142,10 @@ class BottomSheet extends PureComponent<Props> {
                     <SafeAreaView
                         style = { [
                             styles.sheetItemContainer,
-                            _styles.sheet,
+                            renderHeader
+                                ? _styles.sheetHeader
+                                : _styles.sheet,
+                            style,
                             {
                                 maxHeight: _height - 100
                             }
@@ -118,7 +154,7 @@ class BottomSheet extends PureComponent<Props> {
                         <ScrollView
                             bounces = { false }
                             showsVerticalScrollIndicator = { false }
-                            style = { styles.scrollView } >
+                            style = { addScrollViewPadding && styles.scrollView } >
                             { this.props.children }
                         </ScrollView>
                         { renderFooter && renderFooter() }

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

@@ -2,6 +2,7 @@
 
 import { StyleSheet } from 'react-native';
 
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
 import { ColorSchemeRegistry, schemeColor } from '../../../color-scheme';
 import { BoxModel, ColorPalette } from '../../../styles';
 import { PREFERRED_DIALOG_SIZE } from '../../constants';
@@ -171,7 +172,7 @@ ColorSchemeRegistry.register('BottomSheet', {
          */
         labelStyle: {
             ...brandedDialogLabelStyle,
-            marginLeft: 32
+            marginLeft: 16
         },
 
         /**
@@ -179,7 +180,6 @@ ColorSchemeRegistry.register('BottomSheet', {
          */
         style: {
             ...brandedDialogItemContainerStyle,
-            backgroundColor: ColorPalette.darkBackground,
             paddingHorizontal: MD_ITEM_MARGIN_PADDING
         },
 
@@ -193,9 +193,16 @@ ColorSchemeRegistry.register('BottomSheet', {
      * Bottom sheet's base style.
      */
     sheet: {
-        backgroundColor: ColorPalette.black,
+        backgroundColor: BaseTheme.palette.ui02,
         borderTopLeftRadius: 16,
         borderTopRightRadius: 16
+    },
+
+    /**
+     * Bottom sheet's base style with header.
+     */
+    sheetHeader: {
+        backgroundColor: BaseTheme.palette.ui02
     }
 });
 

react/features/base/flags/constants.js

@@ -214,3 +214,9 @@ export const VIDEO_SHARE_BUTTON_ENABLED = 'video-share.enabled';
  * Default: disabled (false).
  */
 export const WELCOME_PAGE_ENABLED = 'welcomepage.enabled';
+
+/**
+ * Flag indicating if the reactions feature should be enabled.
+ * Default: disabled (false).
+ */
+export const REACTIONS_ENABLED = 'reactions.enabled';

react/features/base/modal/components/JitsiModal.js

@@ -50,6 +50,11 @@ type Props = {
      */
     headerProps: Object,
 
+    /**
+     * True if the header with navigation should be hidden, false otherwise.
+     */
+    hideHeaderWithNavigation?: boolean,
+
     /**
      * The ID of the modal that is being rendered. This is used to show/hide the modal.
      */
@@ -78,7 +83,8 @@ type Props = {
  */
 class JitsiModal extends PureComponent<Props> {
     static defaultProps = {
-        position: 'bottom'
+        position: 'bottom',
+        hideHeaderWithNavigation: false
     };
 
     /**
@@ -98,7 +104,17 @@ class JitsiModal extends PureComponent<Props> {
      * @inheritdoc
      */
     render() {
-        const { _headerStyles, _show, _styles, children, footerComponent, headerProps, position, style } = this.props;
+        const {
+            _headerStyles,
+            _show,
+            _styles,
+            children,
+            footerComponent,
+            headerProps,
+            position,
+            hideHeaderWithNavigation,
+            style
+        } = this.props;
 
         return (
             <SlidingView
@@ -119,6 +135,7 @@ class JitsiModal extends PureComponent<Props> {
                     ] }>
                     <HeaderWithNavigation
                         { ...headerProps }
+                        hideHeaderWithNavigation = { hideHeaderWithNavigation }
                         onPressBack = { this._onRequestClose } />
                     <SafeAreaView style = { styles.safeArea }>
                         { children }

react/features/base/participants/components/ParticipantView.native.js

@@ -3,7 +3,7 @@
 import React, { Component } from 'react';
 import { Text, View } from 'react-native';
 
-import { YoutubeLargeVideo } from '../../../shared-video/components';
+import { SharedVideo } from '../../../shared-video/components/native';
 import { Avatar } from '../../avatar';
 import { translate } from '../../i18n';
 import { JitsiParticipantConnectionStatus } from '../../lib-jitsi-meet';
@@ -208,11 +208,11 @@ class ParticipantView extends Component<Props> {
                 ? this.props.testHintId
                 : `org.jitsi.meet.Participant#${this.props.participantId}`;
 
-        const renderYoutubeLargeVideo = _isFakeParticipant && !disableVideo;
+        const renderSharedVideo = _isFakeParticipant && !disableVideo;
 
         return (
             <Container
-                onClick = { renderVideo || renderYoutubeLargeVideo ? undefined : onPress }
+                onClick = { renderVideo || renderSharedVideo ? undefined : onPress }
                 style = {{
                     ...styles.participantView,
                     ...this.props.style
@@ -221,10 +221,10 @@ class ParticipantView extends Component<Props> {
 
                 <TestHint
                     id = { testHintId }
-                    onPress = { renderYoutubeLargeVideo ? undefined : onPress }
+                    onPress = { renderSharedVideo ? undefined : onPress }
                     value = '' />
 
-                { renderYoutubeLargeVideo && <YoutubeLargeVideo youtubeId = { this.props.participantId } /> }
+                { renderSharedVideo && <SharedVideo /> }
 
                 { !_isFakeParticipant && renderVideo
                     && <VideoTrack
@@ -234,7 +234,7 @@ class ParticipantView extends Component<Props> {
                         zOrder = { this.props.zOrder }
                         zoomEnabled = { this.props.zoomEnabled } /> }
 
-                { !renderYoutubeLargeVideo && !renderVideo
+                { !renderSharedVideo && !renderVideo
                     && <View style = { styles.avatarContainer }>
                         <Avatar
                             participantId = { this.props.participantId }

react/features/base/participants/middleware.js

@@ -371,6 +371,7 @@ function _localParticipantLeft({ dispatch }, next, action) {
 function _maybePlaySounds({ getState, dispatch }, action) {
     const state = getState();
     const { startAudioMuted, disableJoinLeaveSounds } = state['features/base/config'];
+    const { soundsParticipantJoined: joinSound, soundsParticipantLeft: leftSound } = state['features/base/settings'];
 
     // If we have join/leave sounds disabled, don't play anything.
     if (disableJoinLeaveSounds) {
@@ -387,13 +388,16 @@ function _maybePlaySounds({ getState, dispatch }, action) {
         const { isReplacing, isReplaced } = action.participant;
 
         if (action.type === PARTICIPANT_JOINED) {
+            if (!joinSound) {
+                return;
+            }
             const { presence } = action.participant;
 
             // The sounds for the poltergeist are handled by features/invite.
             if (presence !== INVITED && presence !== CALLING && !isReplacing) {
                 dispatch(playSound(PARTICIPANT_JOINED_SOUND_ID));
             }
-        } else if (action.type === PARTICIPANT_LEFT && !isReplaced) {
+        } else if (action.type === PARTICIPANT_LEFT && !isReplaced && leftSound) {
             dispatch(playSound(PARTICIPANT_LEFT_SOUND_ID));
         }
     }

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

@@ -27,6 +27,11 @@ type Props = {
      */
     headerLabelKey: ?string,
 
+    /**
+     * True if the header with navigation should be hidden, false otherwise.
+     */
+    hideHeaderWithNavigation?: boolean,
+
     /**
      * Callback to be invoked on pressing the back button.
      */
@@ -48,17 +53,18 @@ class HeaderWithNavigation extends Component<Props> {
      * @inheritdoc
      */
     render() {
-        const { onPressBack, onPressForward } = this.props;
+        const { hideHeaderWithNavigation, onPressBack, onPressForward } = this.props;
 
         return (
-            <Header>
-                { onPressBack && <BackButton onPress = { onPressBack } /> }
-                <HeaderLabel labelKey = { this.props.headerLabelKey } />
-                { onPressForward && <ForwardButton
-                    disabled = { this.props.forwardDisabled }
-                    labelKey = { this.props.forwardLabelKey }
-                    onPress = { onPressForward } /> }
-            </Header>
+            !hideHeaderWithNavigation
+                    && <Header>
+                        { onPressBack && <BackButton onPress = { onPressBack } /> }
+                        <HeaderLabel labelKey = { this.props.headerLabelKey } />
+                        { onPressForward && <ForwardButton
+                            disabled = { this.props.forwardDisabled }
+                            labelKey = { this.props.forwardLabelKey }
+                            onPress = { onPressForward } /> }
+                    </Header>
         );
     }
 }

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

@@ -2,7 +2,7 @@
 
 import React, { Component } from 'react';
 
-import { isVpaasMeeting } from '../../../../billing-counter/functions';
+import { isVpaasMeeting } from '../../../../jaas/functions';
 import { translate } from '../../../i18n';
 import { connect } from '../../../redux';
 

react/features/base/settings/reducer.js

@@ -27,6 +27,10 @@ const DEFAULT_STATE = {
     micDeviceId: undefined,
     serverURL: undefined,
     hideShareAudioHelper: false,
+    soundsIncomingMessage: true,
+    soundsParticipantJoined: true,
+    soundsParticipantLeft: true,
+    soundsTalkWhileMuted: true,
     startAudioOnly: false,
     startWithAudioMuted: false,
     startWithVideoMuted: false,

react/features/base/tracks/actions.js

@@ -227,7 +227,7 @@ export function noDataFromSource(track) {
  * @returns {Function}
  */
 export function showNoDataFromSourceVideoError(jitsiTrack) {
-    return (dispatch, getState) => {
+    return async (dispatch, getState) => {
         let notificationInfo;
 
         const track = getTrackByJitsiTrack(getState()['features/base/tracks'], jitsiTrack);
@@ -239,12 +239,11 @@ export function showNoDataFromSourceVideoError(jitsiTrack) {
         if (track.isReceivingData) {
             notificationInfo = undefined;
         } else {
-            const notificationAction = showErrorNotification({
+            const notificationAction = await dispatch(showErrorNotification({
                 descriptionKey: 'dialog.cameraNotSendingData',
                 titleKey: 'dialog.cameraNotSendingDataTitle'
-            });
+            }));
 
-            dispatch(notificationAction);
             notificationInfo = {
                 uid: notificationAction.uid
             };
@@ -362,7 +361,7 @@ function replaceStoredTracks(oldTrack, newTrack) {
  * @returns {{ type: TRACK_ADDED, track: Track }}
  */
 export function trackAdded(track) {
-    return (dispatch, getState) => {
+    return async (dispatch, getState) => {
         track.on(
             JitsiTrackEvents.TRACK_MUTE_CHANGED,
             () => dispatch(trackMutedChanged(track)));
@@ -389,12 +388,10 @@ export function trackAdded(track) {
             track.on(JitsiTrackEvents.NO_DATA_FROM_SOURCE, () => dispatch(noDataFromSource({ jitsiTrack: track })));
             if (!isReceivingData) {
                 if (mediaType === MEDIA_TYPE.AUDIO) {
-                    const notificationAction = showNotification({
+                    const notificationAction = await dispatch(showNotification({
                         descriptionKey: 'dialog.micNotSendingData',
                         titleKey: 'dialog.micNotSendingDataTitle'
-                    });
-
-                    dispatch(notificationAction);
+                    }));
 
                     // Set the notification ID so that other parts of the application know that this was
                     // displayed in the context of the current device.

react/features/base/ui/Tokens.js

@@ -18,6 +18,7 @@ export const colors = {
     primary08: '#99BBF3',
     primary09: '#CCDDF9',
 
+    surface00: '#111111',
     surface01: '#040404',
     surface02: '#141414',
     surface03: '#292929',
@@ -29,11 +30,13 @@ export const colors = {
     surface09: '#C2C2C2',
     surface10: '#E0E0E0',
     surface11: '#FFF',
+    surface12: '#AAAAAA',
 
     success04: '#189B55',
     success05: '#1EC26A',
 
-    warning05: '#F8AE1A'
+    warning05: '#F8AE1A',
+    warning06: '#ED9E1B'
 };
 
 // Mapping between the token used and the color
@@ -108,6 +111,9 @@ export const colorMap = {
     // Disabled state for danger buttons
     actionDangerDisabled: 'error03',
 
+    // Bottom sheet background
+    bottomSheet: 'surface00',
+
     // Primary text – default color for body copy & headers
     text01: 'surface11',
 
@@ -117,6 +123,9 @@ export const colorMap = {
     // Tertiary text with low contrast – placeholders, disabled actions, label for disabled buttons
     text03: 'surface07',
 
+    // Text for bottom sheet items
+    text04: 'surface12',
+
     // error messages
     textError: 'error06',
 
@@ -148,6 +157,9 @@ export const colorMap = {
     // Background for high-contrast input fields
     field02: 'surface11',
 
+    // Color for the section divider
+    dividerColor: 'surface12',
+
     // Background for high-contrast input fields on hover
     field02Hover: 'primary09',
 
@@ -197,20 +209,24 @@ export const colorMap = {
     success02: 'success05',
 
     // Color for warning messages applied to icons, borders & backgrounds
-    warning01: 'warning05'
+    warning01: 'warning05',
+
+    // Color for indicating a raised hand
+    warning02: 'warning06'
 };
 
 
 export const font = {
-    weightRegular: 400,
-    weightSemiBold: 600
+    weightRegular: '400',
+    weightSemiBold: '600'
 };
 
 export const shape = {
-    borderRadius: 6
+    borderRadius: 6,
+    boxShadow: 'inset 0px -1px 0px rgba(255, 255, 255, 0.15)'
 };
 
-export const spacing = [ 0, 4, 8, 16, 24, 32, 40, 48, 56 ];
+export const spacing = [ 0, 4, 8, 16, 24, 32, 40, 48, 56, 64, 72, 80 ];
 
 export const typography = {
     labelRegular: {

react/features/base/util/uri.js

@@ -45,17 +45,18 @@ const _URI_PATH_PATTERN = '([^?#]*)';
 export const URI_PROTOCOL_PATTERN = '^([a-z][a-z0-9\\.\\+-]*:)';
 
 /**
- * Excludes/removes certain characters from a specific room (name) which are
- * incompatible with Jitsi Meet on the client and/or server sides.
+ * Excludes/removes certain characters from a specific path part which are
+ * incompatible with Jitsi Meet on the client and/or server sides. The main
+ * use case for this method is to clean up the room name and the tenant.
  *
- * @param {?string} room - The room (name) to fix.
+ * @param {?string} pathPart - The path part to fix.
  * @private
  * @returns {?string}
  */
-function _fixRoom(room: ?string) {
-    return room
-        ? room.replace(new RegExp(_ROOM_EXCLUDE_PATTERN, 'g'), '')
-        : room;
+function _fixPathPart(pathPart: ?string) {
+    return pathPart
+        ? pathPart.replace(new RegExp(_ROOM_EXCLUDE_PATTERN, 'g'), '')
+        : pathPart;
 }
 
 /**
@@ -335,6 +336,11 @@ export function parseURIString(uri: ?string) {
 
     const obj = parseStandardURIString(_fixURIStringScheme(uri));
 
+    // XXX While the components/segments of pathname are URI encoded, Jitsi Meet
+    // on the client and/or server sides still don't support certain characters.
+    obj.pathname = obj.pathname.split('/').map(pathPart => _fixPathPart(pathPart))
+        .join('/');
+
     // Add the properties that are specific to a Jitsi Meet resource (location)
     // such as contextRoot, room:
 
@@ -344,24 +350,9 @@ export function parseURIString(uri: ?string) {
     // The room (name) is the last component/segment of pathname.
     const { pathname } = obj;
 
-    // XXX While the components/segments of pathname are URI encoded, Jitsi Meet
-    // on the client and/or server sides still don't support certain characters.
     const contextRootEndIndex = pathname.lastIndexOf('/');
-    let room = pathname.substring(contextRootEndIndex + 1) || undefined;
 
-    if (room) {
-        const fixedRoom = _fixRoom(room);
-
-        if (fixedRoom !== room) {
-            room = fixedRoom;
-
-            // XXX Drive fixedRoom into pathname (because room is derived from
-            // pathname).
-            obj.pathname
-                = pathname.substring(0, contextRootEndIndex + 1) + (room || '');
-        }
-    }
-    obj.room = room;
+    obj.room = pathname.substring(contextRootEndIndex + 1) || undefined;
 
     if (contextRootEndIndex > 1) {
         // The part of the pathname from the beginning to the room name is the tenant.

react/features/billing-counter/actionTypes.js

@@ -1,4 +0,0 @@
-/**
- * Action used to store the flag signaling the endpoint has been counted.
- */
-export const SET_ENDPOINT_COUNTED = 'SET_ENDPOINT_COUNTED';

react/features/billing-counter/actions.js

@@ -1,42 +0,0 @@
-// @flow
-
-import { SET_ENDPOINT_COUNTED } from './actionTypes';
-import { extractVpaasTenantFromPath, getBillingId, sendCountRequest } from './functions';
-
-/**
- * Sends a billing count request when needed.
- *
- * @returns {Function}
- */
-export function countEndpoint() {
-    return function(dispatch: Function, getState: Function) {
-        const state = getState();
-        const baseUrl = state['features/base/config'].billingCounterUrl;
-        const jwt = state['features/base/jwt'].jwt;
-        const tenant = extractVpaasTenantFromPath(state['features/base/connection'].locationURL.pathname);
-        const shouldSendRequest = Boolean(baseUrl && jwt && tenant);
-
-        if (shouldSendRequest) {
-            const billingId = getBillingId();
-
-            sendCountRequest({
-                baseUrl,
-                billingId,
-                jwt,
-                tenant
-            });
-            dispatch(setEndpointCounted());
-        }
-    };
-}
-
-/**
- * Action used to mark the endpoint as counted.
- *
- * @returns {Object}
- */
-function setEndpointCounted() {
-    return {
-        type: SET_ENDPOINT_COUNTED
-    };
-}

react/features/billing-counter/constants.js

@@ -1,9 +0,0 @@
-/**
- * The key for the billing id stored in localStorage.
- */
-export const BILLING_ID = 'jitsiMeetId';
-
-/**
- * The prefix for the vpaas tenant.
- */
-export const VPAAS_TENANT_PREFIX = 'vpaas-magic-cookie-';

react/features/billing-counter/functions.js

@@ -1,112 +0,0 @@
-// @flow
-
-import { jitsiLocalStorage } from '@jitsi/js-utils';
-import uuid from 'uuid';
-
-import { BILLING_ID, VPAAS_TENANT_PREFIX } from './constants';
-import logger from './logger';
-
-/**
- * Returns the full vpaas tenant if available, given a path.
- *
- * @param {string} path - The meeting url path.
- * @returns {string}
- */
-export function extractVpaasTenantFromPath(path: string) {
-    const [ , tenant ] = path.split('/');
-
-    if (tenant.startsWith(VPAAS_TENANT_PREFIX)) {
-        return tenant;
-    }
-
-    return '';
-}
-
-/**
- * Returns the vpaas tenant.
- *
- * @param {Object} state - The global state.
- * @returns {string}
- */
-export function getVpaasTenant(state: Object) {
-    return extractVpaasTenantFromPath(state['features/base/connection'].locationURL.pathname);
-}
-
-/**
- * Returns true if the current meeting is a vpaas one.
- *
- * @param {Object} state - The state of the app.
- * @returns {boolean}
- */
-export function isVpaasMeeting(state: Object) {
-    const { billingCounterUrl } = state['features/base/config'];
-
-    return Boolean(
-        billingCounterUrl
-        && extractVpaasTenantFromPath(
-            state['features/base/connection'].locationURL.pathname)
-    );
-}
-
-/**
- * Sends a billing counter request.
- *
- * @param {Object} reqData - The request info.
- * @param {string} reqData.baseUrl - The base url for the request.
- * @param {string} billingId - The unique id of the client.
- * @param {string} jwt - The JWT token.
- * @param {string} tenat - The client tenant.
- * @returns {void}
- */
-export async function sendCountRequest({ baseUrl, billingId, jwt, tenant }: {
-    baseUrl: string,
-    billingId: string,
-    jwt: string,
-    tenant: string
-}) {
-    const fullUrl = `${baseUrl}/${encodeURIComponent(tenant)}/${billingId}`;
-    const headers = {
-        'Authorization': `Bearer ${jwt}`
-    };
-
-    try {
-        const res = await fetch(fullUrl, {
-            method: 'GET',
-            headers
-        });
-
-        if (!res.ok) {
-            logger.error('Status error:', res.status);
-        }
-    } catch (err) {
-        logger.error('Could not send request', err);
-    }
-}
-
-/**
- * Returns the stored billing id (or generates a new one if none is present).
- *
- * @returns {string}
- */
-export function getBillingId() {
-    let billingId = jitsiLocalStorage.getItem(BILLING_ID);
-
-    if (!billingId) {
-        billingId = uuid.v4();
-        jitsiLocalStorage.setItem(BILLING_ID, billingId);
-    }
-
-    return billingId;
-}
-
-/**
- * Returns the billing id for vpaas meetings.
- *
- * @param {Object} state - The state of the app.
- * @returns {string | undefined}
- */
-export function getVpaasBillingId(state: Object) {
-    if (isVpaasMeeting(state)) {
-        return getBillingId();
-    }
-}

react/features/billing-counter/logger.js

@@ -1,5 +0,0 @@
-// @flow
-
-import { getLogger } from '../base/logging/functions';
-
-export default getLogger('features/billing-counter');

react/features/billing-counter/reducer.js

@@ -1,29 +0,0 @@
-import { ReducerRegistry } from '../base/redux';
-
-import {
-    SET_ENDPOINT_COUNTED
-} from './actionTypes';
-
-const DEFAULT_STATE = {
-    endpointCounted: false
-};
-
-/**
- * Listen for actions that mutate the billing-counter state
- */
-ReducerRegistry.register(
-    'features/billing-counter', (state = DEFAULT_STATE, action) => {
-        switch (action.type) {
-
-        case SET_ENDPOINT_COUNTED: {
-            return {
-                ...state,
-                endpointCounted: true
-            };
-        }
-
-        default:
-            return state;
-        }
-    },
-);

react/features/chat/middleware.js

@@ -22,11 +22,9 @@ import {
 import { MiddlewareRegistry, StateListenerRegistry } from '../base/redux';
 import { playSound, registerSound, unregisterSound } from '../base/sounds';
 import { openDisplayNamePrompt } from '../display-name';
-import { ADD_REACTIONS_MESSAGE } from '../reactions/actionTypes';
-import {
-    pushReaction
-} from '../reactions/actions.any';
-import { REACTIONS } from '../reactions/constants';
+import { ADD_REACTION_MESSAGE } from '../reactions/actionTypes';
+import { pushReactions } from '../reactions/actions.any';
+import { getReactionMessageFromBuffer } from '../reactions/functions.any';
 import { endpointMessageReceived } from '../subtitles';
 import { showToolbox } from '../toolbox/actions';
 import {
@@ -158,7 +156,7 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
-    case ADD_REACTIONS_MESSAGE: {
+    case ADD_REACTION_MESSAGE: {
         _handleReceivedMessage(store, {
             id: localParticipant.id,
             message: action.message,
@@ -212,8 +210,6 @@ StateListenerRegistry.register(
  * @returns {void}
  */
 function _addChatMsgListener(conference, store) {
-    const reactions = {};
-
     if (store.getState()['features/base/config'].iAmRecorder) {
         // We don't register anything on web if we are in iAmRecorder mode
         return;
@@ -252,30 +248,21 @@ function _addChatMsgListener(conference, store) {
                 const [ { _id }, eventData ] = args;
 
                 if (eventData.name === ENDPOINT_REACTION_NAME) {
-                    reactions[_id] = reactions[_id] ?? {
-                        timeout: null,
-                        message: ''
-                    };
                     batch(() => {
-                        store.dispatch(pushReaction(eventData.reaction));
                         store.dispatch(setToolboxVisible(true));
                         store.dispatch(setToolboxTimeout(
                                 () => store.dispatch(hideToolbox()),
                                 5000)
                         );
+                        store.dispatch(pushReactions(eventData.reactions));
                     });
 
-                    clearTimeout(reactions[_id].timeout);
-                    reactions[_id].message = `${reactions[_id].message}${REACTIONS[eventData.reaction].message}`;
-                    reactions[_id].timeout = setTimeout(() => {
-                        _handleReceivedMessage(store, {
-                            id: _id,
-                            message: reactions[_id].message,
-                            privateMessage: false,
-                            timestamp: eventData.timestamp
-                        }, false);
-                        delete reactions[_id];
-                    }, 500);
+                    _handleReceivedMessage(store, {
+                        id: _id,
+                        message: getReactionMessageFromBuffer(eventData.reactions),
+                        privateMessage: false,
+                        timestamp: eventData.timestamp
+                    }, false);
                 }
             }
         });
@@ -318,8 +305,10 @@ function _handleReceivedMessage({ dispatch, getState },
     // Logic for all platforms:
     const state = getState();
     const { isOpen: isChatOpen } = state['features/chat'];
+    const { disableIncomingMessageSound } = state['features/base/config'];
+    const { soundsIncomingMessage: soundEnabled } = state['features/base/settings'];
 
-    if (shouldPlaySound && !isChatOpen) {
+    if (!disableIncomingMessageSound && soundEnabled && shouldPlaySound && !isChatOpen) {
         dispatch(playSound(INCOMING_MSG_SOUND_ID));
     }
 

react/features/chrome-extension-banner/components/ChromeExtensionBanner.web.js

@@ -16,7 +16,7 @@ import { translate } from '../../base/i18n';
 import { Icon, IconClose } from '../../base/icons';
 import { browser } from '../../base/lib-jitsi-meet';
 import { connect } from '../../base/redux';
-import { isVpaasMeeting } from '../../billing-counter/functions';
+import { isVpaasMeeting } from '../../jaas/functions';
 import logger from '../logger';
 
 

react/features/conference/components/native/Conference.js

@@ -23,6 +23,7 @@ import { AddPeopleDialog, CalleeInfoContainer } from '../../../invite';
 import { LargeVideo } from '../../../large-video';
 import { KnockingParticipantList } from '../../../lobby';
 import { BackButtonRegistry } from '../../../mobile/back-button';
+import { ParticipantsPane } from '../../../participants-pane/components/native';
 import { Captions } from '../../../subtitles';
 import { setToolboxVisible } from '../../../toolbox/actions';
 import { Toolbox } from '../../../toolbox/components/native';
@@ -71,6 +72,11 @@ type Props = AbstractProps & {
      */
     _fullscreenEnabled: boolean,
 
+    /**
+     * The indicator which determines if the participants pane is open.
+     */
+    _isParticipantsPaneOpen: boolean,
+
     /**
      * The ID of the participant currently on stage (if any)
      */
@@ -237,6 +243,7 @@ class Conference extends AbstractConference<Props, *> {
     _renderContent() {
         const {
             _connecting,
+            _isParticipantsPaneOpen,
             _largeVideoParticipantId,
             _reducedUI,
             _shouldDisplayTileView
@@ -296,11 +303,14 @@ class Conference extends AbstractConference<Props, *> {
                 </SafeAreaView>
 
                 <TestConnectionInfo />
-
                 { this._renderConferenceNotification() }
 
                 { this._renderConferenceModals() }
+
                 {_shouldDisplayTileView && <Toolbox />}
+
+                { _isParticipantsPaneOpen && <ParticipantsPane /> }
+
             </>
         );
     }
@@ -391,6 +401,7 @@ function _mapStateToProps(state) {
         membersOnly,
         leaving
     } = state['features/base/conference'];
+    const { isOpen } = state['features/participants-pane'];
     const { aspectRatio, reducedUI } = state['features/base/responsive-ui'];
 
     // XXX There is a window of time between the successful establishment of the
@@ -412,6 +423,7 @@ function _mapStateToProps(state) {
         _connecting: Boolean(connecting_),
         _filmstripVisible: isFilmstripVisible(state),
         _fullscreenEnabled: getFeatureFlag(state, FULLSCREEN_ENABLED, true),
+        _isParticipantsPaneOpen: isOpen,
         _largeVideoParticipantId: state['features/large-video'].participantId,
         _pictureInPictureEnabled: getFeatureFlag(state, PIP_ENABLED),
         _reducedUI: reducedUI,

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

@@ -15,7 +15,7 @@ import { Filmstrip } from '../../../filmstrip';
 import { CalleeInfoContainer } from '../../../invite';
 import { LargeVideo } from '../../../large-video';
 import { KnockingParticipantList, LobbyScreen } from '../../../lobby';
-import { ParticipantsPane } from '../../../participants-pane/components';
+import { ParticipantsPane } from '../../../participants-pane/components/web';
 import { getParticipantsPaneOpen } from '../../../participants-pane/functions';
 import { Prejoin, isPrejoinPageVisible } from '../../../prejoin';
 import { fullScreenChanged, showToolbox } from '../../../toolbox/actions.web';

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

@@ -8,7 +8,7 @@ import { getParticipantCount } from '../../../base/participants/functions';
 import { connect } from '../../../base/redux';
 import { E2EELabel } from '../../../e2ee';
 import { LocalRecordingLabel } from '../../../local-recording';
-import { RecordingLabel } from '../../../recording';
+import { getSessionStatusToShow, RecordingLabel } from '../../../recording';
 import { isToolboxVisible } from '../../../toolbox/functions.web';
 import { TranscribingLabel } from '../../../transcribing';
 import { VideoQualityLabel } from '../../../video-quality';
@@ -38,6 +38,11 @@ type Props = {
      */
     _hideConferenceTimer: boolean,
 
+    /**
+     * Whether the recording label should be shown or not.
+     */
+    _hideRecordingLabel: boolean,
+
     /**
      * Whether the participant count should be shown or not.
      */
@@ -52,7 +57,20 @@ type Props = {
     /**
      * Indicates whether the component should be visible or not.
      */
-    _visible: boolean
+    _visible: boolean,
+
+    /**
+     * Whether or not the recording label is visible.
+     */
+    _recordingLabel: boolean
+};
+
+const getLeftMargin = () => {
+    const subjectContainerWidth = document.getElementById('subject-container')?.clientWidth ?? 0;
+    const recContainerWidth = document.getElementById('rec-container')?.clientWidth ?? 0;
+    const subjectDetailsContainer = document.getElementById('subject-details-container')?.clientWidth ?? 0;
+
+    return (subjectContainerWidth - recContainerWidth - subjectDetailsContainer) / 2;
 };
 
 /**
@@ -66,29 +84,53 @@ function ConferenceInfo(props: Props) {
         _hideConferenceNameAndTimer,
         _hideConferenceTimer,
         _showParticipantCount,
+        _hideRecordingLabel,
         _subject,
         _fullWidth,
-        _visible
+        _visible,
+        _recordingLabel
     } = props;
 
     return (
-        <div className = { `subject ${_visible ? 'visible' : ''}` }>
-            <div className = { `subject-info-container${_fullWidth ? ' subject-info-container--full-width' : ''}` }>
-                {
-                    !_hideConferenceNameAndTimer
-                        && <div className = 'subject-info'>
-                            { _subject && <span className = 'subject-text'>{ _subject }</span>}
-                            { !_hideConferenceTimer && <ConferenceTimer /> }
-                        </div>
+        <div className = { `subject ${_recordingLabel ? 'recording' : ''} ${_visible ? 'visible' : ''}` }>
+            <div
+                className = { `subject-info-container${_fullWidth ? ' subject-info-container--full-width' : ''}` }
+                id = 'subject-container'>
+                {!_hideRecordingLabel && <div
+                    className = 'show-always'
+                    id = 'rec-container'
+                    // eslint-disable-next-line react-native/no-inline-styles
+                    style = {{
+                        marginLeft: !_recordingLabel || _visible ? 0 : getLeftMargin()
+                    }}>
+                    <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
+                    <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
+                    <LocalRecordingLabel />
+                </div>
                 }
-                { _showParticipantCount && <ParticipantsCount /> }
-                <E2EELabel />
-                <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
-                <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
-                <LocalRecordingLabel />
-                <TranscribingLabel />
-                <VideoQualityLabel />
-                <InsecureRoomNameLabel />
+                <div
+                    className = 'subject-details-container'
+                    id = 'subject-details-container'>
+                    {
+                        !_hideConferenceNameAndTimer
+                            && <div className = 'subject-info'>
+                                { _subject && <span className = 'subject-text'>{ _subject }</span>}
+                                { !_hideConferenceTimer && <ConferenceTimer /> }
+                            </div>
+                    }
+                    { _showParticipantCount && <ParticipantsCount /> }
+                    <E2EELabel />
+                    {_hideRecordingLabel && (
+                        <>
+                            <RecordingLabel mode = { JitsiRecordingConstants.mode.FILE } />
+                            <RecordingLabel mode = { JitsiRecordingConstants.mode.STREAM } />
+                            <LocalRecordingLabel />
+                        </>
+                    )}
+                    <TranscribingLabel />
+                    <VideoQualityLabel />
+                    <InsecureRoomNameLabel />
+                </div>
             </div>
         </div>
     );
@@ -109,16 +151,32 @@ function ConferenceInfo(props: Props) {
  */
 function _mapStateToProps(state) {
     const participantCount = getParticipantCount(state);
-    const { hideConferenceTimer, hideConferenceSubject, hideParticipantsStats } = state['features/base/config'];
+    const {
+        hideConferenceTimer,
+        hideConferenceSubject,
+        hideParticipantsStats,
+        hideRecordingLabel,
+        iAmRecorder
+    } = state['features/base/config'];
     const { clientWidth } = state['features/base/responsive-ui'];
 
+    const shouldHideRecordingLabel = hideRecordingLabel || iAmRecorder;
+    const fileRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.FILE);
+    const streamRecordingStatus = getSessionStatusToShow(state, JitsiRecordingConstants.mode.STREAM);
+    const isFileRecording = fileRecordingStatus ? fileRecordingStatus !== JitsiRecordingConstants.status.OFF : false;
+    const isStreamRecording = streamRecordingStatus
+        ? streamRecordingStatus !== JitsiRecordingConstants.status.OFF : false;
+    const { isEngaged } = state['features/local-recording'];
+
     return {
         _hideConferenceNameAndTimer: clientWidth < 300,
         _hideConferenceTimer: Boolean(hideConferenceTimer),
+        _hideRecordingLabel: shouldHideRecordingLabel,
         _fullWidth: state['features/video-layout'].tileViewEnabled,
         _showParticipantCount: participantCount > 2 && !hideParticipantsStats,
         _subject: hideConferenceSubject ? '' : getConferenceName(state),
-        _visible: isToolboxVisible(state)
+        _visible: isToolboxVisible(state),
+        _recordingLabel: (isFileRecording || isStreamRecording || isEngaged) && !shouldHideRecordingLabel
     };
 }
 

react/features/conference/functions.web.js

@@ -1,30 +1,9 @@
-import { getName } from '../app/functions.web';
 import { isSuboptimalBrowser } from '../base/environment';
 import { translateToHTML } from '../base/i18n';
-import { getLocalParticipant } from '../base/participants';
-import { toState } from '../base/redux';
-import { getBackendSafePath, getJitsiMeetGlobalNS } from '../base/util';
-import { getVpaasBillingId } from '../billing-counter/functions';
 import { showWarningNotification } from '../notifications';
-import { createRnnoiseProcessor } from '../stream-effects/rnnoise';
 
 export * from './functions.any';
 
-/**
- * Returns the result of getWiFiStats from the global NS or does nothing
-(returns empty result).
- * Fixes a concurrency problem where we need to pass a function when creating
- * a JitsiConference, but that method is added to the context later.
- *
- * @returns {Promise}
- * @private
- */
-const getWiFiStatsMethod = () => {
-    const gloabalNS = getJitsiMeetGlobalNS();
-
-    return gloabalNS.getWiFiStats ? gloabalNS.getWiFiStats() : Promise.resolve('{}');
-};
-
 /**
  * Shows the suboptimal experience notification if needed.
  *
@@ -50,49 +29,3 @@ export function maybeShowSuboptimalExperienceNotification(dispatch, t) {
         );
     }
 }
-
-/**
- * Returns an object aggregating the conference options.
- *
- * @param {Object|Function} stateful - The redux store state.
- * @returns {Object} - Options object.
- */
-export function getConferenceOptions(stateful) {
-    const state = toState(stateful);
-
-    const options = state['features/base/config'];
-    const { locationURL } = state['features/base/connection'];
-    const { tenant } = state['features/base/jwt'];
-
-    const { email, name: nick } = getLocalParticipant(state);
-
-    if (tenant) {
-        options.siteID = tenant;
-    }
-
-    if (options.enableDisplayNameInStats && nick) {
-        options.statisticsDisplayName = nick;
-    }
-
-    if (options.enableEmailInStats && email) {
-        options.statisticsId = email;
-    }
-
-    if (locationURL) {
-        options.confID = `${locationURL.host}${getBackendSafePath(locationURL.pathname)}`;
-    }
-
-    options.applicationName = getName();
-    options.getWiFiStatsMethod = getWiFiStatsMethod;
-    options.createVADProcessor = createRnnoiseProcessor;
-    options.billingId = getVpaasBillingId(state);
-
-    // Disable CallStats, if requessted.
-    if (options.disableThirdPartyRequests) {
-        delete options.callStatsID;
-        delete options.callStatsSecret;
-        delete options.getWiFiStatsMethod;
-    }
-
-    return options;
-}

react/features/deep-linking/functions.js

@@ -3,7 +3,7 @@
 import { isMobileBrowser } from '../base/environment/utils';
 import { Platform } from '../base/react';
 import { URI_PROTOCOL_PATTERN } from '../base/util';
-import { isVpaasMeeting } from '../billing-counter/functions';
+import { isVpaasMeeting } from '../jaas/functions';
 
 import {
     DeepLinkingDesktopPage,

react/features/device-selection/functions.js

@@ -10,7 +10,7 @@ import {
     getDeviceIdByLabel,
     groupDevicesByKind,
     setAudioInputDeviceAndUpdateSettings,
-    setAudioOutputDeviceId,
+    setAudioOutputDevice,
     setVideoInputDeviceAndUpdateSettings
 } from '../base/devices';
 import { isIosMobileBrowser } from '../base/environment/utils';
@@ -189,12 +189,11 @@ export function processExternalDeviceRequest( // eslint-disable-line max-params
 
         if (deviceId) {
             switch (device.kind) {
-            case 'audioinput': {
+            case 'audioinput':
                 dispatch(setAudioInputDeviceAndUpdateSettings(deviceId));
                 break;
-            }
             case 'audiooutput':
-                setAudioOutputDeviceId(deviceId, dispatch);
+                dispatch(setAudioOutputDevice(deviceId));
                 break;
             case 'videoinput':
                 dispatch(setVideoInputDeviceAndUpdateSettings(deviceId));

react/features/display-name/components/web/DisplayNameBadge.js

@@ -0,0 +1,45 @@
+// @flow
+
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+
+type Props = {
+
+    /**
+     * The name to be displayed within the badge.
+     */
+    name: string
+}
+
+const useStyles = makeStyles(theme => {
+    return {
+        badge: {
+            background: 'rgba(0, 0, 0, 0.6)',
+            borderRadius: '3px',
+            color: theme.palette.text01,
+            maxWidth: '50%',
+            overflow: 'hidden',
+            padding: '2px 16px',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        }
+    };
+});
+
+/**
+ * Component that displays a name badge.
+ *
+ * @param {Props} props - The props of the component.
+ * @returns {ReactElement}
+ */
+const DisplayNameBadge = ({ name }: Props) => {
+    const classes = useStyles();
+
+    return (
+        <div className = { classes.badge }>
+            {name}
+        </div>
+    );
+};
+
+export default DisplayNameBadge;

react/features/display-name/components/web/DominantSpeakerName.js

@@ -0,0 +1,60 @@
+// @flow
+
+import { makeStyles } from '@material-ui/core/styles';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { getLocalParticipant } from '../../../base/participants';
+import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import { getLargeVideoParticipant } from '../../../large-video/functions';
+import { isToolboxVisible } from '../../../toolbox/functions.web';
+import { isLayoutTileView } from '../../../video-layout';
+
+import DisplayNameBadge from './DisplayNameBadge';
+
+const useStyles = makeStyles(theme => {
+    return {
+        badgeContainer: {
+            ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
+            alignItems: 'center',
+            display: 'flex',
+            justifyContent: 'center',
+            marginBottom: theme.spacing(2),
+            transition: 'margin-bottom 0.3s'
+        },
+        containerElevated: {
+            marginBottom: theme.spacing(7)
+        }
+    };
+});
+
+/**
+ * Component that renders the dominant speaker's name as a badge above the toolbar in stage view.
+ *
+ * @returns {ReactElement|null}
+ */
+const DominantSpeakerName = () => {
+    const classes = useStyles();
+    const largeVideoParticipant = useSelector(getLargeVideoParticipant);
+    const nameToDisplay = largeVideoParticipant?.name;
+    const selectedId = largeVideoParticipant?.id;
+
+    const localParticipant = useSelector(getLocalParticipant);
+    const localId = localParticipant?.id;
+
+    const isTileView = useSelector(isLayoutTileView);
+    const toolboxVisible = useSelector(isToolboxVisible);
+
+    if (nameToDisplay && selectedId !== localId && !isTileView) {
+        return (
+            <div
+                className = { `${classes.badgeContainer}${toolboxVisible ? '' : ` ${classes.containerElevated}`}` }>
+                <DisplayNameBadge name = { nameToDisplay } />
+            </div>
+        );
+    }
+
+    return null;
+};
+
+export default DominantSpeakerName;

react/features/display-name/components/web/index.js

@@ -3,3 +3,4 @@
 export { default as DisplayName } from './DisplayName';
 export { default as DisplayNameLabel } from './DisplayNameLabel';
 export { default as DisplayNamePrompt } from './DisplayNamePrompt';
+export { default as DominantSpeakerName } from './DominantSpeakerName';

react/features/dynamic-branding/reducer.js

@@ -15,6 +15,15 @@ import {
 const STORE_NAME = 'features/dynamic-branding';
 
 const DEFAULT_STATE = {
+
+    /**
+     * The pool of avatar backgrounds.
+     *
+     * @public
+     * @type {Array<string>}
+     */
+    avatarBackgrounds: [],
+
     /**
      * The custom background color for the LargeVideo.
      *
@@ -112,10 +121,12 @@ ReducerRegistry.register(STORE_NAME, (state = DEFAULT_STATE, action) => {
             didPageUrl,
             inviteDomain,
             logoClickUrl,
-            logoImageUrl
+            logoImageUrl,
+            avatarBackgrounds
         } = action.value;
 
         return {
+            avatarBackgrounds,
             backgroundColor,
             backgroundImageUrl,
             defaultBranding,

react/features/feedback/actions.js

@@ -4,8 +4,8 @@ import type { Dispatch } from 'redux';
 
 import { FEEDBACK_REQUEST_IN_PROGRESS } from '../../../modules/UI/UIErrors';
 import { openDialog } from '../base/dialog';
-import { isVpaasMeeting } from '../billing-counter/functions';
 import { extractFqnFromPath } from '../dynamic-branding/functions';
+import { isVpaasMeeting } from '../jaas/functions';
 
 import {
     CANCEL_FEEDBACK,

react/features/filmstrip/actions.web.js

@@ -137,7 +137,7 @@ export function clickOnVideo(n: number) {
 }
 
 /**
- * Sets the volume for a thumnail's audio.
+ * Sets the volume for a thumbnail's audio.
  *
  * @param {string} participantId - The participant ID asociated with the audio.
  * @param {string} volume - The volume level.

react/features/filmstrip/components/native/Filmstrip.js

@@ -6,12 +6,15 @@ import { SafeAreaView, ScrollView } from 'react-native';
 import { Platform } from '../../../base/react';
 import { connect } from '../../../base/redux';
 import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui/constants';
-import { isFilmstripVisible } from '../../functions';
+import { isFilmstripVisible, shouldRemoteVideosBeVisible } from '../../functions';
 
 import LocalThumbnail from './LocalThumbnail';
 import Thumbnail from './Thumbnail';
 import styles from './styles';
 
+// Immutable reference to avoid re-renders.
+const NO_REMOTE_VIDEOS = [];
+
 /**
  * Filmstrip component's property types.
  */
@@ -167,10 +170,11 @@ class Filmstrip extends Component<Props> {
  */
 function _mapStateToProps(state) {
     const { enabled, remoteParticipants } = state['features/filmstrip'];
+    const showRemoteVideos = shouldRemoteVideosBeVisible(state);
 
     return {
         _aspectRatio: state['features/base/responsive-ui'].aspectRatio,
-        _participants: remoteParticipants,
+        _participants: showRemoteVideos ? remoteParticipants : NO_REMOTE_VIDEOS,
         _visible: enabled && isFilmstripVisible(state)
     };
 }

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

@@ -13,7 +13,8 @@ import {
     getParticipantCount,
     isEveryoneModerator,
     pinParticipant,
-    getParticipantByIdOrUndefined
+    getParticipantByIdOrUndefined,
+    getLocalParticipant
 } from '../../../base/participants';
 import { Container } from '../../../base/react';
 import { connect } from '../../../base/redux';
@@ -24,6 +25,8 @@ import { DisplayNameLabel } from '../../../display-name';
 import { toggleToolboxVisible } from '../../../toolbox/actions.native';
 import { RemoteVideoMenu } from '../../../video-menu';
 import ConnectionStatusComponent from '../../../video-menu/components/native/ConnectionStatusComponent';
+import SharedVideoMenu
+    from '../../../video-menu/components/native/SharedVideoMenu';
 
 import AudioMutedIndicator from './AudioMutedIndicator';
 import DominantSpeakerIndicator from './DominantSpeakerIndicator';
@@ -48,6 +51,11 @@ type Props = {
      */
     _largeVideo: Object,
 
+    /**
+     * Shared video local participant owner.
+     */
+    _localVideoOwner: boolean,
+
     /**
      * The Redux representation of the participant to display.
      */
@@ -116,6 +124,7 @@ function Thumbnail(props: Props) {
     const {
         _audioMuted: audioMuted,
         _largeVideo: largeVideo,
+        _localVideoOwner,
         _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
         _renderModeratorIndicator: renderModeratorIndicator,
         _participant: participant,
@@ -144,6 +153,12 @@ function Thumbnail(props: Props) {
             dispatch(openDialog(ConnectionStatusComponent, {
                 participantID: participant.id
             }));
+        } else if (participant.isFakeParticipant) {
+            if (_localVideoOwner) {
+                dispatch(openDialog(SharedVideoMenu, {
+                    participant
+                }));
+            }
         } else {
             dispatch(openDialog(RemoteVideoMenu, {
                 participant
@@ -223,9 +238,11 @@ function _mapStateToProps(state, ownProps) {
     // filmstrip doesn't render the video of the participant who is rendered on
     // the stage i.e. as a large video.
     const largeVideo = state['features/large-video'];
+    const { ownerId } = state['features/shared-video'];
     const tracks = state['features/base/tracks'];
     const { participantID } = ownProps;
     const participant = getParticipantByIdOrUndefined(state, participantID);
+    const localParticipantId = getLocalParticipant(state).id;
     const id = participant?.id;
     const audioTrack
         = getTrackByMediaTypeAndParticipant(tracks, MEDIA_TYPE.AUDIO, id);
@@ -240,6 +257,7 @@ function _mapStateToProps(state, ownProps) {
     return {
         _audioMuted: audioTrack?.muted ?? true,
         _largeVideo: largeVideo,
+        _localVideoOwner: Boolean(ownerId === localParticipantId),
         _participant: participant,
         _renderDominantSpeakerIndicator: renderDominantSpeakerIndicator,
         _renderModeratorIndicator: renderModeratorIndicator,

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

@@ -10,6 +10,7 @@ import {
     sendAnalytics
 } from '../../../analytics';
 import { getToolbarButtons } from '../../../base/config';
+import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
 import { Icon, IconMenuDown, IconMenuUp } from '../../../base/icons';
 import { connect } from '../../../base/redux';
@@ -17,7 +18,13 @@ import { showToolbox } from '../../../toolbox/actions.web';
 import { isButtonEnabled, isToolboxVisible } from '../../../toolbox/functions.web';
 import { LAYOUTS, getCurrentLayout } from '../../../video-layout';
 import { setFilmstripVisible, setVisibleRemoteParticipants } from '../../actions';
-import { TILE_HORIZONTAL_MARGIN, TILE_VERTICAL_MARGIN, TOOLBAR_HEIGHT } from '../../constants';
+import {
+    ASPECT_RATIO_BREAKPOINT,
+    TILE_HORIZONTAL_MARGIN,
+    TILE_VERTICAL_MARGIN,
+    TOOLBAR_HEIGHT,
+    TOOLBAR_HEIGHT_MOBILE
+} from '../../constants';
 import { shouldRemoteVideosBeVisible } from '../../functions';
 
 import AudioTracksContainer from './AudioTracksContainer';
@@ -277,10 +284,10 @@ class Filmstrip extends PureComponent <Props> {
      * @param {Object} data - Information about the rendered items.
      * @returns {void}
      */
-    _onListItemsRendered({ overscanStartIndex, overscanStopIndex }) {
+    _onListItemsRendered({ visibleStartIndex, visibleStopIndex }) {
         const { dispatch } = this.props;
 
-        dispatch(setVisibleRemoteParticipants(overscanStartIndex, overscanStopIndex));
+        dispatch(setVisibleRemoteParticipants(visibleStartIndex, visibleStopIndex));
     }
 
     _onGridItemsRendered: Object => void;
@@ -292,14 +299,14 @@ class Filmstrip extends PureComponent <Props> {
      * @returns {void}
      */
     _onGridItemsRendered({
-        overscanColumnStartIndex,
-        overscanColumnStopIndex,
-        overscanRowStartIndex,
-        overscanRowStopIndex
+        visibleColumnStartIndex,
+        visibleColumnStopIndex,
+        visibleRowStartIndex,
+        visibleRowStopIndex
     }) {
         const { _columns, dispatch } = this.props;
-        const startIndex = (overscanRowStartIndex * _columns) + overscanColumnStartIndex;
-        const endIndex = (overscanRowStopIndex * _columns) + overscanColumnStopIndex;
+        const startIndex = (visibleRowStartIndex * _columns) + visibleColumnStartIndex;
+        const endIndex = (visibleRowStopIndex * _columns) + visibleColumnStopIndex;
 
         dispatch(setVisibleRemoteParticipants(startIndex, endIndex));
     }
@@ -338,6 +345,7 @@ class Filmstrip extends PureComponent <Props> {
                     initialScrollTop = { 0 }
                     itemKey = { this._gridItemKey }
                     onItemsRendered = { this._onGridItemsRendered }
+                    overscanRowCount = { 1 }
                     rowCount = { _rows }
                     rowHeight = { _thumbnailHeight + TILE_VERTICAL_MARGIN }
                     width = { _filmstripWidth }>
@@ -356,6 +364,7 @@ class Filmstrip extends PureComponent <Props> {
             itemKey: this._listItemKey,
             itemSize: 0,
             onItemsRendered: this._onListItemsRendered,
+            overscanCount: 1,
             width: _filmstripWidth,
             style: {
                 willChange: 'auto'
@@ -485,10 +494,6 @@ function _mapStateToProps(state) {
     const reduceHeight = state['features/toolbox'].visible && toolbarButtons.length;
     const remoteVideosVisible = shouldRemoteVideosBeVisible(state);
     const { isOpen: shiftRight } = state['features/chat'];
-    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
-        reduceHeight ? 'reduce-height' : ''
-    } ${shiftRight ? 'shift-right' : ''}`.trim();
-    const videosClassName = `filmstrip__videos${visible ? '' : ' hidden'}`;
     const {
         gridDimensions = {},
         filmstripHeight,
@@ -496,12 +501,35 @@ function _mapStateToProps(state) {
         thumbnailSize: tileViewThumbnailSize
     } = state['features/filmstrip'].tileViewDimensions;
     const _currentLayout = getCurrentLayout(state);
+
+    const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+    const availableSpace = clientHeight - filmstripHeight;
+    let filmstripPadding = 0;
+
+    if (availableSpace > 0) {
+        const paddingValue = TOOLBAR_HEIGHT_MOBILE - availableSpace;
+
+        if (paddingValue > 0) {
+            filmstripPadding = paddingValue;
+        }
+    } else {
+        filmstripPadding = TOOLBAR_HEIGHT_MOBILE;
+    }
+
+    const collapseTileView = reduceHeight
+        && isMobileBrowser()
+        && clientWidth <= ASPECT_RATIO_BREAKPOINT;
+
+    const className = `${remoteVideosVisible ? '' : 'hide-videos'} ${
+        reduceHeight ? 'reduce-height' : ''
+    } ${shiftRight ? 'shift-right' : ''} ${collapseTileView ? 'collapse' : ''}`.trim();
+    const videosClassName = `filmstrip__videos${visible ? '' : ' hidden'}`;
     let _thumbnailSize, remoteFilmstripHeight, remoteFilmstripWidth;
 
     switch (_currentLayout) {
     case LAYOUTS.TILE_VIEW:
         _thumbnailSize = tileViewThumbnailSize;
-        remoteFilmstripHeight = filmstripHeight;
+        remoteFilmstripHeight = filmstripHeight - (collapseTileView && filmstripPadding > 0 ? filmstripPadding : 0);
         remoteFilmstripWidth = filmstripWidth;
         break;
     case LAYOUTS.VERTICAL_FILMSTRIP_VIEW: {

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

@@ -2,10 +2,10 @@
 
 import React, { Component } from 'react';
 
-import { isMobileBrowser } from '../../../../../react/features/base/environment/utils';
 import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics';
 import { AudioLevelIndicator } from '../../../audio-level-indicator';
 import { Avatar } from '../../../base/avatar';
+import { isMobileBrowser } from '../../../base/environment/utils';
 import JitsiMeetJS from '../../../base/lib-jitsi-meet/_';
 import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
 import {
@@ -139,6 +139,11 @@ export type Props = {|
      */
     _isCurrentlyOnLargeVideo: boolean,
 
+    /**
+     * Whether we are currently running in a mobile browser.
+     */
+    _isMobile: boolean,
+
     /**
      * Indicates whether the participant is screen sharing.
      */
@@ -612,7 +617,7 @@ class Thumbnail extends Component<Props, State> {
      * @returns {ReactElement}
      */
     _renderFakeParticipant() {
-        const { _participant: { avatarURL } } = this.props;
+        const { _isMobile, _participant: { avatarURL } } = this.props;
         const styles = this._getStyles();
         const containerClassName = this._getContainerClassName();
 
@@ -621,8 +626,10 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = 'sharedVideoContainer'
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
+                { ...(_isMobile ? {} : {
+                    onMouseEnter: this._onMouseEnter,
+                    onMouseLeave: this._onMouseLeave
+                }) }
                 style = { styles.thumbnail }>
                 {avatarURL ? (
                     <img
@@ -753,6 +760,7 @@ class Thumbnail extends Component<Props, State> {
         const {
             _defaultLocalDisplayName,
             _disableLocalVideoFlip,
+            _isMobile,
             _isScreenSharing,
             _localFlipX,
             _disableProfile,
@@ -772,13 +780,17 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = 'localVideoContainer'
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
-                { ...(isMobileBrowser() ? {
-                    onTouchEnd: this._onTouchEnd,
-                    onTouchMove: this._onTouchMove,
-                    onTouchStart: this._onTouchStart
-                } : {}) }
+                { ...(_isMobile
+                    ? {
+                        onTouchEnd: this._onTouchEnd,
+                        onTouchMove: this._onTouchMove,
+                        onTouchStart: this._onTouchStart
+                    }
+                    : {
+                        onMouseEnter: this._onMouseEnter,
+                        onMouseLeave: this._onMouseLeave
+                    }
+                ) }
                 style = { styles.thumbnail }>
                 <div className = 'videocontainer__background' />
                 <span id = 'localVideoWrapper'>
@@ -875,6 +887,7 @@ class Thumbnail extends Component<Props, State> {
      */
     _renderRemoteParticipant() {
         const {
+            _isMobile,
             _isTestModeEnabled,
             _participant,
             _startSilent,
@@ -909,13 +922,17 @@ class Thumbnail extends Component<Props, State> {
                 className = { containerClassName }
                 id = { `participant_${id}` }
                 onClick = { this._onClick }
-                onMouseEnter = { this._onMouseEnter }
-                onMouseLeave = { this._onMouseLeave }
-                { ...(isMobileBrowser() ? {
-                    onTouchEnd: this._onTouchEnd,
-                    onTouchMove: this._onTouchMove,
-                    onTouchStart: this._onTouchStart
-                } : {}) }
+                { ...(_isMobile
+                    ? {
+                        onTouchEnd: this._onTouchEnd,
+                        onTouchMove: this._onTouchMove,
+                        onTouchStart: this._onTouchStart
+                    }
+                    : {
+                        onMouseEnter: this._onMouseEnter,
+                        onMouseLeave: this._onMouseLeave
+                    }
+                ) }
                 style = { styles.thumbnail }>
                 {
                     _videoTrack && <VideoTrack
@@ -1031,6 +1048,7 @@ function _mapStateToProps(state, ownProps): Object {
     } = state['features/base/config'];
     const { NORMAL = 8 } = interfaceConfig.INDICATOR_FONT_SIZES || {};
     const { localFlipX } = state['features/base/settings'];
+    const _isMobile = isMobileBrowser();
 
 
     switch (_currentLayout) {
@@ -1072,7 +1090,7 @@ function _mapStateToProps(state, ownProps): Object {
     return {
         _audioTrack,
         _connectionIndicatorAutoHideEnabled: interfaceConfig.CONNECTION_INDICATOR_AUTO_HIDE_ENABLED,
-        _connectionIndicatorDisabled: isMobileBrowser() || interfaceConfig.CONNECTION_INDICATOR_DISABLED,
+        _connectionIndicatorDisabled: _isMobile || interfaceConfig.CONNECTION_INDICATOR_DISABLED,
         _currentLayout,
         _defaultLocalDisplayName: interfaceConfig.DEFAULT_LOCAL_DISPLAY_NAME,
         _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
@@ -1081,6 +1099,7 @@ function _mapStateToProps(state, ownProps): Object {
         _isAudioOnly: Boolean(state['features/base/audio-only'].enabled),
         _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,
         _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
+        _isMobile,
         _isScreenSharing: _videoTrack?.videoType === 'desktop',
         _isTestModeEnabled: isTestModeEnabled(state),
         _isVideoPlayable: id && isVideoPlayable(state, id),

react/features/filmstrip/constants.js

@@ -163,6 +163,11 @@ export const TILE_HORIZONTAL_MARGIN = 4;
  */
 export const TOOLBAR_HEIGHT = 72;
 
+/**
+ * The height of the whole toolbar.
+ */
+export const TOOLBAR_HEIGHT_MOBILE = 60;
+
 /**
  * The size of the horizontal border of a thumbnail.
  *

react/features/filmstrip/functions.native.js

@@ -1,7 +1,7 @@
 // @flow
 
 import { getFeatureFlag, FILMSTRIP_ENABLED } from '../base/flags';
-import { getParticipantCountWithFake } from '../base/participants';
+import { getParticipantCountWithFake, getPinnedParticipant } from '../base/participants';
 import { toState } from '../base/redux';
 
 /**
@@ -25,3 +25,35 @@ export function isFilmstripVisible(stateful: Object | Function) {
 
     return getParticipantCountWithFake(state) > 1;
 }
+
+/**
+ * Determines whether the remote video thumbnails should be displayed/visible in
+ * the filmstrip.
+ *
+ * @param {Object} state - The full redux state.
+ * @returns {boolean} - If remote video thumbnails should be displayed/visible
+ * in the filmstrip, then {@code true}; otherwise, {@code false}.
+ */
+export function shouldRemoteVideosBeVisible(state: Object) {
+    if (state['features/invite'].calleeInfoVisible) {
+        return false;
+    }
+
+    // Include fake participants to derive how many thumbnails are dispalyed,
+    // as it is assumed all participants, including fake, will be displayed
+    // in the filmstrip.
+    const participantCount = getParticipantCountWithFake(state);
+    const pinnedParticipant = getPinnedParticipant(state);
+    const { disable1On1Mode } = state['features/base/config'];
+
+    return Boolean(
+        participantCount > 2
+
+            // Always show the filmstrip when there is another participant to
+            // show and the local video is pinned. Note we are not taking the
+            // toolbar visibility into account here (unlike web) because
+            // showing / hiding views in quick succession on mobile is taxing.
+            || (participantCount > 1 && pinnedParticipant?.local)
+
+            || disable1On1Mode);
+}

react/features/filmstrip/reducer.js

@@ -31,7 +31,7 @@ const DEFAULT_STATE = {
     horizontalViewDimensions: {},
 
     /**
-     * The custom audio volume levels per perticipant.
+     * The custom audio volume levels per participant.
      *
      * @type {Object}
      */

react/features/invite/components/add-people-dialog/web/AddPeopleDialog.js

@@ -8,9 +8,9 @@ import { Dialog } from '../../../../base/dialog';
 import { translate } from '../../../../base/i18n';
 import { JitsiRecordingConstants } from '../../../../base/lib-jitsi-meet';
 import { connect } from '../../../../base/redux';
-import { isVpaasMeeting } from '../../../../billing-counter/functions';
 import { isDynamicBrandingDataLoaded } from '../../../../dynamic-branding/functions';
 import EmbedMeetingTrigger from '../../../../embed-meeting/components/EmbedMeetingTrigger';
+import { isVpaasMeeting } from '../../../../jaas/functions';
 import { getActiveSession } from '../../../../recording';
 import { updateDialInNumbers } from '../../../actions';
 import {

react/features/invite/components/add-people-dialog/web/InviteContactsForm.js

@@ -10,7 +10,7 @@ import { Icon, IconPhone } from '../../../../base/icons';
 import { getLocalParticipant } from '../../../../base/participants';
 import { MultiSelectAutocomplete } from '../../../../base/react';
 import { connect } from '../../../../base/redux';
-import { isVpaasMeeting } from '../../../../billing-counter/functions';
+import { isVpaasMeeting } from '../../../../jaas/functions';
 import { hideAddPeopleDialog } from '../../../actions';
 import { INVITE_TYPES } from '../../../constants';
 import AbstractAddPeopleDialog, {

react/features/invite/components/dial-in-summary/native/DialInSummary.js

@@ -58,7 +58,7 @@ class DialInSummary extends Component<Props> {
                     headerLabelKey: 'info.label'
                 }}
                 modalId = { DIAL_IN_SUMMARY_VIEW_ID }
-                style = { styles.backDrop } >
+                style = { styles.backDrop }>
                 <WebView
                     onError = { this._onError }
                     onShouldStartLoadWithRequest = { this._onNavigate }

react/features/invite/functions.js

@@ -9,7 +9,7 @@ import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
 import { getLocalParticipant, isLocalParticipantModerator } from '../base/participants';
 import { toState } from '../base/redux';
 import { doGetJSON, parseURIString } from '../base/util';
-import { isVpaasMeeting } from '../billing-counter/functions';
+import { isVpaasMeeting } from '../jaas/functions';
 
 import { INVITE_TYPES, SIP_ADDRESS_REGEX } from './constants';
 import logger from './logger';

react/features/jaas/actions.web.js

@@ -1,12 +1,11 @@
 // @flow
 
 import { openDialog } from '../base/dialog';
-import { VPAAS_TENANT_PREFIX } from '../billing-counter/constants';
-import { getVpaasTenant } from '../billing-counter/functions';
 
 import { SET_DETAILS } from './actionTypes';
 import { PremiumFeatureDialog } from './components';
-import { isFeatureDisabled, sendGetDetailsRequest } from './functions';
+import { VPAAS_TENANT_PREFIX } from './constants';
+import { getVpaasTenant, isFeatureDisabled, sendGetDetailsRequest } from './functions';
 import logger from './logger';
 
 /**

react/features/jaas/constants.js

@@ -23,3 +23,8 @@ export const FEATURES = {
  * URL for displaying JaaS upgrade options
  */
 export const JAAS_UPGRADE_URL = 'https://jaas.8x8.vc/#/plan/upgrade';
+
+/**
+ * The prefix for the vpaas tenant.
+ */
+export const VPAAS_TENANT_PREFIX = 'vpaas-magic-cookie-';

react/features/jaas/functions.js

@@ -1,9 +1,53 @@
 // @flow
 
-import { getVpaasTenant } from '../billing-counter/functions';
 
+import { VPAAS_TENANT_PREFIX } from './constants';
 import logger from './logger';
 
+/**
+ * Returns the full vpaas tenant if available, given a path.
+ *
+ * @param {string} path - The meeting url path.
+ * @returns {string}
+ */
+function extractVpaasTenantFromPath(path: string) {
+    const [ , tenant ] = path.split('/');
+
+    if (tenant.startsWith(VPAAS_TENANT_PREFIX)) {
+        return tenant;
+    }
+
+    return '';
+}
+
+/**
+ * Returns the vpaas tenant.
+ *
+ * @param {Object} state - The global state.
+ * @returns {string}
+ */
+export function getVpaasTenant(state: Object) {
+    return extractVpaasTenantFromPath(state['features/base/connection'].locationURL.pathname);
+}
+
+/**
+ * Returns true if the current meeting is a vpaas one.
+ *
+ * @param {Object} state - The state of the app.
+ * @returns {boolean}
+ */
+export function isVpaasMeeting(state: Object) {
+    const connection = state['features/base/connection'];
+
+    if (connection?.locationURL?.pathname) {
+        return Boolean(
+            extractVpaasTenantFromPath(connection?.locationURL?.pathname)
+        );
+    }
+
+    return false;
+}
+
 /**
  * Sends a request for retrieving jaas customer details.
  *

react/features/jaas/middleware.any.js

@@ -1,10 +1,8 @@
 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 { countEndpoint } from './actions';
-import { isVpaasMeeting, extractVpaasTenantFromPath } from './functions';
+import { isVpaasMeeting, getVpaasTenant } from './functions';
 
 /**
  * The redux middleware for billing counter.
@@ -20,17 +18,6 @@ MiddlewareRegistry.register(store => next => async action => {
 
         break;
     }
-
-    case PARTICIPANT_JOINED: {
-        const shouldCount = !store.getState()['features/billing-counter'].endpointCounted
-              && !action.participant.local;
-
-        if (shouldCount) {
-            store.dispatch(countEndpoint());
-        }
-
-        break;
-    }
     }
 
     return next(action);
@@ -45,7 +32,6 @@ MiddlewareRegistry.register(store => next => async action => {
 function _maybeTrackVpaasConferenceJoin(state) {
     if (isVpaasMeeting(state)) {
         sendAnalytics(createVpaasConferenceJoinedEvent(
-            extractVpaasTenantFromPath(
-                state['features/base/connection'].locationURL.pathname)));
+            getVpaasTenant(state)));
     }
 }

react/features/jaas/middleware.web.js

@@ -3,11 +3,12 @@ import { CONFERENCE_JOINED } from '../base/conference/actionTypes';
 import { CONNECTION_FAILED } from '../base/connection';
 import { JitsiConnectionErrors } from '../base/lib-jitsi-meet';
 import { MiddlewareRegistry } from '../base/redux';
-import { isVpaasMeeting } from '../billing-counter/functions';
+
 
 import { SET_DETAILS } from './actionTypes';
 import { getCustomerDetails } from './actions';
 import { STATUSES } from './constants';
+import { isVpaasMeeting } from './functions';
 
 /**
  * The redux middleware for jaas.

react/features/large-video/functions.js

@@ -0,0 +1,15 @@
+// @flow
+
+import { getParticipantById } from '../base/participants';
+
+/**
+ * Selector for the participant currently displaying on the large video.
+ *
+ * @param {Object} state - The redux state.
+ * @returns {Object}
+ */
+export function getLargeVideoParticipant(state: Object) {
+    const { participantId } = state['features/large-video'];
+
+    return getParticipantById(state, participantId);
+}

react/features/lobby/functions.js

@@ -1,28 +1,5 @@
 // @flow
 
-import { getCurrentConference } from '../base/conference';
-
-/**
- * Approves (lets in) or rejects a knocking participant.
- *
- * @param {Function} getState - Function to get the Redux state.
- * @param {string} id - The id of the knocking participant.
- * @param {boolean} approved - True if the participant is approved, false otherwise.
- * @returns {Function}
- */
-export function setKnockingParticipantApproval(getState: Function, id: string, approved: boolean) {
-    const conference = getCurrentConference(getState());
-
-    if (conference) {
-        if (approved) {
-            conference.lobbyApproveAccess(id);
-        } else {
-            conference.lobbyDenyAccess(id);
-        }
-    }
-}
-
-
 /**
  * Selector to return lobby state.
  *
@@ -32,3 +9,16 @@ export function setKnockingParticipantApproval(getState: Function, id: string, a
 export function getLobbyState(state: any) {
     return state['features/lobby'];
 }
+
+
+/**
+ * Selector to return array with knocking participant ids.
+ *
+ * @param {any} state - State object.
+ * @returns {Array}
+ */
+export function getKnockingParticipantsById(state: any) {
+    const { knockingParticipants } = state['features/lobby'];
+
+    return knockingParticipants.map(participant => participant.id);
+}

react/features/mobile/polyfills/RTCPeerConnection.js

@@ -1,352 +1,21 @@
 // @flow
 
-import { NativeModules } from 'react-native';
-import { RTCPeerConnection, RTCSessionDescription } from 'react-native-webrtc';
+import { RTCPeerConnection as PC } from 'react-native-webrtc';
 
-/* eslint-disable no-unused-vars */
-
-// Address families.
-const AF_INET6 = 30; /* IPv6 */
-
-// Protocols (RFC 1700)
-const IPPROTO_TCP = 6; /* tcp */
-const IPPROTO_UDP = 17; /* user datagram protocol */
-
-// Protocol families, same as address families for now.
-const PF_INET6 = AF_INET6;
-
-const SOCK_DGRAM = 2; /* datagram socket */
-const SOCK_STREAM = 1; /* stream socket */
-
-/* eslint-enable no-unused-vars */
-
-// XXX At the time of this writing extending RTCPeerConnection using ES6 'class'
-// and 'extends' causes a runtime error related to the attempt to define the
-// onaddstream property setter. The error mentions that babelHelpers.set is
-// undefined which appears to be a thing inside React Native's packager. As a
-// workaround, extend using the pre-ES6 way.
+import { synthesizeIPv6Addresses } from './ipv6utils';
 
 /**
- * The RTCPeerConnection provided by react-native-webrtc fires onaddstream
- * before it remembers remotedescription (and thus makes it available to API
- * clients). Because that appears to be a problem for lib-jitsi-meet which has
- * been successfully running on Chrome, Firefox and others for a very long
- * time, attempt to meet its expectations (by extending RTCPPeerConnection).
- *
- * @class
+ * Override PeerConnection to synthesize IPv6 addresses.
  */
-export default function _RTCPeerConnection(...args: any[]) {
+export default class RTCPeerConnection extends PC {
 
-    /* eslint-disable indent, no-invalid-this */
-
-    RTCPeerConnection.apply(this, args);
-
-    this.onaddstream = (...args) => // eslint-disable-line no-shadow
-        (this._onaddstreamQueue
-                ? this._queueOnaddstream
-                : this._invokeOnaddstream)
-            .apply(this, args);
-
-    // Shadow RTCPeerConnection's onaddstream but after _RTCPeerConnection has
-    // assigned to the property in question. Defining the property on
-    // _RTCPeerConnection's prototype may (or may not, I don't know) work but I
-    // don't want to try because the following approach appears to work and I
-    // understand it.
-
-    // $FlowFixMe
-    Object.defineProperty(this, 'onaddstream', {
-        configurable: true,
-        enumerable: true,
-        get() {
-            return this._onaddstream;
-        },
-        set(value) {
-            this._onaddstream = value;
-        }
-    });
-
-    /* eslint-enable indent, no-invalid-this */
-}
-
-_RTCPeerConnection.prototype = Object.create(RTCPeerConnection.prototype);
-_RTCPeerConnection.prototype.constructor = _RTCPeerConnection;
-
-_RTCPeerConnection.prototype._invokeOnaddstream = function(...args) {
-    const onaddstream = this._onaddstream;
-
-    return onaddstream && onaddstream.apply(this, args);
-};
-
-_RTCPeerConnection.prototype._invokeQueuedOnaddstream = function(q) {
-    q && q.forEach(args => {
-        try {
-            this._invokeOnaddstream(...args);
-        } catch (e) {
-            // TODO Determine whether the combination of the standard
-            // setRemoteDescription and onaddstream results in a similar
-            // swallowing of errors.
-            console.error(e);
-        }
-    });
-};
-
-_RTCPeerConnection.prototype._queueOnaddstream = function(...args) {
-    this._onaddstreamQueue.push(Array.from(args));
-};
-
-_RTCPeerConnection.prototype.setRemoteDescription = function(description) {
-
-    return (
-        _synthesizeIPv6Addresses(description)
-            .catch(reason => {
-                reason && console.error(reason);
-
-                return description;
-            })
-            .then(value => _setRemoteDescription.bind(this)(value)));
-
-};
-
-/**
- * Adapts react-native-webrtc's {@link RTCPeerConnection#setRemoteDescription}
- * implementation which uses the deprecated, callback-based version to the
- * {@code Promise}-based version.
- *
- * @param {RTCSessionDescription} description - The RTCSessionDescription
- * which specifies the configuration of the remote end of the connection.
- * @private
- * @private
- * @returns {Promise}
- */
-function _setRemoteDescription(description) {
-    return new Promise((resolve, reject) => {
-
-        /* eslint-disable no-invalid-this */
-
-        // Ensure I'm not remembering onaddstream invocations from previous
-        // setRemoteDescription calls. I shouldn't be but... anyway.
-        this._onaddstreamQueue = [];
-
-        RTCPeerConnection.prototype.setRemoteDescription.call(this, description)
-            .then((...args) => {
-                let q;
-
-                try {
-                    resolve(...args);
-                } finally {
-                    q = this._onaddstreamQueue;
-                    this._onaddstreamQueue = undefined;
-                }
-
-                this._invokeQueuedOnaddstream(q);
-            }, (...args) => {
-                this._onaddstreamQueue = undefined;
-
-                reject(...args);
-            });
-
-        /* eslint-enable no-invalid-this */
-    });
-}
-
-// XXX The function _synthesizeIPv6FromIPv4Address is not placed relative to the
-// other functions in the file according to alphabetical sorting rule of the
-// coding style. But eslint wants constants to be defined before they are used.
-
-/**
- * Synthesizes an IPv6 address from a specific IPv4 address.
- *
- * @param {string} ipv4 - The IPv4 address from which an IPv6 address is to be
- * synthesized.
- * @returns {Promise<?string>} A {@code Promise} which gets resolved with the
- * IPv6 address synthesized from the specified {@code ipv4} or a falsy value to
- * be treated as inability to synthesize an IPv6 address from the specified
- * {@code ipv4}.
- */
-const _synthesizeIPv6FromIPv4Address: string => Promise<?string> = (function() {
-    // POSIX.getaddrinfo
-    const { POSIX } = NativeModules;
-
-    if (POSIX) {
-        const { getaddrinfo } = POSIX;
-
-        if (typeof getaddrinfo === 'function') {
-            return ipv4 =>
-                getaddrinfo(/* hostname */ ipv4, /* servname */ undefined)
-                    .then(([ { ai_addr: ipv6 } ]) => ipv6);
-        }
+    /**
+     * Synthesize IPv6 addresses before calling the underlying setRemoteDescription.
+     *
+     * @param {Object} description - SDP.
+     * @returns {Promise<undefined>} A promise which is resolved once the operation is complete.
+     */
+    async setRemoteDescription(description: Object) {
+        return super.setRemoteDescription(await synthesizeIPv6Addresses(description));
     }
-
-    // NAT64AddrInfo.getIPv6Address
-    const { NAT64AddrInfo } = NativeModules;
-
-    if (NAT64AddrInfo) {
-        const { getIPv6Address } = NAT64AddrInfo;
-
-        if (typeof getIPv6Address === 'function') {
-            return getIPv6Address;
-        }
-    }
-
-    // There's no POSIX.getaddrinfo or NAT64AddrInfo.getIPv6Address.
-    return () =>
-        Promise.reject(
-            'The impossible just happened! No POSIX.getaddrinfo or'
-                + ' NAT64AddrInfo.getIPv6Address!');
-})();
-
-/**
- * Synthesizes IPv6 addresses on iOS in order to support IPv6 NAT64 networks.
- *
- * @param {RTCSessionDescription} sdp - The RTCSessionDescription which
- * specifies the configuration of the remote end of the connection.
- * @private
- * @returns {Promise}
- */
-function _synthesizeIPv6Addresses(sdp) {
-    return (
-        new Promise(resolve => resolve(_synthesizeIPv6Addresses0(sdp)))
-            .then(({ ips, lines }) =>
-                Promise.all(Array.from(ips.values()))
-                    .then(() => _synthesizeIPv6Addresses1(sdp, ips, lines))
-            ));
-}
-
-/* eslint-disable max-depth */
-
-/**
- * Begins the asynchronous synthesis of IPv6 addresses.
- *
- * @param {RTCSessionDescription} sessionDescription - The RTCSessionDescription
- * for which IPv6 addresses will be synthesized.
- * @private
- * @returns {{
- *     ips: Map,
- *     lines: Array
- * }}
- */
-function _synthesizeIPv6Addresses0(sessionDescription) {
-    const sdp = sessionDescription.sdp;
-    let start = 0;
-    const lines = [];
-    const ips = new Map();
-
-    do {
-        const end = sdp.indexOf('\r\n', start);
-        let line;
-
-        if (end === -1) {
-            line = sdp.substring(start);
-
-            // Break out of the loop at the end of the iteration.
-            start = undefined;
-        } else {
-            line = sdp.substring(start, end);
-            start = end + 2;
-        }
-
-        if (line.startsWith('a=candidate:')) {
-            const candidate = line.split(' ');
-
-            if (candidate.length >= 10 && candidate[6] === 'typ') {
-                const ip4s = [ candidate[4] ];
-                let abort = false;
-
-                for (let i = 8; i < candidate.length; ++i) {
-                    if (candidate[i] === 'raddr') {
-                        ip4s.push(candidate[++i]);
-                        break;
-                    }
-                }
-
-                for (const ip of ip4s) {
-                    if (ip.indexOf(':') === -1) {
-                        ips.has(ip)
-                            || ips.set(ip, new Promise((resolve, reject) => {
-                                const v = ips.get(ip);
-
-                                if (v && typeof v === 'string') {
-                                    resolve(v);
-                                } else {
-                                    _synthesizeIPv6FromIPv4Address(ip).then(
-                                        value => {
-                                            if (!value
-                                                    || value.indexOf(':') === -1
-                                                    || value === ips.get(ip)) {
-                                                ips.delete(ip);
-                                            } else {
-                                                ips.set(ip, value);
-                                            }
-                                            resolve(value);
-                                        },
-                                        reject);
-                                }
-                            }));
-                    } else {
-                        abort = true;
-                        break;
-                    }
-                }
-                if (abort) {
-                    ips.clear();
-                    break;
-                }
-
-                line = candidate;
-            }
-        }
-
-        lines.push(line);
-    } while (start);
-
-    return {
-        ips,
-        lines
-    };
-}
-
-/* eslint-enable max-depth */
-
-/**
- * Completes the asynchronous synthesis of IPv6 addresses.
- *
- * @param {RTCSessionDescription} sessionDescription - The RTCSessionDescription
- * for which IPv6 addresses are being synthesized.
- * @param {Map} ips - A Map of IPv4 addresses found in the specified
- * sessionDescription to synthesized IPv6 addresses.
- * @param {Array} lines - The lines of the specified sessionDescription.
- * @private
- * @returns {RTCSessionDescription} A RTCSessionDescription that represents the
- * result of the synthesis of IPv6 addresses.
- */
-function _synthesizeIPv6Addresses1(sessionDescription, ips, lines) {
-    if (ips.size === 0) {
-        return sessionDescription;
-    }
-
-    for (let l = 0; l < lines.length; ++l) {
-        const candidate = lines[l];
-
-        if (typeof candidate !== 'string') {
-            let ip4 = candidate[4];
-            let ip6 = ips.get(ip4);
-
-            ip6 && (candidate[4] = ip6);
-
-            for (let i = 8; i < candidate.length; ++i) {
-                if (candidate[i] === 'raddr') {
-                    ip4 = candidate[++i];
-                    (ip6 = ips.get(ip4)) && (candidate[i] = ip6);
-                    break;
-                }
-            }
-
-            lines[l] = candidate.join(' ');
-        }
-    }
-
-    return new RTCSessionDescription({
-        sdp: lines.join('\r\n'),
-        type: sessionDescription.type
-    });
 }

react/features/mobile/polyfills/ipv6utils.js

@@ -0,0 +1,199 @@
+// @flow
+
+import { NativeModules } from 'react-native';
+import { RTCSessionDescription } from 'react-native-webrtc';
+
+/**
+ * Synthesizes IPv6 addresses on iOS in order to support IPv6 NAT64 networks.
+ *
+ * @param {RTCSessionDescription} sdp - The RTCSessionDescription which
+ * specifies the configuration of the remote end of the connection.
+ * @private
+ * @returns {Promise}
+ */
+export function synthesizeIPv6Addresses(sdp: RTCSessionDescription) {
+    return (
+        new Promise(resolve => resolve(_synthesizeIPv6Addresses0(sdp)))
+            .then(({ ips, lines }) =>
+                Promise.all(Array.from(ips.values()))
+                    .then(() => _synthesizeIPv6Addresses1(sdp, ips, lines))
+            ));
+}
+
+/* eslint-disable max-depth */
+
+/**
+ * Synthesizes an IPv6 address from a specific IPv4 address.
+ *
+ * @param {string} ipv4 - The IPv4 address from which an IPv6 address is to be
+ * synthesized.
+ * @returns {Promise<?string>} A {@code Promise} which gets resolved with the
+ * IPv6 address synthesized from the specified {@code ipv4} or a falsy value to
+ * be treated as inability to synthesize an IPv6 address from the specified
+ * {@code ipv4}.
+ */
+const _synthesizeIPv6FromIPv4Address: string => Promise<?string> = (function() {
+    // POSIX.getaddrinfo
+    const { POSIX } = NativeModules;
+
+    if (POSIX) {
+        const { getaddrinfo } = POSIX;
+
+        if (typeof getaddrinfo === 'function') {
+            return ipv4 =>
+                getaddrinfo(/* hostname */ ipv4, /* servname */ undefined)
+                    .then(([ { ai_addr: ipv6 } ]) => ipv6);
+        }
+    }
+
+    // NAT64AddrInfo.getIPv6Address
+    const { NAT64AddrInfo } = NativeModules;
+
+    if (NAT64AddrInfo) {
+        const { getIPv6Address } = NAT64AddrInfo;
+
+        if (typeof getIPv6Address === 'function') {
+            return getIPv6Address;
+        }
+    }
+
+    // There's no POSIX.getaddrinfo or NAT64AddrInfo.getIPv6Address.
+    return ip => Promise.resolve(ip);
+})();
+
+/**
+ * Begins the asynchronous synthesis of IPv6 addresses.
+ *
+ * @param {RTCSessionDescription} sessionDescription - The RTCSessionDescription
+ * for which IPv6 addresses will be synthesized.
+ * @private
+ * @returns {{
+ *     ips: Map,
+ *     lines: Array
+ * }}
+ */
+function _synthesizeIPv6Addresses0(sessionDescription) {
+    const sdp = sessionDescription.sdp;
+    let start = 0;
+    const lines = [];
+    const ips = new Map();
+
+    do {
+        const end = sdp.indexOf('\r\n', start);
+        let line;
+
+        if (end === -1) {
+            line = sdp.substring(start);
+
+            // Break out of the loop at the end of the iteration.
+            start = undefined;
+        } else {
+            line = sdp.substring(start, end);
+            start = end + 2;
+        }
+
+        if (line.startsWith('a=candidate:')) {
+            const candidate = line.split(' ');
+
+            if (candidate.length >= 10 && candidate[6] === 'typ') {
+                const ip4s = [ candidate[4] ];
+                let abort = false;
+
+                for (let i = 8; i < candidate.length; ++i) {
+                    if (candidate[i] === 'raddr') {
+                        ip4s.push(candidate[++i]);
+                        break;
+                    }
+                }
+
+                for (const ip of ip4s) {
+                    if (ip.indexOf(':') === -1) {
+                        ips.has(ip)
+                            || ips.set(ip, new Promise((resolve, reject) => {
+                                const v = ips.get(ip);
+
+                                if (v && typeof v === 'string') {
+                                    resolve(v);
+                                } else {
+                                    _synthesizeIPv6FromIPv4Address(ip).then(
+                                        value => {
+                                            if (!value
+                                                    || value.indexOf(':') === -1
+                                                    || value === ips.get(ip)) {
+                                                ips.delete(ip);
+                                            } else {
+                                                ips.set(ip, value);
+                                            }
+                                            resolve(value);
+                                        },
+                                        reject);
+                                }
+                            }));
+                    } else {
+                        abort = true;
+                        break;
+                    }
+                }
+                if (abort) {
+                    ips.clear();
+                    break;
+                }
+
+                line = candidate;
+            }
+        }
+
+        lines.push(line);
+    } while (start);
+
+    return {
+        ips,
+        lines
+    };
+}
+
+/* eslint-enable max-depth */
+
+/**
+ * Completes the asynchronous synthesis of IPv6 addresses.
+ *
+ * @param {RTCSessionDescription} sessionDescription - The RTCSessionDescription
+ * for which IPv6 addresses are being synthesized.
+ * @param {Map} ips - A Map of IPv4 addresses found in the specified
+ * sessionDescription to synthesized IPv6 addresses.
+ * @param {Array} lines - The lines of the specified sessionDescription.
+ * @private
+ * @returns {RTCSessionDescription} A RTCSessionDescription that represents the
+ * result of the synthesis of IPv6 addresses.
+ */
+function _synthesizeIPv6Addresses1(sessionDescription, ips, lines) {
+    if (ips.size === 0) {
+        return sessionDescription;
+    }
+
+    for (let l = 0; l < lines.length; ++l) {
+        const candidate = lines[l];
+
+        if (typeof candidate !== 'string') {
+            let ip4 = candidate[4];
+            let ip6 = ips.get(ip4);
+
+            ip6 && (candidate[4] = ip6);
+
+            for (let i = 8; i < candidate.length; ++i) {
+                if (candidate[i] === 'raddr') {
+                    ip4 = candidate[++i];
+                    (ip6 = ips.get(ip4)) && (candidate[i] = ip6);
+                    break;
+                }
+            }
+
+            lines[l] = candidate.join(' ');
+        }
+    }
+
+    return new RTCSessionDescription({
+        sdp: lines.join('\r\n'),
+        type: sessionDescription.type
+    });
+}

react/features/mobile/watchos/middleware.js

@@ -98,7 +98,7 @@ function _appWillMount({ dispatch, getState }) {
 
         switch (command) {
         case CMD_HANG_UP:
-            if (typeof getCurrentConferenceUrl(getState()) !== undefined) {
+            if (typeof getCurrentConferenceUrl(getState()) !== 'undefined') {
                 dispatch(appNavigate(undefined));
             }
             break;