feat(deps,rn) update React Native to version 0.68.5

fix(dialog) Improvements (#12590 )
Remove focus outline for the close icon Increase max height
2026-03-16 16:40:19 +00:00 · 2022-11-21 10:37:48 +01:00 · 2022-11-21 11:09:03 +02:00 · 2022-11-21 10:03:03 +01:00 · 2022-11-19 15:35:43 -06:00 · 2022-11-18 19:56:36 +01:00
40 changed files with 700 additions and 506 deletions
--- a/conference.js
+++ b/conference.js
@@ -44,6 +44,7 @@ import {
    conferenceUniqueIdSet,
    conferenceWillJoin,
    conferenceWillLeave,
+    dataChannelClosed,
    dataChannelOpened,
    e2eRttChanged,
    getConferenceOptions,
@@ -134,9 +135,12 @@ import {
 import { maybeSetLobbyChatMessageListener } from './react/features/lobby/actions.any';
 import { setNoiseSuppressionEnabled } from './react/features/noise-suppression/actions';
 import {
+    DATA_CHANNEL_CLOSED_NOTIFICATION_ID,
    NOTIFICATION_TIMEOUT_TYPE,
+    hideNotification,
    isModerationNotificationDisplayed,
-    showNotification
+    showNotification,
+    showWarningNotification
 } from './react/features/notifications';
 import { mediaPermissionPromptVisibilityChanged } from './react/features/overlay';
 import { suspendDetected } from './react/features/power-monitor';
@@ -2067,6 +2071,18 @@ export default {
        room.on(
            JitsiConferenceEvents.DATA_CHANNEL_OPENED, () => {
                APP.store.dispatch(dataChannelOpened());
+                APP.store.dispatch(hideNotification(DATA_CHANNEL_CLOSED_NOTIFICATION_ID));
+            }
+        );
+
+        room.on(
+            JitsiConferenceEvents.DATA_CHANNEL_CLOSED, ev => {
+                APP.store.dispatch(dataChannelClosed(ev.code, ev.reason));
+                APP.store.dispatch(showWarningNotification({
+                    descriptionKey: 'notify.dataChannelClosedDescription',
+                    titleKey: 'notify.dataChannelClosed',
+                    uid: DATA_CHANNEL_CLOSED_NOTIFICATION_ID
+                }, NOTIFICATION_TIMEOUT_TYPE.STICKY));
            }
        );

--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -13,14 +13,14 @@ PODS:
    - CocoaLumberjack/Core (= 3.7.2)
  - CocoaLumberjack/Core (3.7.2)
  - DoubleConversion (1.1.6)
-  - FBLazyVector (0.68.4)
-  - FBReactNativeSpec (0.68.4):
+  - FBLazyVector (0.68.5)
+  - FBReactNativeSpec (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.68.4)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Core (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
+    - RCTRequired (= 0.68.5)
+    - RCTTypeSafety (= 0.68.5)
+    - React-Core (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
  - Firebase/Analytics (8.15.0):
    - Firebase/Core
  - Firebase/Core (8.15.0):
@@ -163,201 +163,201 @@ PODS:
    - DoubleConversion
    - fmt (~> 6.2.1)
    - glog
-  - RCTRequired (0.68.4)
-  - RCTTypeSafety (0.68.4):
-    - FBLazyVector (= 0.68.4)
+  - RCTRequired (0.68.5)
+  - RCTTypeSafety (0.68.5):
+    - FBLazyVector (= 0.68.5)
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.68.4)
-    - React-Core (= 0.68.4)
-  - React (0.68.4):
-    - React-Core (= 0.68.4)
-    - React-Core/DevSupport (= 0.68.4)
-    - React-Core/RCTWebSocket (= 0.68.4)
-    - React-RCTActionSheet (= 0.68.4)
-    - React-RCTAnimation (= 0.68.4)
-    - React-RCTBlob (= 0.68.4)
-    - React-RCTImage (= 0.68.4)
-    - React-RCTLinking (= 0.68.4)
-    - React-RCTNetwork (= 0.68.4)
-    - React-RCTSettings (= 0.68.4)
-    - React-RCTText (= 0.68.4)
-    - React-RCTVibration (= 0.68.4)
-  - React-callinvoker (0.68.4)
-  - React-Codegen (0.68.4):
-    - FBReactNativeSpec (= 0.68.4)
+    - RCTRequired (= 0.68.5)
+    - React-Core (= 0.68.5)
+  - React (0.68.5):
+    - React-Core (= 0.68.5)
+    - React-Core/DevSupport (= 0.68.5)
+    - React-Core/RCTWebSocket (= 0.68.5)
+    - React-RCTActionSheet (= 0.68.5)
+    - React-RCTAnimation (= 0.68.5)
+    - React-RCTBlob (= 0.68.5)
+    - React-RCTImage (= 0.68.5)
+    - React-RCTLinking (= 0.68.5)
+    - React-RCTNetwork (= 0.68.5)
+    - React-RCTSettings (= 0.68.5)
+    - React-RCTText (= 0.68.5)
+    - React-RCTVibration (= 0.68.5)
+  - React-callinvoker (0.68.5)
+  - React-Codegen (0.68.5):
+    - FBReactNativeSpec (= 0.68.5)
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTRequired (= 0.68.4)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Core (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-Core (0.68.4):
+    - RCTRequired (= 0.68.5)
+    - RCTTypeSafety (= 0.68.5)
+    - React-Core (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-Core (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.68.4)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-Core/Default (= 0.68.5)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/CoreModulesHeaders (0.68.4):
+  - React-Core/CoreModulesHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/Default (0.68.4):
+  - React-Core/Default (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/DevSupport (0.68.4):
+  - React-Core/DevSupport (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.68.4)
-    - React-Core/RCTWebSocket (= 0.68.4)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-jsinspector (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-Core/Default (= 0.68.5)
+    - React-Core/RCTWebSocket (= 0.68.5)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-jsinspector (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTActionSheetHeaders (0.68.4):
+  - React-Core/RCTActionSheetHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTAnimationHeaders (0.68.4):
+  - React-Core/RCTAnimationHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTBlobHeaders (0.68.4):
+  - React-Core/RCTBlobHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTImageHeaders (0.68.4):
+  - React-Core/RCTImageHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTLinkingHeaders (0.68.4):
+  - React-Core/RCTLinkingHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTNetworkHeaders (0.68.4):
+  - React-Core/RCTNetworkHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTSettingsHeaders (0.68.4):
+  - React-Core/RCTSettingsHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTTextHeaders (0.68.4):
+  - React-Core/RCTTextHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTVibrationHeaders (0.68.4):
+  - React-Core/RCTVibrationHeaders (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
    - React-Core/Default
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-Core/RCTWebSocket (0.68.4):
+  - React-Core/RCTWebSocket (0.68.5):
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Core/Default (= 0.68.4)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsiexecutor (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-Core/Default (= 0.68.5)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsiexecutor (= 0.68.5)
+    - React-perflogger (= 0.68.5)
    - Yoga
-  - React-CoreModules (0.68.4):
+  - React-CoreModules (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Codegen (= 0.68.4)
-    - React-Core/CoreModulesHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-RCTImage (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-cxxreact (0.68.4):
+    - RCTTypeSafety (= 0.68.5)
+    - React-Codegen (= 0.68.5)
+    - React-Core/CoreModulesHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-RCTImage (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-cxxreact (0.68.5):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-jsinspector (= 0.68.4)
-    - React-logger (= 0.68.4)
-    - React-perflogger (= 0.68.4)
-    - React-runtimeexecutor (= 0.68.4)
-  - React-jsi (0.68.4):
+    - React-callinvoker (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-jsinspector (= 0.68.5)
+    - React-logger (= 0.68.5)
+    - React-perflogger (= 0.68.5)
+    - React-runtimeexecutor (= 0.68.5)
+  - React-jsi (0.68.5):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-jsi/Default (= 0.68.4)
-  - React-jsi/Default (0.68.4):
+    - React-jsi/Default (= 0.68.5)
+  - React-jsi/Default (0.68.5):
    - boost (= 1.76.0)
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-  - React-jsiexecutor (0.68.4):
+  - React-jsiexecutor (0.68.5):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-perflogger (= 0.68.4)
-  - React-jsinspector (0.68.4)
-  - React-logger (0.68.4):
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-perflogger (= 0.68.5)
+  - React-jsinspector (0.68.5)
+  - React-logger (0.68.5):
    - glog
  - react-native-background-timer (2.4.1):
    - React-Core
@@ -390,71 +390,71 @@ PODS:
    - React-Core
  - react-native-webview (11.15.1):
    - React-Core
-  - React-perflogger (0.68.4)
-  - React-RCTActionSheet (0.68.4):
-    - React-Core/RCTActionSheetHeaders (= 0.68.4)
-  - React-RCTAnimation (0.68.4):
+  - React-perflogger (0.68.5)
+  - React-RCTActionSheet (0.68.5):
+    - React-Core/RCTActionSheetHeaders (= 0.68.5)
+  - React-RCTAnimation (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTAnimationHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTBlob (0.68.4):
+    - RCTTypeSafety (= 0.68.5)
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTAnimationHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTBlob (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTBlobHeaders (= 0.68.4)
-    - React-Core/RCTWebSocket (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-RCTNetwork (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTImage (0.68.4):
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTBlobHeaders (= 0.68.5)
+    - React-Core/RCTWebSocket (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-RCTNetwork (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTImage (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTImageHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-RCTNetwork (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTLinking (0.68.4):
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTLinkingHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTNetwork (0.68.4):
+    - RCTTypeSafety (= 0.68.5)
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTImageHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-RCTNetwork (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTLinking (0.68.5):
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTLinkingHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTNetwork (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTNetworkHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTSettings (0.68.4):
+    - RCTTypeSafety (= 0.68.5)
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTNetworkHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTSettings (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - RCTTypeSafety (= 0.68.4)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTSettingsHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-RCTText (0.68.4):
-    - React-Core/RCTTextHeaders (= 0.68.4)
-  - React-RCTVibration (0.68.4):
+    - RCTTypeSafety (= 0.68.5)
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTSettingsHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-RCTText (0.68.5):
+    - React-Core/RCTTextHeaders (= 0.68.5)
+  - React-RCTVibration (0.68.5):
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-Codegen (= 0.68.4)
-    - React-Core/RCTVibrationHeaders (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - ReactCommon/turbomodule/core (= 0.68.4)
-  - React-runtimeexecutor (0.68.4):
-    - React-jsi (= 0.68.4)
-  - ReactCommon/turbomodule/core (0.68.4):
+    - React-Codegen (= 0.68.5)
+    - React-Core/RCTVibrationHeaders (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - ReactCommon/turbomodule/core (= 0.68.5)
+  - React-runtimeexecutor (0.68.5):
+    - React-jsi (= 0.68.5)
+  - ReactCommon/turbomodule/core (0.68.5):
    - DoubleConversion
    - glog
    - RCT-Folly (= 2021.06.28.00-v2)
-    - React-callinvoker (= 0.68.4)
-    - React-Core (= 0.68.4)
-    - React-cxxreact (= 0.68.4)
-    - React-jsi (= 0.68.4)
-    - React-logger (= 0.68.4)
-    - React-perflogger (= 0.68.4)
+    - React-callinvoker (= 0.68.5)
+    - React-Core (= 0.68.5)
+    - React-cxxreact (= 0.68.5)
+    - React-jsi (= 0.68.5)
+    - React-logger (= 0.68.5)
+    - React-perflogger (= 0.68.5)
  - RNCalendarEvents (2.2.0):
    - React
  - RNCAsyncStorage (1.17.3):
@@ -706,8 +706,8 @@ SPEC CHECKSUMS:
  boost: a7c83b31436843459a1961bfd74b96033dc77234
  CocoaLumberjack: b7e05132ff94f6ae4dfa9d5bce9141893a21d9da
  DoubleConversion: 831926d9b8bf8166fd87886c4abab286c2422662
-  FBLazyVector: 023a2028f218d648b588348bfa9261b4914b93db
-  FBReactNativeSpec: 9f4902cc009389d3704ff75de2aa513dee34d5c2
+  FBLazyVector: 2b47ff52037bd9ae07cc9b051c9975797814b736
+  FBReactNativeSpec: 0e0d384ef17a33b385f13f0c7f97702c7cd17858
  Firebase: 5f8193dff4b5b7c5d5ef72ae54bb76c08e2b841d
  FirebaseAnalytics: 7761cbadb00a717d8d0939363eb46041526474fa
  FirebaseCore: 5743c5785c074a794d35f2fff7ecc254a91e08b1
@@ -732,18 +732,18 @@ SPEC CHECKSUMS:
  PromisesObjC: ab77feca74fa2823e7af4249b8326368e61014cb
  PromisesSwift: 99fddfe4a0ec88a56486644c0da106694c92a604
  RCT-Folly: 4d8508a426467c48885f1151029bc15fa5d7b3b8
-  RCTRequired: e6003505912d056f21f64465063cf4b79418f2b9
-  RCTTypeSafety: d7ef4745c8d9c9faa65c26b4b6230fc5cd4c4424
-  React: 6692c30fb74ab29078b25c31c9841d863e08cdd9
-  React-callinvoker: fe2b234fa518d8bb7600707c536ab0a3e1f5edba
-  React-Codegen: 9964bb2422c7014894182ac50068caae05f68551
-  React-Core: a07bcd2f15ff93cddc9ceb07eddeec3d2ff8d990
-  React-CoreModules: 7fb4ee0fc35ad2b7daf775f0ef6309efdd8d3d82
-  React-cxxreact: 51a8058a35a2f02ad4175334a7cd24aa5558ced4
-  React-jsi: 69b974b418d2658a3f1799903be7cbcb8ac59755
-  React-jsiexecutor: 4f35a29798ba9d0d892a84001d11f626688dbb8e
-  React-jsinspector: 6f75220cd4b6020976d340ab21c63458dd3cad9e
-  React-logger: 7013d2499df6346e6a72802d4084badaaa82543b
+  RCTRequired: 0f06b6068f530932d10e1a01a5352fad4eaacb74
+  RCTTypeSafety: b0ee81f10ef1b7d977605a2b266823dabd565e65
+  React: 3becd12bd51ea8a43bdde7e09d0f40fba7820e03
+  React-callinvoker: 11abfff50e6bf7a55b3a90b4dc2187f71f224593
+  React-Codegen: f8946ce0768fb8e92e092e30944489c4b2955b2d
+  React-Core: 203cdb6ee2657b198d97d41031c249161060e6ca
+  React-CoreModules: 6eb0c06a4a223fde2cb6a8d0f44f58b67e808942
+  React-cxxreact: afb0c6c07d19adbd850747fedeac20c6832d40b9
+  React-jsi: 14d37a6db2af2c1a49f6f5c2e4ee667c364ae45c
+  React-jsiexecutor: 45c0496ca8cef6b02d9fa0274c25cf458fe91a56
+  React-jsinspector: eb202e43b3879aba9a14f3f65788aec85d4e1ea9
+  React-logger: 98f663b292a60967ebbc6d803ae96c1381183b6d
  react-native-background-timer: 17ea5e06803401a379ebf1f20505b793ac44d0fe
  react-native-get-random-values: 30b3f74ca34e30e2e480de48e4add2706a40ac8f
  react-native-keep-awake: afad8a51dfef9fe9655a6344771be32c8596d774
@@ -757,18 +757,18 @@ SPEC CHECKSUMS:
  react-native-video: bb6f12a7198db53b261fefb5d609dc77417acc8b
  react-native-webrtc: 4a4c31be61f88d1d3356526eebce72f462a6760e
  react-native-webview: ea4899a1056c782afa96dd082179a66cbebf5504
-  React-perflogger: 0b0500685176e53ea582c45179a653aa82e4ae49
-  React-RCTActionSheet: 38469be9d20242f9c717e43c2983e8e3e6c640c4
-  React-RCTAnimation: 93774f3e8857e7c3c1cbbd277056d02be4496be1
-  React-RCTBlob: 6d0567d7a6561b62feb8c3b1cc33b3c591ba85ab
-  React-RCTImage: 1006a91318a6181a0256b89d2e321b6ea0e2e6e3
-  React-RCTLinking: 0b2300493c879c3bcac2d4c6b0178e8d0e5e2202
-  React-RCTNetwork: b9a33a95703651abed92490e50396d54b7270a17
-  React-RCTSettings: e6464123e5b5062fc23bb5adb51188a6061e9601
-  React-RCTText: 188d6f0ae20cd28891f59ecad41028ee2f793757
-  React-RCTVibration: a67beb7d2f3c73e9b74c4124ef61b84c601be649
-  React-runtimeexecutor: 088723cf020113e64736a709f52719dbb359c73e
-  ReactCommon: 1a4f19f3b4366feec03a98bdbb200b6085c5000f
+  React-perflogger: 0458a87ea9a7342079e7a31b0d32b3734fb8415f
+  React-RCTActionSheet: 22538001ea2926dea001111dd2846c13a0730bc9
+  React-RCTAnimation: 732ce66878d4aa151d56a0d142b1105aa12fd313
+  React-RCTBlob: 9cb9e3e9a41d27be34aaf89b0e0f52c7ca415d57
+  React-RCTImage: 6bd16627eb9c4bb79903c4cdec7c551266ee1a5b
+  React-RCTLinking: e9edfc8919c8fa9a3f3c7b34362811f58a2ebba4
+  React-RCTNetwork: 880eccd21bbe2660a0b63da5ccba75c46eceeaa6
+  React-RCTSettings: 8c85d8188c97d6c6bd470af6631a6c4555b79bb3
+  React-RCTText: bbd275ee287730c5acbab1aadc0db39c25c5c64e
+  React-RCTVibration: 9819a3bf6230e4b2a99877c21268b0b2416157a1
+  React-runtimeexecutor: b1f1995089b90696dbc2a7ffe0059a80db5c8eb1
+  ReactCommon: 149e2c0acab9bac61378da0db5b2880a1b5ff59b
  RNCalendarEvents: 7e65eb4a94f53c1744d1e275f7fafcfaa619f7a3
  RNCAsyncStorage: 005c0e2f09575360f142d0d1f1f15e4ec575b1af
  RNCClipboard: 41d8d918092ae8e676f18adada19104fa3e68495
@@ -781,7 +781,7 @@ SPEC CHECKSUMS:
  RNSound: 27e8268bdb0a1f191f219a33267f7e0445e8d62f
  RNSVG: f3b60aeeaa81960e2e0536c3a9eef50b667ef3a9
  RNWatch: dae6c858a2051dbdcfb00b9a86cf4d90400263b4
-  Yoga: c926c8eec5c78a788b51e6c8a604825d00d694d7
+  Yoga: c4d61225a466f250c35c1ee78d2d0b3d41fe661c

 PODFILE CHECKSUM: e671cdcdb80fab67e305861c36bfae8ed5a5b0ef

--- a/lang/main-hu.json
+++ b/lang/main-hu.json
@@ -657,7 +657,7 @@
        "login": "Bejelentkezés",
        "logout": "Kijelentkezés",
        "lowerYourHand": "Kéz leengedése",
-        "moreActions": "További műveltek",
+        "moreActions": "További műveletek",
        "moreOptions": "További beállítások",
        "mute": "Némítás / Visszahangosítás",
        "muteEveryone": "Mindenki elnémítása",
--- a/lang/main.json
+++ b/lang/main.json
@@ -649,6 +649,8 @@
        "connectedOneMember": "{{name}} joined the meeting",
        "connectedThreePlusMembers": "{{name}} and many others joined the meeting",
        "connectedTwoMembers": "{{first}} and {{second}} joined the meeting",
+        "dataChannelClosed": "Video quality impaired",
+        "dataChannelClosedDescription": "The bridge channel has been disconnected and thus video quality is limited to its lowest setting.",
        "disconnected": "disconnected",
        "displayNotifications": "Display notifications for",
        "focus": "Conference focus",
--- a/modules/API/API.js
+++ b/modules/API/API.js
@@ -1450,6 +1450,22 @@ class API {
        });
    }

+    /**
+     * Notify external application that the data channel has been closed.
+     *
+     * @param {number} code - The close code.
+     * @param {string} reason - The close reason.
+     *
+     * @returns {void}
+     */
+    notifyDataChannelClosed(code: number, reason: string) {
+        this._sendEvent({
+            name: 'data-channel-closed',
+            code,
+            reason
+        });
+    }
+
    /**
     * Notify external application that the data channel has been opened.
     *
--- a/modules/API/external/external_api.js
+++ b/modules/API/external/external_api.js
@@ -106,6 +106,7 @@ const events = {
    'camera-error': 'cameraError',
    'chat-updated': 'chatUpdated',
    'content-sharing-participants-changed': 'contentSharingParticipantsChanged',
+    'data-channel-closed': 'dataChannelClosed',
    'data-channel-opened': 'dataChannelOpened',
    'device-list-changed': 'deviceListChanged',
    'display-name-change': 'displayNameChange',
--- a/package-lock.json
+++ b/package-lock.json
@@ -74,7 +74,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/v1535.0.0+e6263e7c/lib-jitsi-meet.tgz",
+        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1538.0.0+871968af/lib-jitsi-meet.tgz",
        "lodash": "4.17.21",
        "moment": "2.29.4",
        "moment-duration-format": "2.2.2",
@@ -88,7 +88,7 @@
        "react-focus-lock": "2.5.1",
        "react-i18next": "10.11.4",
        "react-linkify": "1.0.0-alpha",
-        "react-native": "0.68.4",
+        "react-native": "0.68.5",
        "react-native-background-timer": "2.4.1",
        "react-native-calendar-events": "2.2.0",
        "react-native-callstats": "3.73.7",
@@ -147,7 +147,7 @@
        "@types/js-md5": "0.4.3",
        "@types/lodash": "4.14.182",
        "@types/react": "17.0.14",
-        "@types/react-native": "0.68.7",
+        "@types/react-native": "0.68.9",
        "@types/react-redux": "7.1.24",
        "@types/react-window": "1.8.5",
        "@types/unorm": "1.3.28",
@@ -6493,9 +6493,9 @@
      }
    },
    "node_modules/@types/react-native": {
-      "version": "0.68.7",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.68.7.tgz",
-      "integrity": "sha512-icGr0/iTPLsvIrUoLvu5uluDFBMZEir+DbwgrHnvazO3fJv1C/kpZZLGplQ3noYyDLjuBynwOUgoaZpGyFI4Iw==",
+      "version": "0.68.9",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.68.9.tgz",
+      "integrity": "sha512-/1nbdoynVMjNsudurxHiEf9rSdviKAkV+pVgwpNk21v7gKJfzoHyT3nFunPuMoDgvvdZR5ofUrOJuCPbzF2GUw==",
      "dev": true,
      "dependencies": {
        "@types/react": "^17"
@@ -13497,8 +13497,8 @@
    },
    "node_modules/lib-jitsi-meet": {
      "version": "0.0.0",
-      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1535.0.0+e6263e7c/lib-jitsi-meet.tgz",
-      "integrity": "sha512-RgMoesoWyscWi2fL9Hxp8PUwDlUtHbo+GhXosD3GeKR0zmihu/kxTONMUifGQnF8XdtcjaZfL2jCJynLwYKlkw==",
+      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1538.0.0+871968af/lib-jitsi-meet.tgz",
+      "integrity": "sha512-Nd6r6BWQXUE46lnXCtIa/kZoROBQN1Cbn5FEswrFBxhZ0/+JFpsMAwrNa/HThaNsGYkgN7fPoP4Xlq5r/M2o4Q==",
      "license": "Apache-2.0",
      "dependencies": {
        "@jitsi/js-utils": "2.0.0",
@@ -16128,9 +16128,9 @@
      }
    },
    "node_modules/react-native": {
-      "version": "0.68.4",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.68.4.tgz",
-      "integrity": "sha512-Hp5qwztQ1XNnV43QTz1kUx33iZHmJqbbe7L19V9psaWtX/h9j6SEtZ3UHBrigIPlppkIP1E5x3CDr9FdD4d6CA==",
+      "version": "0.68.5",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.68.5.tgz",
+      "integrity": "sha512-t3kiQ/gumFV+0r/NRSIGtYxanjY4da0utFqHgkMcRPJVwXFWC0Fr8YiOeRGYO1dp8EfrSsOjtfWic/inqVYlbQ==",
      "dependencies": {
        "@jest/create-cache-key-function": "^27.0.1",
        "@react-native-community/cli": "^7.0.3",
@@ -25178,9 +25178,9 @@
      }
    },
    "@types/react-native": {
-      "version": "0.68.7",
-      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.68.7.tgz",
-      "integrity": "sha512-icGr0/iTPLsvIrUoLvu5uluDFBMZEir+DbwgrHnvazO3fJv1C/kpZZLGplQ3noYyDLjuBynwOUgoaZpGyFI4Iw==",
+      "version": "0.68.9",
+      "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.68.9.tgz",
+      "integrity": "sha512-/1nbdoynVMjNsudurxHiEf9rSdviKAkV+pVgwpNk21v7gKJfzoHyT3nFunPuMoDgvvdZR5ofUrOJuCPbzF2GUw==",
      "dev": true,
      "requires": {
        "@types/react": "^17"
@@ -30510,8 +30510,8 @@
      }
    },
    "lib-jitsi-meet": {
-      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1535.0.0+e6263e7c/lib-jitsi-meet.tgz",
-      "integrity": "sha512-RgMoesoWyscWi2fL9Hxp8PUwDlUtHbo+GhXosD3GeKR0zmihu/kxTONMUifGQnF8XdtcjaZfL2jCJynLwYKlkw==",
+      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1538.0.0+871968af/lib-jitsi-meet.tgz",
+      "integrity": "sha512-Nd6r6BWQXUE46lnXCtIa/kZoROBQN1Cbn5FEswrFBxhZ0/+JFpsMAwrNa/HThaNsGYkgN7fPoP4Xlq5r/M2o4Q==",
      "requires": {
        "@jitsi/js-utils": "2.0.0",
        "@jitsi/logger": "2.0.0",
@@ -32535,9 +32535,9 @@
      }
    },
    "react-native": {
-      "version": "0.68.4",
-      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.68.4.tgz",
-      "integrity": "sha512-Hp5qwztQ1XNnV43QTz1kUx33iZHmJqbbe7L19V9psaWtX/h9j6SEtZ3UHBrigIPlppkIP1E5x3CDr9FdD4d6CA==",
+      "version": "0.68.5",
+      "resolved": "https://registry.npmjs.org/react-native/-/react-native-0.68.5.tgz",
+      "integrity": "sha512-t3kiQ/gumFV+0r/NRSIGtYxanjY4da0utFqHgkMcRPJVwXFWC0Fr8YiOeRGYO1dp8EfrSsOjtfWic/inqVYlbQ==",
      "requires": {
        "@jest/create-cache-key-function": "^27.0.1",
        "@react-native-community/cli": "^7.0.3",
--- a/package.json
+++ b/package.json
@@ -79,7 +79,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/v1535.0.0+e6263e7c/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1538.0.0+871968af/lib-jitsi-meet.tgz",
    "lodash": "4.17.21",
    "moment": "2.29.4",
    "moment-duration-format": "2.2.2",
@@ -93,7 +93,7 @@
    "react-focus-lock": "2.5.1",
    "react-i18next": "10.11.4",
    "react-linkify": "1.0.0-alpha",
-    "react-native": "0.68.4",
+    "react-native": "0.68.5",
    "react-native-background-timer": "2.4.1",
    "react-native-calendar-events": "2.2.0",
    "react-native-callstats": "3.73.7",
@@ -152,7 +152,7 @@
    "@types/js-md5": "0.4.3",
    "@types/lodash": "4.14.182",
    "@types/react": "17.0.14",
-    "@types/react-native": "0.68.7",
+    "@types/react-native": "0.68.9",
    "@types/react-redux": "7.1.24",
    "@types/react-window": "1.8.5",
    "@types/unorm": "1.3.28",
--- a/patches/react-native+0.68.5.patch
+++ b/patches/react-native+0.68.5.patch
--- a/react/features/base/color-scheme/defaultScheme.js
+++ b/react/features/base/color-scheme/defaultScheme.js
@@ -1,5 +1,3 @@
-// @flow
-
 import { ColorPalette, getRGBAFormat } from '../styles';

 /**
@@ -14,21 +12,6 @@ export default {
        icon: 'rgb(28, 32, 37)',
        text: 'rgb(28, 32, 37)'
    },
-    'Chat': {
-        displayName: 'rgb(94, 109, 121)',
-        localMsgBackground: 'rgb(215, 230, 249)',
-        lobbyMsgBackground: 'rgb(106, 80, 211)',
-        lobbyMsgNotice: 'rgb(16, 10, 41)',
-        privateMsgBackground: 'rgb(250, 219, 219)',
-        privateMsgNotice: 'rgb(186, 39, 58)',
-        remoteMsgBackground: 'rgb(241, 242, 246)',
-        replyBorder: 'rgb(219, 197, 200)',
-        replyIcon: 'rgb(94, 109, 121)'
-    },
-    'Conference': {
-        inviteButtonBackground: 'rgb(0, 119, 225)',
-        onVideoText: 'white'
-    },
    'Dialog': {},
    'Header': {
        background: ColorPalette.blue,
--- a/react/features/base/conference/actionTypes.ts
+++ b/react/features/base/conference/actionTypes.ts
@@ -138,6 +138,18 @@ export const CONFERENCE_WILL_LEAVE = 'CONFERENCE_WILL_LEAVE';
 */
 export const DATA_CHANNEL_OPENED = 'DATA_CHANNEL_OPENED';

+/**
+ * The type of (redux) action which signals that the data channel with the
+ * bridge has been closed.
+ *
+ * {
+ *     type: DATA_CHANNEL_CLOSED,
+ *     code: number,
+ *     reason: string
+ * }
+ */
+export const DATA_CHANNEL_CLOSED = 'DATA_CHANNEL_CLOSED';
+
 /**
 * The type of action which signals that the user has been kicked out from
 * the conference.
--- a/react/features/base/conference/actions.ts
+++ b/react/features/base/conference/actions.ts
@@ -41,6 +41,7 @@ import {
    CONFERENCE_UNIQUE_ID_SET,
    CONFERENCE_WILL_JOIN,
    CONFERENCE_WILL_LEAVE,
+    DATA_CHANNEL_CLOSED,
    DATA_CHANNEL_OPENED,
    E2E_RTT_CHANGED,
    KICKED_OUT,
@@ -581,6 +582,26 @@ export function dataChannelOpened() {
    };
 }

+/**
+ * Signals the data channel with the bridge was abruptly closed.
+ *
+ * @param {number} code - Close code.
+ * @param {string} reason - Close reason.
+ *
+ * @returns {{
+ *     type: DATA_CHANNEL_CLOSED,
+ *     code: number,
+ *     reason: string
+ * }}
+ */
+export function dataChannelClosed(code: number, reason: string) {
+    return {
+        type: DATA_CHANNEL_CLOSED,
+        code,
+        reason
+    };
+}
+
 /**
 * Action to end a conference for all participants.
 *
--- a/react/features/base/react/components/native/Linkify.js
+++ b/react/features/base/react/components/native/Linkify.js
@@ -19,7 +19,12 @@ type Props = {
    /**
     * The extra styles to be applied to links.
     */
-    linkStyle: StyleType
+    linkStyle: StyleType,
+
+    /**
+     * The extra styles to be applied to text.
+     */
+    style?: StyleType
 };

 /**
@@ -46,7 +51,9 @@ export default class Linkify extends Component<Props> {
        return (
            <ReactLinkify
                componentDecorator = { this._componentDecorator }>
-                <Text selectable = { true }>
+                <Text
+                    selectable = { true }
+                    style = { this.props.style }>
                    { this.props.children }
                </Text>
            </ReactLinkify>
--- a/react/features/base/ui/components/web/ClickableIcon.tsx
+++ b/react/features/base/ui/components/web/ClickableIcon.tsx
@@ -6,6 +6,7 @@ import Icon from '../../../icons/components/Icon';

 interface IProps {
    accessibilityLabel: string;
+    className?: string;
    icon: Function;
    id?: string;
    onClick: () => void;
@@ -40,14 +41,14 @@ const useStyles = makeStyles()(theme => {
    };
 });

-const ClickableIcon = ({ accessibilityLabel, icon, id, onClick }: IProps) => {
+const ClickableIcon = ({ accessibilityLabel, className, icon, id, onClick }: IProps) => {
    const { classes: styles, cx } = useStyles();
    const isMobile = isMobileBrowser();

    return (
        <button
            aria-label = { accessibilityLabel }
-            className = { cx(styles.button, isMobile && 'is-mobile') }
+            className = { cx(styles.button, isMobile && 'is-mobile', className) }
            id = { id }
            onClick = { onClick }>
            <Icon
--- a/react/features/base/ui/components/web/Dialog.tsx
+++ b/react/features/base/ui/components/web/Dialog.tsx
@@ -67,7 +67,7 @@ const useStyles = makeStyles()(theme => {
            flexDirection: 'column',
            height: 'auto',
            minHeight: '200px',
-            maxHeight: '560px',
+            maxHeight: '760px',
            marginTop: '64px',
            animation: `${keyframes`
                0% {
@@ -137,6 +137,12 @@ const useStyles = makeStyles()(theme => {
            justifyContent: 'space-between'
        },

+        closeIcon: {
+            '&:focus': {
+                boxShadow: 'none'
+            }
+        },
+
        title: {
            color: theme.palette.text01,
            ...withPixelLineHeight(theme.typography.heading5),
@@ -278,6 +284,7 @@ const Dialog = ({
                        {!hideCloseButton && (
                            <ClickableIcon
                                accessibilityLabel = { t('dialog.close') }
+                                className = { classes.closeIcon }
                                icon = { IconCloseLarge }
                                id = 'modal-header-close-button'
                                onClick = { onClose } />
--- a/react/features/chat/components/native/Chat.js
+++ b/react/features/chat/components/native/Chat.js
@@ -1,4 +1,4 @@
-// @flow
+/* eslint-disable react/no-multi-comp */

 import { useIsFocused } from '@react-navigation/native';
 import React, { useEffect } from 'react';
@@ -6,7 +6,8 @@ import React, { useEffect } from 'react';
 import { translate } from '../../../base/i18n';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { connect } from '../../../base/redux';
-import { closeChat } from '../../actions.any';
+import { TabBarLabelCounter } from '../../../mobile/navigation/components/TabBarLabelCounter';
+import { closeChat } from '../../actions.native';
 import AbstractChat, {
    type Props as AbstractProps,
    _mapStateToProps
@@ -17,14 +18,8 @@ import MessageContainer from './MessageContainer';
 import MessageRecipient from './MessageRecipient';
 import styles from './styles';

-
 type Props = AbstractProps & {

-    /**
-     * Is this screen focused or not(React Navigation).
-     */
-    isChatScreenFocused: boolean,
-
    /**
     * Default prop for navigating between screen components(React Navigation).
     */
@@ -41,7 +36,6 @@ type Props = AbstractProps & {
 * the mobile client.
 */
 class Chat extends AbstractChat<Props> {
-
    /**
     * Implements React's {@link Component#render()}.
     *
@@ -49,7 +43,7 @@ class Chat extends AbstractChat<Props> {
     */
    render() {
        const { _messages, route } = this.props;
-        const privateMessageRecipient = route.params?.privateMessageRecipient;
+        const privateMessageRecipient = route?.params?.privateMessageRecipient;

        return (
            <JitsiScreen
@@ -68,28 +62,26 @@ class Chat extends AbstractChat<Props> {
 }

 export default translate(connect(_mapStateToProps)(props => {
-    const {
-        _nbUnreadMessages,
-        navigation,
-        t
-    } = props;
-    const isChatScreenFocused = useIsFocused();
+    const { _nbUnreadMessages, dispatch, navigation, t } = props;
+    const unreadMessagesNr = _nbUnreadMessages > 0;

-    const nrUnreadMessages
-        = !isChatScreenFocused && _nbUnreadMessages > 0
-            ? `(${_nbUnreadMessages})` : '';
+    const isFocused = useIsFocused();

    useEffect(() => {
-        navigation.setOptions({
-            tabBarLabel: `${t('chat.tabs.chat')} ${nrUnreadMessages}`
+        navigation?.setOptions({
+            tabBarLabel: () => (
+                <TabBarLabelCounter
+                    activeUnreadNr = { unreadMessagesNr }
+                    isFocused = { isFocused }
+                    label = { t('chat.tabs.chat') }
+                    nbUnread = { _nbUnreadMessages } />
+            )
        });

-        return () => props.dispatch(closeChat());
-    }, [ nrUnreadMessages ]);
+        return () => isFocused && dispatch(closeChat());
+    }, [ isFocused, _nbUnreadMessages ]);

    return (
-        <Chat
-            { ...props }
-            isChatScreenFocused = { isChatScreenFocused } />
+        <Chat { ...props } />
    );
 }));
--- a/react/features/chat/components/native/ChatButton.js
+++ b/react/features/chat/components/native/ChatButton.js
@@ -1,5 +1,3 @@
-// @flow
-
 import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { IconChatUnread, IconMessage } from '../../../base/icons';
@@ -10,9 +8,9 @@ import {
 } from '../../../base/toolbox/components';
 import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';
+import { getUnreadPollCount } from '../../../polls/functions';
 import { getUnreadCount } from '../../functions';

-
 type Props = AbstractButtonProps & {

    /**
@@ -72,7 +70,9 @@ function _mapStateToProps(state, ownProps) {

    return {
        _isPollsDisabled: disablePolls,
-        _unreadMessageCount: getUnreadCount(state),
+
+        // The toggled icon should also be available for new polls
+        _unreadMessageCount: getUnreadCount(state) || getUnreadPollCount(state),
        visible
    };
 }
--- a/react/features/chat/components/native/ChatMessage.js
+++ b/react/features/chat/components/native/ChatMessage.js
@@ -1,30 +1,19 @@
-// @flow
-
 import React from 'react';
 import { Text, View } from 'react-native';

 import { Avatar } from '../../../base/avatar';
-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
 import { Linkify } from '../../../base/react';
 import { connect } from '../../../base/redux';
-import { type StyleType } from '../../../base/styles';
 import { isGifMessage } from '../../../gifs/functions';
 import { MESSAGE_TYPE_ERROR, MESSAGE_TYPE_LOCAL } from '../../constants';
 import { replaceNonUnicodeEmojis } from '../../functions';
-import AbstractChatMessage, { type Props as AbstractProps } from '../AbstractChatMessage';
+import AbstractChatMessage, { type Props } from '../AbstractChatMessage';

 import GifMessage from './GifMessage';
 import PrivateMessageButton from './PrivateMessageButton';
 import styles from './styles';

-type Props = AbstractProps & {
-
-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _styles: StyleType
-};

 /**
 * Renders a single chat message.
@@ -36,7 +25,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
     * @inheritdoc
     */
    render() {
-        const { _styles, message, knocking } = this.props;
+        const { message, knocking } = this.props;
        const localMessage = message.messageType === MESSAGE_TYPE_LOCAL;
        const { privateMessage, lobbyChat } = message;

@@ -56,7 +45,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
            detailsWrapperStyle.push(styles.ownMessageDetailsWrapper);

            // The bubble needs some additional styling
-            messageBubbleStyle.push(_styles.localMessageBubble);
+            messageBubbleStyle.push(styles.localMessageBubble);
        } else if (message.messageType === MESSAGE_TYPE_ERROR) {
            // This is a system message.

@@ -66,15 +55,15 @@ class ChatMessage extends AbstractChatMessage<Props> {
            // This is a remote message sent by a remote participant.

            // The bubble needs some additional styling
-            messageBubbleStyle.push(_styles.remoteMessageBubble);
+            messageBubbleStyle.push(styles.remoteMessageBubble);
        }

        if (privateMessage) {
-            messageBubbleStyle.push(_styles.privateMessageBubble);
+            messageBubbleStyle.push(styles.privateMessageBubble);
        }

        if (lobbyChat && !knocking) {
-            messageBubbleStyle.push(_styles.lobbyMessageBubble);
+            messageBubbleStyle.push(styles.lobbyMessageBubble);
        }

        const messageText = replaceNonUnicodeEmojis(this._getMessageText());
@@ -86,11 +75,13 @@ class ChatMessage extends AbstractChatMessage<Props> {
                    <View style = { messageBubbleStyle }>
                        <View style = { styles.textWrapper } >
                            { this._renderDisplayName() }
-                            {isGifMessage(messageText)
+                            { isGifMessage(messageText)
                                ? <GifMessage message = { messageText } />
                                : (
-                                    <Linkify linkStyle = { styles.chatLink }>
-                                        {messageText}
+                                    <Linkify
+                                        linkStyle = { styles.chatLink }
+                                        style = { styles.chatMessage }>
+                                        { messageText }
                                    </Linkify>
                                )}
                            { this._renderPrivateNotice() }
@@ -134,14 +125,14 @@ class ChatMessage extends AbstractChatMessage<Props> {
     * @returns {React$Element<*> | null}
     */
    _renderDisplayName() {
-        const { _styles, message, showDisplayName } = this.props;
+        const { message, showDisplayName } = this.props;

        if (!showDisplayName) {
            return null;
        }

        return (
-            <Text style = { _styles.displayName }>
+            <Text style = { styles.senderDisplayName }>
                { message.displayName }
            </Text>
        );
@@ -153,14 +144,14 @@ class ChatMessage extends AbstractChatMessage<Props> {
     * @returns {React$Element<*> | null}
     */
    _renderPrivateNotice() {
-        const { _styles, message, knocking } = this.props;
+        const { message, knocking } = this.props;

        if (!(message.privateMessage || (message.lobbyChat && !knocking))) {
            return null;
        }

        return (
-            <Text style = { message.lobbyChat ? _styles.lobbyMsgNotice : _styles.privateNotice }>
+            <Text style = { message.lobbyChat ? styles.lobbyMsgNotice : styles.privateNotice }>
                { this._getPrivateNoticeMessage() }
            </Text>
        );
@@ -172,7 +163,7 @@ class ChatMessage extends AbstractChatMessage<Props> {
     * @returns {React$Element<*> | null}
     */
    _renderPrivateReplyButton() {
-        const { _styles, message, knocking } = this.props;
+        const { message, knocking } = this.props;
        const { messageType, privateMessage, lobbyChat } = message;

        if (!(privateMessage || lobbyChat) || messageType === MESSAGE_TYPE_LOCAL || knocking) {
@@ -180,13 +171,13 @@ class ChatMessage extends AbstractChatMessage<Props> {
        }

        return (
-            <View style = { _styles.replyContainer }>
+            <View style = { styles.replyContainer }>
                <PrivateMessageButton
                    isLobbyMessage = { lobbyChat }
                    participantID = { message.id }
                    reply = { true }
                    showLabel = { false }
-                    toggledStyles = { _styles.replyStyles } />
+                    toggledStyles = { styles.replyStyles } />
            </View>
        );
    }
@@ -217,7 +208,6 @@ class ChatMessage extends AbstractChatMessage<Props> {
 */
 function _mapStateToProps(state) {
    return {
-        _styles: ColorSchemeRegistry.get(state, 'Chat'),
        knocking: state['features/lobby'].knocking
    };
 }
--- a/react/features/chat/components/native/ChatMessageGroup.js
+++ b/react/features/chat/components/native/ChatMessageGroup.js
@@ -1,6 +1,4 @@
-// @flow
-
-import React, { Component } from 'react';
+import React, { Component, ReactElement } from 'react';
 import { FlatList } from 'react-native';

 import { MESSAGE_TYPE_LOCAL, MESSAGE_TYPE_REMOTE } from '../../constants';
@@ -60,7 +58,7 @@ export default class ChatMessageGroup extends Component<Props> {
        return `key_${index}`;
    }

-    _renderMessage: Object => React$Element<*>;
+    _renderMessage: Object => ReactElement;

    /**
     * Renders a single chat message.
--- a/react/features/chat/components/native/ChatPrivacyDialog.js
+++ b/react/features/chat/components/native/ChatPrivacyDialog.js
@@ -1,5 +1,3 @@
-// @flow
-
 import React from 'react';

 import { ConfirmDialog } from '../../../base/dialog';
--- a/react/features/chat/components/native/MessageContainer.js
+++ b/react/features/chat/components/native/MessageContainer.js
@@ -1,12 +1,8 @@
-// @flow
-
-import React from 'react';
+import React, { ReactElement } from 'react';
 import { FlatList, Text, View } from 'react-native';

-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
 import { connect } from '../../../base/redux';
-import { StyleType } from '../../../base/styles';
 import AbstractMessageContainer, { type Props as AbstractProps }
    from '../AbstractMessageContainer';

@@ -15,11 +11,6 @@ import styles from './styles';

 type Props = AbstractProps & {

-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _styles: StyleType,
-
    /**
     * Function to be used to translate i18n labels.
     */
@@ -82,7 +73,7 @@ class MessageContainer extends AbstractMessageContainer<Props> {
        return `key_${index}`;
    }

-    _renderListEmptyComponent: () => React$Element<any>;
+    _renderListEmptyComponent: () => ReactElement;

    /**
     * Renders a message when there are no messages in the chat yet.
@@ -90,18 +81,18 @@ class MessageContainer extends AbstractMessageContainer<Props> {
     * @returns {React$Element<any>}
     */
    _renderListEmptyComponent() {
-        const { _styles, t } = this.props;
+        const { t } = this.props;

        return (
            <View style = { styles.emptyComponentWrapper }>
-                <Text style = { _styles.emptyComponentText }>
+                <Text style = { styles.emptyComponentText }>
                    { t('chat.noMessagesMessage') }
                </Text>
            </View>
        );
    }

-    _renderMessageGroup: Object => React$Element<any>;
+    _renderMessageGroup: Object => ReactElement;

    /**
     * Renders a single chat message.
@@ -114,16 +105,4 @@ class MessageContainer extends AbstractMessageContainer<Props> {
    }
 }

-/**
- * Maps part of the redux state to the props of this component.
- *
- * @param {Object} state - The Redux state.
- * @returns {Props}
- */
-function _mapStateToProps(state) {
-    return {
-        _styles: ColorSchemeRegistry.get(state, 'Chat')
-    };
-}
-
-export default translate(connect(_mapStateToProps)(MessageContainer));
+export default translate(connect()(MessageContainer));
--- a/react/features/chat/components/native/MessageRecipient.js
+++ b/react/features/chat/components/native/MessageRecipient.js
@@ -1,13 +1,9 @@
-// @flow
-
 import React from 'react';
 import { Text, TouchableHighlight, View } from 'react-native';

-import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import { translate } from '../../../base/i18n';
-import { Icon, IconCloseCircle } from '../../../base/icons';
+import { Icon, IconCloseLarge } from '../../../base/icons';
 import { connect } from '../../../base/redux';
-import { type StyleType } from '../../../base/styles';
 import {
    setParams
 } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
@@ -16,14 +12,11 @@ import AbstractMessageRecipient, {
    type Props as AbstractProps
 } from '../AbstractMessageRecipient';

+import styles from './styles';
+

 type Props = AbstractProps & {

-    /**
-     * The color-schemed stylesheet of the feature.
-     */
-    _styles: StyleType,
-
    /**
     * The Redux dispatch function.
     */
@@ -99,14 +92,17 @@ class MessageRecipient extends AbstractMessageRecipient<Props> {
     * @returns {ReactElement}
     */
    render() {
-        const { _styles, privateMessageRecipient, t,
-            isLobbyChatActive, lobbyMessageRecipient } = this.props;
-
+        const {
+            isLobbyChatActive,
+            lobbyMessageRecipient,
+            privateMessageRecipient,
+            t
+        } = this.props;

        if (isLobbyChatActive) {
            return (
-                <View style = { _styles.lobbyMessageRecipientContainer }>
-                    <Text style = { _styles.messageRecipientText }>
+                <View style = { styles.lobbyMessageRecipientContainer }>
+                    <Text style = { styles.messageRecipientText }>
                        { t('chat.lobbyChatMessageTo', {
                            recipient: lobbyMessageRecipient.name
                        }) }
@@ -114,8 +110,8 @@ class MessageRecipient extends AbstractMessageRecipient<Props> {
                    <TouchableHighlight
                        onPress = { this._onResetLobbyMessageRecipient }>
                        <Icon
-                            src = { IconCloseCircle }
-                            style = { _styles.messageRecipientCancelIcon } />
+                            src = { IconCloseLarge }
+                            style = { styles.messageRecipientCancelIcon } />
                    </TouchableHighlight>
                </View>
            );
@@ -126,8 +122,8 @@ class MessageRecipient extends AbstractMessageRecipient<Props> {
        }

        return (
-            <View style = { _styles.messageRecipientContainer }>
-                <Text style = { _styles.messageRecipientText }>
+            <View style = { styles.messageRecipientContainer }>
+                <Text style = { styles.messageRecipientText }>
                    { t('chat.messageTo', {
                        recipient: privateMessageRecipient.name
                    }) }
@@ -136,8 +132,8 @@ class MessageRecipient extends AbstractMessageRecipient<Props> {
                    onPress = { this._onResetPrivateMessageRecipient }
                    underlayColor = { 'transparent' }>
                    <Icon
-                        src = { IconCloseCircle }
-                        style = { _styles.messageRecipientCancelIcon } />
+                        src = { IconCloseLarge }
+                        style = { styles.messageRecipientCancelIcon } />
                </TouchableHighlight>
            </View>
        );
@@ -154,7 +150,6 @@ function _mapStateToProps(state) {
    const { lobbyMessageRecipient, isLobbyChatActive } = state['features/chat'];

    return {
-        _styles: ColorSchemeRegistry.get(state, 'Chat'),
        isLobbyChatActive,
        lobbyMessageRecipient
    };
--- a/react/features/chat/components/native/PrivateMessageButton.js
+++ b/react/features/chat/components/native/PrivateMessageButton.js
@@ -1,5 +1,3 @@
-// @flow
-
 import { CHAT_ENABLED, getFeatureFlag } from '../../../base/flags';
 import { translate } from '../../../base/i18n';
 import { IconMessage, IconReply } from '../../../base/icons';
@@ -10,7 +8,6 @@ import { handleLobbyChatInitialized, openChat } from '../../../chat/actions';
 import { navigate } from '../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
 import { screen } from '../../../mobile/navigation/routes';

-
 export type Props = AbstractButtonProps & {

    /**
@@ -103,7 +100,7 @@ class PrivateMessageButton extends AbstractButton<Props, any> {
 * @param {Props} ownProps - The own props of the component.
 * @returns {Props}
 */
-export function _mapStateToProps(state: Object, ownProps: Props): $Shape<Props> {
+export function _mapStateToProps(state: Object, ownProps: Props) {
    const enabled = getFeatureFlag(state, CHAT_ENABLED, true);
    const { disablePolls } = state['features/base/config'];
    const { visible = enabled, isLobbyMessage, participantID } = ownProps;
--- a/react/features/chat/components/native/styles.js
+++ b/react/features/chat/components/native/styles.js
@@ -1,11 +1,19 @@
-// @flow
-
-import { ColorSchemeRegistry, schemeColor } from '../../../base/color-scheme';
-import { BoxModel, ColorPalette } from '../../../base/styles';
+import { BoxModel } from '../../../base/styles';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';

 const BUBBLE_RADIUS = 8;

+const recipientContainer = {
+    alignItems: 'center',
+    backgroundColor: BaseTheme.palette.support05,
+    borderRadius: BaseTheme.shape.borderRadius,
+    flexDirection: 'row',
+    height: 48,
+    marginBottom: BaseTheme.spacing[3],
+    marginHorizontal: BaseTheme.spacing[3],
+    padding: BaseTheme.spacing[2]
+};
+
 /**
 * The styles of the feature chat.
 *
@@ -16,16 +24,72 @@ const BUBBLE_RADIUS = 8;
 */
 export default {

+    /**
+     * Background of the chat screen.
+     */
+    backdrop: {
+        backgroundColor: BaseTheme.palette.ui10,
+        flex: 1
+    },
+
+    emptyComponentText: {
+        color: BaseTheme.palette.text03,
+        textAlign: 'center'
+    },
+
+    lobbyMessageBubble: {
+        backgroundColor: BaseTheme.palette.support06
+    },
+
+    lobbyMsgNotice: {
+        color: BaseTheme.palette.text04,
+        fontSize: 11,
+        marginTop: 6
+    },
+
+    privateNotice: {
+        ...BaseTheme.palette.bodyShortRegular,
+        color: BaseTheme.palette.text02
+    },
+
+    privateMessageBubble: {
+        backgroundColor: BaseTheme.palette.support05
+    },
+
+    remoteMessageBubble: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderTopLeftRadius: 0
+    },
+
+    replyContainer: {
+        alignSelf: 'stretch',
+        justifyContent: 'center'
+    },
+
+    replyStyles: {
+        iconStyle: {
+            color: BaseTheme.palette.icon01,
+            fontSize: 22,
+            padding: BaseTheme.spacing[2]
+        },
+        underlayColor: 'transparent'
+    },
+
    /**
     * Wrapper View for the avatar.
     */
    avatarWrapper: {
-        marginRight: 8,
+        marginRight: BaseTheme.spacing[2],
        width: 32
    },

    chatLink: {
-        color: ColorPalette.blue
+        color: BaseTheme.palette.link01
+    },
+
+    chatMessage: {
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01
    },

    /**
@@ -61,7 +125,7 @@ export default {
    },

    customInput: {
-        width: 280
+        width: 272
    },

    messageBubble: {
@@ -117,7 +181,7 @@ export default {
     * Text node for the timestamp.
     */
    timeText: {
-        color: 'rgb(164, 184, 209)',
+        color: BaseTheme.palette.text03,
        fontSize: 13
    },

@@ -154,97 +218,35 @@ export default {
        width: 250,
        height: undefined,
        flexGrow: 1
-    }
-};
-
-ColorSchemeRegistry.register('Chat', {
-    /**
-     * Background of the chat screen.
-     */
-    backdrop: {
-        backgroundColor: schemeColor('background'),
-        flex: 1
    },

-    /**
-     * The text node for the display name.
-     */
-    displayName: {
-        color: schemeColor('displayName'),
-        fontSize: 13
-    },
-
-    emptyComponentText: {
-        color: BaseTheme.palette.text03,
-        textAlign: 'center'
-    },
-
-    lobbyMessageBubble: {
-        backgroundColor: schemeColor('lobbyMsgBackground')
-    },
-
-    lobbyMsgNotice: {
-        color: schemeColor('lobbyMsgNotice'),
-        fontSize: 11,
-        marginTop: 6
-    },
-
-    lobbyMessageRecipientContainer: {
-        alignItems: 'center',
-        backgroundColor: schemeColor('lobbyMsgBackground'),
-        flexDirection: 'row',
-        padding: BoxModel.padding
+    senderDisplayName: {
+        ...BaseTheme.typography.bodyShortBold,
+        color: BaseTheme.palette.text02
    },

    localMessageBubble: {
-        backgroundColor: schemeColor('localMsgBackground'),
+        backgroundColor: BaseTheme.palette.ui04,
        borderTopRightRadius: 0
    },

+    lobbyMessageRecipientContainer: {
+        ...recipientContainer,
+        backgroundColor: BaseTheme.palette.support06
+    },
+
    messageRecipientCancelIcon: {
-        color: schemeColor('icon'),
+        color: BaseTheme.palette.icon01,
        fontSize: 18
    },

    messageRecipientContainer: {
-        alignItems: 'center',
-        backgroundColor: schemeColor('privateMsgBackground'),
-        flexDirection: 'row',
-        padding: BoxModel.padding
+        ...recipientContainer
    },

    messageRecipientText: {
-        color: schemeColor('text'),
+        ...BaseTheme.typography.bodyShortRegular,
+        color: BaseTheme.palette.text01,
        flex: 1
-    },
-
-    privateNotice: {
-        color: schemeColor('privateMsgNotice'),
-        fontSize: 11,
-        marginTop: 6
-    },
-
-    privateMessageBubble: {
-        backgroundColor: schemeColor('privateMsgBackground')
-    },
-
-    remoteMessageBubble: {
-        backgroundColor: schemeColor('remoteMsgBackground'),
-        borderTopLeftRadius: 0
-    },
-
-    replyContainer: {
-        alignSelf: 'stretch',
-        borderLeftColor: schemeColor('replyBorder'),
-        borderLeftWidth: 1,
-        justifyContent: 'center'
-    },
-
-    replyStyles: {
-        iconStyle: {
-            color: schemeColor('replyIcon'),
-            fontSize: 22,
-            padding: 8
-        }
    }
-});
+};
--- a/react/features/chat/components/web/Chat.js
+++ b/react/features/chat/components/web/Chat.js
@@ -1,5 +1,3 @@
-// @flow
-
 import clsx from 'clsx';
 import React from 'react';

--- a/react/features/conference/components/native/carmode/styles.js
+++ b/react/features/conference/components/native/carmode/styles.js
@@ -71,8 +71,7 @@ export default {
    },

    qualityLabelContainer: {
-        borderBottomLeftRadius: 3,
-        borderTopLeftRadius: 3,
+        borderRadius: BaseTheme.shape.borderRadius,
        flexShrink: 1,
        paddingHorizontal: 2,
        justifyContent: 'center',
--- a/react/features/external-api/middleware.ts
+++ b/react/features/external-api/middleware.ts
@@ -3,6 +3,7 @@ import { getJitsiMeetTransport } from '../../../modules/transport';
 import {
    CONFERENCE_FAILED,
    CONFERENCE_JOINED,
+    DATA_CHANNEL_CLOSED,
    DATA_CHANNEL_OPENED,
    KICKED_OUT
 } from '../base/conference/actionTypes';
@@ -124,6 +125,10 @@ MiddlewareRegistry.register(store => next => action => {
        break;
    }

+    case DATA_CHANNEL_CLOSED:
+        APP.API.notifyDataChannelClosed(action.code, action.reason);
+        break;
+
    case DATA_CHANNEL_OPENED:
        APP.API.notifyDataChannelOpened();
        break;
--- a/react/features/filmstrip/components/native/styles.js
+++ b/react/features/filmstrip/components/native/styles.js
@@ -1,5 +1,3 @@
-// @flow
-
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 import { SMALL_THUMBNAIL_SIZE } from '../../constants';

@@ -10,7 +8,7 @@ export const AVATAR_SIZE = 50;

 const indicatorContainer = {
    backgroundColor: 'rgba(0, 0, 0, 0.7)',
-    borderRadius: 4,
+    borderRadius: BaseTheme.shape.borderRadius,
    margin: 2,
    padding: 2
 };
@@ -119,7 +117,16 @@ export default {
        width: SMALL_THUMBNAIL_SIZE
    },

-    indicatorContainer,
+    indicatorContainer: {
+        ...indicatorContainer,
+        flexShrink: 1,
+        height: 32,
+        justifyContent: 'center',
+        marginBottom: BaseTheme.spacing[0],
+        marginHorizontal: BaseTheme.spacing[1],
+        marginTop: BaseTheme.spacing[2],
+        width: 32
+    },

    /**
     * The thumbnails indicator container.
--- a/react/features/filmstrip/components/web/Thumbnail.tsx
+++ b/react/features/filmstrip/components/web/Thumbnail.tsx
@@ -198,6 +198,11 @@ export interface IProps {
     */
    _raisedHand: boolean;

+    /**
+     * Whether or not to display a tint background over tile.
+     */
+    _shouldDisplayTintBackground: boolean;
+
    /**
     * Whether or not the current layout is stage filmstrip layout.
     */
@@ -360,6 +365,15 @@ const defaultStyles = (theme: Theme) => {
                objectFit: 'contain',
                flexGrow: '1'
            }
+        },
+
+        tintBackground: {
+            position: 'absolute' as const,
+            zIndex: 1,
+            width: '100%',
+            height: '100%',
+            backgroundColor: `${theme.palette.uiBackground}`,
+            opacity: 0.8
        }
    };
 };
@@ -965,6 +979,7 @@ class Thumbnail extends Component<IProps, IState> {
            _isTestModeEnabled,
            _localFlipX,
            _participant,
+            _shouldDisplayTintBackground,
            _thumbnailType,
            _videoTrack,
            classes,
@@ -1043,6 +1058,7 @@ class Thumbnail extends Component<IProps, IState> {
                        showPopover = { this._showPopover }
                        thumbnailType = { _thumbnailType } />
                </div>
+                {_shouldDisplayTintBackground && <div className = { classes.tintBackground } />}
                <div
                    className = { clsx(classes.indicatorsContainer,
                        classes.indicatorsBottomContainer,
@@ -1090,7 +1106,12 @@ class Thumbnail extends Component<IProps, IState> {
     * @returns {ReactElement}
     */
    render() {
-        const { _participant, _isTestModeEnabled, _isVirtualScreenshareParticipant } = this.props;
+        const {
+            _isTestModeEnabled,
+            _isVirtualScreenshareParticipant,
+            _participant,
+            _shouldDisplayTintBackground
+        } = this.props;
        const videoEventListeners: any = {};

        if (!_participant) {
@@ -1136,6 +1157,7 @@ class Thumbnail extends Component<IProps, IState> {
                    onTouchMove = { this._onTouchMove }
                    onTouchStart = { this._onTouchStart }
                    participantId = { _participant.id }
+                    shouldDisplayTintBackground = { _shouldDisplayTintBackground }
                    styles = { this._getStyles() }
                    thumbnailType = { _thumbnailType }
                    videoTrack = { _videoTrack } />
@@ -1264,6 +1286,11 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object {
    const { gifUrl: gifSrc } = getGifForParticipant(state, id ?? '');
    const mode = getGifDisplayMode(state);
    const participantId = isLocal ? getLocalParticipant(state)?.id : participantID;
+    const isActiveParticipant = activeParticipants.find((pId: string) => pId === participantId);
+    const participantCurrentlyOnLargeVideo = state['features/large-video']?.participantId === id;
+    const shouldDisplayTintBackground
+        = _currentLayout !== LAYOUTS.TILE_VIEW && filmstripType === FILMSTRIP_TYPE.MAIN
+        && (isActiveParticipant || participantCurrentlyOnLargeVideo);

    return {
        _audioTrack,
@@ -1271,10 +1298,10 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object {
        _defaultLocalDisplayName: defaultLocalDisplayName,
        _disableLocalVideoFlip: Boolean(disableLocalVideoFlip),
        _disableTileEnlargement: Boolean(disableTileEnlargement),
-        _isActiveParticipant: activeParticipants.find((pId: string) => pId === participantId),
+        _isActiveParticipant: isActiveParticipant,
        _isHidden: isLocal && iAmRecorder && !iAmSipGateway,
        _isAudioOnly: Boolean(state['features/base/audio-only'].enabled),
-        _isCurrentlyOnLargeVideo: state['features/large-video']?.participantId === id,
+        _isCurrentlyOnLargeVideo: participantCurrentlyOnLargeVideo,
        _isDominantSpeakerDisabled: interfaceConfig.DISABLE_DOMINANT_SPEAKER_INDICATOR,
        _isMobile,
        _isMobilePortrait,
@@ -1287,6 +1314,7 @@ function _mapStateToProps(state: IReduxState, ownProps: any): Object {
        _raisedHand: hasRaisedHand(participant),
        _stageFilmstripLayout: isStageFilmstripAvailable(state),
        _stageParticipantsVisible: _currentLayout === LAYOUTS.STAGE_FILMSTRIP_VIEW,
+        _shouldDisplayTintBackground: shouldDisplayTintBackground,
        _thumbnailType: tileType,
        _videoObjectPosition: getVideoObjectPosition(state, participant?.id),
        _videoTrack,
--- a/react/features/filmstrip/components/web/VirtualScreenshareParticipant.js
+++ b/react/features/filmstrip/components/web/VirtualScreenshareParticipant.js
@@ -77,6 +77,11 @@ type Props = {
     */
    participantId: string,

+    /**
+     * Whether or not to display a tint background over tile.
+     */
+    shouldDisplayTintBackground: boolean,
+
    /**
     * An object with the styles for thumbnail.
     */
@@ -107,6 +112,7 @@ const VirtualScreenshareParticipant = ({
    onTouchMove,
    onTouchStart,
    participantId,
+    shouldDisplayTintBackground,
    styles,
    videoTrack,
    thumbnailType
@@ -150,6 +156,7 @@ const VirtualScreenshareParticipant = ({
                    participantId = { participantId }
                    thumbnailType = { thumbnailType } />
            </div>
+            {shouldDisplayTintBackground && <div className = { classes.tintBackground } />}
            <div
                className = { clsx(classes.indicatorsContainer,
                        classes.indicatorsBottomContainer,
--- a/react/features/mobile/navigation/components/TabBarLabelCounter.tsx
+++ b/react/features/mobile/navigation/components/TabBarLabelCounter.tsx
@@ -0,0 +1,41 @@
+// @ts-ignore
+import React from 'react';
+import { StyleProp, Text, TextStyle, View } from 'react-native';
+
+// @ts-ignore
+import { navigationStyles } from './styles';
+
+interface ITabBarLabelCounterProps {
+    activeUnreadNr: boolean;
+    isFocused: boolean;
+    label: string;
+    nbUnread?: number;
+}
+
+export const TabBarLabelCounter = ({ activeUnreadNr, isFocused, label, nbUnread }: ITabBarLabelCounterProps) => {
+    const labelStyles = isFocused
+        ? navigationStyles.unreadCounterDescriptionFocused
+        : navigationStyles.unreadCounterDescription;
+
+    return (
+        <View
+            style = {
+                navigationStyles.unreadCounterContainer as StyleProp<TextStyle> }>
+            <Text
+                style = { labelStyles }>
+                { label && label }
+            </Text>
+            {
+                activeUnreadNr && (
+                    <View
+                        style = { navigationStyles.unreadCounterCircle as StyleProp<TextStyle> }>
+                        <Text
+                            style = { navigationStyles.unreadCounter as StyleProp<TextStyle> }>
+                            { nbUnread }
+                        </Text>
+                    </View>
+                )
+            }
+        </View>
+    );
+};
--- a/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigator.tsx
+++ b/react/features/mobile/navigation/components/chat/components/ChatAndPollsNavigator.tsx
@@ -1,9 +1,11 @@
 /* eslint-disable lines-around-comment */

 import { createMaterialTopTabNavigator } from '@react-navigation/material-top-tabs';
+// @ts-ignore
 import React from 'react';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';

+import { IReduxState } from '../../../../../app/types';
 import {
    getClientHeight,
    getClientWidth
@@ -11,6 +13,8 @@ import {
 } from '../../../../../base/modal/components/functions';
 // @ts-ignore
 import { Chat } from '../../../../../chat';
+import { setIsPollsTabFocused } from '../../../../../chat/actions.native';
+import { resetNbUnreadPollsMessages } from '../../../../../polls/actions';
 // @ts-ignore
 import { PollsPane } from '../../../../../polls/components';
 // @ts-ignore
@@ -23,6 +27,11 @@ const ChatTab = createMaterialTopTabNavigator();
 const ChatAndPolls = () => {
    const clientHeight = useSelector(getClientHeight);
    const clientWidth = useSelector(getClientWidth);
+    const dispatch = useDispatch();
+    const { isPollsTabFocused } = useSelector((state: IReduxState) => state['features/chat']);
+    const initialRouteName = isPollsTabFocused
+        ? screen.conference.chatandpolls.tab.polls
+        : screen.conference.chatandpolls.tab.chat;

    return (
        // @ts-ignore
@@ -32,12 +41,24 @@ const ChatAndPolls = () => {
                height: clientHeight,
                width: clientWidth
            }}
+            initialRouteName = { initialRouteName }
            screenOptions = { chatTabBarOptions }>
            <ChatTab.Screen
                component = { Chat }
+                listeners = {{
+                    tabPress: () => {
+                        dispatch(setIsPollsTabFocused(false));
+                    }
+                }}
                name = { screen.conference.chatandpolls.tab.chat } />
            <ChatTab.Screen
                component = { PollsPane }
+                listeners = {{
+                    tabPress: () => {
+                        dispatch(setIsPollsTabFocused(true));
+                        dispatch(resetNbUnreadPollsMessages);
+                    }
+                }}
                name = { screen.conference.chatandpolls.tab.polls } />
        </ChatTab.Navigator>
    );
--- a/react/features/mobile/navigation/components/styles.js
+++ b/react/features/mobile/navigation/components/styles.js
@@ -1,9 +1,14 @@
 import { BoxModel } from '../../../base/styles';
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';


 export const TEXT_COLOR = BaseTheme.palette.text01;

+const unreadCounterDescription = {
+    ...BaseTheme.typography.bodyShortBoldLarge,
+    color: BaseTheme.palette.text03
+};
+
 /**
 * Styles of the navigation feature.
 */
@@ -27,5 +32,35 @@ export const navigationStyles = {

    connectingScreenText: {
        color: TEXT_COLOR
+    },
+
+    unreadCounterContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row'
+    },
+
+    unreadCounterDescription: {
+        ...unreadCounterDescription
+    },
+
+    unreadCounterDescriptionFocused: {
+        ...unreadCounterDescription,
+        color: BaseTheme.palette.text01
+    },
+
+    unreadCounterCircle: {
+        backgroundColor: BaseTheme.palette.warning01,
+        borderRadius: BaseTheme.spacing[4] / 2,
+        height: BaseTheme.spacing[4],
+        justifyContent: 'center',
+        marginLeft: BaseTheme.spacing[2],
+        width: BaseTheme.spacing[4]
+    },
+
+    unreadCounter: {
+        ...BaseTheme.typography.bodyShortBold,
+        alignSelf: 'center',
+        color: BaseTheme.palette.text04
    }
 };
--- a/react/features/mobile/navigation/screenOptions.js
+++ b/react/features/mobile/navigation/screenOptions.js
@@ -67,19 +67,14 @@ export const conferenceScreenOptions = fullScreenOptions;
 * Tab bar options for chat screen.
 */
 export const chatTabBarOptions = {
-    tabBarActiveTintColor: BaseTheme.palette.field02,
-    tabBarLabelStyle: {
-        fontSize: BaseTheme.typography.labelRegular.fontSize,
-        textTransform: 'capitalize'
-    },
-    tabBarInactiveTintColor: BaseTheme.palette.text03,
+    swipeEnabled: false,
    tabBarIndicatorStyle: {
-        backgroundColor: BaseTheme.palette.field02
+        backgroundColor: BaseTheme.palette.link01Active
    },
    tabBarStyle: {
        backgroundColor: BaseTheme.palette.ui01,
        borderBottomColor: BaseTheme.palette.border05,
-        borderBottomWidth: 1
+        borderBottomWidth: 0.4
    }
 };

--- a/react/features/notifications/constants.ts
+++ b/react/features/notifications/constants.ts
@@ -56,6 +56,13 @@ export const NOTIFICATION_ICON = {
    PARTICIPANTS: 'participants'
 };

+/**
+ * The identifier of the disable self view notification.
+ *
+ * @type {string}
+ */
+export const DATA_CHANNEL_CLOSED_NOTIFICATION_ID = 'DATA_CHANNEL_CLOSED_NOTIFICATION_ID';
+
 /**
 * The identifier of the disable self view notification.
 *
--- a/react/features/polls/components/native/PollsList.js
+++ b/react/features/polls/components/native/PollsList.js
@@ -4,7 +4,7 @@ import { FlatList, View } from 'react-native';
 import { Text } from 'react-native-paper';
 import { useSelector } from 'react-redux';

-import { Icon, IconChatUnread } from '../../../base/icons';
+import { Icon, IconMessage } from '../../../base/icons';
 import BaseTheme from '../../../base/ui/components/BaseTheme.native';


@@ -41,7 +41,7 @@ const PollsList = () => {
                    <Icon
                        color = { BaseTheme.palette.icon03 }
                        size = { 160 }
-                        src = { IconChatUnread } />
+                        src = { IconMessage } />
                    <Text style = { chatStyles.noPollText } >
                        {
                            t('polls.results.empty')
--- a/react/features/polls/components/native/PollsPane.js
+++ b/react/features/polls/components/native/PollsPane.js
@@ -1,14 +1,14 @@
 /* eslint-disable react-native/no-color-literals */
-// @flow

-import { useIsFocused, useNavigation } from '@react-navigation/native';
+import { useNavigation } from '@react-navigation/native';
 import React, { useEffect } from 'react';
 import { useSelector } from 'react-redux';

 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import Button from '../../../base/ui/components/native/Button';
 import { BUTTON_TYPES } from '../../../base/ui/constants.native';
-import { getUnreadPollCount } from '../../functions';
+import { TabBarLabelCounter }
+    from '../../../mobile/navigation/components/TabBarLabelCounter';
 import AbstractPollsPane from '../AbstractPollsPane';
 import type { AbstractProps } from '../AbstractPollsPane';

@@ -19,19 +19,25 @@ import { chatStyles } from './styles';

 const PollsPane = (props: AbstractProps) => {
    const { createMode, onCreate, setCreateMode, t } = props;
-    const isPollsScreenFocused = useIsFocused();
    const navigation = useNavigation();
-    const nbUnreadPolls = useSelector(getUnreadPollCount);
-
-    const nrUnreadPolls = !isPollsScreenFocused && nbUnreadPolls > 0
-        ? `(${nbUnreadPolls})`
-        : '';
+    const { isPollsTabFocused } = useSelector(state => state['features/chat']);
+    const { nbUnreadPolls } = useSelector(state => state['features/polls']);

    useEffect(() => {
+        const activeUnreadPollsNr = !isPollsTabFocused && nbUnreadPolls > 0;
+
        navigation.setOptions({
-            tabBarLabel: `${t('chat.tabs.polls')} ${nrUnreadPolls}`
+            // eslint-disable-next-line react/no-multi-comp
+            tabBarLabel: () => (
+                <TabBarLabelCounter
+                    activeUnreadNr = { activeUnreadPollsNr }
+                    isFocused = { isPollsTabFocused }
+                    label = { t('chat.tabs.polls') }
+                    nbUnread = { nbUnreadPolls } />
+            )
        });
-    }, [ nrUnreadPolls ]);
+
+    }, [ isPollsTabFocused, nbUnreadPolls ]);

    return (
        <JitsiScreen
--- a/react/features/polls/components/native/styles.js
+++ b/react/features/polls/components/native/styles.js
@@ -110,10 +110,12 @@ export const chatStyles = createStyleSheet({

    noPollContent: {
        alignItems: 'center',
-        flex: 1,
-        flexDirection: 'column',
        justifyContent: 'center',
-        paddingTop: '4%'
+        position: 'absolute',
+        bottom: 0,
+        left: 0,
+        right: 0,
+        top: '25%'
    },

    noPollText: {
@@ -149,7 +151,7 @@ export const chatStyles = createStyleSheet({

    pollCreateButton: {
        flex: 1,
-        marginHorizontal: BaseTheme.spacing[2]
+        marginHorizontal: BaseTheme.spacing[1]
    },

    pollSendLabel: {
@@ -191,7 +193,8 @@ export const chatStyles = createStyleSheet({
    },

    pollCreateAddButton: {
-        margin: BaseTheme.spacing[2]
+        marginHorizontal: BaseTheme.spacing[1],
+        marginVertical: BaseTheme.spacing[2]
    },

    toggleText: {
@@ -200,8 +203,8 @@ export const chatStyles = createStyleSheet({
    },

    createPollButton: {
-        marginHorizontal: BaseTheme.spacing[4],
-        marginVertical: '8%'
+        marginHorizontal: BaseTheme.spacing[3],
+        marginVertical: 34
    },

    pollPane: {
@@ -218,5 +221,28 @@ export const chatStyles = createStyleSheet({
        flexDirection: 'row',
        justifyContent: 'space-between',
        marginHorizontal: BaseTheme.spacing[2]
+    },
+
+    unreadPollsCounterContainer: {
+        display: 'flex',
+        flexDirection: 'row'
+    },
+
+    unreadPollsCounterDescription: {
+        color: BaseTheme.palette.text01
+    },
+
+    unreadPollsCounterCircle: {
+        backgroundColor: BaseTheme.palette.warning01,
+        borderRadius: BaseTheme.spacing[3] / 2,
+        height: BaseTheme.spacing[3],
+        justifyContent: 'center',
+        marginLeft: BaseTheme.spacing[2],
+        width: BaseTheme.spacing[3]
+    },
+
+    unreadPollsCounter: {
+        alignSelf: 'center',
+        color: BaseTheme.palette.text04
    }
 });
--- a/react/features/polls/components/web/PollsPane.tsx
+++ b/react/features/polls/components/web/PollsPane.tsx
@@ -1,4 +1,5 @@
 /* eslint-disable lines-around-comment */
+// @ts-ignore
 import React from 'react';

 import Button from '../../../base/ui/components/web/Button';
--- a/react/features/video-quality/components/styles.js
+++ b/react/features/video-quality/components/styles.js
@@ -1,6 +1,5 @@
-// @flow
-
 import { ColorPalette, createStyleSheet } from '../../base/styles';
+import BaseTheme from '../../base/ui/components/BaseTheme.native';

 export const AUD_LABEL_COLOR = ColorPalette.green;

@@ -13,6 +12,8 @@ export default createStyleSheet({
     * Style for the audio-only indicator.
     */
    indicatorAudioOnly: {
-        backgroundColor: AUD_LABEL_COLOR
+        backgroundColor: AUD_LABEL_COLOR,
+        borderRadius: BaseTheme.shape.borderRadius,
+        height: 32
    }
 });
Author	SHA1	Message	Date
Abdullah Kerem Öğe	b11e14ea34	feat(deps,rn) update React Native to version 0.68.5	2022-11-21 10:37:48 +01:00
Robert Pintilii	f5f55c4f23	fix(dialog) Improvements (#12590 ) Remove focus outline for the close icon Increase max height	2022-11-21 11:09:03 +02:00
Duduman Bogdan Vlad	243a330318	feat(thumbnail,filmstrip) show blackend thumbnail for participant on stage	2022-11-21 10:03:03 +01:00
_norbert	98bc87ea18	lang: fixing typo in a hungarian lang file (#12559 ) * fixing typo in a hungarian lang file * revert end of line Co-authored-by: bartuczns <bartucz.norbertsandor@nisz.hu>	2022-11-19 15:35:43 -06:00
Saúl Ibarra Corretgé	f7926c9cfb	fixup!	2022-11-18 19:56:36 +01:00
Saúl Ibarra Corretgé	533501deb6	fixup!	2022-11-18 19:56:36 +01:00
Saúl Ibarra Corretgé	f38c9f5450	feat(notification,external-api) notify bridge channel failures	2022-11-18 19:56:36 +01:00
Jaya Allamsetty	55b80c948f	chore(deps) lib-jitsi-meet@latest https://github.com/jitsi/lib-jitsi-meet/compare/v1535.0.0+e6263e7c...v1538.0.0+871968af	2022-11-18 13:38:37 -05:00
Calinteodor	971fe0481f	feat(chat/polls/native) Update chat and polls UI (#12550 ) * feat(chat/polls/native): update ui	2022-11-18 14:46:54 +02:00
Calin-Teodor	1259e54d46	fix(conference/native): apply width and height only on the connection indicator	2022-11-18 13:22:55 +01:00
Calin-Teodor	0cb95f1dd6	fix(conference/native): video quality label ui updates	2022-11-18 13:22:55 +01:00
Calin-Teodor	5cde9a138b	fix(conference/native): fixed title bar indicators style	2022-11-18 13:22:55 +01:00
robertpin	867c488e10	fix(dialog) Update max height	2022-11-18 13:22:43 +01:00