feat(tests): Return early if jaas tests not configured.

It is not available due to cross-origin or not able to start setCaptureHandleConfig in iframe.
error 1: Failed to execute 'showSaveFilePicker' on 'Window': Cross origin sub frames aren't allowed to show a file picker.
error 2: Failed to execute 'setCaptureHandleConfig' on 'MediaDevices': Can only be called from the top-level document.

android/app/build.gradle

@@ -28,6 +28,14 @@ android {
         ndk {
             abiFilters 'armeabi-v7a', 'arm64-v8a', 'x86', 'x86_64'
         }
+
+        externalNativeBuild {
+            cmake {
+                arguments "-DANDROID_SUPPORT_FLEXIBLE_PAGE_SIZES=ON", "-DANDROID_STL=c++_shared"
+                cppFlags "-std=c++17"
+                cFlags "-DANDROID_PLATFORM=android-26"
+            }
+        }
     }
 
     signingConfigs {
@@ -46,8 +54,8 @@ android {
             applicationIdSuffix ".debug"
         }
         release {
-            // Uncomment the following line for singing a test release build.
-            //signingConfig signingConfigs.debug
+            // Uncomment the following line for signing a test release build.
+            // signingConfig signingConfigs.debug
             minifyEnabled true
             proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules-release.pro'
             buildConfigField "boolean", "GOOGLE_SERVICES_ENABLED", "${googleServicesEnabled}"
@@ -102,8 +110,6 @@ dependencies {
 
 gradle.projectsEvaluated {
     // Dropbox integration
-    //
-
     def dropboxAppKey
     if (project.file('dropbox.key').exists()) {
         dropboxAppKey = project.file('dropbox.key').text.trim() - 'db-'
@@ -174,7 +180,6 @@ gradle.projectsEvaluated {
 
         packageTask.dependsOn(currentRunPackagerTask)
     }
-
 }
 
 if (googleServicesEnabled) {

android/app/proguard-rules-release.pro

@@ -6,6 +6,5 @@
 -keep public class * extends java.lang.Exception
 
 # R8 missing classes - suppress warnings
--dontwarn com.facebook.fresco.ui.common.LoggingListener
 -dontwarn com.facebook.memory.config.MemorySpikeConfig
 -dontwarn kotlinx.parcelize.Parcelize

android/app/proguard-rules.pro

@@ -96,8 +96,3 @@
 
 # Rule to avoid build errors related to SVGs.
 -keep public class com.horcrux.svg.** {*;}
-
-# https://github.com/facebook/fresco/issues/2638
--keep public class com.facebook.imageutils.** {
-   public *;
-}

android/build.gradle

@@ -7,11 +7,11 @@ import org.gradle.util.VersionNumber
 buildscript {
     ext {
         kotlinVersion = "2.0.21"
-        gradlePluginVersion = "8.4.2"
-        buildToolsVersion = "34.0.0"
-        compileSdkVersion = 34
+        gradlePluginVersion = "8.6.0"
+        buildToolsVersion = "35.0.0"
+        compileSdkVersion = 35
         minSdkVersion    = 26
-        targetSdkVersion = 34
+        targetSdkVersion = 35
         supportLibVersion = "28.0.0"
         ndkVersion = "27.1.12297006"
 
@@ -75,26 +75,6 @@ allprojects {
         }
     }
 
-    // Due to a dependency conflict between React Native and the Fresco library used by GiphySDK,
-    // GIFs appear as static images instead of animating
-    // https://github.com/Giphy/giphy-react-native-sdk/commit/7fe466ed6fddfaec95f9cbc959d33bd75ad8f900
-
-    configurations.configureEach {
-        resolutionStrategy {
-            forcedModules = [
-                'com.facebook.fresco:fresco:3.2.0',
-                'com.facebook.fresco:animated-gif:3.2.0',
-                'com.facebook.fresco:animated-base:3.2.0',
-                'com.facebook.fresco:animated-drawable:3.2.0',
-                'com.facebook.fresco:animated-webp:3.2.0',
-                'com.facebook.fresco:webpsupport:3.2.0',
-                'com.facebook.fresco:imagepipeline-okhttp3:3.2.0',
-                'com.facebook.fresco:middleware:3.2.0',
-                'com.facebook.fresco:nativeimagetranscoder:3.2.0'
-            ]
-        }
-    }
-
     // Third-party react-native modules which Jitsi Meet SDK for Android depends
     // on and which are not available in third-party Maven repositories need to
     // be deployed in a Maven repository of ours.

android/scripts/check_elf_alignment.sh

@@ -0,0 +1,113 @@
+#!/bin/bash
+progname="${0##*/}"
+progname="${progname%.sh}"
+
+# usage: check_elf_alignment.sh [path to *.so files|path to *.apk]
+
+cleanup_trap() {
+  if [ -n "${tmp}" -a -d "${tmp}" ]; then
+    rm -rf ${tmp}
+  fi
+  exit $1
+}
+
+usage() {
+  echo "Host side script to check the ELF alignment of shared libraries."
+  echo "Shared libraries are reported ALIGNED when their ELF regions are"
+  echo "16 KB or 64 KB aligned. Otherwise they are reported as UNALIGNED."
+  echo
+  echo "Usage: ${progname} [input-path|input-APK|input-APEX]"
+}
+
+if [ ${#} -ne 1 ]; then
+  usage
+  exit
+fi
+
+case ${1} in
+  --help | -h | -\?)
+    usage
+    exit
+    ;;
+
+  *)
+    dir="${1}"
+    ;;
+esac
+
+if ! [ -f "${dir}" -o -d "${dir}" ]; then
+  echo "Invalid file: ${dir}" >&2
+  exit 1
+fi
+
+if [[ "${dir}" == *.apk ]]; then
+  trap 'cleanup_trap' EXIT
+
+  echo
+  echo "Recursively analyzing $dir"
+  echo
+
+  if { zipalign --help 2>&1 | grep -q "\-P <pagesize_kb>"; }; then
+    echo "=== APK zip-alignment ==="
+    zipalign -v -c -P 16 4 "${dir}" | egrep 'lib/arm64-v8a|lib/x86_64|Verification'
+    echo "========================="
+  else
+    echo "NOTICE: Zip alignment check requires build-tools version 35.0.0-rc3 or higher."
+    echo "  You can install the latest build-tools by running the below command"
+    echo "  and updating your \$PATH:"
+    echo
+    echo "    sdkmanager \"build-tools;35.0.0-rc3\""
+  fi
+
+  dir_filename=$(basename "${dir}")
+  tmp=$(mktemp -d -t "${dir_filename%.apk}_out_XXXXX")
+  unzip "${dir}" lib/* -d "${tmp}" >/dev/null 2>&1
+  dir="${tmp}"
+fi
+
+if [[ "${dir}" == *.apex ]]; then
+  trap 'cleanup_trap' EXIT
+
+  echo
+  echo "Recursively analyzing $dir"
+  echo
+
+  dir_filename=$(basename "${dir}")
+  tmp=$(mktemp -d -t "${dir_filename%.apex}_out_XXXXX")
+  deapexer extract "${dir}" "${tmp}" || { echo "Failed to deapex." && exit 1; }
+  dir="${tmp}"
+fi
+
+RED="\e[31m"
+GREEN="\e[32m"
+ENDCOLOR="\e[0m"
+
+unaligned_libs=()
+
+echo
+echo "=== ELF alignment ==="
+
+matches="$(find "${dir}" -type f)"
+IFS=$'\n'
+for match in $matches; do
+  # We could recursively call this script or rewrite it to though.
+  [[ "${match}" == *".apk" ]] && echo "WARNING: doesn't recursively inspect .apk file: ${match}"
+  [[ "${match}" == *".apex" ]] && echo "WARNING: doesn't recursively inspect .apex file: ${match}"
+
+  [[ $(file "${match}") == *"ELF"* ]] || continue
+
+  res="$(objdump -p "${match}" | grep LOAD | awk '{ print $NF }' | head -1)"
+  if [[ $res =~ 2\*\*(1[4-9]|[2-9][0-9]|[1-9][0-9]{2,}) ]]; then
+    echo -e "${match}: ${GREEN}ALIGNED${ENDCOLOR} ($res)"
+  else
+    echo -e "${match}: ${RED}UNALIGNED${ENDCOLOR} ($res)"
+    unaligned_libs+=("${match}")
+  fi
+done
+
+if [ ${#unaligned_libs[@]} -gt 0 ]; then
+  echo -e "${RED}Found ${#unaligned_libs[@]} unaligned libs (only arm64-v8a/x86_64 libs need to be aligned).${ENDCOLOR}"
+elif [ -n "${dir_filename}" ]; then
+  echo -e "ELF Verification Successful"
+fi
+echo "====================="

android/sdk/build.gradle

@@ -44,12 +44,12 @@ dependencies {
     api "com.facebook.react:react-android:$rootProject.ext.rnVersion"
     api "com.facebook.react:hermes-android:$rootProject.ext.rnVersion"
 
-    implementation 'com.facebook.fresco:animated-gif:2.5.0'
     implementation 'com.dropbox.core:dropbox-core-sdk:4.0.1'
     implementation 'com.jakewharton.timber:timber:5.0.1'
     implementation 'com.squareup.duktape:duktape-android:1.3.0'
     implementation 'com.google.code.gson:gson:2.8.6'
     implementation 'androidx.startup:startup-runtime:1.1.0'
+    implementation 'com.google.j2objc:j2objc-annotations:3.0.0'
 
     // Only add these packages if we are NOT doing a LIBRE_BUILD
     if (!rootProject.ext.libreBuild) {

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

@@ -49,6 +49,10 @@ public class JitsiInitializer implements Initializer<Boolean> {
         // Register activity lifecycle handler for the orientation locker module.
         ((Application) context).registerActivityLifecycleCallbacks(OrientationActivityLifecycle.getInstance());
 
+        // Initialize ReactInstanceManager during application startup
+        // This ensures it's ready before any Activity onCreate is called
+        ReactInstanceManagerHolder.initReactInstanceManager((Application) context);
+
         return true;
     }
 

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

@@ -25,9 +25,15 @@ import android.content.IntentFilter;
 import android.content.res.Configuration;
 import android.net.Uri;
 import android.os.Bundle;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.Window;
 
+import androidx.annotation.NonNull;
 import androidx.annotation.Nullable;
 import androidx.appcompat.app.AppCompatActivity;
+import androidx.core.view.ViewCompat;
+import androidx.core.view.WindowInsetsCompat;
 import androidx.localbroadcastmanager.content.LocalBroadcastManager;
 
 import com.facebook.react.modules.core.PermissionListener;
@@ -87,6 +93,28 @@ public class JitsiMeetActivity extends AppCompatActivity
         launch(context, options);
     }
 
+    public static void addTopBottomInsets(@NonNull Window w, @NonNull View v) {
+        if (android.os.Build.VERSION.SDK_INT < android.os.Build.VERSION_CODES.VANILLA_ICE_CREAM) return;
+
+        View decorView = w.getDecorView();
+
+        decorView.post(() -> {
+            WindowInsetsCompat insets = ViewCompat.getRootWindowInsets(decorView);
+            if (insets != null) {
+                ViewGroup.MarginLayoutParams params = (ViewGroup.MarginLayoutParams) v.getLayoutParams();
+                params.topMargin = insets.getInsets(WindowInsetsCompat.Type.systemBars()).top;
+                params.bottomMargin = insets.getInsets(WindowInsetsCompat.Type.systemBars()).bottom;
+                v.setLayoutParams(params);
+
+                decorView.setOnApplyWindowInsetsListener((view, windowInsets) -> {
+                    view.setBackgroundColor(JitsiMeetView.BACKGROUND_COLOR);
+
+                    return windowInsets;
+                });
+            }
+        });
+    }
+
     // Overrides
     //
 
@@ -102,7 +130,12 @@ public class JitsiMeetActivity extends AppCompatActivity
     protected void onCreate(Bundle savedInstanceState) {
         super.onCreate(savedInstanceState);
 
+        // ReactInstanceManager is now initialized by JitsiInitializer during application startup
+        // Just call onHostResume since the manager is already ready
+        JitsiMeetActivityDelegate.onHostResume(this);
+
         setContentView(R.layout.activity_jitsi_meet);
+        addTopBottomInsets(getWindow(),findViewById(android.R.id.content));
         this.jitsiView = findViewById(R.id.jitsiView);
 
         registerForBroadcastMessages();

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

@@ -17,6 +17,7 @@
 package org.jitsi.meet.sdk;
 
 import android.app.Activity;
+import android.app.Application;
 import android.content.Context;
 import android.os.Bundle;
 import android.util.AttributeSet;
@@ -35,7 +36,7 @@ public class JitsiMeetView extends FrameLayout {
     /**
      * Background color. Should match the background color set in JS.
      */
-    private static final int BACKGROUND_COLOR = 0xFF040404;
+    public static final int BACKGROUND_COLOR = 0xFF040404;
 
     /**
      * React Native root view.
@@ -196,8 +197,6 @@ public class JitsiMeetView extends FrameLayout {
         }
 
         setBackgroundColor(BACKGROUND_COLOR);
-
-        ReactInstanceManagerHolder.initReactInstanceManager((Activity) context);
     }
 
     /**

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

@@ -18,6 +18,7 @@ package org.jitsi.meet.sdk;
 
 import android.annotation.SuppressLint;
 import android.app.Activity;
+import android.app.Application;
 
 import androidx.annotation.Nullable;
 
@@ -207,9 +208,9 @@ class ReactInstanceManagerHolder {
      * time. All {@code ReactRootView} instances will be tied to the one and
      * only {@code ReactInstanceManager}.
      *
-     * @param activity {@code Activity} current running Activity.
+     * @param app {@code Application}
      */
-    static void initReactInstanceManager(Activity activity) {
+    static void initReactInstanceManager(Application app) {
         if (reactInstanceManager != null) {
             return;
         }
@@ -231,14 +232,14 @@ class ReactInstanceManagerHolder {
 
         reactInstanceManager
             = ReactInstanceManager.builder()
-                .setApplication(activity.getApplication())
-                .setCurrentActivity(activity)
+                .setApplication(app)
+                .setCurrentActivity(null)
                 .setBundleAssetName("index.android.bundle")
                 .setJSMainModulePath("index.android")
                 .setJavaScriptExecutorFactory(new HermesExecutorFactory())
                 .addPackages(getReactNativePackages())
                 .setUseDeveloperSupport(BuildConfig.DEBUG)
-                .setInitialLifecycleState(LifecycleState.RESUMED)
+                .setInitialLifecycleState(LifecycleState.BEFORE_CREATE)
                 .build();
     }
 }

conference.js

@@ -18,8 +18,6 @@ import {
     maybeRedirectToWelcomePage,
     reloadWithStoredParams
 } from './react/features/app/actions';
-import { showModeratedNotification } from './react/features/av-moderation/actions';
-import { shouldShowModeratedNotification } from './react/features/av-moderation/functions';
 import {
     _conferenceWillJoin,
     authStatusChanged,
@@ -52,7 +50,8 @@ import {
     commonUserJoinedHandling,
     commonUserLeftHandling,
     getConferenceOptions,
-    sendLocalParticipant
+    sendLocalParticipant,
+    updateTrackMuteState
 } from './react/features/base/conference/functions';
 import { getReplaceParticipant, getSsrcRewritingFeatureFlag } from './react/features/base/config/functions';
 import { connect } from './react/features/base/connection/actions.web';
@@ -153,7 +152,6 @@ import {
     DATA_CHANNEL_CLOSED_NOTIFICATION_ID,
     NOTIFICATION_TIMEOUT_TYPE
 } from './react/features/notifications/constants';
-import { isModerationNotificationDisplayed } from './react/features/notifications/functions';
 import { suspendDetected } from './react/features/power-monitor/actions';
 import { initPrejoin, isPrejoinPageVisible } from './react/features/prejoin/functions';
 import { disableReceiver, stopReceiver } from './react/features/remote-control/actions';
@@ -704,15 +702,6 @@ export default {
             return;
         }
 
-        // check for A/V Moderation when trying to unmute
-        if (!mute && shouldShowModeratedNotification(MEDIA_TYPE.AUDIO, state)) {
-            if (!isModerationNotificationDisplayed(MEDIA_TYPE.AUDIO, state)) {
-                APP.store.dispatch(showModeratedNotification(MEDIA_TYPE.AUDIO));
-            }
-
-            return;
-        }
-
         await APP.store.dispatch(setAudioMuted(mute, true));
     },
 
@@ -746,12 +735,6 @@ export default {
      * dialogs in case of media permissions error.
      */
     muteVideo(mute) {
-        if (this.videoSwitchInProgress) {
-            logger.warn('muteVideo - unable to perform operations while video switch is in progress');
-
-            return;
-        }
-
         const state = APP.store.getState();
 
         if (!mute
@@ -761,11 +744,6 @@ export default {
             return;
         }
 
-        // check for A/V Moderation when trying to unmute and return early
-        if (!mute && shouldShowModeratedNotification(MEDIA_TYPE.VIDEO, state)) {
-            return;
-        }
-
         APP.store.dispatch(setVideoMuted(mute, VIDEO_MUTISM_AUTHORITY.USER, true));
     },
 
@@ -1019,7 +997,6 @@ export default {
 
         // Restore initial state.
         this._localTracksInitialized = false;
-        this.isSharingScreen = false;
         this.roomName = roomName;
 
         const { tryCreateLocalTracks, errors } = this.createInitialLocalTracks(options);
@@ -1198,8 +1175,6 @@ export default {
         return Boolean(APP.store.getState()['features/base/audio-only'].enabled);
     },
 
-    videoSwitchInProgress: false,
-
     /**
      * This fields stores a handler which will create a Promise which turns off
      * the screen sharing and restores the previous video state (was there
@@ -1228,7 +1203,6 @@ export default {
      */
     async _turnScreenSharingOff(didHaveVideo, ignoreDidHaveVideo) {
         this._untoggleScreenSharing = null;
-        this.videoSwitchInProgress = true;
 
         APP.store.dispatch(stopReceiver());
 
@@ -1280,13 +1254,11 @@ export default {
 
         return promise.then(
             () => {
-                this.videoSwitchInProgress = false;
                 sendAnalytics(createScreenSharingEvent('stopped',
                     duration === 0 ? null : duration));
                 logger.info('Screen sharing stopped.');
             },
             error => {
-                this.videoSwitchInProgress = false;
                 logger.error(`_turnScreenSharingOff failed: ${error}`);
 
                 throw error;
@@ -1316,14 +1288,13 @@ export default {
             this._untoggleScreenSharing
                 = this._turnScreenSharingOff.bind(this, didHaveVideo);
 
-            const desktopVideoStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
             const desktopAudioStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
 
             if (desktopAudioStream) {
                 desktopAudioStream.on(
                     JitsiTrackEvents.LOCAL_TRACK_STOPPED,
                     () => {
-                        logger.debug(`Local screensharing audio track stopped. ${this.isSharingScreen}`);
+                        logger.debug('Local screensharing audio track stopped.');
 
                         // Handle case where screen share was stopped from  the browsers 'screen share in progress'
                         // window. If audio screen sharing is stopped via the normal UX flow this point shouldn't
@@ -1335,21 +1306,6 @@ export default {
                 );
             }
 
-            if (desktopVideoStream) {
-                desktopVideoStream.on(
-                    JitsiTrackEvents.LOCAL_TRACK_STOPPED,
-                    () => {
-                        logger.debug(`Local screensharing track stopped. ${this.isSharingScreen}`);
-
-                        // If the stream was stopped during screen sharing
-                        // session then we should switch back to video.
-                        this.isSharingScreen
-                            && this._untoggleScreenSharing
-                            && this._untoggleScreenSharing();
-                    }
-                );
-            }
-
             return desktopStreams;
         }, error => {
             throw error;
@@ -1497,10 +1453,6 @@ export default {
         room.on(JitsiConferenceEvents.TRACK_MUTE_CHANGED, (track, participantThatMutedUs) => {
             if (participantThatMutedUs) {
                 APP.store.dispatch(participantMutedUs(participantThatMutedUs, track));
-                if (this.isSharingScreen && track.isVideoTrack()) {
-                    logger.debug('TRACK_MUTE_CHANGED while screen sharing');
-                    this._turnScreenSharingOff(false);
-                }
             }
         });
 
@@ -1712,8 +1664,12 @@ export default {
         room.on(
             JitsiConferenceEvents.START_MUTED_POLICY_CHANGED,
             ({ audio, video }) => {
-                APP.store.dispatch(
-                    onStartMutedPolicyChanged(audio, video));
+                APP.store.dispatch(onStartMutedPolicyChanged(audio, video));
+
+                const state = APP.store.getState();
+
+                updateTrackMuteState(state, APP.store.dispatch, true);
+                updateTrackMuteState(state, APP.store.dispatch, false);
             }
         );
 

config.js

@@ -761,7 +761,7 @@ var config = {
     // hideDominantSpeakerBadge: false,
 
     // Default language for the user interface. Cannot be overwritten.
-    // DEPRECATED! Use the `lang` iframe option directly instead.
+    // For iframe integrations, use the `lang` option directly instead.
     // defaultLanguage: 'en',
 
     // Disables profile and the edit of all fields from the profile settings (display name and email)
@@ -791,7 +791,6 @@ var config = {
     // Configs for prejoin page.
     // prejoinConfig: {
     //     // When 'true', it shows an intermediate page before joining, where the user can configure their devices.
-    //     // This replaces `prejoinPageEnabled`. Defaults to true.
     //     enabled: true,
     //     // Hides the participant name editing field in the prejoin screen.
     //     // If requireDisplayName is also set as true, a name should still be provided through
@@ -1363,7 +1362,9 @@ var config = {
     //     disableGrantModerator: true,
     //     // If set to 'all' the 'Private chat' button will be disabled for all participants.
     //     // If set to 'allow-moderator-chat' the 'Private chat' button will be available for chats with moderators.
-    //     disablePrivateChat: 'all' | 'allow-moderator-chat',
+    //     // If set to 'disable-visitor-chat' the 'Private chat' button will be disabled for visitor-main participant
+    //     // conversations.
+    //     disablePrivateChat: 'all' | 'allow-moderator-chat' | 'disable-visitor-chat',
     // },
 
 

css/_variables.scss

@@ -90,7 +90,7 @@ $welcomePageHeaderContainerMargin: $welcomePageHeaderContainerMarginTop auto 0;
 $welcomePageHeaderTextTitleMarginBottom: 0;
 $welcomePageHeaderTextTitleFontSize: 2.625rem;
 $welcomePageHeaderTextTitleFontWeight: normal;
-$welcomePageHeaderTextTitleLineHeight: 50px;
+$welcomePageHeaderTextTitleLineHeight: 3.125rem;
 $welcomePageHeaderTextTitleOpacity: 1;
 
 $welcomePageEnterRoomDisplay: flex;

giphy-analytics-stub.js

@@ -0,0 +1,16 @@
+// Stub replacement for @giphy/js-analytics to prevent beforeunload handlers
+// This completely disables all Giphy analytics functionality
+
+export const pingback = () => {
+    // Completely disabled - do nothing
+
+};
+
+export const mergeAttributes = (attributes, newAttributes) => {
+    // Return merged attributes without any analytics calls
+    return { ...attributes,
+        ...newAttributes };
+};
+
+// Ensure no beforeunload handlers are ever registered
+export default pingback;

ios/Podfile.lock

@@ -64,11 +64,11 @@ PODS:
     - GoogleUtilities/UserDefaults (~> 7.7)
     - PromisesObjC (< 3.0, >= 1.2)
   - fmt (11.0.2)
-  - Giphy (2.2.13):
+  - Giphy (2.2.16):
     - libwebp
-  - giphy-react-native-sdk (3.3.1):
+  - giphy-react-native-sdk (4.1.0):
     - DoubleConversion
-    - Giphy (= 2.2.13)
+    - Giphy (= 2.2.16)
     - glog
     - hermes-engine
     - RCT-Folly (= 2024.11.18.00)
@@ -1382,9 +1382,9 @@ PODS:
     - React-Core
   - react-native-netinfo (11.1.0):
     - React-Core
-  - react-native-orientation-locker (1.6.0):
+  - react-native-orientation-locker (1.5.0):
     - React-Core
-  - react-native-pager-view (6.4.1):
+  - react-native-pager-view (6.8.1):
     - DoubleConversion
     - glog
     - hermes-engine
@@ -1407,7 +1407,7 @@ PODS:
     - Yoga
   - react-native-performance (5.1.2):
     - React-Core
-  - react-native-safe-area-context (5.4.0):
+  - react-native-safe-area-context (5.5.2):
     - React-Core
   - react-native-slider (4.5.6):
     - DoubleConversion
@@ -1794,7 +1794,7 @@ PODS:
     - React-Core
   - RNDefaultPreference (1.4.4):
     - React-Core
-  - RNDeviceInfo (10.9.0):
+  - RNDeviceInfo (12.1.0):
     - React-Core
   - RNGestureHandler (2.24.0):
     - DoubleConversion
@@ -2201,8 +2201,8 @@ SPEC CHECKSUMS:
   FirebaseCrashlytics: feb07e4e9187be3c23c6a846cce4824e5ce2dd0b
   FirebaseInstallations: 40bd9054049b2eae9a2c38ef1c3dd213df3605cd
   fmt: a40bb5bd0294ea969aaaba240a927bd33d878cdd
-  Giphy: a11dd02b51ac2ec37b881de1717ebf2cc8e9df62
-  giphy-react-native-sdk: 678a115ea5a47a43d39d1b61703e0d08b1e48917
+  Giphy: 55914215541027873875757f350530e6d8986fba
+  giphy-react-native-sdk: 733177b2537b527cfa55979c396cc1f2046eb457
   glog: eb93e2f488219332457c3c4eafd2738ddc7e80b8
   GoogleAppMeasurement: 4c19f031220c72464d460c9daa1fb5d1acce958e
   GoogleDataTransport: 6c09b596d841063d76d4288cc2d2f42cc36e1e2a
@@ -2249,10 +2249,10 @@ SPEC CHECKSUMS:
   react-native-get-random-values: d16467cf726c618e9c7a8c3c39c31faa2244bbba
   react-native-keep-awake: 03b74eebe4f2bb5e8478fc8f420651a92463b6f8
   react-native-netinfo: 5364263f903da576bdef9c84a76fe243ab06812c
-  react-native-orientation-locker: ee8bb2177365ca74f51dc1e11218fe544634d523
-  react-native-pager-view: 68e8a65a607a6f91a1e25865002192c3c4f53fcf
+  react-native-orientation-locker: dbd3f6ddbe9e62389cb0807dc2af63f6c36dec36
+  react-native-pager-view: 11662c698c8f11d39e05891316d2a144fa00adc4
   react-native-performance: 125a96c145e29918b55b45ce25cbba54f1e24dcd
-  react-native-safe-area-context: 9d72abf6d8473da73033b597090a80b709c0b2f1
+  react-native-safe-area-context: 0f7bf11598f9a61b7ceac8dc3f59ef98697e99e1
   react-native-slider: 1205801a8d29b28cacc14eef08cb120015cdafcb
   react-native-video: eb861d67a71dfef1bbf6086a811af5f338b13781
   react-native-webrtc: 2261a482150195092246fe70b3aff976f2e11ec5
@@ -2290,7 +2290,7 @@ SPEC CHECKSUMS:
   RNCAsyncStorage: aa75595c1aefa18f868452091fa0c411a516ce11
   RNCClipboard: 7c3e3b5f71d84ef61690ad377b6c50cf27864ff5
   RNDefaultPreference: ee13d69e6693d193cd223d10e15e5b3c012d31ba
-  RNDeviceInfo: 8af23685571b7867d8dc15fb89e7fb5fa8607e1e
+  RNDeviceInfo: 723e97dd98af9b7913477e7a40252c15517c258c
   RNGestureHandler: 9f3109e11ed88fe5bed280bf7762b25e4c52f396
   RNGoogleSignin: 30e1aee80140dc0706cd78a4951c411376c88329
   RNScreens: 9ef996b6041d0960a4794a845f7d0808b171b4ef

ios/app/PrivacyInfo.xcprivacy

@@ -30,6 +30,14 @@
 				<string>35F9.1</string>
 			</array>
 		</dict>
+		<dict>
+			<key>NSPrivacyAccessedAPIType</key>
+			<string>NSPrivacyAccessedAPICategoryDiskSpace</string>
+			<key>NSPrivacyAccessedAPITypeReasons</key>
+			<array>
+				<string>85F4.1</string>
+			</array>
+		</dict>
 	</array>
 	<key>NSPrivacyCollectedDataTypes</key>
 	<array/>

lang/main-lv.json

@@ -109,6 +109,7 @@
         }
     },
     "chat": {
+        "disabled": "Tērzēšanas ziņojumu sūtīšana ir atspējota.",
         "enter": "Ienākt istabā",
         "error": "Kļūda: Jūsu ziņa netika nosūtīta. Cēlonis: {{error}}",
         "fieldPlaceHolder": "Rakstiet ziņu šeit",
@@ -124,7 +125,8 @@
             "title": "Ierakstiet vārdu, lai izmantotu tērzēšanā",
             "titleWithCC": "Ievadiet segvārdu, lai izmantotu tērzēšanā un slēptos subtitros",
             "titleWithPolls": "Ierakstiet segvārdu, lai izmantotu tērzēšanā un aptaujās",
-            "titleWithPollsAndCC": "Ievadiet segvārdu, lai izmantotu tērzēšanā, aptaujās un slēptos subtitros"
+            "titleWithPollsAndCC": "Ievadiet segvārdu, lai izmantotu tērzēšanā, aptaujās un slēptos subtitros",
+            "titleWithPollsAndCCAndFileSharing": "Ievadiet segvārdu, lai izmantotu tērzēšanā, aptaujās, slēptos subtitros un failos"
         },
         "noMessagesMessage": "Sapulcē pagaidām nav nevienas ziņas. Uzsāciet saraksti!",
         "privateNotice": "Privāta ziņa adresātam {{recipient}}",
@@ -134,12 +136,14 @@
         "tabs": {
             "chat": "Tērzēšana",
             "closedCaptions": "Slēptie subtitri",
+            "fileSharing": "Faili",
             "polls": "Aptaujas"
         },
         "title": "Tērzēšana",
-        "titleWithCC": "Tērzēšana un slēptie subtitri",
+        "titleWithCC": "Tērzēšana un Slēptie subtitri",
+        "titleWithFeatures": "Tērzēšana un",
+        "titleWithFileSharing": "Faili",
         "titleWithPolls": "Tērzēšana un Aptaujas",
-        "titleWithPollsAndCC": "Tērzēšana, Aptaujas un Slēptie subtitri",
         "you": "jūs"
     },
     "chromeExtensionBanner": {
@@ -296,6 +300,12 @@
         "alreadySharedVideoTitle": "Atļauts tikai viens kopīgots videoklips",
         "applicationWindow": "Lietotnes logs",
         "authenticationRequired": "Nepieciešama autentifikācija",
+        "cameraCaptureDialog": {
+            "description": "Uzņemt un nosūtīt attēlu, izmantojot mobilā tālruņa kameru",
+            "ok": "Atvērt kameru",
+            "reject": "Ne tagad",
+            "title": "Uzņemt attēlu"
+        },
         "cameraConstraintFailedError": "Kamera neatbilst noteiktajām prasībām.",
         "cameraNotFoundError": "Kamera nav atrasta.",
         "cameraNotSendingData": "Nevar piekļūt jūsu kamerai. Lūdzu, pārbaudiet, vai šo ierīci neizmanto cita programma, iestatījumu izvēlnē atlasiet citu ierīci vai mēģiniet atkārtoti ielādēt programmu.",
@@ -371,22 +381,34 @@
         "micTimeoutError": "Nevarēja palaist audio avotu. Iestājās noildze!",
         "micUnknownError": "Nevar izmantot mikrofonu nezināma iemesla dēļ.",
         "moderationAudioLabel": "Atļaut dalībniekiem ieslēgt savu mikrofonu",
+        "moderationDesktopLabel": "Atļaut lietotājiem, kas nav moderatori, kopīgot savu ekrānu",
         "moderationVideoLabel": "Atļaut dalībniekiem ieslēgt savu kameru",
         "muteEveryoneDialog": "Dalībnieki paši var ieslēgt savu mikrofonu.",
         "muteEveryoneDialogModerationOn": "Dalībnieki var nosūtīt pieprasījumu ieslēgt savu mikrofonu.",
         "muteEveryoneElseDialog": "Kad skaņa būs izslēgta, jūs nevarēsiet to ieslēgt atpakaļ, taču dalībnieki to varēs izdarīt paši.",
         "muteEveryoneElseTitle": "Vai izslēgt skaņu visiem, izņemot {{whom}}?",
+        "muteEveryoneElsesDesktopDialog": "Kad kopīgošana būs apturēta, jūs vairs nevarēsiet to ieslēgt atpakaļ, bet viņi to varēs izdarīt jebkurā laikā.",
+        "muteEveryoneElsesDesktopTitle": "Apturēt ekrāna kopīgošanu visiem, izņemot {{kam}}?",
         "muteEveryoneElsesVideoDialog": "Kad video būs izslēgts, jūs nevarēsiet to ieslēgt atpakaļ, taču dalībnieki to varēs izdarīt paši.",
         "muteEveryoneElsesVideoTitle": "Vai izslēgt video visiem, izņemot {{whom}}?",
         "muteEveryoneSelf": "jūs",
         "muteEveryoneStartMuted": "No šī brīža visi jauni dalībnieki pieslēdzas ar izslēgt skaņu",
         "muteEveryoneTitle": "Vai izslēgt skaņu visiem?",
+        "muteEveryonesDesktopDialog": "Dalībnieki var kopīgot savu ekrānu jebkurā laikā.",
+        "muteEveryonesDesktopDialogModerationOn": "Dalībnieki jebkurā laikā var nosūtīt pieprasījumu kopīgot savu ekrānu.",
+        "muteEveryonesDesktopTitle": "Vai pārtraukt ekrāna kopīgošanu visiem?",
         "muteEveryonesVideoDialog": "Dalībnieki var ieslēgt savu video.",
         "muteEveryonesVideoDialogModerationOn": "Dalībnieki var nosūtīt pieprasījumu ieslēgt viņu video.",
         "muteEveryonesVideoDialogOk": "Atspējot",
         "muteEveryonesVideoTitle": "Vai apturēt ikviena video?",
         "muteParticipantBody": "Jūs nevariet viņiem ieslēgt skaņu, bet viņi paši to var izdarīt jebkurā laikā.",
         "muteParticipantButton": "Izslēgt skaņu",
+        "muteParticipantsDesktopBody": "Jūs nevarēsiet sākt viņu ekrāna kopīgošanu, bet viņi to varēs izdarīt jebkurā laikā.",
+        "muteParticipantsDesktopBodyModerationOn": "Jūs nevarēsiet sākt viņu ekrāna kopīgošanu, un arī viņi to nevarēs izdarīt.",
+        "muteParticipantsDesktopButton": "Pārtraukt ekrāna kopīgošanu",
+        "muteParticipantsDesktopDialog": "Vai tiešām vēlaties izslēgt šī dalībnieka ekrāna kopīgošanu? Jūs vairs nevarēsiet ieslēgt to atpakaļ, bet viņš to varēs izdarīt jebkurā laikā.",
+        "muteParticipantsDesktopDialogModerationOn": "Vai tiešām vēlaties izslēgt šī dalībnieka ekrāna kopīgošanu? Jūs vairs nevarēsiet ieslēgt to atpakaļ, un arī viņš to nevarēs izdarīt.",
+        "muteParticipantsDesktopTitle": "Atspējot ekrāna kopīgošanu šim dalībniekam?",
         "muteParticipantsVideoBody": "Jūs nevarēsiet kameru ieslēgt atpakaļ, taču viņi paši to varēs izdarīt jebkurā laikā.",
         "muteParticipantsVideoBodyModerationOn": "Ne Jūs, ne dalībnieki nevarēsiet ieslēgt kameru atpakaļ.",
         "muteParticipantsVideoButton": "Pārtraukt video",
@@ -539,6 +561,19 @@
         "veryBad": "Ļoti Slikta",
         "veryGood": "Ļoti Laba"
     },
+    "fileSharing": {
+        "downloadFailedDescription": "Lūdzu, mēģiniet vēlreiz.",
+        "downloadFailedTitle": "Lejuplādes kļūda",
+        "downloadFile": "Lejuplādēt",
+        "dragAndDrop": "Velciet un palaidiet failus šeit, vai jebkurā ekrāna vietā",
+        "fileAlreadyUploaded": "Fails jau ir augšupielādēts šajā sanāksmē.",
+        "fileTooLargeDescription": "Lūdzu, pārliecinieties, vai faila lielums nepārsniedz {{ maxFileSize }}.",
+        "fileTooLargeTitle": "Izvēlētais fails ir pārāk liels",
+        "removeFile": "Noņemt",
+        "uploadFailedDescription": "Lūdzu, mēģiniet vēlreiz.",
+        "uploadFailedTitle": "Augšuplādes kļūda",
+        "uploadFile": "Kopīgot failu"
+    },
     "filmstrip": {
         "accessibilityLabel": {
             "heading": "Video sīktēli"
@@ -750,8 +785,9 @@
     "me": "es",
     "notify": {
         "OldElectronAPPTitle": "Drošības ievainojamība!",
+        "allowAll": "Atļaut visu",
         "allowAudio": "Atļaut audio",
-        "allowBoth": "Abus",
+        "allowDesktop": "Atļaut ekrāna kopīgošanu",
         "allowVideo": "Atļaut video",
         "allowedUnmute": "Varat ieslēgt mikrofona skaņu, ieslēgt kameru vai kopīgot ekrānu.",
         "audioUnmuteBlockedDescription": "Mikrofona ieslēgšanas darbība ir īslaicīgi bloķēta sistēmas ierobežojumu dēļ.",
@@ -765,6 +801,7 @@
         "dataChannelClosedDescription": "Savienojuma kanāls nedarbojas, tāpēc video kvalitāte var būt ierobežota līdz zemākajam iestatījumam.",
         "dataChannelClosedDescriptionWithAudio": "Savienojuma kanāls nedarbojas, tāpēc var rasties audio un video traucējumi.",
         "dataChannelClosedWithAudio": "Audio un video kvalitāte var būt traucēta",
+        "desktopMutedRemotelyTitle": "",
         "disabledIframe": "Iegulšana ir paredzēta tikai demonstrācijas nolūkiem, tāpēc šis zvans tiks atvienots pēc {{timeout}} minūtēm.",
         "disabledIframeSecondaryNative": "Domēna {{domain}} iegulšana ir paredzēta tikai demonstrācijas nolūkiem, tāpēc šis zvans tiks pārtraukts pēc {{timeout}} minūtēm.",
         "disabledIframeSecondaryWeb": "Domēna {{domain}} iegulšana ir paredzēta tikai demonstrācijas nolūkiem, tāpēc šis zvans tiks pārtraukts pēc {{timeout}} minūtēm. Lūdzu, produkcijas videi izmantojiet <a href='{{jaasDomain}}' rel='noopener noreferrer' target='_blank'>Jitsi as a Service</a>!",
@@ -845,6 +882,7 @@
         "suggestRecordingDescription": "Vai vēlaties sākt ierakstīšanu?",
         "suggestRecordingTitle": "Ierakstīt sanāksmi",
         "unmute": "Ieslēgt mikrofonu",
+        "unmuteScreen": "",
         "unmuteVideo": "Ieslēgt video",
         "videoMutedRemotelyDescription": "Jūs vienmēr varat to atkal ieslēgt.",
         "videoMutedRemotelyTitle": "{{participantDisplayName}} izslēdza jūsu video",
@@ -864,11 +902,14 @@
             "admit": "Apstiprināt",
             "admitAll": "Apstiprināt visus",
             "allow": "Atļaut dalībniekiem:",
+            "allowDesktop": "Atļaut ekrāna kopīgošanu",
             "allowVideo": "Atļaut video",
+            "askDesktop": "Lūgt kopīgot ekrānu",
             "askUnmute": "Lūgt ieslēgt skaņu",
             "audioModeration": "Ieslēgt savu skaņu",
             "blockEveryoneMicCamera": "Bloķēt visiem mikrofonu un kameru",
             "breakoutRooms": "Grupu istabas",
+            "desktopModeration": "Sākt ekrāna kopīgošanu",
             "goLive": "Sākt",
             "invite": "Uzaicināt",
             "lowerAllHands": "Nolaist visas paceltās rokas",
@@ -880,6 +921,8 @@
             "muteAll": "Apklusināt visus",
             "muteEveryoneElse": "Apklusināt pārējos",
             "reject": "Noraidīt",
+            "stopDesktop": "Pārtraukt ekrāna kopīgošanu",
+            "stopEveryonesDesktop": "Pārtraukt visiem ekrāna kopīgošanu",
             "stopEveryonesVideo": "Izslēgt visiem video",
             "stopVideo": "Izslēgt video",
             "unblockEveryoneMicCamera": "Atbloķēt visiem mikrofonu un kameru",
@@ -889,9 +932,11 @@
         "headings": {
             "lobby": "Vestibils ({{count}})",
             "participantsList": "Sapulces dalībnieki ({{count}})",
+            "viewerRequests": "Apmeklētāju pieprasījumi {{count}}",
             "visitorInQueue": " (gaida {{count}})",
             "visitorRequests": " (pieprasījumi {{count}})",
-            "visitors": "Apmeklētāji ({{count}})",
+            "visitors": "Apmeklētāji {{count}}",
+            "visitorsList": "Apmeklētāji ({{count}})",
             "waitingLobby": "Gaida vestibilā ({{count}})"
         },
         "search": "Meklēt dalībniekus",
@@ -1484,6 +1529,8 @@
         "connectionInfo": "Informācija par savienojumu",
         "demote": "Pārveidot par apmeklētāju",
         "domute": "Izlsēgt skaņu",
+        "domuteDesktop": "Pārtraukt ekrāna kopīgošanu",
+        "domuteDesktopOfOthers": "Pārtraukt ekrāna kopīgošanu visiem pārējiem",
         "domuteOthers": "Izslēgt skaņu visiem pārējiem",
         "domuteVideo": "Izslēgt kameru",
         "domuteVideoOfOthers": "Izslēgt video visiem pārējiem",

lang/main.json

@@ -112,6 +112,7 @@
         "disabled": "Sending chat messages is disabled.",
         "enter": "Enter room",
         "error": "Error: your message was not sent. Reason: {{error}}",
+        "everyone": "Everyone",
         "fieldPlaceHolder": "Aa",
         "lobbyChatMessageTo": "Lobby chat message to {{recipient}}",
         "message": "Message",
@@ -300,6 +301,12 @@
         "alreadySharedVideoTitle": "Only one shared video is allowed at a time",
         "applicationWindow": "Application window",
         "authenticationRequired": "Authentication required",
+        "cameraCaptureDialog": {
+            "description": "Take and send a picture using your mobile camera",
+            "ok": "Open camera",
+            "reject": "Not now",
+            "title": "Take a picture"
+        },
         "cameraConstraintFailedError": "Your camera does not satisfy some of the required constraints.",
         "cameraNotFoundError": "Camera was not found.",
         "cameraNotSendingData": "We are unable to access your camera. Please check if another application is using this device, select another device from the settings menu or try to reload the application.",
@@ -374,23 +381,35 @@
         "micPermissionDeniedError": "You have not granted permission to use your microphone. You can still join the conference but others won't hear you. Use the camera button in the address bar to fix this.",
         "micTimeoutError": "Could not start audio source. Timeout occurred!",
         "micUnknownError": "Cannot use microphone for an unknown reason.",
-        "moderationAudioLabel": "Allow attendees to unmute themselves",
+        "moderationAudioLabel": "Allow non-moderators to unmute themselves",
+        "moderationDesktopLabel": "Allow non-moderators to share their screen",
         "moderationVideoLabel": "Allow non-moderators to start their video",
         "muteEveryoneDialog": "The participants can unmute themselves at any time.",
         "muteEveryoneDialogModerationOn": "The participants can send a request to speak at any time.",
         "muteEveryoneElseDialog": "Once muted, you won't be able to unmute them, but they can unmute themselves at any time.",
         "muteEveryoneElseTitle": "Mute everyone except {{whom}}?",
+        "muteEveryoneElsesDesktopDialog": "Once the share is stopped, you won't be able to restart it, but they can do so at any time.",
+        "muteEveryoneElsesDesktopTitle": "Stop everyone's screen-share except {{whom}}?",
         "muteEveryoneElsesVideoDialog": "Once the camera is disabled, you won't be able to turn it back on, but they can turn it back on at any time.",
         "muteEveryoneElsesVideoTitle": "Stop everyone's video except {{whom}}?",
         "muteEveryoneSelf": "yourself",
         "muteEveryoneStartMuted": "Everyone starts muted from now on",
         "muteEveryoneTitle": "Mute everyone?",
+        "muteEveryonesDesktopDialog": "The participants can share their screen at any time.",
+        "muteEveryonesDesktopDialogModerationOn": "The participants can send a request to share their screen at any time.",
+        "muteEveryonesDesktopTitle": "Stop everyone's screen share?",
         "muteEveryonesVideoDialog": "The participants can turn on their video at any time.",
         "muteEveryonesVideoDialogModerationOn": "The participants can send a request to turn on their video at any time.",
         "muteEveryonesVideoDialogOk": "Disable",
         "muteEveryonesVideoTitle": "Stop everyone's video?",
         "muteParticipantBody": "You won't be able to unmute them, but they can unmute themselves at any time.",
         "muteParticipantButton": "Mute",
+        "muteParticipantsDesktopBody": "You won't be able to start their screen-share, but they can do so at any time.",
+        "muteParticipantsDesktopBodyModerationOn": "You won't be able to start their screen-share and neither will they.",
+        "muteParticipantsDesktopButton": "Stop screen sharing",
+        "muteParticipantsDesktopDialog": "Are you sure you want to turn off this participant's screen-share? You won't be able to restart it, but they can do so at any time.",
+        "muteParticipantsDesktopDialogModerationOn": "Are you sure you want to turn off this participant's screen-share? You won't be able to turn the screen back on and neither will they.",
+        "muteParticipantsDesktopTitle": "Disable screen-share 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.",
         "muteParticipantsVideoBodyModerationOn": "You won't be able to turn the camera back on and neither will they.",
         "muteParticipantsVideoButton": "Stop video",
@@ -551,6 +570,8 @@
         "fileAlreadyUploaded": "File has already been uploaded to this meeting.",
         "fileTooLargeDescription": "Please make sure the file does not exceed {{ maxFileSize }}.",
         "fileTooLargeTitle": "The selected file is too large",
+        "fileUploadProgress": "File upload progress",
+        "fileUploadedSuccessfully": "File uploaded successfully",
         "removeFile": "Remove",
         "uploadFailedDescription": "Please try again.",
         "uploadFailedTitle": "Upload failed",
@@ -767,8 +788,9 @@
     "me": "me",
     "notify": {
         "OldElectronAPPTitle": "Security vulnerability!",
+        "allowAll": "Allow All",
         "allowAudio": "Allow Audio",
-        "allowBoth": "Both",
+        "allowDesktop": "Allow screen sharing",
         "allowVideo": "Allow Video",
         "allowedUnmute": "You can unmute your microphone, start your camera or share your screen.",
         "audioUnmuteBlockedDescription": "Mic unmute operation has been temporarily blocked because of system limits.",
@@ -782,6 +804,7 @@
         "dataChannelClosedDescription": "The bridge channel is down and thus video quality may be limited to its lowest setting.",
         "dataChannelClosedDescriptionWithAudio": "The bridge channel is down and thus disruptions to audio and video may occur.",
         "dataChannelClosedWithAudio": "Audio and video quality may be impaired",
+        "desktopMutedRemotelyTitle": "Your screen sharing has been stopped by {{participantDisplayName}}",
         "disabledIframe": "Embedding is only meant for demo purposes, so this call will disconnect in {{timeout}} minutes.",
         "disabledIframeSecondaryNative": "Embedding {{domain}} is only meant for demo purposes, so this call will disconnect in {{timeout}} minutes.",
         "disabledIframeSecondaryWeb": "Embedding {{domain}} is only meant for demo purposes, so this call will disconnect in {{timeout}} minutes. Please use <a href='{{jaasDomain}}' rel='noopener noreferrer' target='_blank'>Jitsi as a Service</a> for production embedding!",
@@ -862,6 +885,7 @@
         "suggestRecordingDescription": "Would you like to start a recording?",
         "suggestRecordingTitle": "Record this meeting",
         "unmute": "Unmute Audio",
+        "unmuteScreen": "Start screen sharing",
         "unmuteVideo": "Unmute Video",
         "videoMutedRemotelyDescription": "You can always turn it on again.",
         "videoMutedRemotelyTitle": "Your video has been turned off by {{participantDisplayName}}",
@@ -881,11 +905,14 @@
             "admit": "Admit",
             "admitAll": "Admit all",
             "allow": "Allow non-moderators to:",
+            "allowDesktop": "Allow screen sharing",
             "allowVideo": "Allow video",
+            "askDesktop": "Ask to share screen",
             "askUnmute": "Ask to unmute",
             "audioModeration": "Unmute themselves",
             "blockEveryoneMicCamera": "Block everyone's mic and camera",
             "breakoutRooms": "Breakout rooms",
+            "desktopModeration": "Start screen sharing",
             "goLive": "Go live",
             "invite": "Invite someone",
             "lowerAllHands": "Lower all hands",
@@ -897,6 +924,8 @@
             "muteAll": "Mute all",
             "muteEveryoneElse": "Mute everyone else",
             "reject": "Reject",
+            "stopDesktop": "Stop screen sharing",
+            "stopEveryonesDesktop": "Stop everyone's screen-share",
             "stopEveryonesVideo": "Stop everyone's video",
             "stopVideo": "Stop video",
             "unblockEveryoneMicCamera": "Unblock everyone's mic and camera",
@@ -1503,6 +1532,8 @@
         "connectionInfo": "Connection Info",
         "demote": "Move to viewer",
         "domute": "Mute",
+        "domuteDesktop": "Stop screen-sharing",
+        "domuteDesktopOfOthers": "Stop screen-sharing for everyone else",
         "domuteOthers": "Mute everyone else",
         "domuteVideo": "Disable camera",
         "domuteVideoOfOthers": "Disable camera of everyone else",

modules/API/API.js

@@ -13,7 +13,7 @@ import {
     requestEnableAudioModeration,
     requestEnableVideoModeration
 } from '../../react/features/av-moderation/actions';
-import { isEnabledFromState } from '../../react/features/av-moderation/functions';
+import { isEnabledFromState, isForceMuted } from '../../react/features/av-moderation/functions';
 import { setAudioOnly } from '../../react/features/base/audio-only/actions';
 import {
     endConference,
@@ -30,6 +30,7 @@ import { overwriteConfig } from '../../react/features/base/config/actions';
 import { getWhitelistedJSON } from '../../react/features/base/config/functions.any';
 import { toggleDialog } from '../../react/features/base/dialog/actions';
 import { isSupportedBrowser } from '../../react/features/base/environment/environment';
+import { isMobileBrowser } from '../../react/features/base/environment/utils';
 import { parseJWTFromURLParams } from '../../react/features/base/jwt/functions';
 import JitsiMeetJS, { JitsiRecordingConstants } from '../../react/features/base/lib-jitsi-meet';
 import { MEDIA_TYPE, VIDEO_TYPE } from '../../react/features/base/media/constants';
@@ -106,14 +107,17 @@ import {
     close as closeParticipantsPane,
     open as openParticipantsPane
 } from '../../react/features/participants-pane/actions';
-import { getParticipantsPaneOpen, isForceMuted } from '../../react/features/participants-pane/functions';
+import { getParticipantsPaneOpen } from '../../react/features/participants-pane/functions';
 import { startLocalVideoRecording, stopLocalVideoRecording } from '../../react/features/recording/actions.any';
 import { grantRecordingConsent, grantRecordingConsentAndUnmute } from '../../react/features/recording/actions.web';
 import { RECORDING_METADATA_ID, RECORDING_TYPES } from '../../react/features/recording/constants';
 import { getActiveSession, supportsLocalRecording } from '../../react/features/recording/functions';
 import { startAudioScreenShareFlow, startScreenShareFlow } from '../../react/features/screen-share/actions';
 import { isScreenAudioSupported } from '../../react/features/screen-share/functions';
-import { toggleScreenshotCaptureSummary } from '../../react/features/screenshot-capture/actions';
+import {
+    openCameraCaptureDialog,
+    toggleScreenshotCaptureSummary
+} from '../../react/features/screenshot-capture/actions';
 import { isScreenshotCaptureEnabled } from '../../react/features/screenshot-capture/functions';
 import SettingsDialog from '../../react/features/settings/components/web/SettingsDialog';
 import { SETTINGS_TABS } from '../../react/features/settings/constants';
@@ -940,6 +944,20 @@ function initCommands() {
                     });
                 });
             break;
+        case 'capture-camera-picture' : {
+            const { cameraFacingMode, descriptionText, titleText } = request;
+
+            if (!isMobileBrowser()) {
+                logger.error('This feature is only supported on mobile');
+
+                return;
+            }
+
+            APP.store.dispatch(openCameraCaptureDialog(callback, { cameraFacingMode,
+                descriptionText,
+                titleText }));
+            break;
+        }
         case 'deployment-info':
             callback(APP.store.getState()['features/base/config'].deploymentInfo);
             break;

modules/API/external/external_api.js

@@ -820,6 +820,27 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         });
     }
 
+    /**
+     * Captures a picture through OS camera.
+     *
+     * @param {string} cameraFacingMode - The OS camera facing mode (environment/user).
+     * @param {string} descriptionText - The OS camera facing mode (environment/user).
+     * @param {string} titleText - The OS camera facing mode (environment/user).
+     * @returns {Promise<string>} - Resolves with a base64 encoded image data of the screenshot.
+     */
+    captureCameraPicture(
+            cameraFacingMode,
+            descriptionText,
+            titleText
+    ) {
+        return this._transport.sendRequest({
+            name: 'capture-camera-picture',
+            cameraFacingMode,
+            descriptionText,
+            titleText
+        });
+    }
+
     /**
      * Removes the listeners and removes the Jitsi Meet frame.
      *

package.json

@@ -23,7 +23,7 @@
     "@emotion/styled": "11.10.6",
     "@giphy/js-fetch-api": "4.9.3",
     "@giphy/react-components": "6.9.4",
-    "@giphy/react-native-sdk": "3.3.1",
+    "@giphy/react-native-sdk": "4.1.0",
     "@jitsi/excalidraw": "https://github.com/jitsi/excalidraw/releases/download/v0.0.19/jitsi-excalidraw-0.0.19.tgz",
     "@jitsi/js-utils": "2.2.1",
     "@jitsi/logger": "2.0.2",
@@ -57,8 +57,10 @@
     "clipboard-copy": "4.0.1",
     "clsx": "1.1.1",
     "dayjs": "1.11.13",
+    "dompurify": "3.2.6",
     "dropbox": "10.7.0",
     "focus-visible": "5.1.0",
+    "glob": "11.0.3",
     "grapheme-splitter": "1.0.4",
     "i18n-iso-countries": "6.8.0",
     "i18next": "17.0.6",
@@ -70,7 +72,7 @@
     "js-md5": "0.6.1",
     "js-sha512": "0.8.0",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v2030.0.0+b225c920/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v2051.0.0+ccc06e83/lib-jitsi-meet.tgz",
     "lodash-es": "4.17.21",
     "null-loader": "4.0.1",
     "optional-require": "1.0.3",
@@ -87,16 +89,16 @@
     "react-native-background-timer": "https://github.com/jitsi/react-native-background-timer.git#d180dfaa4486ae3ee17d01242db92cb3195f4718",
     "react-native-calendar-events": "https://github.com/jitsi/react-native-calendar-events.git#47f068dedfed7c0f72042e093f688eb11624eb7b",
     "react-native-default-preference": "https://github.com/jitsi/react-native-default-preference.git#c9bf63bdc058e3fa2aa0b87b1ee1af240f44ed02",
-    "react-native-device-info": "10.9.0",
+    "react-native-device-info": "12.1.0",
     "react-native-dialog": "https://github.com/jitsi/react-native-dialog/releases/download/v9.2.2-jitsi.1/react-native-dialog-9.2.2.tgz",
     "react-native-gesture-handler": "2.24.0",
     "react-native-get-random-values": "1.11.0",
     "react-native-immersive-mode": "https://github.com/jitsi/react-native-immersive-mode.git#38cc9001db24618bc0c61800f81e889bcfb6ff2c",
-    "react-native-orientation-locker": "1.6.0",
-    "react-native-pager-view": "6.4.1",
+    "react-native-orientation-locker": "https://github.com/jitsi/react-native-orientation-locker.git#fe095651d819cf134624f786b61fc8667862178a",
+    "react-native-pager-view": "6.8.1",
     "react-native-paper": "5.10.3",
     "react-native-performance": "5.1.2",
-    "react-native-safe-area-context": "5.4.0",
+    "react-native-safe-area-context": "5.5.2",
     "react-native-screens": "4.11.1",
     "react-native-sound": "https://github.com/jitsi/react-native-sound.git#ea13c97b5c2a4ff5e0d9bacbd9ff5e4457fe2c3c",
     "react-native-splash-view": "0.0.18",
@@ -111,7 +113,7 @@
     "react-native-youtube-iframe": "2.3.0",
     "react-redux": "7.2.9",
     "react-textarea-autosize": "8.3.0",
-    "react-virtualized-auto-sizer": "^1.0.26",
+    "react-virtualized-auto-sizer": "1.0.26",
     "react-window": "1.8.6",
     "react-youtube": "10.1.0",
     "redux": "4.0.4",

patches/@giphy+js-analytics+4.3.2.patch

@@ -1,14 +0,0 @@
-diff --git a/node_modules/@giphy/js-analytics/dist/send-pingback.js b/node_modules/@giphy/js-analytics/dist/send-pingback.js
-index 989f0ff..52471cb 100644
---- a/node_modules/@giphy/js-analytics/dist/send-pingback.js
-+++ b/node_modules/@giphy/js-analytics/dist/send-pingback.js
-@@ -10,6 +10,9 @@ var global_1 = __importDefault(require("./global"));
- var environment = (global_1.default === null || global_1.default === void 0 ? void 0 : global_1.default.GIPHY_PINGBACK_URL) || 'https://pingback.giphy.com';
- var pingBackUrl = "".concat(environment, "/v2/pingback?apikey=l0HlIwPWyBBUDAUgM");
- var sendPingback = function (events) {
-+    // Disabled.
-+    return Promise.resolve();
-+
-     var headers = (0, js_util_1.getGiphySDKRequestHeaders)();
-     /* istanbul ignore next */
-     headers === null || headers === void 0 ? void 0 : headers.set('Content-Type', 'application/json');

react-native-sdk/README.md

@@ -70,6 +70,7 @@ cd ios && pod install && cd ..
 ## Android
 
 - In your build.gradle have at least `minSdkVersion = 26`
+- In your build.gradle have `gradlePluginVersion = "8.4.2"` or higher
 - In `android/app/src/debug/AndroidManifest.xml` and `android/app/src/main/AndroidManifest.xml`, under the `</application>` tag, include
   ```xml
     <uses-permission android:name="android.permission.RECORD_AUDIO" />

react-native-sdk/android/build.gradle

@@ -7,7 +7,6 @@ buildscript {
   dependencies {
     classpath "com.android.tools.build:gradle:$rootProject.ext.gradlePluginVersion"
   }
-  namespace 'org.jitsi.meet.reactnativesdk'
 }
 
 def isNewArchitectureEnabled() {
@@ -29,6 +28,7 @@ def getExtOrIntegerDefault(name) {
 }
 
 android {
+  namespace 'org.jitsi.meet.sdk'
   compileSdkVersion getExtOrIntegerDefault('compileSdkVersion')
 
   defaultConfig {

react-native-sdk/android/src/main/AndroidManifest.xml

@@ -1,4 +1,3 @@
-<manifest xmlns:android="http://schemas.android.com/apk/res/android"
-          package="org.jitsi.meet.sdk">
+<manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
 </manifest>

react/features/analytics/AnalyticsEvents.ts

@@ -63,6 +63,11 @@ export const ACTION_SHORTCUT_TRIGGERED = 'triggered';
  */
 export const AUDIO_MUTE = 'audio.mute';
 
+/**
+ * The name of the keyboard shortcut or toolbar button for muting desktop sharing.
+ */
+export const DESKTOP_MUTE = 'desktop.mute';
+
 /**
  * The name of the keyboard shortcut or toolbar button for muting video.
  */

react/features/analytics/handlers/amplitude/fixDeviceID.web.ts

@@ -35,3 +35,12 @@ export function fixDeviceID(amplitude: Types.BrowserClient) {
         }
     }
 }
+
+/**
+ * Returns the amplitude shared deviceId.
+ *
+ * @returns {string} - The amplitude deviceId.
+ */
+export function getDeviceID() {
+    return jitsiLocalStorage.getItem(DEVICE_ID_KEY);
+}

react/features/app/functions.web.ts

@@ -1,8 +1,10 @@
 import { IStateful } from '../base/app/types';
 import { toState } from '../base/redux/functions';
 import { getServerURL } from '../base/settings/functions.web';
+import { getJitsiMeetGlobalNS } from '../base/util/helpers';
 
 export * from './functions.any';
+import logger from './logger';
 
 /**
  * Retrieves the default URL for the app. This can either come from a prop to
@@ -31,3 +33,27 @@ export function getDefaultURL(stateful: IStateful) {
 export function getName() {
     return interfaceConfig.APP_NAME;
 }
+
+/**
+ * Executes a handler function after the window load event has been received.
+ * If the app has already loaded, the handler is executed immediately.
+ * Otherwise, the handler is registered as a 'load' event listener.
+ *
+ * @param {Function} handler - The callback function to execute.
+ * @returns {void}
+ */
+export function executeAfterLoad(handler: () => void) {
+    const safeHandler = () => {
+        try {
+            handler();
+        } catch (error) {
+            logger.error('Error executing handler after load:', error);
+        }
+    };
+
+    if (getJitsiMeetGlobalNS()?.hasLoaded) {
+        safeHandler();
+    } else {
+        window.addEventListener('load', safeHandler);
+    }
+}

react/features/app/middlewares.any.ts

@@ -24,7 +24,6 @@ import '../calendar-sync/middleware';
 import '../chat/middleware';
 import '../conference/middleware';
 import '../connection-indicator/middleware';
-import '../deep-linking/middleware';
 import '../device-selection/middleware';
 import '../display-name/middleware';
 import '../dynamic-branding/middleware';

react/features/app/middlewares.web.ts

@@ -2,6 +2,7 @@ import '../base/app/middleware';
 import '../base/connection/middleware';
 import '../base/devices/middleware';
 import '../base/media/middleware';
+import '../deep-linking/middleware.web';
 import '../dynamic-branding/middleware';
 import '../e2ee/middleware';
 import '../external-api/middleware';

react/features/av-moderation/actionTypes.ts

@@ -37,6 +37,15 @@ export const ENABLE_MODERATION = 'ENABLE_MODERATION';
  */
 export const REQUEST_DISABLE_AUDIO_MODERATION = 'REQUEST_DISABLE_AUDIO_MODERATION';
 
+/**
+ * The type of (redux) action which signals that Desktop Moderation disable has been requested.
+ *
+ * {
+ *     type: REQUEST_DISABLE_DESKTOP_MODERATION
+ * }
+ */
+export const REQUEST_DISABLE_DESKTOP_MODERATION = 'REQUEST_DISABLE_DESKTOP_MODERATION';
+
 /**
  * The type of (redux) action which signals that Video Moderation disable has been requested.
  *
@@ -55,6 +64,15 @@ export const REQUEST_DISABLE_VIDEO_MODERATION = 'REQUEST_DISABLE_VIDEO_MODERATIO
  */
 export const REQUEST_ENABLE_AUDIO_MODERATION = 'REQUEST_ENABLE_AUDIO_MODERATION';
 
+/**
+ * The type of (redux) action which signals that Desktop Moderation enable has been requested.
+ *
+ * {
+ *     type: REQUEST_ENABLE_DESKTOP_MODERATION
+ * }
+ */
+export const REQUEST_ENABLE_DESKTOP_MODERATION = 'REQUEST_ENABLE_DESKTOP_MODERATION';
+
 /**
  * The type of (redux) action which signals that Video Moderation enable has been requested.
  *
@@ -117,7 +135,7 @@ export const PARTICIPANT_REJECTED = 'PARTICIPANT_REJECTED';
 
 
 /**
- * The type of (redux) action which signals that a participant asked to have its audio umuted.
+ * The type of (redux) action which signals that a participant asked to have its audio unmuted.
  *
  * {
  *     type: PARTICIPANT_PENDING_AUDIO

react/features/av-moderation/actions.ts

@@ -1,9 +1,9 @@
+import { batch } from 'react-redux';
+
 import { IStore } from '../app/types';
 import { getConferenceState } from '../base/conference/functions';
-import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
 import { getParticipantById, isParticipantModerator } from '../base/participants/functions';
 import { IParticipant } from '../base/participants/types';
-import { isForceMuted } from '../participants-pane/functions';
 
 import {
     DISABLE_MODERATION,
@@ -16,11 +16,14 @@ import {
     PARTICIPANT_PENDING_AUDIO,
     PARTICIPANT_REJECTED,
     REQUEST_DISABLE_AUDIO_MODERATION,
+    REQUEST_DISABLE_DESKTOP_MODERATION,
     REQUEST_DISABLE_VIDEO_MODERATION,
     REQUEST_ENABLE_AUDIO_MODERATION,
+    REQUEST_ENABLE_DESKTOP_MODERATION,
     REQUEST_ENABLE_VIDEO_MODERATION
 } from './actionTypes';
-import { isEnabledFromState } from './functions';
+import { MEDIA_TYPE, type MediaType } from './constants';
+import { isEnabledFromState, isForceMuted } from './functions';
 
 /**
  * Action used by moderator to approve audio for a participant.
@@ -42,6 +45,25 @@ export const approveParticipantAudio = (id: string) => (dispatch: IStore['dispat
     }
 };
 
+/**
+ * Action used by moderator to approve desktop for a participant.
+ *
+ * @param {staring} id - The id of the participant to be approved.
+ * @returns {void}
+ */
+export const approveParticipantDesktop = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const participant = getParticipantById(state, id);
+
+    const isDesktopForceMuted = isForceMuted(participant, MEDIA_TYPE.DESKTOP, state);
+    const isDesktopModerationOn = isEnabledFromState(MEDIA_TYPE.DESKTOP, state);
+
+    if (isDesktopModerationOn && isDesktopForceMuted) {
+        conference?.avModerationApprove(MEDIA_TYPE.DESKTOP, id);
+    }
+};
+
 /**
  * Action used by moderator to approve video for a participant.
  *
@@ -68,8 +90,11 @@ export const approveParticipantVideo = (id: string) => (dispatch: IStore['dispat
  * @returns {void}
  */
 export const approveParticipant = (id: string) => (dispatch: IStore['dispatch']) => {
-    dispatch(approveParticipantAudio(id));
-    dispatch(approveParticipantVideo(id));
+    batch(() => {
+        dispatch(approveParticipantAudio(id));
+        dispatch(approveParticipantDesktop(id));
+        dispatch(approveParticipantVideo(id));
+    });
 };
 
 /**
@@ -92,6 +117,26 @@ export const rejectParticipantAudio = (id: string) => (dispatch: IStore['dispatc
     }
 };
 
+/**
+ * Action used by moderator to reject desktop for a participant.
+ *
+ * @param {staring} id - The id of the participant to be rejected.
+ * @returns {void}
+ */
+export const rejectParticipantDesktop = (id: string) => (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+    const state = getState();
+    const { conference } = getConferenceState(state);
+    const desktopModeration = isEnabledFromState(MEDIA_TYPE.DESKTOP, state);
+
+    const participant = getParticipantById(state, id);
+    const isDesktopForceMuted = isForceMuted(participant, MEDIA_TYPE.DESKTOP, state);
+    const isModerator = isParticipantModerator(participant);
+
+    if (desktopModeration && !isDesktopForceMuted && !isModerator) {
+        conference?.avModerationReject(MEDIA_TYPE.DESKTOP, id);
+    }
+};
+
 /**
  * Action used by moderator to reject video for a participant.
  *
@@ -185,6 +230,19 @@ export const requestDisableAudioModeration = () => {
     };
 };
 
+/**
+ * Requests disable of video moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_DISABLE_DESKTOP_MODERATION
+ * }}
+ */
+export const requestDisableDesktopModeration = () => {
+    return {
+        type: REQUEST_DISABLE_DESKTOP_MODERATION
+    };
+};
+
 /**
  * Requests disable of video moderation.
  *
@@ -211,6 +269,19 @@ export const requestEnableAudioModeration = () => {
     };
 };
 
+/**
+ * Requests enable of video moderation.
+ *
+ * @returns {{
+ *     type: REQUEST_ENABLE_DESKTOP_MODERATION
+ * }}
+ */
+export const requestEnableDesktopModeration = () => {
+    return {
+        type: REQUEST_ENABLE_DESKTOP_MODERATION
+    };
+};
+
 /**
  * Requests enable of video moderation.
  *
@@ -313,4 +384,3 @@ export function participantRejected(id: string, mediaType: MediaType) {
         mediaType
     };
 }
-

react/features/av-moderation/constants.ts

@@ -1,18 +1,35 @@
-import { MEDIA_TYPE } from '../base/media/constants';
+export type MediaType = 'audio' | 'video' | 'desktop';
 
 /**
- * Mapping between a media type and the witelist reducer key.
+ * The set of media types for AV moderation.
+ *
+ * @enum {string}
+ */
+export const MEDIA_TYPE: {
+    AUDIO: MediaType;
+    DESKTOP: MediaType;
+    VIDEO: MediaType;
+} = {
+    AUDIO: 'audio',
+    DESKTOP: 'desktop',
+    VIDEO: 'video'
+};
+
+/**
+ * Mapping between a media type and the whitelist reducer key.
  */
 export const MEDIA_TYPE_TO_WHITELIST_STORE_KEY: { [key: string]: string; } = {
     [MEDIA_TYPE.AUDIO]: 'audioWhitelist',
+    [MEDIA_TYPE.DESKTOP]: 'desktopWhitelist',
     [MEDIA_TYPE.VIDEO]: 'videoWhitelist'
 };
 
 /**
  * Mapping between a media type and the pending reducer key.
  */
-export const MEDIA_TYPE_TO_PENDING_STORE_KEY: { [key: string]: 'pendingAudio' | 'pendingVideo'; } = {
+export const MEDIA_TYPE_TO_PENDING_STORE_KEY: { [key: string]: 'pendingAudio' | 'pendingDesktop' | 'pendingVideo'; } = {
     [MEDIA_TYPE.AUDIO]: 'pendingAudio',
+    [MEDIA_TYPE.DESKTOP]: 'pendingDesktop',
     [MEDIA_TYPE.VIDEO]: 'pendingVideo'
 };
 
@@ -20,11 +37,15 @@ export const ASKED_TO_UNMUTE_NOTIFICATION_ID = 'asked-to-unmute';
 export const ASKED_TO_UNMUTE_SOUND_ID = 'ASKED_TO_UNMUTE_SOUND';
 
 export const AUDIO_MODERATION_NOTIFICATION_ID = 'audio-moderation';
+export const DESKTOP_MODERATION_NOTIFICATION_ID = 'desktop-moderation';
 export const VIDEO_MODERATION_NOTIFICATION_ID = 'video-moderation';
-export const CS_MODERATION_NOTIFICATION_ID = 'screensharing-moderation';
+
+export const AUDIO_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-audio';
+export const DESKTOP_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-desktop';
+export const VIDEO_RAISED_HAND_NOTIFICATION_ID = 'raise-hand-video';
 
 export const MODERATION_NOTIFICATIONS = {
     [MEDIA_TYPE.AUDIO]: AUDIO_MODERATION_NOTIFICATION_ID,
-    [MEDIA_TYPE.SCREENSHARE]: CS_MODERATION_NOTIFICATION_ID,
+    [MEDIA_TYPE.DESKTOP]: DESKTOP_MODERATION_NOTIFICATION_ID,
     [MEDIA_TYPE.VIDEO]: VIDEO_MODERATION_NOTIFICATION_ID
 };

react/features/av-moderation/functions.ts

@@ -1,10 +1,14 @@
 import { IReduxState } from '../app/types';
-import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
-import { isLocalParticipantModerator } from '../base/participants/functions';
+import { isLocalParticipantModerator, isParticipantModerator } from '../base/participants/functions';
 import { IParticipant } from '../base/participants/types';
 import { isInBreakoutRoom } from '../breakout-rooms/functions';
 
-import { MEDIA_TYPE_TO_PENDING_STORE_KEY, MEDIA_TYPE_TO_WHITELIST_STORE_KEY } from './constants';
+import {
+    MEDIA_TYPE,
+    MEDIA_TYPE_TO_PENDING_STORE_KEY,
+    MEDIA_TYPE_TO_WHITELIST_STORE_KEY,
+    MediaType
+} from './constants';
 
 /**
  * Returns this feature's root state.
@@ -29,10 +33,18 @@ const EMPTY_ARRAY: any[] = [];
  * @param {IReduxState} state - Global state.
  * @returns {boolean}
  */
-export const isEnabledFromState = (mediaType: MediaType, state: IReduxState) =>
-    (mediaType === MEDIA_TYPE.AUDIO
-        ? getState(state)?.audioModerationEnabled
-        : getState(state)?.videoModerationEnabled) === true;
+export const isEnabledFromState = (mediaType: MediaType, state: IReduxState) => {
+    switch (mediaType) {
+    case MEDIA_TYPE.AUDIO:
+        return getState(state)?.audioModerationEnabled === true;
+    case MEDIA_TYPE.DESKTOP:
+        return getState(state)?.desktopModerationEnabled === true;
+    case MEDIA_TYPE.VIDEO:
+        return getState(state)?.videoModerationEnabled === true;
+    default:
+        throw new Error(`Unknown media type: ${mediaType}`);
+    }
+};
 
 /**
  * Returns whether moderation is enabled per media type.
@@ -61,11 +73,20 @@ export const isSupported = () => (state: IReduxState) => {
  * @returns {boolean}
  */
 export const isLocalParticipantApprovedFromState = (mediaType: MediaType, state: IReduxState) => {
-    const approved = (mediaType === MEDIA_TYPE.AUDIO
-        ? getState(state).audioUnmuteApproved
-        : getState(state).videoUnmuteApproved) === true;
+    if (isLocalParticipantModerator(state)) {
+        return true;
+    }
 
-    return approved || isLocalParticipantModerator(state);
+    switch (mediaType) {
+    case MEDIA_TYPE.AUDIO:
+        return getState(state).audioUnmuteApproved === true;
+    case MEDIA_TYPE.DESKTOP:
+        return getState(state).desktopUnmuteApproved === true;
+    case MEDIA_TYPE.VIDEO:
+        return getState(state).videoUnmuteApproved === true;
+    default:
+        throw new Error(`Unknown media type: ${mediaType}`);
+    }
 };
 
 /**
@@ -134,3 +155,28 @@ export const getParticipantsAskingToAudioUnmute = (state: IReduxState) => {
 export const shouldShowModeratedNotification = (mediaType: MediaType, state: IReduxState) =>
     isEnabledFromState(mediaType, state)
     && !isLocalParticipantApprovedFromState(mediaType, state);
+
+/**
+ * Checks if a participant is force muted.
+ *
+ * @param {IParticipant|undefined} participant - The participant.
+ * @param {MediaType} mediaType - The media type.
+ * @param {IReduxState} state - The redux state.
+ * @returns {MediaState}
+ */
+export function isForceMuted(participant: IParticipant | undefined, mediaType: MediaType, state: IReduxState) {
+    if (isEnabledFromState(mediaType, state)) {
+        if (participant?.local) {
+            return !isLocalParticipantApprovedFromState(mediaType, state);
+        }
+
+        // moderators cannot be force muted
+        if (isParticipantModerator(participant)) {
+            return false;
+        }
+
+        return !isParticipantApproved(participant?.id ?? '', mediaType)(state);
+    }
+
+    return false;
+}

react/features/av-moderation/middleware.ts

@@ -3,8 +3,12 @@ import { batch } from 'react-redux';
 import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
 import { getConferenceState } from '../base/conference/functions';
 import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
-import { MEDIA_TYPE, MediaType } from '../base/media/constants';
-import { isAudioMuted, isVideoMuted } from '../base/media/functions';
+import { MEDIA_TYPE as TRACK_MEDIA_TYPE } from '../base/media/constants';
+import {
+    isAudioMuted,
+    isScreenshareMuted,
+    isVideoMuted
+} from '../base/media/functions';
 import { PARTICIPANT_UPDATED } from '../base/participants/actionTypes';
 import { raiseHand } from '../base/participants/actions';
 import {
@@ -30,8 +34,10 @@ import {
     PARTICIPANT_APPROVED,
     PARTICIPANT_REJECTED,
     REQUEST_DISABLE_AUDIO_MODERATION,
+    REQUEST_DISABLE_DESKTOP_MODERATION,
     REQUEST_DISABLE_VIDEO_MODERATION,
     REQUEST_ENABLE_AUDIO_MODERATION,
+    REQUEST_ENABLE_DESKTOP_MODERATION,
     REQUEST_ENABLE_VIDEO_MODERATION
 } from './actionTypes';
 import {
@@ -49,8 +55,10 @@ import {
     ASKED_TO_UNMUTE_NOTIFICATION_ID,
     ASKED_TO_UNMUTE_SOUND_ID,
     AUDIO_MODERATION_NOTIFICATION_ID,
-    CS_MODERATION_NOTIFICATION_ID,
-    VIDEO_MODERATION_NOTIFICATION_ID
+    DESKTOP_MODERATION_NOTIFICATION_ID,
+    MEDIA_TYPE,
+    MediaType,
+    VIDEO_MODERATION_NOTIFICATION_ID,
 } from './constants';
 import {
     isEnabledFromState,
@@ -90,9 +98,9 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
             uid = VIDEO_MODERATION_NOTIFICATION_ID;
             break;
         }
-        case MEDIA_TYPE.SCREENSHARE: {
+        case MEDIA_TYPE.DESKTOP: {
             titleKey = 'notify.moderationInEffectCSTitle';
-            uid = CS_MODERATION_NOTIFICATION_ID;
+            uid = DESKTOP_MODERATION_NOTIFICATION_ID;
             break;
         }
         }
@@ -115,6 +123,10 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
         conference?.disableAVModeration(MEDIA_TYPE.AUDIO);
         break;
     }
+    case REQUEST_DISABLE_DESKTOP_MODERATION: {
+        conference?.disableAVModeration(MEDIA_TYPE.DESKTOP);
+        break;
+    }
     case REQUEST_DISABLE_VIDEO_MODERATION: {
         conference?.disableAVModeration(MEDIA_TYPE.VIDEO);
         break;
@@ -123,6 +135,10 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
         conference?.enableAVModeration(MEDIA_TYPE.AUDIO);
         break;
     }
+    case REQUEST_ENABLE_DESKTOP_MODERATION: {
+        conference?.enableAVModeration(MEDIA_TYPE.DESKTOP);
+        break;
+    }
     case REQUEST_ENABLE_VIDEO_MODERATION: {
         conference?.enableAVModeration(MEDIA_TYPE.VIDEO);
         break;
@@ -219,24 +235,37 @@ StateListenerRegistry.register(
                 const customActionHandler = [];
 
                 if ((mediaType === MEDIA_TYPE.AUDIO || getState()['features/av-moderation'].audioUnmuteApproved)
-                    && isAudioMuted(getState())) {
+                        && isAudioMuted(getState())) {
                     customActionNameKey.push('notify.unmute');
                     customActionHandler.push(() => {
-                        dispatch(muteLocal(false, MEDIA_TYPE.AUDIO));
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.AUDIO));
                         dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
                     });
                 }
 
-                if ((mediaType === MEDIA_TYPE.VIDEO || getState()['features/av-moderation'].videoUnmuteApproved)
-                    && isVideoMuted(getState())) {
-                    customActionNameKey.push('notify.unmuteVideo');
+                if ((mediaType === MEDIA_TYPE.DESKTOP || getState()['features/av-moderation'].desktopUnmuteApproved)
+                        && isScreenshareMuted(getState())) {
+                    customActionNameKey.push('notify.unmuteScreen');
                     customActionHandler.push(() => {
-                        dispatch(muteLocal(false, MEDIA_TYPE.VIDEO));
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.SCREENSHARE));
                         dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
 
-                        // lower hand as there will be no audio and change in dominant speaker to clear it
+                        // Since permission is requested by raising the hand, lower it not to rely on dominant speaker detection
+                        // to clear the hand.
                         dispatch(raiseHand(false));
+                    });
+                }
 
+                if ((mediaType === MEDIA_TYPE.VIDEO || getState()['features/av-moderation'].videoUnmuteApproved)
+                        && isVideoMuted(getState())) {
+                    customActionNameKey.push('notify.unmuteVideo');
+                    customActionHandler.push(() => {
+                        dispatch(muteLocal(false, TRACK_MEDIA_TYPE.VIDEO));
+                        dispatch(hideNotification(ASKED_TO_UNMUTE_NOTIFICATION_ID));
+
+                        // Since permission is requested by raising the hand, lower it not to rely on dominant speaker detection
+                        // to clear the hand.
+                        dispatch(raiseHand(false));
                     });
                 }
 

react/features/av-moderation/reducer.ts

@@ -1,4 +1,3 @@
-import { MEDIA_TYPE, type MediaType } from '../base/media/constants';
 import {
     PARTICIPANT_LEFT,
     PARTICIPANT_UPDATED
@@ -16,14 +15,21 @@ import {
     PARTICIPANT_PENDING_AUDIO,
     PARTICIPANT_REJECTED
 } from './actionTypes';
-import { MEDIA_TYPE_TO_PENDING_STORE_KEY } from './constants';
+import {
+    MEDIA_TYPE,
+    MEDIA_TYPE_TO_PENDING_STORE_KEY,
+    type MediaType
+} from './constants';
 
 const initialState = {
     audioModerationEnabled: false,
+    desktopModerationEnabled: false,
     videoModerationEnabled: false,
     audioWhitelist: {},
+    desktopWhitelist: {},
     videoWhitelist: {},
     pendingAudio: [],
+    pendingDesktop: [],
     pendingVideo: []
 };
 
@@ -31,7 +37,11 @@ export interface IAVModerationState {
     audioModerationEnabled: boolean;
     audioUnmuteApproved?: boolean | undefined;
     audioWhitelist: { [id: string]: boolean; };
+    desktopModerationEnabled: boolean;
+    desktopUnmuteApproved?: boolean | undefined;
+    desktopWhitelist: { [id: string]: boolean; };
     pendingAudio: Array<{ id: string; }>;
+    pendingDesktop: Array<{ id: string; }>;
     pendingVideo: Array<{ id: string; }>;
     videoModerationEnabled: boolean;
     videoUnmuteApproved?: boolean | undefined;
@@ -77,28 +87,61 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
 (state = initialState, action): IAVModerationState => {
     switch (action.type) {
     case DISABLE_MODERATION: {
-        const newState = action.mediaType === MEDIA_TYPE.AUDIO
-            ? {
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
                 audioModerationEnabled: false,
                 audioUnmuteApproved: undefined
-            } : {
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopModerationEnabled: false,
+                desktopUnmuteApproved: undefined
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
                 videoModerationEnabled: false,
                 videoUnmuteApproved: undefined
             };
+            break;
+        }
 
         return {
             ...state,
             ...newState,
             audioWhitelist: {},
+            desktopWhitelist: {},
             videoWhitelist: {},
             pendingAudio: [],
+            pendingDesktop: [],
             pendingVideo: []
         };
     }
 
     case ENABLE_MODERATION: {
-        const newState = action.mediaType === MEDIA_TYPE.AUDIO
-            ? { audioModerationEnabled: true } : { videoModerationEnabled: true };
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioModerationEnabled: true,
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopModerationEnabled: true,
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoModerationEnabled: true,
+            };
+            break;
+        }
 
         return {
             ...state,
@@ -107,8 +150,25 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
     }
 
     case LOCAL_PARTICIPANT_APPROVED: {
-        const newState = action.mediaType === MEDIA_TYPE.AUDIO
-            ? { audioUnmuteApproved: true } : { videoUnmuteApproved: true };
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioUnmuteApproved: true
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopUnmuteApproved: true
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoUnmuteApproved: true
+            };
+            break;
+        }
 
         return {
             ...state,
@@ -117,8 +177,25 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
     }
 
     case LOCAL_PARTICIPANT_REJECTED: {
-        const newState = action.mediaType === MEDIA_TYPE.AUDIO
-            ? { audioUnmuteApproved: false } : { videoUnmuteApproved: false };
+        let newState = {};
+
+        switch (action.mediaType) {
+        case MEDIA_TYPE.AUDIO:
+            newState = {
+                audioUnmuteApproved: false
+            };
+            break;
+        case MEDIA_TYPE.DESKTOP:
+            newState = {
+                desktopUnmuteApproved: false
+            };
+            break;
+        case MEDIA_TYPE.VIDEO:
+            newState = {
+                videoUnmuteApproved: false
+            };
+            break;
+        }
 
         return {
             ...state,
@@ -146,7 +223,7 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
 
     case PARTICIPANT_UPDATED: {
         const participant = action.participant;
-        const { audioModerationEnabled, videoModerationEnabled } = state;
+        const { audioModerationEnabled, desktopModerationEnabled, videoModerationEnabled } = state;
         let hasStateChanged = false;
 
         // skips changing the reference of pendingAudio or pendingVideo,
@@ -155,6 +232,10 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
             hasStateChanged = _updatePendingParticipant(MEDIA_TYPE.AUDIO, participant, state);
         }
 
+        if (desktopModerationEnabled) {
+            hasStateChanged = hasStateChanged || _updatePendingParticipant(MEDIA_TYPE.DESKTOP, participant, state);
+        }
+
         if (videoModerationEnabled) {
             hasStateChanged = hasStateChanged || _updatePendingParticipant(MEDIA_TYPE.VIDEO, participant, state);
         }
@@ -168,9 +249,10 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
 
         return state;
     }
+
     case PARTICIPANT_LEFT: {
         const participant = action.participant;
-        const { audioModerationEnabled, videoModerationEnabled } = state;
+        const { audioModerationEnabled, desktopModerationEnabled, videoModerationEnabled } = state;
         let hasStateChanged = false;
 
         // skips changing the reference of pendingAudio or pendingVideo,
@@ -184,6 +266,15 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
             }
         }
 
+        if (desktopModerationEnabled) {
+            const newPendingDesktop = state.pendingDesktop.filter(pending => pending.id !== participant.id);
+
+            if (state.pendingDesktop.length !== newPendingDesktop.length) {
+                state.pendingDesktop = newPendingDesktop;
+                hasStateChanged = true;
+            }
+        }
+
         if (videoModerationEnabled) {
             const newPendingVideo = state.pendingVideo.filter(pending => pending.id !== participant.id);
 
@@ -213,6 +304,13 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
             };
         }
 
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                pendingDesktop: state.pendingDesktop.filter(pending => pending.id !== id)
+            };
+        }
+
         if (mediaType === MEDIA_TYPE.VIDEO) {
             return {
                 ...state,
@@ -236,6 +334,16 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
             };
         }
 
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                desktopWhitelist: {
+                    ...state.desktopWhitelist,
+                    [id]: true
+                }
+            };
+        }
+
         if (mediaType === MEDIA_TYPE.VIDEO) {
             return {
                 ...state,
@@ -262,6 +370,16 @@ ReducerRegistry.register<IAVModerationState>('features/av-moderation',
             };
         }
 
+        if (mediaType === MEDIA_TYPE.DESKTOP) {
+            return {
+                ...state,
+                desktopWhitelist: {
+                    ...state.desktopWhitelist,
+                    [id]: false
+                }
+            };
+        }
+
         if (mediaType === MEDIA_TYPE.VIDEO) {
             return {
                 ...state,

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

@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
+import { pixelsToRem } from '../../../ui/functions.any';
 import { isIcon } from '../../functions';
 import { IAvatarProps } from '../../types';
 import { PRESENCE_AVAILABLE_COLOR, PRESENCE_AWAY_COLOR, PRESENCE_BUSY_COLOR, PRESENCE_IDLE_COLOR } from '../styles';
@@ -50,9 +50,8 @@ const useStyles = makeStyles()(theme => {
         avatar: {
             backgroundColor: '#AAA',
             borderRadius: '50%',
-            fontWeight: '600',
             color: theme.palette?.text01 || '#fff',
-            ...withPixelLineHeight(theme.typography?.heading1 ?? {}),
+            ...(theme.typography?.heading1 ?? {}),
             fontSize: 'inherit',
             objectFit: 'cover',
             textAlign: 'center',
@@ -137,7 +136,7 @@ const StatelessAvatar = ({
     const _getAvatarStyle = (backgroundColor?: string) => {
         return {
             background: backgroundColor || undefined,
-            fontSize: size ? size * 0.4 : '180%',
+            fontSize: size ? pixelsToRem(size * 0.4) : '180%',
             height: size || '100%',
             width: size || '100%'
         };

react/features/base/buttons/CopyButton.web.tsx

@@ -4,13 +4,12 @@ import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../icons/components/Icon';
 import { IconCheck, IconCopy } from '../icons/svg';
-import { withPixelLineHeight } from '../styles/functions.web';
 import { copyText } from '../util/copyText.web';
 
 const useStyles = makeStyles()(theme => {
     return {
         copyButton: {
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             borderRadius: theme.shape.borderRadius,
             display: 'flex',
             justifyContent: 'flex-start',

react/features/base/conference/actions.any.ts

@@ -83,7 +83,8 @@ import {
     getConferenceState,
     getCurrentConference,
     getVisitorOptions,
-    sendLocalParticipant
+    sendLocalParticipant,
+    updateTrackMuteState
 } from './functions';
 import logger from './logger';
 import { IConferenceMetadata, IJitsiConference } from './reducer';
@@ -186,6 +187,15 @@ function _addConferenceListeners(conference: IJitsiConference, dispatch: IStore[
         (disableVideoMuteChange: boolean) => {
             dispatch(setVideoUnmutePermissions(disableVideoMuteChange));
         });
+    conference.on(
+        JitsiConferenceEvents.START_MUTED_POLICY_CHANGED,
+        ({ audio, video }: { audio: boolean; video: boolean; }) => {
+            dispatch(onStartMutedPolicyChanged(audio, video));
+
+            updateTrackMuteState(state, dispatch, true);
+            updateTrackMuteState(state, dispatch, false);
+        }
+    );
 
     // Dispatches into features/base/tracks follow:
 
@@ -1013,6 +1023,8 @@ export function setStartMutedPolicy(
             audio: startAudioMuted,
             video: startVideoMuted
         });
+
+        dispatch(onStartMutedPolicyChanged(startAudioMuted, startVideoMuted));
     };
 }
 

react/features/base/conference/constants.ts

@@ -40,3 +40,8 @@ export const CONFERENCE_LEAVE_REASONS = {
     SWITCH_ROOM: 'switch_room',
     UNRECOVERABLE_ERROR: 'unrecoverable_error'
 };
+
+/**
+ * The ID of the notification that is shown when the user is muted by focus.
+ */
+export const START_MUTED_NOTIFICATION_ID = 'start-muted';

react/features/base/conference/functions.ts

@@ -3,9 +3,13 @@ import { upperFirst, words } from 'lodash-es';
 
 import { getName } from '../../app/functions';
 import { IReduxState, IStore } from '../../app/types';
+import { showNotification } from '../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
 import { determineTranscriptionLanguage } from '../../transcribing/functions';
 import { IStateful } from '../app/types';
 import { JitsiTrackErrors } from '../lib-jitsi-meet';
+import { setAudioMuted, setVideoMuted } from '../media/actions';
+import { VIDEO_MUTISM_AUTHORITY } from '../media/constants';
 import {
     participantJoined,
     participantLeft
@@ -22,7 +26,8 @@ import { setObfuscatedRoom } from './actions';
 import {
     AVATAR_URL_COMMAND,
     EMAIL_COMMAND,
-    JITSI_CONFERENCE_URL_KEY
+    JITSI_CONFERENCE_URL_KEY,
+    START_MUTED_NOTIFICATION_ID
 } from './constants';
 import logger from './logger';
 import { IJitsiConference } from './reducer';
@@ -574,3 +579,42 @@ function safeStartCase(s = '') {
         (result, word, index) => result + (index ? ' ' : '') + upperFirst(word)
         , '');
 }
+
+/**
+ * Updates the mute state of the track based on the start muted policy.
+ *
+ * @param {Object|Function} stateful - Either the whole Redux state object or the Redux store's {@code getState} method.
+ * @param {Function} dispatch - Redux dispatch function.
+ * @param {boolean} isAudio - Whether the track is audio or video.
+ * @returns {void}
+ */
+export function updateTrackMuteState(stateful: IStateful, dispatch: IStore['dispatch'], isAudio: boolean) {
+    const state = toState(stateful);
+    const mutedPolicyKey = isAudio ? 'startAudioMutedPolicy' : 'startVideoMutedPolicy';
+    const mutedPolicyValue = state['features/base/conference'][mutedPolicyKey];
+
+    // Currently, the policy only supports force muting others, not unmuting them.
+    if (!mutedPolicyValue) {
+        return;
+    }
+
+    let muteStateUpdated = false;
+    const { muted } = isAudio ? state['features/base/media'].audio : state['features/base/media'].video;
+
+    if (isAudio && !Boolean(muted)) {
+        dispatch(setAudioMuted(mutedPolicyValue, true));
+        muteStateUpdated = true;
+    } else if (!isAudio && !Boolean(muted)) {
+        // TODO: Add a new authority for video mutism for the moderator case.
+        dispatch(setVideoMuted(mutedPolicyValue, VIDEO_MUTISM_AUTHORITY.USER, true));
+        muteStateUpdated = true;
+    }
+
+    if (muteStateUpdated) {
+        dispatch(showNotification({
+            titleKey: 'notify.mutedTitle',
+            descriptionKey: 'notify.muted',
+            uid: START_MUTED_NOTIFICATION_ID // use the same id, to make sure we show one notification
+        }, NOTIFICATION_TIMEOUT_TYPE.SHORT));
+    }
+}

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

@@ -72,7 +72,6 @@ import {
 } from './functions';
 import logger from './logger';
 import { IConferenceMetadata } from './reducer';
-import './subscriber';
 
 /**
  * Handler for before unload event.

react/features/base/conference/subscriber.ts

@@ -1,61 +0,0 @@
-import { IStore } from '../../app/types';
-import { showNotification } from '../../notifications/actions';
-import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
-import { setAudioMuted, setVideoMuted } from '../media/actions';
-import { VIDEO_MUTISM_AUTHORITY } from '../media/constants';
-import StateListenerRegistry from '../redux/StateListenerRegistry';
-
-let hasShownNotification = false;
-
-/**
- * Handles changes in the start muted policy for audio and video tracks in the meta data set for the conference.
- */
-StateListenerRegistry.register(
-    /* selector */ state => state['features/base/conference'].startAudioMutedPolicy,
-    /* listener */ (startAudioMutedPolicy, store) => {
-        _updateTrackMuteState(store, true);
-    });
-
-StateListenerRegistry.register(
-    /* selector */ state => state['features/base/conference'].startVideoMutedPolicy,
-    /* listener */(startVideoMutedPolicy, store) => {
-        _updateTrackMuteState(store, false);
-    });
-
-/**
- * Updates the mute state of the track based on the start muted policy.
- *
- * @param {IStore} store - The redux store.
- * @param {boolean} isAudio - Whether the track is audio or video.
- * @returns {void}
- */
-function _updateTrackMuteState(store: IStore, isAudio: boolean) {
-    const { dispatch, getState } = store;
-    const mutedPolicyKey = isAudio ? 'startAudioMutedPolicy' : 'startVideoMutedPolicy';
-    const mutedPolicyValue = getState()['features/base/conference'][mutedPolicyKey];
-
-    // Currently, the policy only supports force muting others, not unmuting them.
-    if (!mutedPolicyValue) {
-        return;
-    }
-
-    let muteStateUpdated = false;
-    const { muted } = isAudio ? getState()['features/base/media'].audio : getState()['features/base/media'].video;
-
-    if (isAudio && !Boolean(muted)) {
-        dispatch(setAudioMuted(mutedPolicyValue, true));
-        muteStateUpdated = true;
-    } else if (!isAudio && !Boolean(muted)) {
-        // TODO: Add a new authority for video mutism for the moderator case.
-        dispatch(setVideoMuted(mutedPolicyValue, VIDEO_MUTISM_AUTHORITY.USER, true));
-        muteStateUpdated = true;
-    }
-
-    if (!hasShownNotification && muteStateUpdated) {
-        hasShownNotification = true;
-        dispatch(showNotification({
-            titleKey: 'notify.mutedTitle',
-            descriptionKey: 'notify.muted'
-        }, NOTIFICATION_TIMEOUT_TYPE.SHORT));
-    }
-}

react/features/base/config/configType.ts

@@ -521,7 +521,6 @@ export interface IConfig {
         preCallTestEnabled?: boolean;
         preCallTestICEUrl?: string;
     };
-    prejoinPageEnabled?: boolean;
     raisedHands?: {
         disableLowerHandByModerator?: boolean;
         disableLowerHandNotification?: boolean;
@@ -553,7 +552,7 @@ export interface IConfig {
         disableDemote?: boolean;
         disableGrantModerator?: boolean;
         disableKick?: boolean;
-        disablePrivateChat?: 'all' | 'allow-moderator-chat';
+        disablePrivateChat?: 'all' | 'allow-moderator-chat' | 'disable-visitor-chat';
         disabled?: boolean;
     };
     replaceParticipant?: string;

react/features/base/config/configWhitelist.ts

@@ -202,7 +202,6 @@ export default [
     'prejoinConfig.enabled',
     'prejoinConfig.hideDisplayName',
     'prejoinConfig.hideExtraJoinButtons',
-    'prejoinPageEnabled',
     'raisedHands',
     'recordingService',
     'requireDisplayName',

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

@@ -7,6 +7,7 @@ import { isEmpty, mergeWith, pick } from 'lodash-es';
 
 import { IReduxState } from '../../app/types';
 import { getLocalParticipant } from '../participants/functions';
+import { isEmbedded } from '../util/embedUtils';
 import { parseURLParams } from '../util/parseURLParams';
 
 import { IConfig } from './configType';
@@ -335,7 +336,7 @@ export function setConfigFromURLParams(
 
     overrideConfigJSON(config, interfaceConfig, json);
 
-    // Print warning about depricated URL params
+    // Print warning about deprecated URL params
     if ('interfaceConfig.SUPPORT_URL' in params) {
         logger.warn('Using SUPPORT_URL interfaceConfig URL overwrite is deprecated.'
             + ' Please use supportUrl from advanced branding!');
@@ -371,6 +372,13 @@ export function setConfigFromURLParams(
         logger.warn('Using liveStreaming config URL overwrite and/or LIVE_STREAMING_HELP_LINK interfaceConfig URL'
             + ' overwrite is deprecated. Please use liveStreaming from advanced branding!');
     }
+
+    // When not in an iframe, start without media if the pre-join page is not enabled.
+    if (!isEmbedded()
+            && 'config.prejoinConfig.enabled' in params && config.prejoinConfig?.enabled === false) {
+        logger.warn('Using prejoinConfig.enabled config URL overwrite implies starting without media.');
+        config.disableInitialGUM = true;
+    }
 }
 
 /* eslint-enable max-params */

react/features/base/config/reducer.ts

@@ -405,13 +405,6 @@ function _translateLegacyConfig(oldValue: IConfig) {
         newValue.welcomePage.disabled = !oldValue.enableWelcomePage;
     }
 
-    newValue.prejoinConfig = oldValue.prejoinConfig || {};
-    if (oldValue.hasOwnProperty('prejoinPageEnabled')
-        && !newValue.prejoinConfig.hasOwnProperty('enabled')
-    ) {
-        newValue.prejoinConfig.enabled = oldValue.prejoinPageEnabled;
-    }
-
     newValue.disabledSounds = newValue.disabledSounds || [];
 
     if (oldValue.disableJoinLeaveSounds) {

react/features/base/label/components/web/Label.tsx

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { COLORS } from '../../constants';
 
 interface IProps {
@@ -55,7 +54,7 @@ interface IProps {
 const useStyles = makeStyles()(theme => {
     return {
         label: {
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             alignItems: 'center',
             background: theme.palette.ui04,
             borderRadius: '4px',

react/features/base/media/actions.ts

@@ -1,5 +1,6 @@
 import { IStore } from '../../app/types';
 import { showModeratedNotification } from '../../av-moderation/actions';
+import { MEDIA_TYPE as AVM_MEDIA_TYPE } from '../../av-moderation/constants';
 import { shouldShowModeratedNotification } from '../../av-moderation/functions';
 import { isModerationNotificationDisplayed } from '../../notifications/functions';
 
@@ -18,7 +19,6 @@ import {
     TOGGLE_CAMERA_FACING_MODE
 } from './actionTypes';
 import {
-    MEDIA_TYPE,
     MediaType,
     SCREENSHARE_MUTISM_AUTHORITY,
     VIDEO_MUTISM_AUTHORITY
@@ -56,10 +56,23 @@ export function setAudioAvailable(available: boolean) {
  * }}
  */
 export function setAudioMuted(muted: boolean, ensureTrack = false) {
-    return {
-        type: SET_AUDIO_MUTED,
-        ensureTrack,
-        muted
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+
+        // check for A/V Moderation when trying to unmute
+        if (!muted && shouldShowModeratedNotification(AVM_MEDIA_TYPE.AUDIO, state)) {
+            if (!isModerationNotificationDisplayed(AVM_MEDIA_TYPE.AUDIO, state)) {
+                ensureTrack && dispatch(showModeratedNotification(AVM_MEDIA_TYPE.AUDIO));
+            }
+
+            return;
+        }
+
+        dispatch({
+            type: SET_AUDIO_MUTED,
+            ensureTrack,
+            muted
+        });
     };
 }
 
@@ -126,9 +139,9 @@ export function setScreenshareMuted(
         const state = getState();
 
         // check for A/V Moderation when trying to unmute
-        if (!muted && shouldShowModeratedNotification(MEDIA_TYPE.SCREENSHARE, state)) {
-            if (!isModerationNotificationDisplayed(MEDIA_TYPE.SCREENSHARE, state)) {
-                ensureTrack && dispatch(showModeratedNotification(MEDIA_TYPE.SCREENSHARE));
+        if (!muted && shouldShowModeratedNotification(AVM_MEDIA_TYPE.DESKTOP, state)) {
+            if (!isModerationNotificationDisplayed(AVM_MEDIA_TYPE.DESKTOP, state)) {
+                ensureTrack && dispatch(showModeratedNotification(AVM_MEDIA_TYPE.DESKTOP));
             }
 
             return;
@@ -184,9 +197,9 @@ export function setVideoMuted(
         const state = getState();
 
         // check for A/V Moderation when trying to unmute
-        if (!muted && shouldShowModeratedNotification(MEDIA_TYPE.VIDEO, state)) {
-            if (!isModerationNotificationDisplayed(MEDIA_TYPE.VIDEO, state)) {
-                ensureTrack && dispatch(showModeratedNotification(MEDIA_TYPE.VIDEO));
+        if (!muted && shouldShowModeratedNotification(AVM_MEDIA_TYPE.VIDEO, state)) {
+            if (!isModerationNotificationDisplayed(AVM_MEDIA_TYPE.VIDEO, state)) {
+                ensureTrack && dispatch(showModeratedNotification(AVM_MEDIA_TYPE.VIDEO));
             }
 
             return;

react/features/base/media/constants.ts

@@ -3,7 +3,7 @@
  *
  * @enum {string}
  */
-export const CAMERA_FACING_MODE = {
+export const CAMERA_FACING_MODE: Record<string, string> = {
     ENVIRONMENT: 'environment',
     USER: 'user'
 };

react/features/base/media/functions.ts

@@ -88,6 +88,16 @@ export function getStartWithVideoMuted(stateful: IStateful) {
     return Boolean(getPropertyValue(stateful, 'startWithVideoMuted', START_WITH_AUDIO_VIDEO_MUTED_SOURCES));
 }
 
+/**
+ * Determines whether screen-share is currently muted.
+ *
+ * @param {Function|Object} stateful - The redux store, state, or {@code getState} function.
+ * @returns {boolean}
+ */
+export function isScreenshareMuted(stateful: IStateful) {
+    return Boolean(toState(stateful)['features/base/media'].screenshare.muted);
+}
+
 /**
  * Determines whether video is currently muted.
  *

react/features/base/media/middleware.any.ts

@@ -8,15 +8,17 @@ import {
 } from '../../analytics/AnalyticsEvents';
 import { sendAnalytics } from '../../analytics/functions';
 import { IStore } from '../../app/types';
+import { MEDIA_TYPE as AVM_MEDIA_TYPE } from '../../av-moderation/constants';
+import { isForceMuted } from '../../av-moderation/functions';
 import { APP_STATE_CHANGED } from '../../mobile/background/actionTypes';
 import { showWarningNotification } from '../../notifications/actions';
 import { NOTIFICATION_TIMEOUT_TYPE } from '../../notifications/constants';
-import { isForceMuted } from '../../participants-pane/functions';
 import { isScreenMediaShared } from '../../screen-share/functions';
 import { SET_AUDIO_ONLY } from '../audio-only/actionTypes';
 import { setAudioOnly } from '../audio-only/actions';
 import { SET_ROOM } from '../conference/actionTypes';
 import { isRoomValid } from '../conference/functions';
+import { PARTICIPANT_MUTED_US } from '../participants/actionTypes';
 import { getLocalParticipant } from '../participants/functions';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 import { getPropertyValue } from '../settings/functions.any';
@@ -46,7 +48,8 @@ import {
 import {
     MEDIA_TYPE,
     SCREENSHARE_MUTISM_AUTHORITY,
-    VIDEO_MUTISM_AUTHORITY
+    VIDEO_MUTISM_AUTHORITY,
+    VIDEO_TYPE
 } from './constants';
 import { getStartWithAudioMuted, getStartWithVideoMuted } from './functions';
 import logger from './logger';
@@ -66,6 +69,24 @@ MiddlewareRegistry.register(store => next => action => {
     case APP_STATE_CHANGED:
         return _appStateChanged(store, next, action);
 
+    case PARTICIPANT_MUTED_US: {
+        const { dispatch } = store;
+        const { track } = action;
+
+        // Sync the media muted state with the track muted state.
+        if (track.isAudioTrack()) {
+            dispatch(setAudioMuted(true, /* ensureTrack */ false));
+        } else if (track.isVideoTrack()) {
+            if (track.getVideoType() === VIDEO_TYPE.DESKTOP) {
+                dispatch(setScreenshareMuted(true, SCREENSHARE_MUTISM_AUTHORITY.USER, /* ensureTrack */ false));
+            } else {
+                dispatch(setVideoMuted(true, VIDEO_MUTISM_AUTHORITY.USER, /* ensureTrack */ false));
+            }
+        }
+
+        break;
+    }
+
     case SET_AUDIO_ONLY:
         return _setAudioOnly(store, next, action);
 
@@ -88,7 +109,7 @@ MiddlewareRegistry.register(store => next => action => {
         const state = store.getState();
         const participant = getLocalParticipant(state);
 
-        if (!action.muted && isForceMuted(participant, MEDIA_TYPE.AUDIO, state)) {
+        if (!action.muted && isForceMuted(participant, AVM_MEDIA_TYPE.AUDIO, state)) {
             return;
         }
         break;
@@ -113,7 +134,7 @@ MiddlewareRegistry.register(store => next => action => {
         const state = store.getState();
         const participant = getLocalParticipant(state);
 
-        if (!action.muted && isForceMuted(participant, MEDIA_TYPE.SCREENSHARE, state)) {
+        if (!action.muted && isForceMuted(participant, AVM_MEDIA_TYPE.DESKTOP, state)) {
             return;
         }
         break;
@@ -122,7 +143,7 @@ MiddlewareRegistry.register(store => next => action => {
         const state = store.getState();
         const participant = getLocalParticipant(state);
 
-        if (!action.muted && isForceMuted(participant, MEDIA_TYPE.VIDEO, state)) {
+        if (!action.muted && isForceMuted(participant, AVM_MEDIA_TYPE.VIDEO, state)) {
             return;
         }
         break;

react/features/base/participants/actionTypes.ts

@@ -112,6 +112,17 @@ export const PARTICIPANT_KICKED = 'PARTICIPANT_KICKED';
  */
 export const PARTICIPANT_LEFT = 'PARTICIPANT_LEFT';
 
+/**
+ * Action to handle case when the remote participant mutes the local participant.
+ *
+ * {
+ *     type: PARTICIPANT_MUTED_US,
+ *     participant: Participant,
+ *     track: JitsiLocalTrack
+ * }
+ */
+export const PARTICIPANT_MUTED_US = 'PARTICIPANT_MUTED_US';
+
 /**
  * Action to handle case when the sources attached to a participant are updated.
  *

react/features/base/participants/actions.ts

@@ -17,6 +17,7 @@ import {
     PARTICIPANT_JOINED,
     PARTICIPANT_KICKED,
     PARTICIPANT_LEFT,
+    PARTICIPANT_MUTED_US,
     PARTICIPANT_ROLE_CHANGED,
     PARTICIPANT_SOURCES_UPDATED,
     PARTICIPANT_UPDATED,
@@ -467,19 +468,10 @@ export function participantUpdated(participant: IParticipant = { id: '' }) {
  * @returns {Promise}
  */
 export function participantMutedUs(participant: any, track: any) {
-    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
-        if (!participant) {
-            return;
-        }
-
-        const isAudio = track.isAudioTrack();
-
-        dispatch(showNotification({
-            titleKey: isAudio ? 'notify.mutedRemotelyTitle' : 'notify.videoMutedRemotelyTitle',
-            titleArguments: {
-                participantDisplayName: getParticipantDisplayName(getState, participant.getId())
-            }
-        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+    return {
+        type: PARTICIPANT_MUTED_US,
+        participant,
+        track
     };
 }
 

react/features/base/participants/functions.ts

@@ -2,10 +2,12 @@
 import { getGravatarURL } from '@jitsi/js-utils/avatar';
 
 import { IReduxState, IStore } from '../../app/types';
+import { isVisitorChatParticipant } from '../../chat/functions';
 import { isStageFilmstripAvailable } from '../../filmstrip/functions';
 import { isAddPeopleEnabled, isDialOutEnabled } from '../../invite/functions';
 import { toggleShareDialog } from '../../share-room/actions';
 import { iAmVisitor } from '../../visitors/functions';
+import { IVisitorChatParticipant } from '../../visitors/types';
 import { IStateful } from '../app/types';
 import { GRAVATAR_BASE_URL } from '../avatar/constants';
 import { isCORSAvatarURL } from '../avatar/functions';
@@ -392,7 +394,7 @@ export function getMutedStateByParticipantAndMediaType(
     if (mediaType === MEDIA_TYPE.AUDIO) {
         return Array.from(sources.values())[0].muted;
     }
-    const videoType = mediaType === MEDIA_TYPE.VIDEO ? VIDEO_TYPE.CAMERA : VIDEO_TYPE.SCREENSHARE;
+    const videoType = mediaType === MEDIA_TYPE.VIDEO ? VIDEO_TYPE.CAMERA : VIDEO_TYPE.DESKTOP;
     const source = Array.from(sources.values()).find(src => src.videoType === videoType);
 
     return source?.muted ?? true;
@@ -827,18 +829,28 @@ export const setShareDialogVisiblity = (addPeopleFeatureEnabled: boolean, dispat
 /**
  * Checks if private chat is enabled for the given participant.
  *
- * @param {IParticipant|undefined} participant - The participant to check.
+ * @param {IParticipant|IVisitorChatParticipant|undefined} participant - The participant to check.
  * @param {IReduxState} state - The Redux state.
  * @returns {boolean} - True if private chat is enabled, false otherwise.
  */
-export function isPrivateChatEnabled(participant: IParticipant | undefined, state: IReduxState) {
+export function isPrivateChatEnabled(participant: IParticipant | IVisitorChatParticipant | undefined, state: IReduxState) {
     const { remoteVideoMenu = {} } = state['features/base/config'];
     const { disablePrivateChat } = remoteVideoMenu;
 
-    if (participant?.local || state['features/visitors'].iAmVisitor || disablePrivateChat === 'all') {
+    if ((!isVisitorChatParticipant(participant) && participant?.local) || disablePrivateChat === 'all') {
         return false;
     }
 
+    if (disablePrivateChat === 'disable-visitor-chat') {
+        // Block if the participant we're trying to message is a visitor
+        // OR if the local user is a visitor
+        if (isVisitorChatParticipant(participant) || iAmVisitor(state)) {
+            return false;
+        }
+
+        return true; // should allow private chat for other participants
+    }
+
     if (disablePrivateChat === 'allow-moderator-chat') {
         return isLocalParticipantModerator(state) || isParticipantModerator(participant);
     }

react/features/base/participants/middleware.ts

@@ -3,7 +3,19 @@ import { batch } from 'react-redux';
 import { AnyAction } from 'redux';
 
 import { IStore } from '../../app/types';
-import { approveParticipant, approveParticipantAudio, approveParticipantVideo } from '../../av-moderation/actions';
+import {
+    approveParticipant,
+    approveParticipantAudio,
+    approveParticipantDesktop,
+    approveParticipantVideo
+} from '../../av-moderation/actions';
+import {
+    AUDIO_RAISED_HAND_NOTIFICATION_ID,
+    DESKTOP_RAISED_HAND_NOTIFICATION_ID,
+    MEDIA_TYPE,
+    VIDEO_RAISED_HAND_NOTIFICATION_ID
+} from '../../av-moderation/constants';
+import { isForceMuted } from '../../av-moderation/functions';
 import { UPDATE_BREAKOUT_ROOMS } from '../../breakout-rooms/actionTypes';
 import { getBreakoutRooms } from '../../breakout-rooms/functions';
 import { toggleE2EE } from '../../e2ee/actions';
@@ -15,7 +27,6 @@ import {
     RAISE_HAND_NOTIFICATION_ID
 } from '../../notifications/constants';
 import { open as openParticipantsPane } from '../../participants-pane/actions';
-import { isForceMuted } from '../../participants-pane/functions';
 import { CALLING, INVITED } from '../../presence-status/constants';
 import { RAISE_HAND_SOUND_ID } from '../../reactions/constants';
 import { RECORDING_OFF_SOUND_ID, RECORDING_ON_SOUND_ID } from '../../recording/constants';
@@ -26,7 +37,7 @@ import { IJitsiConference } from '../conference/reducer';
 import { SET_CONFIG } from '../config/actionTypes';
 import { getDisableRemoveRaisedHandOnFocus } from '../config/functions.any';
 import { JitsiConferenceEvents } from '../lib-jitsi-meet';
-import { MEDIA_TYPE } from '../media/constants';
+import { VIDEO_TYPE } from '../media/constants';
 import MiddlewareRegistry from '../redux/MiddlewareRegistry';
 import StateListenerRegistry from '../redux/StateListenerRegistry';
 import { playSound, registerSound, unregisterSound } from '../sounds/actions';
@@ -43,6 +54,7 @@ import {
     OVERWRITE_PARTICIPANT_NAME,
     PARTICIPANT_JOINED,
     PARTICIPANT_LEFT,
+    PARTICIPANT_MUTED_US,
     PARTICIPANT_UPDATED,
     RAISE_HAND_UPDATED,
     SET_LOCAL_PARTICIPANT_RECORDING_STATUS
@@ -292,6 +304,31 @@ MiddlewareRegistry.register(store => next => action => {
         break;
     }
 
+    case PARTICIPANT_MUTED_US: {
+        const { dispatch, getState } = store;
+        const { participant, track } = action;
+        let titleKey;
+
+        if (track.isAudioTrack()) {
+            titleKey = 'notify.mutedRemotelyTitle';
+        } else if (track.isVideoTrack()) {
+            if (track.getVideoType() === VIDEO_TYPE.DESKTOP) {
+                titleKey = 'notify.desktopMutedRemotelyTitle';
+            } else {
+                titleKey = 'notify.videoMutedRemotelyTitle';
+            }
+        }
+
+        dispatch(showNotification({
+            titleKey,
+            titleArguments: {
+                participantDisplayName: getParticipantDisplayName(getState, participant.getId())
+            }
+        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+
+        break;
+    }
+
     case PARTICIPANT_UPDATED:
         return _participantJoinedOrUpdated(store, next, action);
 
@@ -786,77 +823,124 @@ function _raiseHandUpdated({ dispatch, getState }: IStore, conference: IJitsiCon
         APP.API.notifyRaiseHandUpdated(participantId, raisedHandTimestamp);
     }
 
+    if (!raisedHandTimestamp) {
+        return;
+    }
+
+    // Display notifications about raised hands.
+
     const isModerator = isLocalParticipantModerator(state);
     const participant = getParticipantById(state, participantId);
+    const participantName = getParticipantDisplayName(state, participantId);
+
     let shouldDisplayAllowAudio = false;
     let shouldDisplayAllowVideo = false;
+    let shouldDisplayAllowDesktop = false;
 
     if (isModerator) {
         shouldDisplayAllowAudio = isForceMuted(participant, MEDIA_TYPE.AUDIO, state);
         shouldDisplayAllowVideo = isForceMuted(participant, MEDIA_TYPE.VIDEO, state);
+        shouldDisplayAllowDesktop = isForceMuted(participant, MEDIA_TYPE.DESKTOP, state);
     }
 
-    let action;
-
-    if (shouldDisplayAllowAudio || shouldDisplayAllowVideo) {
-        action = {
-            customActionNameKey: [] as string[],
-            customActionHandler: [] as Function[]
+    if (shouldDisplayAllowAudio || shouldDisplayAllowVideo || shouldDisplayAllowDesktop) {
+        const action: {
+            customActionHandler: Array<() => void>;
+            customActionNameKey: string[];
+        } = {
+            customActionHandler: [],
+            customActionNameKey: [],
         };
 
+        // Always add a "allow all" at the end of the list.
+        action.customActionNameKey.push('notify.allowAll');
+        action.customActionHandler.push(() => {
+            dispatch(approveParticipant(participantId));
+            dispatch(hideNotification(AUDIO_RAISED_HAND_NOTIFICATION_ID));
+            dispatch(hideNotification(DESKTOP_RAISED_HAND_NOTIFICATION_ID));
+            dispatch(hideNotification(VIDEO_RAISED_HAND_NOTIFICATION_ID));
+        });
+
         if (shouldDisplayAllowAudio) {
-            action.customActionNameKey.push('notify.allowAudio');
-            action.customActionHandler.push(() => {
+            const customActionNameKey = action.customActionNameKey.slice();
+            const customActionHandler = action.customActionHandler.slice();
+
+            customActionNameKey.unshift('notify.allowAudio');
+            customActionHandler.unshift(() => {
                 dispatch(approveParticipantAudio(participantId));
-                dispatch(hideNotification(RAISE_HAND_NOTIFICATION_ID));
+                dispatch(hideNotification(AUDIO_RAISED_HAND_NOTIFICATION_ID));
             });
+
+            dispatch(showNotification({
+                title: participantName,
+                descriptionKey: 'notify.raisedHand',
+                uid: AUDIO_RAISED_HAND_NOTIFICATION_ID,
+                customActionNameKey,
+                customActionHandler,
+            }, NOTIFICATION_TIMEOUT_TYPE.EXTRA_LONG));
         }
         if (shouldDisplayAllowVideo) {
-            action.customActionNameKey.push('notify.allowVideo');
-            action.customActionHandler.push(() => {
+            const customActionNameKey = action.customActionNameKey.slice();
+            const customActionHandler = action.customActionHandler.slice();
+
+            customActionNameKey.unshift('notify.allowVideo');
+            customActionHandler.unshift(() => {
                 dispatch(approveParticipantVideo(participantId));
-                dispatch(hideNotification(RAISE_HAND_NOTIFICATION_ID));
+                dispatch(hideNotification(VIDEO_RAISED_HAND_NOTIFICATION_ID));
             });
+
+            dispatch(showNotification({
+                title: participantName,
+                descriptionKey: 'notify.raisedHand',
+                uid: VIDEO_RAISED_HAND_NOTIFICATION_ID,
+                customActionNameKey,
+                customActionHandler,
+            }, NOTIFICATION_TIMEOUT_TYPE.EXTRA_LONG));
         }
-        if (shouldDisplayAllowAudio && shouldDisplayAllowVideo) {
-            action.customActionNameKey.push('notify.allowBoth');
-            action.customActionHandler.push(() => {
-                dispatch(approveParticipant(participantId));
-                dispatch(hideNotification(RAISE_HAND_NOTIFICATION_ID));
+        if (shouldDisplayAllowDesktop) {
+            const customActionNameKey = action.customActionNameKey.slice();
+            const customActionHandler = action.customActionHandler.slice();
+
+            customActionNameKey.unshift('notify.allowDesktop');
+            customActionHandler.unshift(() => {
+                dispatch(approveParticipantDesktop(participantId));
+                dispatch(hideNotification(DESKTOP_RAISED_HAND_NOTIFICATION_ID));
             });
+
+            dispatch(showNotification({
+                title: participantName,
+                descriptionKey: 'notify.raisedHand',
+                uid: DESKTOP_RAISED_HAND_NOTIFICATION_ID,
+                customActionNameKey,
+                customActionHandler
+            }, NOTIFICATION_TIMEOUT_TYPE.EXTRA_LONG));
         }
     } else {
-        action = {
-            customActionNameKey: [ 'notify.viewParticipants' ],
-            customActionHandler: [ () => dispatch(openParticipantsPane()) ]
-        };
-    }
-
-    if (raisedHandTimestamp) {
         let notificationTitle;
-        const participantName = getParticipantDisplayName(state, participantId);
         const { raisedHandsQueue } = state['features/base/participants'];
 
         if (raisedHandsQueue.length > 1) {
-            const raisedHands = raisedHandsQueue.length - 1;
-
             notificationTitle = i18n.t('notify.raisedHands', {
                 participantName,
-                raisedHands
+                raisedHands: raisedHandsQueue.length - 1
             });
         } else {
             notificationTitle = participantName;
         }
+
         dispatch(showNotification({
             titleKey: 'notify.somebody',
             title: notificationTitle,
             descriptionKey: 'notify.raisedHand',
             concatText: true,
             uid: RAISE_HAND_NOTIFICATION_ID,
-            ...action
-        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
-        dispatch(playSound(RAISE_HAND_SOUND_ID));
+            customActionNameKey: [ 'notify.viewParticipants' ],
+            customActionHandler: [ () => dispatch(openParticipantsPane()) ]
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
     }
+
+    dispatch(playSound(RAISE_HAND_SOUND_ID));
+
 }
 
 /**

react/features/base/premeeting/components/web/ActionButton.tsx

@@ -3,7 +3,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
 import { IconArrowDown } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface IProps {
 
@@ -82,7 +81,7 @@ interface IProps {
 const useStyles = makeStyles()(theme => {
     return {
         actionButton: {
-            ...withPixelLineHeight(theme.typography.bodyLongBold),
+            ...theme.typography.bodyLongBold,
             borderRadius: theme.shape.borderRadius,
             boxSizing: 'border-box',
             color: theme.palette.text01,
@@ -115,7 +114,7 @@ const useStyles = makeStyles()(theme => {
 
             '&.text': {
                 width: 'auto',
-                fontSize: '13px',
+                fontSize: '0.875rem',
                 margin: '0',
                 padding: '0'
             },
@@ -135,7 +134,7 @@ const useStyles = makeStyles()(theme => {
 
 
             [theme.breakpoints.down(400)]: {
-                fontSize: 16,
+                fontSize: '1rem',
                 marginBottom: 8,
                 padding: '11px 16px'
             }

react/features/base/premeeting/components/web/ConnectionStatus.tsx

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
 import { IconArrowDown, IconCloseCircle, IconWifi1Bar, IconWifi2Bars, IconWifi3Bars } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { PREJOIN_DEFAULT_CONTENT_WIDTH } from '../../../ui/components/variables';
 import Spinner from '../../../ui/components/web/Spinner';
 import { runPreCallTest } from '../../actions.web';
@@ -16,7 +15,7 @@ const useStyles = makeStyles()(theme => {
     return {
         connectionStatus: {
             color: '#fff',
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             position: 'absolute',
             width: '100%',
 

react/features/base/premeeting/components/web/PreMeetingScreen.tsx

@@ -10,7 +10,6 @@ import Toolbox from '../../../../toolbox/components/web/Toolbox';
 import { isButtonEnabled } from '../../../../toolbox/functions.web';
 import { getConferenceName } from '../../../conference/functions';
 import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import Tooltip from '../../../tooltip/components/Tooltip';
 import { isPreCallTestEnabled } from '../../functions';
 
@@ -152,7 +151,7 @@ const useStyles = makeStyles()(theme => {
             width: '100%'
         },
         title: {
-            ...withPixelLineHeight(theme.typography.heading4),
+            ...theme.typography.heading4,
             color: `${theme.palette.text01}!important`,
             marginBottom: theme.spacing(3),
             textAlign: 'center',
@@ -168,7 +167,7 @@ const useStyles = makeStyles()(theme => {
         },
 
         roomName: {
-            ...withPixelLineHeight(theme.typography.heading5),
+            ...theme.typography.heading5,
             color: theme.palette.text01,
             display: 'inline-block',
             overflow: 'hidden',

react/features/base/premeeting/components/web/RecordingWarning.tsx

@@ -2,8 +2,6 @@ import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
-import { withPixelLineHeight } from '../../../styles/functions.web';
-
 const useStyles = makeStyles()(theme => {
     return {
         warning: {
@@ -11,7 +9,7 @@ const useStyles = makeStyles()(theme => {
             color: theme.palette.text03,
             display: 'flex',
             justifyContent: 'center',
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             marginBottom: theme.spacing(3),
             marginTop: theme.spacing(2),
             paddingLeft: theme.spacing(3),

react/features/base/premeeting/components/web/UnsafeRoomWarning.tsx

@@ -4,7 +4,6 @@ import { useDispatch, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../../app/types';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import Checkbox from '../../../ui/components/web/Checkbox';
 import getUnsafeRoomText from '../../../util/getUnsafeRoomText.web';
 import { setUnsafeRoomConsent } from '../../actions.web';
@@ -14,7 +13,7 @@ const useStyles = makeStyles()(theme => {
         warning: {
             backgroundColor: theme.palette.warning01,
             color: theme.palette.text04,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             padding: theme.spacing(3),
             borderRadius: theme.shape.borderRadius,
             marginBottom: theme.spacing(3)

react/features/base/react/components/web/BaseIndicator.tsx

@@ -6,6 +6,7 @@ import { translate } from '../../../i18n/functions';
 import Icon from '../../../icons/components/Icon';
 import Tooltip from '../../../tooltip/components/Tooltip';
 import { TOOLTIP_POSITION } from '../../../ui/constants.any';
+import { pixelsToRem } from '../../../ui/functions.any';
 
 /**
  * The type of the React {@code Component} props of {@link BaseIndicator}.
@@ -40,7 +41,7 @@ interface IProps extends WithTranslation {
     /**
      * The font size for the icon.
      */
-    iconSize: string | number;
+    iconSize: number;
 
     /**
      * The ID attribute to set on the root element of the component.
@@ -88,10 +89,10 @@ const BaseIndicator = ({
     tooltipPosition = 'top'
 }: IProps) => {
     const { classes: styles } = useStyles();
-    const style: { fontSize?: string | number; } = {};
+    const style: { fontSize?: string; } = {};
 
     if (iconSize) {
-        style.fontSize = iconSize;
+        style.fontSize = pixelsToRem(iconSize);
     }
 
     return (

react/features/base/react/components/web/InlineDialogFailure.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import Button from '../../../ui/components/web/Button';
 import { getSupportUrl } from '../../functions';
 
@@ -15,7 +14,7 @@ const useStyles = makeStyles()(theme => {
             borderRadius: `${Number(theme.shape.borderRadius)}px`,
             boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)',
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             padding: `${theme.spacing(3)} 10`,
             '& .retry-button': {
                 margin: '16px auto 0 auto'

react/features/base/styles/functions.web.ts

@@ -22,17 +22,3 @@ export function getFixedPlatformStyle(style?: StyleType | StyleType[]) {
 
     return style;
 }
-
-/**
- * Sets the line height of a CSS Object group in pixels.
- * By default lineHeight is unitless in CSS, but not in RN.
- *
- * @param {Object} base - The base object containing the `lineHeight` property.
- * @returns {Object}
- */
-export function withPixelLineHeight(base: any) {
-    return {
-        ...base,
-        lineHeight: `${base.lineHeight}px`
-    };
-}

react/features/base/tooltip/components/Tooltip.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
 import { IReduxState } from '../../../app/types';
 import { isMobileBrowser } from '../../environment/utils';
 import Popover from '../../popover/components/Popover.web';
-import { withPixelLineHeight } from '../../styles/functions.web';
 import { TOOLTIP_POSITION } from '../../ui/constants.any';
 import { hideTooltip, showTooltip } from '../actions';
 
@@ -26,7 +25,7 @@ const useStyles = makeStyles()(theme => {
             backgroundColor: theme.palette.uiBackground,
             borderRadius: '3px',
             padding: theme.spacing(2),
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             color: theme.palette.text01,
             position: 'relative',
 

react/features/base/tracks/actions.web.ts

@@ -2,6 +2,7 @@
 import { AUDIO_ONLY_SCREEN_SHARE_NO_TRACK } from '../../../../modules/UI/UIErrors';
 import { IReduxState, IStore } from '../../app/types';
 import { showModeratedNotification } from '../../av-moderation/actions';
+import { MEDIA_TYPE as AVM_MEDIA_TYPE } from '../../av-moderation/constants';
 import { shouldShowModeratedNotification } from '../../av-moderation/functions';
 import { setNoiseSuppressionEnabled } from '../../noise-suppression/actions';
 import { showErrorNotification, showNotification } from '../../notifications/actions';
@@ -55,10 +56,10 @@ export function toggleScreensharing(
         shareOptions: IShareOptions = {}) {
     return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
         // check for A/V Moderation when trying to start screen sharing
-        if ((enabled || enabled === undefined) && shouldShowModeratedNotification(MEDIA_TYPE.VIDEO, getState())) {
-            dispatch(showModeratedNotification(MEDIA_TYPE.SCREENSHARE));
+        if ((enabled || enabled === undefined) && shouldShowModeratedNotification(AVM_MEDIA_TYPE.DESKTOP, getState())) {
+            dispatch(showModeratedNotification(AVM_MEDIA_TYPE.DESKTOP));
 
-            return Promise.reject();
+            return Promise.resolve();
         }
 
         return _toggleScreenSharing({

react/features/base/tracks/functions.any.ts

@@ -1,10 +1,12 @@
 import { IReduxState, IStore } from '../../app/types';
+import { getSsrcRewritingFeatureFlag } from '../config/functions.any';
 import { JitsiTrackErrors, browser } from '../lib-jitsi-meet';
 import { gumPending } from '../media/actions';
 import { CAMERA_FACING_MODE, MEDIA_TYPE, MediaType, VIDEO_TYPE } from '../media/constants';
 import { IMediaState } from '../media/reducer';
 import { IGUMPendingState } from '../media/types';
 import {
+    getMutedStateByParticipantAndMediaType,
     getVirtualScreenshareParticipantOwnerId,
     isScreenShareParticipant
 } from '../participants/functions';
@@ -35,6 +37,10 @@ export function isParticipantMediaMuted(participant: IParticipant | undefined,
         return false;
     }
 
+    if (getSsrcRewritingFeatureFlag(state)) {
+        return getMutedStateByParticipantAndMediaType(state, participant, mediaType);
+    }
+
     const tracks = getTrackState(state);
 
     if (participant?.local) {
@@ -53,10 +59,21 @@ export function isParticipantMediaMuted(participant: IParticipant | undefined,
  * @param {IReduxState} state - Global state.
  * @returns {boolean} - Is audio muted for the participant.
  */
-export function isParticipantAudioMuted(participant: IParticipant, state: IReduxState) {
+export function isParticipantAudioMuted(participant: IParticipant | undefined, state: IReduxState) {
     return isParticipantMediaMuted(participant, MEDIA_TYPE.AUDIO, state);
 }
 
+/**
+ * Checks if the participant is screen-share muted.
+ *
+ * @param {IParticipant} participant - Participant reference.
+ * @param {IReduxState} state - Global state.
+ * @returns {boolean} - Is screen-share muted for the participant.
+ */
+export function isParticipantScreenShareMuted(participant: IParticipant | undefined, state: IReduxState) {
+    return isParticipantMediaMuted(participant, MEDIA_TYPE.SCREENSHARE, state);
+}
+
 /**
  * Checks if the participant is video muted.
  *
@@ -118,6 +135,10 @@ export function getLocalJitsiDesktopTrack(state: IReduxState) {
  * @returns {(Track|undefined)}
  */
 export function getLocalTrack(tracks: ITrack[], mediaType: MediaType, includePending = false) {
+    if (mediaType === MEDIA_TYPE.SCREENSHARE) {
+        return getLocalDesktopTrack(tracks, includePending);
+    }
+
     return (
         getLocalTracks(tracks, includePending)
             .find(t => t.mediaType === mediaType));
@@ -216,6 +237,14 @@ export function getTrackByMediaTypeAndParticipant(
         tracks: ITrack[],
         mediaType: MediaType,
         participantId?: string) {
+    if (!participantId) {
+        return;
+    }
+
+    if (mediaType === MEDIA_TYPE.SCREENSHARE) {
+        return getScreenShareTrack(tracks, participantId);
+    }
+
     return tracks.find(
         t => Boolean(t.jitsiTrack) && t.participantId === participantId && t.mediaType === mediaType
     );

react/features/base/tracks/middleware.any.ts

@@ -188,10 +188,6 @@ function _setMuted(store: IStore, { ensureTrack, muted }: {
     const localTrack = _getLocalTrack(store, mediaType, /* includePending */ true);
     const state = getState();
 
-    if (mediaType === MEDIA_TYPE.SCREENSHARE && !muted) {
-        return;
-    }
-
     if (localTrack) {
         // The `jitsiTrack` property will have a value only for a localTrack for which `getUserMedia` has already
         // completed. If there's no `jitsiTrack`, then the `muted` state will be applied once the `jitsiTrack` is
@@ -203,8 +199,11 @@ function _setMuted(store: IStore, { ensureTrack, muted }: {
                 .catch(() => dispatch(trackMuteUnmuteFailed(localTrack, muted)));
         }
     } else if (!muted && ensureTrack) {
+        // TODO(saghul): reconcile these 2 types.
+        const createMediaType = mediaType === MEDIA_TYPE.SCREENSHARE ? 'desktop' : mediaType;
+
         typeof APP !== 'undefined' && dispatch(gumPending([ mediaType ], IGUMPendingState.PENDING_UNMUTE));
-        dispatch(createLocalTracksA({ devices: [ mediaType ] })).then(() => {
+        dispatch(createLocalTracksA({ devices: [ createMediaType ] })).then(() => {
             typeof APP !== 'undefined' && dispatch(gumPending([ mediaType ], IGUMPendingState.NONE));
         });
     }

react/features/base/ui/Tokens.ts

@@ -118,8 +118,8 @@ export const colorMap = {
 
 
 export const font = {
-    weightRegular: '400',
-    weightSemiBold: '600'
+    weightRegular: 400,
+    weightSemiBold: 600
 };
 
 export const shape = {
@@ -136,64 +136,64 @@ export const typography = {
     labelBold: 'labelBold01',
 
     bodyShortRegularSmall: {
-        fontSize: 10,
-        lineHeight: 16,
+        fontSize: '0.625rem',
+        lineHeight: '1rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortRegular: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBold: {
-        fontSize: 14,
-        lineHeight: 20,
+        fontSize: '0.875rem',
+        lineHeight: '1.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyShortRegularLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyShortBoldLarge: {
-        fontSize: 16,
-        lineHeight: 22,
+        fontSize: '1rem',
+        lineHeight: '1.375rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongRegular: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongRegularLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightRegular,
         letterSpacing: 0
     },
 
     bodyLongBold: {
-        fontSize: 14,
-        lineHeight: 24,
+        fontSize: '0.875rem',
+        lineHeight: '1.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     bodyLongBoldLarge: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
@@ -203,29 +203,29 @@ export const typography = {
     heading2: 'heading02',
 
     heading3: {
-        fontSize: 32,
-        lineHeight: 40,
+        fontSize: '2rem',
+        lineHeight: '2.5rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading4: {
-        fontSize: 28,
-        lineHeight: 36,
+        fontSize: '1.75rem',
+        lineHeight: '2.25rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading5: {
-        fontSize: 20,
-        lineHeight: 28,
+        fontSize: '1.25rem',
+        lineHeight: '1.75rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     },
 
     heading6: {
-        fontSize: 16,
-        lineHeight: 26,
+        fontSize: '1rem',
+        lineHeight: '1.625rem',
         fontWeight: font.weightSemiBold,
         letterSpacing: 0
     }

react/features/base/ui/components/web/BaseDialog.tsx

@@ -4,7 +4,6 @@ import { useTranslation } from 'react-i18next';
 import { keyframes } from 'tss-react';
 import { makeStyles } from 'tss-react/mui';
 
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { isElementInTheViewport } from '../../functions.web';
 
 import { DialogTransitionContext } from './DialogTransition';
@@ -16,7 +15,7 @@ const useStyles = makeStyles()(theme => {
             height: '100%',
             position: 'fixed',
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyLongRegular),
+            ...theme.typography.bodyLongRegular,
             top: 0,
             left: 0,
             display: 'flex',

react/features/base/ui/components/web/Button.tsx

@@ -3,7 +3,6 @@ import { useTranslation } from 'react-i18next';
 import { makeStyles } from 'tss-react/mui';
 
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { BUTTON_TYPES } from '../../constants.web';
 import { IButtonProps } from '../types';
 
@@ -57,7 +56,7 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             justifyContent: 'center',
             border: 0,
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             transition: 'background .2s',
             cursor: 'pointer',
 
@@ -151,7 +150,7 @@ const useStyles = makeStyles()(theme => {
 
         small: {
             padding: '8px 16px',
-            ...withPixelLineHeight(theme.typography.labelBold),
+            ...theme.typography.labelBold,
 
             '&.iconButton': {
                 padding: theme.spacing(1)
@@ -162,7 +161,7 @@ const useStyles = makeStyles()(theme => {
 
         large: {
             padding: '13px 16px',
-            ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
+            ...theme.typography.bodyShortBoldLarge,
 
             '&.iconButton': {
                 padding: '12px'

react/features/base/ui/components/web/Checkbox.tsx

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCheck } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface ICheckboxProps {
 
@@ -42,13 +41,13 @@ interface ICheckboxProps {
 const useStyles = makeStyles()(theme => {
     return {
         formControl: {
-            ...withPixelLineHeight(theme.typography.bodyLongRegular),
+            ...theme.typography.bodyLongRegular,
             color: theme.palette.text01,
             display: 'inline-flex',
             alignItems: 'center',
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyLongRegularLarge)
+                ...theme.typography.bodyLongRegularLarge
 
             }
         },

react/features/base/ui/components/web/ContextMenu.tsx

@@ -8,7 +8,6 @@ import Drawer from '../../../../toolbox/components/web/Drawer';
 import JitsiPortal from '../../../../toolbox/components/web/JitsiPortal';
 import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { spacing } from '../../Tokens';
 
 
@@ -139,7 +138,7 @@ const useStyles = makeStyles()(theme => {
             borderRadius: `${Number(theme.shape.borderRadius)}px`,
             boxShadow: '0px 1px 2px rgba(41, 41, 41, 0.25)',
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             marginTop: '48px',
             position: 'absolute',
             right: `${participantsPaneTheme.panePadding}px`,
@@ -159,7 +158,7 @@ const useStyles = makeStyles()(theme => {
             paddingTop: '16px',
 
             '& > div': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
+                ...theme.typography.bodyShortRegularLarge,
 
                 '& svg': {
                     fill: theme.palette.icon01

react/features/base/ui/components/web/ContextMenuItem.tsx

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { showOverflowDrawer } from '../../../../toolbox/functions.web';
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { TEXT_OVERFLOW_TYPES } from '../../constants.any';
 
 import TextWithOverflow from './TextWithOverflow';
@@ -14,7 +13,7 @@ export interface IProps {
     /**
      * Label used for accessibility.
      */
-    accessibilityLabel: string;
+    accessibilityLabel?: string;
 
     /**
      * The context menu item background color.
@@ -174,12 +173,12 @@ const useStyles = makeStyles()(theme => {
         },
 
         text: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text01
         },
 
         drawerText: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
+            ...theme.typography.bodyShortRegularLarge
         }
     };
 });
@@ -232,7 +231,7 @@ const ContextMenuItem = ({
         <div
             aria-controls = { controls }
             aria-disabled = { disabled }
-            aria-label = { accessibilityLabel }
+            aria-label = { accessibilityLabel || undefined }
             aria-selected = { role === 'tab' ? selected : undefined }
             className = { cx(styles.contextMenuItem,
                     _overflowDrawer && styles.contextMenuItemDrawer,

react/features/base/ui/components/web/Dialog.tsx

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { hideDialog } from '../../../dialog/actions';
 import { IconCloseLarge } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { operatesWithEnterKey } from '../../functions.web';
 
 import BaseDialog, { IProps as IBaseDialogProps } from './BaseDialog';
@@ -26,7 +25,7 @@ const useStyles = makeStyles()(theme => {
 
         title: {
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.heading5),
+            ...theme.typography.heading5,
             margin: 0,
             padding: 0
         },

react/features/base/ui/components/web/DialogWithTabs.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
 import { IReduxState } from '../../../../app/types';
 import { hideDialog } from '../../../dialog/actions';
 import { IconArrowBack, IconCloseLarge } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 import BaseDialog, { IProps as IBaseProps } from './BaseDialog';
 import Button from './Button';
@@ -70,7 +69,7 @@ const useStyles = makeStyles()(theme => {
         },
 
         title: {
-            ...withPixelLineHeight(theme.typography.heading5),
+            ...theme.typography.heading5,
             color: `${theme.palette.text01} !important`,
             margin: 0,
             padding: 0

react/features/base/ui/components/web/Input.tsx

@@ -5,7 +5,6 @@ import { makeStyles } from 'tss-react/mui';
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconCloseCircle } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { IInputProps } from '../types';
 
 import { HiddenDescription } from './HiddenDescription';
@@ -51,11 +50,11 @@ const useStyles = makeStyles()(theme => {
 
         label: {
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             marginBottom: theme.spacing(2),
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
+                ...theme.typography.bodyShortRegularLarge
             }
         },
 
@@ -68,7 +67,7 @@ const useStyles = makeStyles()(theme => {
             backgroundColor: theme.palette.ui03,
             background: theme.palette.ui03,
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             padding: '10px 16px',
             borderRadius: theme.shape.borderRadius,
             border: 0,
@@ -92,7 +91,7 @@ const useStyles = makeStyles()(theme => {
             '&.is-mobile': {
                 height: '48px',
                 padding: '13px 16px',
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
+                ...theme.typography.bodyShortRegularLarge
             },
 
             '&.icon-input': {
@@ -139,11 +138,11 @@ const useStyles = makeStyles()(theme => {
 
         bottomLabel: {
             marginTop: theme.spacing(2),
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             color: theme.palette.text02,
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegular)
+                ...theme.typography.bodyShortRegular
             },
 
             '&.error': {

react/features/base/ui/components/web/ListItem.tsx

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
 import { ACTION_TRIGGER } from '../../../../participants-pane/constants';
 import participantsPaneTheme from '../../../components/themes/participantsPaneTheme.json';
 import { isMobileBrowser } from '../../../environment/utils';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface IProps {
 
@@ -86,7 +85,7 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             color: theme.palette.text01,
             display: 'flex',
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             margin: `0 -${participantsPaneTheme.panePadding}px`,
             padding: `${theme.spacing(2)} ${participantsPaneTheme.panePadding}px`,
             position: 'relative',
@@ -110,7 +109,7 @@ const useStyles = makeStyles()(theme => {
             },
 
             [`@media(max-width: ${participantsPaneTheme.MD_BREAKPOINT})`]: {
-                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge),
+                ...theme.typography.bodyShortBoldLarge,
                 padding: `${theme.spacing(3)} ${participantsPaneTheme.panePadding}px`
             }
         },

react/features/base/ui/components/web/MultiSelect.tsx

@@ -2,7 +2,6 @@ import React, { useCallback, useMemo, useRef } from 'react';
 import { makeStyles } from 'tss-react/mui';
 
 import { IconCloseLarge } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 import { MultiSelectItem } from '../types';
 
 import ClickableIcon from './ClickableIcon';
@@ -42,7 +41,7 @@ const useStyles = makeStyles()(theme => {
             backgroundColor: theme.palette.ui01,
             border: `1px solid ${theme.palette.ui04}`,
             borderRadius: `${Number(theme.shape.borderRadius)}px`,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             zIndex: 2,
             maxHeight: `${MULTI_SELECT_HEIGHT}px`,
             overflowY: 'auto',

react/features/base/ui/components/web/Select.tsx

@@ -4,7 +4,6 @@ import { makeStyles } from 'tss-react/mui';
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
 import { IconArrowDown } from '../../../icons/svg';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface ISelectProps {
 
@@ -18,6 +17,11 @@ interface ISelectProps {
      */
     className?: string;
 
+    /**
+     * Class name for additional styles for container.
+     */
+    containerClassName?: string;
+
     /**
      * Whether or not the select is disabled.
      */
@@ -67,11 +71,11 @@ const useStyles = makeStyles()(theme => {
 
         label: {
             color: theme.palette.text01,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             marginBottom: theme.spacing(2),
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge)
+                ...theme.typography.bodyShortRegularLarge
             }
         },
 
@@ -83,7 +87,7 @@ const useStyles = makeStyles()(theme => {
             backgroundColor: theme.palette.ui03,
             borderRadius: `${theme.shape.borderRadius}px`,
             width: '100%',
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text01,
             padding: '10px 16px',
             paddingRight: '42px',
@@ -103,7 +107,7 @@ const useStyles = makeStyles()(theme => {
             },
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegularLarge),
+                ...theme.typography.bodyShortRegularLarge,
                 padding: '12px 16px',
                 paddingRight: '46px'
             },
@@ -127,11 +131,11 @@ const useStyles = makeStyles()(theme => {
 
         bottomLabel: {
             marginTop: theme.spacing(2),
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             color: theme.palette.text02,
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortRegular)
+                ...theme.typography.bodyShortRegular
             },
 
             '&.error': {
@@ -143,6 +147,7 @@ const useStyles = makeStyles()(theme => {
 
 const Select = ({
     bottomLabel,
+    containerClassName,
     className,
     disabled,
     error,
@@ -155,7 +160,7 @@ const Select = ({
     const isMobile = isMobileBrowser();
 
     return (
-        <div className = { classes.container }>
+        <div className = { cx(classes.container, containerClassName) }>
             {label && <label
                 className = { cx(classes.label, isMobile && 'is-mobile') }
                 htmlFor = { id } >

react/features/base/ui/components/web/Tabs.tsx

@@ -3,7 +3,6 @@ import { makeStyles } from 'tss-react/mui';
 
 import { isMobileBrowser } from '../../../environment/utils';
 import Icon from '../../../icons/components/Icon';
-import { withPixelLineHeight } from '../../../styles/functions.web';
 
 interface ITabProps {
     accessibilityLabel: string;
@@ -18,6 +17,7 @@ interface ITabProps {
         icon?: Function;
         id: string;
         label?: string;
+        title?: string;
     }>;
 }
 
@@ -28,7 +28,7 @@ const useStyles = makeStyles()(theme => {
         },
 
         tab: {
-            ...withPixelLineHeight(theme.typography.bodyShortBold),
+            ...theme.typography.bodyShortBold,
             color: theme.palette.text02,
             flex: 1,
             padding: '14px',
@@ -65,12 +65,12 @@ const useStyles = makeStyles()(theme => {
             },
 
             '&.is-mobile': {
-                ...withPixelLineHeight(theme.typography.bodyShortBoldLarge)
+                ...theme.typography.bodyShortBoldLarge
             }
         },
 
         badge: {
-            ...withPixelLineHeight(theme.typography.labelBold),
+            ...theme.typography.labelBold,
             color: theme.palette.text04,
             padding: `0 ${theme.spacing(1)}`,
             borderRadius: '100%',
@@ -127,26 +127,34 @@ const Tabs = ({
             aria-label = { accessibilityLabel }
             className = { cx(classes.container, className) }
             role = 'tablist'>
-            {tabs.map((tab, index) => (
-                <button
-                    aria-controls = { tab.controlsId }
-                    aria-label = { tab.accessibilityLabel }
-                    aria-selected = { selected === tab.id }
-                    className = { cx(classes.tab, selected === tab.id && 'selected', isMobile && 'is-mobile') }
-                    disabled = { tab.disabled }
-                    id = { tab.id }
-                    key = { tab.id }
-                    onClick = { onClick(tab.id) }
-                    onKeyDown = { onKeyDown(index) }
-                    role = 'tab'
-                    tabIndex = { selected === tab.id ? undefined : -1 }>
-                    {tab.icon && <Icon
-                        className = { classes.icon }
-                        src = { tab.icon } />}
-                    {tab.label}
-                    {tab.countBadge && <span className = { classes.badge }>{tab.countBadge}</span>}
-                </button>
-            ))}
+            {
+                tabs.map((tab, index) => (
+                    <button
+                        aria-controls = { tab.controlsId }
+                        aria-label = { tab.accessibilityLabel }
+                        aria-selected = { selected === tab.id }
+                        className = { cx(classes.tab, selected === tab.id && 'selected', isMobile && 'is-mobile') }
+                        disabled = { tab.disabled }
+                        id = { tab.id }
+                        key = { tab.id }
+                        onClick = { onClick(tab.id) }
+                        onKeyDown = { onKeyDown(index) }
+                        role = 'tab'
+                        tabIndex = { selected === tab.id ? undefined : -1 }
+                        title = { tab.title }>
+                        {
+                            tab.icon && <Icon
+                                className = { classes.icon }
+                                src = { tab.icon } />
+                        }
+                        { tab.label }
+                        {
+                            tab.countBadge && <span className = { classes.badge }>
+                                { tab.countBadge }
+                            </span>
+                        }
+                    </button>
+                ))}
         </div>
     );
 };

react/features/base/ui/constants.web.ts

@@ -32,7 +32,7 @@ export const commonStyles = (theme: Theme) => {
                 marginTop: theme.spacing(3),
 
                 '& label': {
-                    fontSize: '14px'
+                    fontSize: '0.875rem'
                 }
             }
         },
@@ -42,10 +42,10 @@ export const commonStyles = (theme: Theme) => {
             color: theme.palette.text01,
             cursor: 'pointer',
             display: 'flex',
-            fontSize: 14,
+            fontSize: '0.875rem',
             fontWeight: 400,
             height: 40,
-            lineHeight: '24px',
+            lineHeight: '1.5rem',
             padding: '8px 16px',
             boxSizing: 'border-box' as const,
             '& > div': {
@@ -85,7 +85,7 @@ export const commonStyles = (theme: Theme) => {
 
             '& i': {
                 display: 'inline',
-                fontSize: 24
+                fontSize: '1.5rem'
             },
 
             '@media (hover: hover) and (pointer: fine)': {
@@ -120,8 +120,8 @@ export const commonStyles = (theme: Theme) => {
             },
 
             '.prejoin-dialog-label': {
-                fontSize: '15px',
-                lineHeight: '24px'
+                fontSize: '1rem',
+                lineHeight: '1.5rem'
             },
 
             '.prejoin-dialog-label-num': {
@@ -156,8 +156,8 @@ export const commonStyles = (theme: Theme) => {
 
             '.prejoin-dialog-title': {
                 display: 'inline-block',
-                fontSize: '24px',
-                lineHeight: '32px'
+                fontSize: '1.5rem',
+                lineHeight: '2rem'
             },
 
             '.prejoin-dialog-icon': {
@@ -196,7 +196,7 @@ export const commonStyles = (theme: Theme) => {
             '.prejoin-dialog-delimiter-txt': {
                 background: theme.palette.uiBackground,
                 color: theme.palette.text01,
-                fontSize: '11px',
+                fontSize: '0.75rem',
                 textTransform: 'uppercase' as const,
                 padding: `0 ${theme.spacing(2)}`
             }
@@ -212,7 +212,7 @@ export const commonStyles = (theme: Theme) => {
             display: 'flex',
             borderRadius: 3,
             flexDirection: 'column' as const,
-            fontSize: 24,
+            fontSize: '1.5rem',
             height: 48,
             justifyContent: 'center',
             width: 48,
@@ -249,7 +249,7 @@ export const commonStyles = (theme: Theme) => {
             color: theme.palette.text01,
             cursor: 'pointer',
             display: 'inline-block',
-            lineHeight: '48px',
+            lineHeight: '3rem',
             textAlign: 'center' as const
         },
 

react/features/base/ui/functions.any.ts

@@ -0,0 +1,25 @@
+// Base font size in pixels (standard is 16px = 1rem)
+const BASE_FONT_SIZE = 16;
+
+/**
+ * Converts rem to pixels.
+ *
+ * @param {string} remValue - The value in rem units (e.g. '0.875rem').
+ * @returns {number}
+ */
+export function remToPixels(remValue: string): number {
+    const numericValue = parseFloat(remValue.replace('rem', ''));
+
+    return Math.round(numericValue * BASE_FONT_SIZE);
+}
+
+
+/**
+ * Converts pixels to rem.
+ *
+ * @param {number} pixels - The value in pixels.
+ * @returns {string}
+ * */
+export function pixelsToRem(pixels: number): string {
+    return `${(pixels / BASE_FONT_SIZE).toFixed(3)}rem`;
+}

react/features/base/ui/functions.native.ts

@@ -1,7 +1,36 @@
 import { DefaultTheme } from 'react-native-paper';
 
+import { remToPixels } from './functions.any';
 import { createColorTokens } from './utils';
 
+export * from './functions.any';
+
+/**
+ * Converts all rem to pixels in an object.
+ *
+ * @param {Object} obj - The object to convert rem values in.
+ * @returns {Object}
+ */
+function convertRemValues(obj: any): any {
+    const converted: { [key: string]: any; } = {};
+
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    Object.entries(obj).forEach(([ key, value ]) => {
+        if (typeof value === 'string' && value.includes('rem')) {
+            converted[key] = remToPixels(value);
+        } else if (typeof value === 'object' && value !== null) {
+            converted[key] = convertRemValues(value);
+        } else {
+            converted[key] = value;
+        }
+    });
+
+    return converted;
+}
+
 /**
  * Creates a React Native Paper theme based on local UI tokens.
  *
@@ -16,7 +45,7 @@ export function createNativeTheme({ font, colorMap, shape, spacing, typography }
         spacing,
         typography: {
             font,
-            ...typography
+            ...convertRemValues(typography)
         }
     };
 }

react/features/base/ui/functions.web.ts

@@ -5,6 +5,8 @@ import { ITypography, IPalette as Palette1 } from '../ui/types';
 
 import { createColorTokens, createTypographyTokens } from './utils';
 
+export * from './functions.any';
+
 declare module '@mui/material/styles' {
     // eslint-disable-next-line @typescript-eslint/no-empty-interface
     interface Palette extends Palette1 {}

react/features/base/ui/types.ts

@@ -1,8 +1,8 @@
 interface ITypographyType {
-    fontSize: number;
-    fontWeight: number; // TODO: revisit this.
+    fontSize: string;
+    fontWeight: 'normal' | 'bold' | 'bolder' | 'lighter' | number;
     letterSpacing: number;
-    lineHeight: number;
+    lineHeight: string;
 }
 
 export interface IPalette {

react/features/calendar-sync/components/styles.ts

@@ -130,7 +130,7 @@ export default createStyleSheet({
      */
     notificationIcon: {
         color: 'white',
-        fontSize: 25
+        fontSize: '1.5rem'
     },
 
     /**
@@ -148,7 +148,7 @@ export default createStyleSheet({
      */
     notificationText: {
         color: 'white',
-        fontSize: 13
+        fontSize: '0.875rem'
     },
 
     /**

react/features/chat/actionTypes.ts

@@ -163,3 +163,12 @@ export const SET_USER_CHAT_WIDTH = 'SET_USER_CHAT_WIDTH';
  * }
  */
 export const SET_CHAT_IS_RESIZING = 'SET_CHAT_IS_RESIZING';
+
+/**
+  * The type of action sets the timestamp of the last private chat recipients list changed.
+  *
+  * {
+  *     type: NOTIFY_PRIVATE_RECIPIENTS_CHANGED
+  * }
+  */
+ export const NOTIFY_PRIVATE_RECIPIENTS_CHANGED = 'NOTIFY_PRIVATE_RECIPIENTS_CHANGED';

react/features/chat/actions.any.ts

@@ -1,6 +1,6 @@
 import { IStore } from '../app/types';
 import { getCurrentConference } from '../base/conference/functions';
-import { getLocalParticipant } from '../base/participants/functions';
+import { getLocalParticipant, getParticipantById } from '../base/participants/functions';
 import { IParticipant } from '../base/participants/types';
 import { LOBBY_CHAT_INITIALIZED } from '../lobby/constants';
 
@@ -10,6 +10,7 @@ import {
     CLEAR_MESSAGES,
     CLOSE_CHAT,
     EDIT_MESSAGE,
+    NOTIFY_PRIVATE_RECIPIENTS_CHANGED,
     OPEN_CHAT,
     REMOVE_LOBBY_CHAT_PARTICIPANT,
     SEND_MESSAGE,
@@ -170,6 +171,25 @@ export function setPrivateMessageRecipient(participant?: Object) {
     };
 }
 
+/**
+ * Initiates the sending of a private message to the supplied participantId.
+ *
+ * @param {string} participantId - The participant id to set the recipient to.
+ * @returns {{
+*     participant: IParticipant,
+*     type: SET_PRIVATE_MESSAGE_RECIPIENT
+* }}
+*/
+export function setPrivateMessageRecipientById(participantId: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const participant = getParticipantById(getState(), participantId);
+
+        if (participant) {
+            dispatch(setPrivateMessageRecipient(participant));
+        }
+    };
+}
+
 /**
  * Set the value of the currently focused tab.
  *
@@ -252,6 +272,22 @@ export function setLobbyChatActiveState(value: boolean) {
     };
 }
 
+/**
+ * Notifies the private chat recipients list changed.
+ *
+ * @returns {Object}
+ */
+export function notifyPrivateRecipientsChanged() {
+    return (dispatch: IStore['dispatch']) => {
+        const timestamp = Date.now();
+
+        return dispatch({
+            type: NOTIFY_PRIVATE_RECIPIENTS_CHANGED,
+            payload: timestamp
+        });
+    };
+}
+
 /**
  * Removes lobby type messages.
  *

react/features/chat/components/AbstractChatPrivacyDialog.tsx

@@ -4,6 +4,7 @@ import { WithTranslation } from 'react-i18next';
 import { IReduxState, IStore } from '../../app/types';
 import { getParticipantById } from '../../base/participants/functions';
 import { IParticipant } from '../../base/participants/types';
+import { IVisitorChatParticipant } from '../../visitors/types';
 import { sendMessage, setPrivateMessageRecipient } from '../actions';
 
 interface IProps extends WithTranslation {
@@ -23,6 +24,16 @@ interface IProps extends WithTranslation {
      */
     _participant?: IParticipant;
 
+    /**
+     * The display name of the visitor (if applicable).
+     */
+    displayName?: string;
+
+    /**
+     * Whether the message is from a visitor.
+     */
+    isFromVisitor?: boolean;
+
     /**
      * The message that is about to be sent.
      */
@@ -67,9 +78,21 @@ export class AbstractChatPrivacyDialog extends PureComponent<IProps> {
      * @returns {void}
      */
     _onSendPrivateMessage() {
-        const { message, _onSendMessage, _onSetMessageRecipient, _participant } = this.props;
+        const { message, _onSendMessage, _onSetMessageRecipient, _participant, isFromVisitor, displayName, participantID } = this.props;
+
+        if (isFromVisitor) {
+            // For visitors, create a participant object since they don't exist in the main participant list
+            const visitorParticipant = {
+                id: participantID,
+                name: displayName,
+                isVisitor: true
+            };
+
+            _onSetMessageRecipient(visitorParticipant);
+        } else {
+            _onSetMessageRecipient(_participant);
+        }
 
-        _onSetMessageRecipient(_participant);
         _onSendMessage(message);
 
         return true;
@@ -88,7 +111,7 @@ export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
             dispatch(sendMessage(message, true));
         },
 
-        _onSetMessageRecipient: (participant: IParticipant) => {
+        _onSetMessageRecipient: (participant: IParticipant | IVisitorChatParticipant) => {
             dispatch(setPrivateMessageRecipient(participant));
         }
     };
@@ -103,6 +126,6 @@ export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
  */
 export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
     return {
-        _participant: getParticipantById(state, ownProps.participantID)
+        _participant: ownProps.isFromVisitor ? undefined : getParticipantById(state, ownProps.participantID)
     };
 }

react/features/chat/components/AbstractMessageRecipient.ts

@@ -3,7 +3,9 @@ import { WithTranslation } from 'react-i18next';
 
 import { IReduxState, IStore } from '../../app/types';
 import { getParticipantDisplayName, isLocalParticipantModerator } from '../../base/participants/functions';
+import { getVisitorDisplayName } from '../../visitors/functions';
 import { setLobbyChatActiveState, setPrivateMessageRecipient } from '../actions.any';
+import { isVisitorChatParticipant } from '../functions';
 
 
 export interface IProps extends WithTranslation {
@@ -13,6 +15,11 @@ export interface IProps extends WithTranslation {
       */
     _isLobbyChatActive: boolean;
 
+    /**
+     * Whether the private message recipient is a visitor.
+     */
+    _isVisitor?: boolean;
+
     /**
       * The name of the lobby message recipient, if any.
       */
@@ -72,10 +79,18 @@ export function _mapDispatchToProps(dispatch: IStore['dispatch']) {
  */
 export function _mapStateToProps(state: IReduxState, _ownProps: any) {
     const { privateMessageRecipient, lobbyMessageRecipient, isLobbyChatActive } = state['features/chat'];
+    let _privateMessageRecipient;
+    const _isVisitor = isVisitorChatParticipant(privateMessageRecipient);
+
+    if (privateMessageRecipient) {
+        _privateMessageRecipient = _isVisitor
+            ? getVisitorDisplayName(state, privateMessageRecipient.name)
+            : getParticipantDisplayName(state, privateMessageRecipient.id);
+    }
 
     return {
-        _privateMessageRecipient:
-            privateMessageRecipient ? getParticipantDisplayName(state, privateMessageRecipient.id) : undefined,
+        _privateMessageRecipient,
+        _isVisitor,
         _isLobbyChatActive: isLobbyChatActive,
         _lobbyMessageRecipient:
                 isLobbyChatActive && lobbyMessageRecipient ? lobbyMessageRecipient.name : undefined,

react/features/chat/components/native/ChatMessage.tsx

@@ -122,15 +122,17 @@ class ChatMessage extends Component<IChatMessageProps> {
      * @returns {React.ReactElement<*> | null}
      */
     _renderDisplayName() {
-        const { message, showDisplayName } = this.props;
+        const { message, showDisplayName, t } = this.props;
 
         if (!showDisplayName) {
             return null;
         }
 
+        const { displayName, isFromVisitor } = message;
+
         return (
             <Text style = { styles.senderDisplayName }>
-                { message.displayName }
+                { `${displayName}${isFromVisitor ? ` ${t('visitors.chatIndicator')}` : ''}` }
             </Text>
         );
     }

react/features/chat/components/native/MessageRecipient.tsx

@@ -12,7 +12,8 @@ import {
 } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { setLobbyChatActiveState, setPrivateMessageRecipient } from '../../actions.any';
 import AbstractMessageRecipient, {
-    IProps as AbstractProps
+    IProps as AbstractProps,
+    _mapStateToProps as _mapStateToPropsAbstract
 } from '../AbstractMessageRecipient';
 
 import styles from './styles';
@@ -36,11 +37,6 @@ interface IProps extends AbstractProps {
         id: string;
         name: string;
     } | ILocalParticipant;
-
-    /**
-     * The participant object set for private messaging.
-     */
-    privateMessageRecipient: { name: string; };
 }
 
 /**
@@ -96,7 +92,8 @@ class MessageRecipient extends AbstractMessageRecipient<IProps> {
         const {
             isLobbyChatActive,
             lobbyMessageRecipient,
-            privateMessageRecipient,
+            _privateMessageRecipient,
+            _isVisitor,
             t
         } = this.props;
 
@@ -120,7 +117,7 @@ class MessageRecipient extends AbstractMessageRecipient<IProps> {
             );
         }
 
-        if (!privateMessageRecipient) {
+        if (!_privateMessageRecipient) {
             return null;
         }
 
@@ -130,7 +127,7 @@ class MessageRecipient extends AbstractMessageRecipient<IProps> {
                 style = { styles.messageRecipientContainer as ViewStyle }>
                 <Text style = { styles.messageRecipientText }>
                     { t('chat.messageTo', {
-                        recipient: privateMessageRecipient.name
+                        recipient: `${_privateMessageRecipient}${_isVisitor ? ` ${t('visitors.chatIndicator')}` : ''}`
                     }) }
                 </Text>
                 <TouchableHighlight
@@ -157,6 +154,7 @@ function _mapStateToProps(state: IReduxState, _ownProps: any) {
     const { lobbyMessageRecipient, isLobbyChatActive } = state['features/chat'];
 
     return {
+        ..._mapStateToPropsAbstract(state, _ownProps),
         isLobbyChatActive,
         lobbyMessageRecipient
     };

react/features/chat/components/web/Chat.tsx

@@ -1,20 +1,29 @@
 import { throttle } from 'lodash-es';
-import React, { useCallback, useEffect, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { connect, useSelector } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IReduxState } from '../../../app/types';
 import { translate } from '../../../base/i18n/functions';
 import { IconInfo, IconMessage, IconShareDoc, IconSubtitles } from '../../../base/icons/svg';
-import { getLocalParticipant } from '../../../base/participants/functions';
+import { getLocalParticipant, getRemoteParticipants } from '../../../base/participants/functions';
+import Select from '../../../base/ui/components/web/Select';
 import Tabs from '../../../base/ui/components/web/Tabs';
 import { arePollsDisabled } from '../../../conference/functions.any';
 import FileSharing from '../../../file-sharing/components/web/FileSharing';
 import { isFileSharingEnabled } from '../../../file-sharing/functions.any';
 import PollsPane from '../../../polls/components/web/PollsPane';
 import { isCCTabEnabled } from '../../../subtitles/functions.any';
-import { sendMessage, setChatIsResizing, setFocusedTab, setUserChatWidth, toggleChat } from '../../actions.web';
-import { CHAT_SIZE, ChatTabs, SMALL_WIDTH_THRESHOLD } from '../../constants';
+import {
+    sendMessage,
+    setChatIsResizing,
+    setFocusedTab,
+    setPrivateMessageRecipient,
+    setPrivateMessageRecipientById,
+    setUserChatWidth,
+    toggleChat
+} from '../../actions.web';
+import { CHAT_SIZE, ChatTabs, OPTION_GROUPCHAT, SMALL_WIDTH_THRESHOLD } from '../../constants';
 import { getChatMaxSize } from '../../functions';
 import { IChatProps as AbstractProps } from '../../types';
 
@@ -216,6 +225,10 @@ const useStyles = makeStyles<{ _isResizing: boolean; width: number; }>()((theme,
             height: '100px',
             width: '3px',
             borderRadius: '1px'
+        },
+
+        privateMessageRecipientsList: {
+            padding: '0 16px 5px'
         }
     };
 });
@@ -245,6 +258,34 @@ const Chat = ({
     const [ mousePosition, setMousePosition ] = useState<number | null>(null);
     const [ dragChatWidth, setDragChatWidth ] = useState<number | null>(null);
     const maxChatWidth = useSelector(getChatMaxSize);
+    const notifyTimestamp = useSelector((state: IReduxState) =>
+        state['features/chat'].notifyPrivateRecipientsChangedTimestamp
+    );
+    const {
+        defaultRemoteDisplayName = 'Fellow Jitster'
+    } = useSelector((state: IReduxState) => state['features/base/config']);
+    const privateMessageRecipient = useSelector((state: IReduxState) => state['features/chat'].privateMessageRecipient);
+    const participants = useSelector(getRemoteParticipants);
+
+    const options = useMemo(() => {
+        const o = Array.from(participants?.values() || [])
+                .filter(p => !p.fakeParticipant)
+                .map(p => {
+                    return {
+                        value: p.id,
+                        label: p.name ?? defaultRemoteDisplayName
+                    };
+                });
+
+        o.sort((a, b) => a.label.localeCompare(b.label));
+
+        o.unshift({
+            label: t('chat.everyone'),
+            value: OPTION_GROUPCHAT
+        });
+
+        return o;
+    }, [ participants, defaultRemoteDisplayName, t, notifyTimestamp ]);
 
     /**
      * Handles mouse down on the drag handle.
@@ -376,6 +417,17 @@ const Chat = ({
         dispatch(setFocusedTab(id as ChatTabs));
     }, [ dispatch ]);
 
+
+    const onSelectedRecipientChange = useCallback((e: React.ChangeEvent<HTMLSelectElement>) => {
+        const selected = e.target.value;
+
+        if (selected === OPTION_GROUPCHAT) {
+            dispatch(setPrivateMessageRecipient());
+        } else {
+            dispatch(setPrivateMessageRecipientById(selected));
+        }
+    }, []);
+
     /**
      * Returns a React Element for showing chat messages and a form to send new
      * chat messages.
@@ -403,6 +455,12 @@ const Chat = ({
                     <MessageContainer
                         messages = { _messages } />
                     <MessageRecipient />
+                    <Select
+                        containerClassName = { cx(classes.privateMessageRecipientsList) }
+                        id = 'select-chat-recipient'
+                        onChange = { onSelectedRecipientChange }
+                        options = { options }
+                        value = { privateMessageRecipient?.id || OPTION_GROUPCHAT } />
                     <ChatInput
                         onSend = { onSendMessage } />
                 </div>
@@ -454,7 +512,8 @@ const Chat = ({
                     _focusedTab !== ChatTabs.CHAT && _nbUnreadMessages > 0 ? _nbUnreadMessages : undefined,
                 id: ChatTabs.CHAT,
                 controlsId: `${ChatTabs.CHAT}-panel`,
-                icon: IconMessage
+                icon: IconMessage,
+                title: t('chat.tabs.chat')
             }
         ];
 
@@ -464,7 +523,8 @@ const Chat = ({
                 countBadge: _focusedTab !== ChatTabs.POLLS && _nbUnreadPolls > 0 ? _nbUnreadPolls : undefined,
                 id: ChatTabs.POLLS,
                 controlsId: `${ChatTabs.POLLS}-panel`,
-                icon: IconInfo
+                icon: IconInfo,
+                title: t('chat.tabs.polls')
             });
         }
 
@@ -474,7 +534,8 @@ const Chat = ({
                 countBadge: undefined,
                 id: ChatTabs.CLOSED_CAPTIONS,
                 controlsId: `${ChatTabs.CLOSED_CAPTIONS}-panel`,
-                icon: IconSubtitles
+                icon: IconSubtitles,
+                title: t('chat.tabs.closedCaptions')
             });
         }
 
@@ -484,7 +545,8 @@ const Chat = ({
                 countBadge: undefined,
                 id: ChatTabs.FILE_SHARING,
                 controlsId: `${ChatTabs.FILE_SHARING}-panel`,
-                icon: IconShareDoc
+                icon: IconShareDoc,
+                title: t('chat.tabs.fileSharing')
             });
         }
 

react/features/chat/components/web/ChatMessage.tsx

@@ -8,7 +8,7 @@ import { translate } from '../../../base/i18n/functions';
 import { getParticipantById, getParticipantDisplayName, isPrivateChatEnabled } from '../../../base/participants/functions';
 import Popover from '../../../base/popover/components/Popover.web';
 import Message from '../../../base/react/components/web/Message';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
+import { MESSAGE_TYPE_LOCAL } from '../../constants';
 import { getFormattedTimestamp, getMessageText, getPrivateNoticeMessage } from '../../functions';
 import { IChatMessageProps } from '../../types';
 
@@ -16,9 +16,10 @@ import MessageMenu from './MessageMenu';
 import ReactButton from './ReactButton';
 
 interface IProps extends IChatMessageProps {
-    shouldDisplayChatMessageMenu: boolean;
+    className?: string;
+    enablePrivateChat?: boolean;
+    shouldDisplayMenuOnRight?: boolean;
     state?: IReduxState;
-    type: string;
 }
 
 const useStyles = makeStyles()((theme: Theme) => {
@@ -128,7 +129,7 @@ const useStyles = makeStyles()((theme: Theme) => {
             minHeight: '32px'
         },
         displayName: {
-            ...withPixelLineHeight(theme.typography.labelBold),
+            ...theme.typography.labelBold,
             color: theme.palette.text02,
             whiteSpace: 'nowrap',
             textOverflow: 'ellipsis',
@@ -137,18 +138,18 @@ const useStyles = makeStyles()((theme: Theme) => {
             maxWidth: '130px'
         },
         userMessage: {
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text01,
             whiteSpace: 'pre-wrap',
             wordBreak: 'break-word'
         },
         privateMessageNotice: {
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             color: theme.palette.text02,
             marginTop: theme.spacing(1)
         },
         timestamp: {
-            ...withPixelLineHeight(theme.typography.labelRegular),
+            ...theme.typography.labelRegular,
             color: theme.palette.text03,
             marginTop: theme.spacing(1),
             marginLeft: theme.spacing(1),
@@ -190,11 +191,12 @@ const useStyles = makeStyles()((theme: Theme) => {
 });
 
 const ChatMessage = ({
+    className = '',
     message,
     state,
     showDisplayName,
-    type,
-    shouldDisplayChatMessageMenu,
+    shouldDisplayMenuOnRight,
+    enablePrivateChat,
     knocking,
     t
 }: IProps) => {
@@ -224,11 +226,13 @@ const ChatMessage = ({
      * @returns {React$Element<*>}
      */
     function _renderDisplayName() {
+        const { displayName, isFromVisitor = false } = message;
+
         return (
             <div
                 aria-hidden = { true }
                 className = { cx('display-name', classes.displayName) }>
-                {message.displayName}
+                {`${displayName}${isFromVisitor ? ` ${t('visitors.chatIndicator')}` : ''}`}
             </div>
         );
     }
@@ -329,26 +333,28 @@ const ChatMessage = ({
 
     return (
         <div
-            className = { cx(classes.chatMessageWrapper, type) }
+            className = { cx(classes.chatMessageWrapper, className) }
             id = { message.messageId }
             onMouseEnter = { handleMouseEnter }
             onMouseLeave = { handleMouseLeave }
             tabIndex = { -1 }>
             <div className = { classes.sideBySideContainer }>
-                {!shouldDisplayChatMessageMenu && (
+                {!shouldDisplayMenuOnRight && (
                     <div className = { classes.optionsButtonContainer }>
                         {isHovered && <MessageMenu
+                            displayName = { message.displayName }
+                            enablePrivateChat = { Boolean(enablePrivateChat) }
+                            isFromVisitor = { message.isFromVisitor }
                             isLobbyMessage = { message.lobbyChat }
                             message = { message.message }
-                            participantId = { message.participantId }
-                            shouldDisplayChatMessageMenu = { shouldDisplayChatMessageMenu } />}
+                            participantId = { message.participantId } />}
                     </div>
                 )}
                 <div
                     className = { cx(
                         'chatmessage',
                         classes.chatMessage,
-                        type,
+                        className,
                         message.privateMessage && 'privatemessage',
                         message.lobbyChat && !knocking && 'lobbymessage'
                     ) }>
@@ -379,7 +385,7 @@ const ChatMessage = ({
                         </div>
                     </div>
                 </div>
-                {shouldDisplayChatMessageMenu && (
+                {shouldDisplayMenuOnRight && (
                     <div className = { classes.sideBySideContainer }>
                         {!message.privateMessage && !message.lobbyChat && <div>
                             <div className = { classes.optionsButtonContainer }>
@@ -391,10 +397,12 @@ const ChatMessage = ({
                         <div>
                             <div className = { classes.optionsButtonContainer }>
                                 {isHovered && <MessageMenu
+                                    displayName = { message.displayName }
+                                    enablePrivateChat = { Boolean(enablePrivateChat) }
+                                    isFromVisitor = { message.isFromVisitor }
                                     isLobbyMessage = { message.lobbyChat }
                                     message = { message.message }
-                                    participantId = { message.participantId }
-                                    shouldDisplayChatMessageMenu = { shouldDisplayChatMessageMenu } />}
+                                    participantId = { message.participantId } />}
                             </div>
                         </div>
                     </div>
@@ -414,10 +422,23 @@ function _mapStateToProps(state: IReduxState, { message }: IProps) {
     const { knocking } = state['features/lobby'];
 
     const participant = getParticipantById(state, message.participantId);
-    const enablePrivateChat = isPrivateChatEnabled(participant, state);
+
+    // For visitor private messages, participant will be undefined but we should still allow private chat
+    // Create a visitor participant object for visitor messages to pass to isPrivateChatEnabled
+    const participantForCheck = message.isFromVisitor
+        ? { id: message.participantId, name: message.displayName, isVisitor: true as const }
+        : participant;
+
+    const enablePrivateChat = (!message.isFromVisitor || message.privateMessage)
+        && isPrivateChatEnabled(participantForCheck, state);
+
+    // Only the local messages appear on the right side of the chat therefore only for them the menu has to be on the
+    // left side.
+    const shouldDisplayMenuOnRight = message.messageType !== MESSAGE_TYPE_LOCAL;
 
     return {
-        shouldDisplayChatMessageMenu: enablePrivateChat,
+        shouldDisplayMenuOnRight,
+        enablePrivateChat,
         knocking,
         state
     };

react/features/chat/components/web/ChatMessageGroup.tsx

@@ -71,12 +71,11 @@ const ChatMessageGroup = ({ className = '', messages }: IProps) => {
             <div className = { `${classes.messageGroup} chat-message-group ${className}` }>
                 {messages.map((message, i) => (
                     <ChatMessage
+                        className = { className }
                         key = { i }
                         message = { message }
-                        shouldDisplayChatMessageMenu = { false }
                         showDisplayName = { i === 0 }
-                        showTimestamp = { i === messages.length - 1 }
-                        type = { className } />
+                        showTimestamp = { i === messages.length - 1 } />
                 ))}
             </div>
         </div>

react/features/chat/components/web/ClosedCaptionsTab.tsx

@@ -6,7 +6,6 @@ import { makeStyles } from 'tss-react/mui';
 import { IReduxState } from '../../../app/types';
 import Icon from '../../../base/icons/components/Icon';
 import { IconSubtitles } from '../../../base/icons/svg';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import { groupMessagesBySender } from '../../../base/util/messageGrouping';
 import { setRequestingSubtitles } from '../../../subtitles/actions.any';
@@ -67,7 +66,7 @@ const useStyles = makeStyles()(theme => {
             }
         },
         emptyState: {
-            ...withPixelLineHeight(theme.typography.bodyLongBold),
+            ...theme.typography.bodyLongBold,
             color: theme.palette.text02
         }
     };

react/features/chat/components/web/MessageMenu.tsx

@@ -15,10 +15,12 @@ import { handleLobbyChatInitialized, openChat } from '../../actions.web';
 
 export interface IProps {
     className?: string;
+    displayName?: string;
+    enablePrivateChat: boolean;
+    isFromVisitor?: boolean;
     isLobbyMessage: boolean;
     message: string;
     participantId: string;
-    shouldDisplayChatMessageMenu: boolean;
 }
 
 const useStyles = makeStyles()(theme => {
@@ -46,7 +48,7 @@ const useStyles = makeStyles()(theme => {
             color: 'white',
             padding: '4px 8px',
             borderRadius: '4px',
-            fontSize: '12px',
+            fontSize: '0.75rem',
             zIndex: 1000,
             opacity: 0,
             transition: 'opacity 0.3s ease-in-out',
@@ -58,7 +60,7 @@ const useStyles = makeStyles()(theme => {
     };
 });
 
-const MessageMenu = ({ message, participantId, isLobbyMessage, shouldDisplayChatMessageMenu }: IProps) => {
+const MessageMenu = ({ message, participantId, isFromVisitor, isLobbyMessage, enablePrivateChat, displayName }: IProps) => {
     const dispatch = useDispatch();
     const { classes, cx } = useStyles();
     const { t } = useTranslation();
@@ -82,10 +84,23 @@ const MessageMenu = ({ message, participantId, isLobbyMessage, shouldDisplayChat
         if (isLobbyMessage) {
             dispatch(handleLobbyChatInitialized(participantId));
         } else {
-            dispatch(openChat(participant));
+            // For visitor messages, participant will be undefined but we can still open chat
+            // using the participantId which contains the visitor's original JID
+            if (isFromVisitor) {
+                // Handle visitor participant that doesn't exist in main participant list
+                const visitorParticipant = {
+                    id: participantId,
+                    name: displayName,
+                    isVisitor: true
+                };
+
+                dispatch(openChat(visitorParticipant));
+            } else {
+                dispatch(openChat(participant));
+            }
         }
         handleClose();
-    }, [ dispatch, isLobbyMessage, participant, participantId ]);
+    }, [ dispatch, isLobbyMessage, participant, participantId, displayName ]);
 
     const handleCopyClick = useCallback(() => {
         copyText(message)
@@ -115,7 +130,7 @@ const MessageMenu = ({ message, participantId, isLobbyMessage, shouldDisplayChat
 
     const popoverContent = (
         <div className = { classes.menuPanel }>
-            {shouldDisplayChatMessageMenu && (
+            {enablePrivateChat && (
                 <div
                     className = { classes.menuItem }
                     onClick = { handlePrivateClick }>

react/features/chat/components/web/MessageRecipient.tsx

@@ -4,7 +4,6 @@ import { connect } from 'react-redux';
 import { makeStyles } from 'tss-react/mui';
 
 import { IconCloseLarge } from '../../../base/icons/svg';
-import { withPixelLineHeight } from '../../../base/styles/functions.web';
 import Button from '../../../base/ui/components/web/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.any';
 import {
@@ -24,7 +23,7 @@ const useStyles = makeStyles()(theme => {
             alignItems: 'center',
             backgroundColor: theme.palette.support05,
             borderRadius: theme.shape.borderRadius,
-            ...withPixelLineHeight(theme.typography.bodyShortRegular),
+            ...theme.typography.bodyShortRegular,
             color: theme.palette.text01
         },
 
@@ -48,6 +47,7 @@ const useStyles = makeStyles()(theme => {
 const MessageRecipient = ({
     _privateMessageRecipient,
     _isLobbyChatActive,
+    _isVisitor,
     _lobbyMessageRecipient,
     _onRemovePrivateMessageRecipient,
     _onHideLobbyChatRecipient,
@@ -80,9 +80,9 @@ const MessageRecipient = ({
             id = 'chat-recipient'
             role = 'alert'>
             <span className = { classes.text }>
-                {t(_isLobbyChatActive ? 'chat.lobbyChatMessageTo' : 'chat.messageTo', {
-                    recipient: _isLobbyChatActive ? _lobbyMessageRecipient : _privateMessageRecipient
-                })}
+                { _isLobbyChatActive
+                    ? t('chat.lobbyChatMessageTo', { recipient: _lobbyMessageRecipient })
+                    : t('chat.messageTo', { recipient: `${_privateMessageRecipient}${_isVisitor ? ` ${t('visitors.chatIndicator')}` : ''}` }) }
             </span>
             <Button
                 accessibilityLabel = { t('dialog.close') }