squash!

We used to multiplex the ports in nginx, but we dropped that at some point, so now coturn is on its own listening and nginx dependency is no longer needed. Our turnserver config can be used with nginx | apache2.

config.js

@@ -1,6 +1,11 @@
 
 /* eslint-disable no-unused-vars, no-var */
 
+/*
+ * NOTE: If you add a new option please remember to document it here:
+ * https://jitsi.github.io/handbook/docs/dev-guide/dev-guide-configuration
+ */
+
 var config = {
     // Connection
     //
@@ -69,6 +74,11 @@ var config = {
         // or disabled for the screenshare.
         // capScreenshareBitrate: 1 // 0 to disable - deprecated.
 
+        // Whether to use fake constraints (height: 99999, width: 99999) when calling getDisplayMedia on
+        // Chromium based browsers. This is intended as a workaround for
+        // https://bugs.chromium.org/p/chromium/issues/detail?id=1056311
+        // setScreenSharingResolutionConstraints: true
+
         // Enable callstats only for a percentage of users.
         // This takes a value between 0 and 100 which determines the probability for
         // the callstats to be enabled.

debian/control

@@ -54,5 +54,5 @@ Package: jitsi-meet-turnserver
 Architecture: all
 Breaks: apache2
 Pre-Depends: jitsi-meet-web-config
-Depends: ${misc:Depends}, nginx (>= 1.13.10) | nginx-full (>= 1.13.10) | nginx-extras (>= 1.13.10), jitsi-meet-prosody, coturn, dnsutils
+Depends: ${misc:Depends}, jitsi-meet-prosody, coturn, dnsutils
 Description: Configures coturn to be used with Jitsi Meet

debian/jitsi-meet-turnserver.postinst

@@ -33,7 +33,6 @@ case "$1" in
         JVB_HOSTNAME=$(echo "$RET" | xargs echo -n)
 
         TURN_CONFIG="/etc/turnserver.conf"
-        NGINX_CONFIG="/etc/nginx/sites-available/$JVB_HOSTNAME.conf"
         JITSI_MEET_CONFIG="/etc/jitsi/meet/$JVB_HOSTNAME-config.js"
 
         # if there was a turn config backup it so we can configure
@@ -51,19 +50,6 @@ case "$1" in
             fi
         fi
 
-        # this detect only old installations with no nginx
-        db_get jitsi-meet/jvb-serve || true
-        if [ ! -f $NGINX_CONFIG -o "$RET" = "true" ] ; then
-            # nothing to do
-            echo "------------------------------------------------"
-            echo ""
-            echo "turnserver not configured"
-            echo ""
-            echo "------------------------------------------------"
-            db_stop
-            exit 0
-        fi
-
         if [[ -f $TURN_CONFIG ]] ; then
             echo "------------------------------------------------"
             echo ""
@@ -117,7 +103,7 @@ denied-peer-ip=240.0.0.0-255.255.255.255" >> $TURN_CONFIG
         sed -i "s/jitsi-meet.example.com/$JVB_HOSTNAME/g" $TURN_CONFIG
         sed -i "s/__turnSecret__/$TURN_SECRET/g" $TURN_CONFIG
 
-        # SSL for nginx
+        # SSL settings
         db_get jitsi-meet/cert-choice
         CERT_CHOICE="$RET"
 

debian/jitsi-meet-turnserver.postrm

@@ -23,26 +23,12 @@ set -e
 
 
 case "$1" in
-    remove)
-        if [ -x "/etc/init.d/nginx" ]; then
-            invoke-rc.d nginx reload || true
-        fi
-        if [ -x "/etc/init.d/apache2" ]; then
-            invoke-rc.d apache2 reload || true
-        fi
-    ;;
     purge)
         rm -rf /etc/turnserver.conf
-        if [ -x "/etc/init.d/nginx" ]; then
-            invoke-rc.d nginx reload || true
-        fi
-        if [ -x "/etc/init.d/apache2" ]; then
-            invoke-rc.d apache2 reload || true
-        fi
         # Clear the debconf variable
         db_purge
     ;;
-    upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
+    remove|upgrade|failed-upgrade|abort-install|abort-upgrade|disappear)
     ;;
 
     *)

lang/main-ru.json

@@ -60,7 +60,7 @@
     },
     "calendarSync": {
         "addMeetingURL": "Добавить ссылку конференции",
-        "confirmAddLink": "Вы хотите добавить ссылку Jitsi к этому календарному событию?",
+        "confirmAddLink": "Вы хотите добавить ссылку {{app}} к этому календарному событию?",
         "error": {
             "appConfiguration": "Неправильно настроена интеграция календаря.",
             "generic": "Произошла ошибка. Проверьте настройки календаря или попробуйте обновить его.",
@@ -429,7 +429,7 @@
         "answer": "Ответ",
         "audioCallTitle": "Входящий звонок",
         "decline": "Отклонить",
-        "productLabel": "из Jitsi Meet",
+        "productLabel": "из {{app}}",
         "videoCallTitle": "Входящий видеозвонок"
     },
     "info": {
@@ -665,7 +665,7 @@
         "newDeviceAction": "Использовать",
         "newDeviceAudioTitle": "Обнаружено новое аудиоустройство",
         "newDeviceCameraTitle": "Обнаружена новая камера",
-        "oldElectronClientDescription1": "Похоже, вы используете старую версию клиента Jitsi Meet, которая имеет известные уязвимости в системе безопасности. Убедитесь, что вы обновили до нашей ",
+        "oldElectronClientDescription1": "Похоже, вы используете старую версию клиента {{app}}, которая имеет известные уязвимости в системе безопасности. Убедитесь, что вы обновили до нашей ",
         "oldElectronClientDescription2": "последней версии",
         "oldElectronClientDescription3": " сейчас!",
         "participantWantsToJoin": "Хочет присоединиться к митингу",
@@ -1268,9 +1268,9 @@
         "go": "ОК",
         "goSmall": "ОК",
         "headerSubtitle": "Защищенная высококачественная видеосвязь",
-        "headerTitle": "Сервер видеоконференцсвязи Jitsi Meet",
+        "headerTitle": "Сервер видеоконференцсвязи {{app}}",
         "info": "Инфо",
-        "jitsiOnMobile": "Jitsy для мобильных устройств — загрузите наши приложения и начните встречу из любого места",
+        "jitsiOnMobile": "{{app}} для мобильных устройств — загрузите наши приложения и начните встречу из любого места",
         "join": "СОЗДАТЬ / ПРИСОЕДИНИТЬСЯ",
         "logo": {
             "calendar": "Calendar логотип",

modules/API/API.js

@@ -88,6 +88,7 @@ import { isScreenshotCaptureEnabled } from '../../react/features/screenshot-capt
 import { playSharedVideo, stopSharedVideo } from '../../react/features/shared-video/actions.any';
 import { extractYoutubeIdOrURL } from '../../react/features/shared-video/functions';
 import { toggleRequestingSubtitles, setRequestingSubtitles } from '../../react/features/subtitles/actions';
+import { isAudioMuteButtonDisabled } from '../../react/features/toolbox/functions';
 import { toggleTileView, setTileView } from '../../react/features/video-layout';
 import { muteAllParticipants } from '../../react/features/video-menu/actions';
 import { setVideoQuality } from '../../react/features/video-quality';
@@ -700,6 +701,9 @@ function initCommands() {
         case 'is-audio-muted':
             callback(APP.conference.isLocalAudioMuted());
             break;
+        case 'is-audio-disabled':
+            callback(isAudioMuteButtonDisabled(APP.store.getState()));
+            break;
         case 'is-moderation-on': {
             const { mediaType } = request;
             const type = mediaType || MEDIA_TYPE.AUDIO;

modules/API/external/external_api.js

@@ -927,6 +927,18 @@ export default class JitsiMeetExternalAPI extends EventEmitter {
         });
     }
 
+    /**
+     * Returns the audio disabled status.
+     *
+     * @returns {Promise} - Resolves with the audio disabled status and rejects on
+     * failure.
+     */
+    isAudioDisabled() {
+        return this._transport.sendRequest({
+            name: 'is-audio-disabled'
+        });
+    }
+
     /**
      * Returns the moderation on status on the given mediaType.
      *

modules/UI/videolayout/LargeVideoManager.js

@@ -11,13 +11,15 @@ import { Avatar } from '../../../react/features/base/avatar';
 import theme from '../../../react/features/base/components/themes/participantsPaneTheme.json';
 import { getSourceNameSignalingFeatureFlag } from '../../../react/features/base/config';
 import { i18next } from '../../../react/features/base/i18n';
+import { JitsiTrackEvents } from '../../../react/features/base/lib-jitsi-meet';
 import { VIDEO_TYPE } from '../../../react/features/base/media';
 import {
     getParticipantById,
     getParticipantDisplayName
 } from '../../../react/features/base/participants';
 import {
-    getVideoTrackByParticipant
+    getVideoTrackByParticipant,
+    trackStreamingStatusChanged
 } from '../../../react/features/base/tracks';
 import { CHAT_SIZE } from '../../../react/features/chat';
 import {
@@ -116,6 +118,14 @@ export default class LargeVideoManager {
          */
         this._videoAspectRatio = 0;
 
+        /**
+         * The video track in effect.
+         * This is used to add and remove listeners on track streaming status change.
+         *
+         * @type {Object}
+         */
+        this.videoTrack = undefined;
+
         this.$container = $('#largeVideoContainer');
 
         this.$container.css({
@@ -242,6 +252,26 @@ export default class LargeVideoManager {
                 const tracks = state['features/base/tracks'];
                 const videoTrack = getVideoTrackByParticipant(tracks, participant);
 
+                // Remove track streaming status listener from the old track and add it to the new track,
+                // in order to stop updating track streaming status for the old track and start it for the new track.
+                // TODO: when this class is converted to a function react component,
+                // use a custom hook to update a local track streaming status.
+                if (this.videoTrack?.jitsiTrack?.getSourceName() !== videoTrack?.jitsiTrack?.getSourceName()) {
+                    if (this.videoTrack) {
+                        this.videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                            this.handleTrackStreamingStatusChanged);
+                        APP.store.dispatch(trackStreamingStatusChanged(this.videoTrack.jitsiTrack,
+                            this.videoTrack.jitsiTrack.getTrackStreamingStatus()));
+                    }
+                    if (videoTrack && !videoTrack.local) {
+                        this.videoTrack = videoTrack;
+                        this.videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                            this.handleTrackStreamingStatusChanged);
+                        APP.store.dispatch(trackStreamingStatusChanged(this.videoTrack.jitsiTrack,
+                            this.videoTrack.jitsiTrack.getTrackStreamingStatus()));
+                    }
+                }
+
                 isVideoRenderable = !isVideoMuted && (
                     APP.conference.isLocalId(id)
                     || participant?.isLocalScreenShare
@@ -340,6 +370,19 @@ export default class LargeVideoManager {
         });
     }
 
+    /**
+     * Handle track streaming status change event by
+     * by dispatching an action to update track streaming status for the given track in app state.
+     *
+     * @param {JitsiTrack} jitsiTrack the track with streaming status updated
+     * @param {JitsiTrackStreamingStatus} streamingStatus the updated track streaming status
+     *
+     * @private
+     */
+    handleTrackStreamingStatusChanged(jitsiTrack, streamingStatus) {
+        APP.store.dispatch(trackStreamingStatusChanged(jitsiTrack, streamingStatus));
+    }
+
     /**
      * Shows/hides notification about participant's connectivity issues to be
      * shown on the large video area.

package-lock.json

@@ -72,7 +72,7 @@
         "jquery-i18next": "1.2.1",
         "js-md5": "0.6.1",
         "jwt-decode": "2.2.0",
-        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1422.0.0+cf22aa36/lib-jitsi-meet.tgz",
+        "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1425.0.0+6b629a19/lib-jitsi-meet.tgz",
         "libflacjs": "https://git@github.com/mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
         "lodash": "4.17.21",
         "moment": "2.29.2",
@@ -11796,8 +11796,8 @@
     },
     "node_modules/lib-jitsi-meet": {
       "version": "0.0.0",
-      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1422.0.0+cf22aa36/lib-jitsi-meet.tgz",
-      "integrity": "sha512-Ot//JoQPLnyuATkge/Klk5Cml2hocuatRO2BxiQQl7SM3YBMFPaagnv7ShUD19qmhCLnojfwWUw5OAHJszqnbA==",
+      "resolved": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1425.0.0+6b629a19/lib-jitsi-meet.tgz",
+      "integrity": "sha512-oqWGJv62jBTtGsAA1ZkBrkuzLYxAOpA/ppZ5kisy54boWbCh8/GVOfmf/OwkDrUj7iBkjlh/qRU3DUlz9l0pMw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@jitsi/js-utils": "2.0.0",
@@ -28899,8 +28899,8 @@
       }
     },
     "lib-jitsi-meet": {
-      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1422.0.0+cf22aa36/lib-jitsi-meet.tgz",
-      "integrity": "sha512-Ot//JoQPLnyuATkge/Klk5Cml2hocuatRO2BxiQQl7SM3YBMFPaagnv7ShUD19qmhCLnojfwWUw5OAHJszqnbA==",
+      "version": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1425.0.0+6b629a19/lib-jitsi-meet.tgz",
+      "integrity": "sha512-oqWGJv62jBTtGsAA1ZkBrkuzLYxAOpA/ppZ5kisy54boWbCh8/GVOfmf/OwkDrUj7iBkjlh/qRU3DUlz9l0pMw==",
       "requires": {
         "@jitsi/js-utils": "2.0.0",
         "@jitsi/logger": "2.0.0",

package.json

@@ -77,7 +77,7 @@
     "jquery-i18next": "1.2.1",
     "js-md5": "0.6.1",
     "jwt-decode": "2.2.0",
-    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1422.0.0+cf22aa36/lib-jitsi-meet.tgz",
+    "lib-jitsi-meet": "https://github.com/jitsi/lib-jitsi-meet/releases/download/v1425.0.0+6b629a19/lib-jitsi-meet.tgz",
     "libflacjs": "https://git@github.com/mmig/libflac.js#93d37e7f811f01cf7d8b6a603e38bd3c3810907d",
     "lodash": "4.17.21",
     "moment": "2.29.2",

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

@@ -69,11 +69,11 @@ export default class AudioMuteButton extends Component<Props, State> {
         Promise.all([
             api.isAudioAvailable(),
             api.isAudioMuted(),
-            api.isStartSilent()
+            api.isAudioDisabled?.() || Promise.resolve(false)
         ])
-            .then(([ audioAvailable, audioMuted, startSilent ]) =>
+            .then(([ audioAvailable, audioMuted, audioDisabled ]) =>
                 this.setState({
-                    audioAvailable: audioAvailable && !startSilent,
+                    audioAvailable: audioAvailable && !audioDisabled,
                     audioMuted
                 }))
             .catch(console.error);

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

@@ -59,6 +59,7 @@ const styles = () => {
             color: 'rgba(255, 255, 255, 1)',
             fontWeight: '100',
             objectFit: 'cover',
+            textAlign: 'center',
 
             '&.avatar-small': {
                 height: '28px !important',

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

@@ -37,6 +37,11 @@ type Props = {
      */
     hasTabNavigator?: boolean,
 
+    /**
+     * Insets for the SafeAreaView.
+     */
+    safeAreaInsets?: Array,
+
     /**
      * Additional style to be appended to the KeyboardAvoidingView containing the content of the modal.
      */
@@ -49,6 +54,7 @@ const JitsiScreen = ({
     footerComponent,
     hasTabNavigator = false,
     hasBottomTextInput = false,
+    safeAreaInsets = [ 'bottom', 'left', 'right' ],
     style
 }: Props) => (
     <View
@@ -59,11 +65,7 @@ const JitsiScreen = ({
             hasTabNavigator = { hasTabNavigator }
             style = { style }>
             <SafeAreaView
-                edges = { [
-                    'bottom',
-                    'left',
-                    'right'
-                ] }
+                edges = { safeAreaInsets }
                 style = { styles.safeArea }>
                 { children }
             </SafeAreaView>

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

@@ -6,6 +6,7 @@ import { connect } from '../../../../base/redux';
 import DeviceStatus from '../../../../prejoin/components/preview/DeviceStatus';
 import { Toolbox } from '../../../../toolbox/components/web';
 import { PREMEETING_BUTTONS, THIRD_PARTY_PREJOIN_BUTTONS } from '../../../config/constants';
+import { getToolbarButtons, isToolbarButtonEnabled } from '../../../config/functions.web';
 
 import ConnectionStatus from './ConnectionStatus';
 import Preview from './Preview';
@@ -147,14 +148,23 @@ class PreMeetingScreen extends PureComponent<Props> {
  * @returns {Object}
  */
 function mapStateToProps(state, ownProps): Object {
-    const hideButtons = state['features/base/config'].hiddenPremeetingButtons || [];
-    const premeetingButtons = ownProps.thirdParty
+    const { hiddenPremeetingButtons } = state['features/base/config'];
+    const toolbarButtons = getToolbarButtons(state);
+    const premeetingButtons = (ownProps.thirdParty
         ? THIRD_PARTY_PREJOIN_BUTTONS
-        : PREMEETING_BUTTONS;
+        : PREMEETING_BUTTONS).filter(b => !(hiddenPremeetingButtons || []).includes(b));
+
     const { premeetingBackground } = state['features/dynamic-branding'];
 
     return {
-        _buttons: premeetingButtons.filter(b => !hideButtons.includes(b)),
+        // For keeping backwards compat.: if we pass an empty hiddenPremeetingButtons
+        // array through external api, we have all prejoin buttons present on premeeting
+        // screen regardless of passed values into toolbarButtons config overwrite.
+        // If hiddenPremeetingButtons is missing, we hide the buttons according to
+        // toolbarButtons config overwrite.
+        _buttons: hiddenPremeetingButtons
+            ? premeetingButtons
+            : premeetingButtons.filter(b => isToolbarButtonEnabled(b, toolbarButtons)),
         _premeetingBackground: premeetingBackground
     };
 }

react/features/base/tracks/middleware.js

@@ -5,6 +5,7 @@ import { batch } from 'react-redux';
 import UIEvents from '../../../../service/UI/UIEvents';
 import { showModeratedNotification } from '../../av-moderation/actions';
 import { shouldShowModeratedNotification } from '../../av-moderation/functions';
+import { _RESET_BREAKOUT_ROOMS } from '../../breakout-rooms/actionTypes';
 import { hideNotification, isModerationNotificationDisplayed } from '../../notifications';
 import { isPrejoinPageVisible } from '../../prejoin/functions';
 import { getCurrentConference } from '../conference/functions';
@@ -331,6 +332,7 @@ StateListenerRegistry.register(
                 for (const track of remoteTracks) {
                     dispatch(trackRemoved(track.jitsiTrack));
                 }
+                dispatch({ type: _RESET_BREAKOUT_ROOMS });
             });
         }
     });

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

@@ -183,7 +183,7 @@ class Conference extends AbstractConference<Props, State> {
         const { _showLobby } = this.props;
 
         if (!prevProps._showLobby && _showLobby) {
-            navigate(screen.lobby);
+            navigate(screen.lobby.root);
         }
 
         if (prevProps._showLobby && !_showLobby) {

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

@@ -52,12 +52,14 @@ export const ConnectionIndicatorIcon = ({
 }: Props) => {
     const sourceNameSignalingEnabled = useSelector(state => getSourceNameSignalingFeatureFlag(state));
     const dispatch = useDispatch();
-    const sourceName = track?.jitsiTrack?.getSourceName?.();
+    const sourceName = track?.jitsiTrack?.getSourceName();
 
     const handleTrackStreamingStatusChanged = streamingStatus => {
         dispatch(trackStreamingStatusChanged(track.jitsiTrack, streamingStatus));
     };
 
+    // TODO: replace this with a custom hook to be reused where track streaming status is needed.
+    // TODO: In the hood the listener should updates a local track streaming status instead of that in redux store.
     useEffect(() => {
         if (track && !track.local && sourceNameSignalingEnabled) {
             track.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED, handleTrackStreamingStatusChanged);

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

@@ -9,6 +9,7 @@ import { createScreenSharingIssueEvent, sendAnalytics } from '../../../analytics
 import { Avatar } from '../../../base/avatar';
 import { getSourceNameSignalingFeatureFlag } from '../../../base/config';
 import { isMobileBrowser } from '../../../base/environment/utils';
+import { JitsiTrackEvents } from '../../../base/lib-jitsi-meet';
 import { MEDIA_TYPE, VideoTrack } from '../../../base/media';
 import {
     getLocalParticipant,
@@ -24,7 +25,8 @@ import {
     getLocalVideoTrack,
     getTrackByMediaTypeAndParticipant,
     getFakeScreenshareParticipantTrack,
-    updateLastTrackVideoMediaEvent
+    updateLastTrackVideoMediaEvent,
+    trackStreamingStatusChanged
 } from '../../../base/tracks';
 import { getVideoObjectPosition } from '../../../face-landmarks/functions';
 import { hideGif, showGif } from '../../../gifs/actions';
@@ -54,6 +56,7 @@ import ThumbnailAudioIndicator from './ThumbnailAudioIndicator';
 import ThumbnailBottomIndicators from './ThumbnailBottomIndicators';
 import ThumbnailTopIndicators from './ThumbnailTopIndicators';
 
+
 declare var interfaceConfig: Object;
 
 /**
@@ -244,7 +247,12 @@ export type Props = {|
     /**
      * Styles that will be set to the Thumbnail's main span element.
      */
-    style?: ?Object
+    style?: ?Object,
+
+    /**
+     * Whether source name signaling is enabled.
+     */
+    _sourceNameSignalingEnabled: boolean
 |};
 
 const defaultStyles = theme => {
@@ -404,6 +412,7 @@ class Thumbnail extends Component<Props, State> {
         this._hidePopover = this._hidePopover.bind(this);
         this._onGifMouseEnter = this._onGifMouseEnter.bind(this);
         this._onGifMouseLeave = this._onGifMouseLeave.bind(this);
+        this.handleTrackStreamingStatusChanged = this.handleTrackStreamingStatusChanged.bind(this);
     }
 
     /**
@@ -414,6 +423,38 @@ class Thumbnail extends Component<Props, State> {
      */
     componentDidMount() {
         this._onDisplayModeChanged();
+
+
+        // Listen to track streaming status changed event to keep it updated.
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled && _videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
+    }
+
+    /**
+     * Remove listeners for track streaming status update.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    componentWillUnmount() {
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled && _videoTrack && !_videoTrack.local) {
+            _videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                this.handleTrackStreamingStatusChanged);
+            dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+        }
     }
 
     /**
@@ -427,6 +468,38 @@ class Thumbnail extends Component<Props, State> {
         if (prevState.displayMode !== this.state.displayMode) {
             this._onDisplayModeChanged();
         }
+
+        // TODO: after converting this component to a react function component,
+        // use a custom hook to update local track streaming status.
+        const { _videoTrack, dispatch, _sourceNameSignalingEnabled } = this.props;
+
+        if (_sourceNameSignalingEnabled
+            && prevProps._videoTrack?.jitsiTrack?.getSourceName() !== _videoTrack?.jitsiTrack?.getSourceName()) {
+            if (prevProps._videoTrack && !prevProps._videoTrack.local) {
+                prevProps._videoTrack.jitsiTrack.off(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(prevProps._videoTrack.jitsiTrack,
+                    prevProps._videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+            if (_videoTrack && !_videoTrack.local) {
+                _videoTrack.jitsiTrack.on(JitsiTrackEvents.TRACK_STREAMING_STATUS_CHANGED,
+                    this.handleTrackStreamingStatusChanged);
+                dispatch(trackStreamingStatusChanged(_videoTrack.jitsiTrack,
+                    _videoTrack.jitsiTrack.getTrackStreamingStatus()));
+            }
+        }
+    }
+
+    /**
+     * Handle track streaming status change event by
+     * by dispatching an action to update track streaming status for the given track in app state.
+     *
+     * @param {JitsiTrack} jitsiTrack - The track with streaming status updated.
+     * @param {JitsiTrackStreamingStatus} streamingStatus - The updated track streaming status.
+     * @returns {void}
+     */
+    handleTrackStreamingStatusChanged(jitsiTrack, streamingStatus) {
+        this.props.dispatch(trackStreamingStatusChanged(jitsiTrack, streamingStatus));
     }
 
     /**
@@ -1212,7 +1285,8 @@ function _mapStateToProps(state, ownProps): Object {
         _videoObjectPosition: getVideoObjectPosition(state, participant?.id),
         _videoTrack,
         ...size,
-        _gifSrc: mode === 'chat' ? null : gifSrc
+        _gifSrc: mode === 'chat' ? null : gifSrc,
+        _sourceNameSignalingEnabled: sourceNameSignalingEnabled
     };
 }
 

react/features/filmstrip/subscriber.web.js

@@ -61,8 +61,13 @@ StateListenerRegistry.register(
  */
 StateListenerRegistry.register(
     /* selector */ state => {
-        return { layout: getCurrentLayout(state),
-            width: state['features/base/responsive-ui'].clientWidth };
+        const { clientHeight, clientWidth } = state['features/base/responsive-ui'];
+
+        return {
+            layout: getCurrentLayout(state),
+            height: clientHeight,
+            width: clientWidth
+        };
     },
     /* listener */ ({ layout }, store) => {
         switch (layout) {

react/features/lobby/components/native/LobbyChatScreen.js

@@ -0,0 +1,42 @@
+import React from 'react';
+
+import { translate } from '../../../base/i18n';
+import JitsiScreen from '../../../base/modal/components/JitsiScreen';
+import { connect } from '../../../base/redux';
+import ChatInputBar from '../../../chat/components/native/ChatInputBar';
+import MessageContainer from '../../../chat/components/native/MessageContainer';
+import AbstractLobbyScreen, {
+    Props as AbstractProps,
+    _mapStateToProps as abstractMapStateToProps
+} from '../AbstractLobbyScreen';
+
+import styles from './styles';
+
+
+/**
+ * Implements a chat screen that appears when communication is started
+ * between the moderator and the participant being in the lobby.
+ */
+class LobbyChatScreen extends
+    AbstractLobbyScreen<AbstractProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const { _lobbyChatMessages } = this.props;
+
+        return (
+            <JitsiScreen style = { styles.lobbyChatWrapper }>
+                <MessageContainer messages = { _lobbyChatMessages } />
+                <ChatInputBar onSend = { this._onSendMessage } />
+            </JitsiScreen>
+        );
+    }
+
+    _onSendMessage: () => void;
+}
+
+export default translate(connect(abstractMapStateToProps)(LobbyChatScreen));

react/features/lobby/components/native/LobbyScreen.js

@@ -2,50 +2,50 @@
 
 import React from 'react';
 import { Text, View, TouchableOpacity, TextInput } from 'react-native';
-import { SafeAreaView } from 'react-native-safe-area-context';
 
-import { Avatar } from '../../../base/avatar';
 import { translate } from '../../../base/i18n';
-import { Icon, IconClose, IconEdit } from '../../../base/icons';
 import JitsiScreen from '../../../base/modal/components/JitsiScreen';
 import { LoadingIndicator } from '../../../base/react';
 import { connect } from '../../../base/redux';
-import ChatInputBar from '../../../chat/components/native/ChatInputBar';
-import MessageContainer from '../../../chat/components/native/MessageContainer';
-import AbstractLobbyScreen, { _mapStateToProps } from '../AbstractLobbyScreen';
+import { ASPECT_RATIO_NARROW } from '../../../base/responsive-ui';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+import InviteButton
+    from '../../../invite/components/add-people-dialog/native/InviteButton';
+import { LargeVideo } from '../../../large-video/components';
+import { navigate }
+    from '../../../mobile/navigation/components/lobby/LobbyNavigationContainerRef';
+import { screen } from '../../../mobile/navigation/routes';
+import AudioMuteButton from '../../../toolbox/components/AudioMuteButton';
+import VideoMuteButton from '../../../toolbox/components/VideoMuteButton';
+import AbstractLobbyScreen, {
+    Props as AbstractProps,
+    _mapStateToProps as abstractMapStateToProps } from '../AbstractLobbyScreen';
 
 import styles from './styles';
 
+
+type Props = AbstractProps & {
+
+    /**
+     * The current aspect ratio of the screen.
+     */
+    _aspectRatio: Symbol
+}
+
 /**
  * Implements a waiting screen that represents the participant being in the lobby.
  */
-class LobbyScreen extends AbstractLobbyScreen {
+class LobbyScreen extends AbstractLobbyScreen<Props> {
     /**
      * Implements {@code PureComponent#render}.
      *
      * @inheritdoc
      */
     render() {
-        const { _meetingName, t } = this.props;
-
         return (
-            <JitsiScreen
-                style = { this.props._isLobbyChatActive && this.state.isChatOpen
-                    ? styles.lobbyChatWrapper
-                    : styles.contentWrapper }>
-                {this.props._isLobbyChatActive && this.state.isChatOpen
-                    ? this._renderLobbyChat()
-                    : <SafeAreaView>
-                        <Text style = { styles.dialogTitle }>
-                            { t(this._getScreenTitleKey(), { moderator: this.props._lobbyMessageRecipient }) }
-                        </Text>
-
-                        <Text style = { styles.secondaryText }>
-                            { _meetingName }
-                        </Text>
-                        { this._renderContent()}
-                    </SafeAreaView> }
-            </JitsiScreen>
+            <>
+                { this._renderLobby() }
+            </>
         );
     }
 
@@ -69,35 +69,58 @@ class LobbyScreen extends AbstractLobbyScreen {
 
     _onSwitchToPasswordMode: () => void;
 
-    _onSendMessage: () => void;
-
-    _onToggleChat: () => void;
-
     _renderContent: () => React$Element<*>;
 
+    _renderToolbarButtons: () => React$Element<*>;
+
+    _renderLobby: () => React$Element<*>;
+
+    _onNavigateToLobbyChat: () => void;
+
     /**
-     * Renders the lobby chat.
+     * Navigates to the lobby chat screen.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onNavigateToLobbyChat() {
+        navigate(screen.lobby.chat);
+    }
+
+    /**
+     * Renders the lobby.
      *
      * @inheritdoc
      */
-    _renderLobbyChat() {
-        const { t } = this.props;
+    _renderLobby() {
+        const { _aspectRatio } = this.props;
+        let contentStyles;
+        let largeVideoContainerStyles;
+        let contentContainerStyles;
+
+        if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            largeVideoContainerStyles = styles.largeVideoContainer;
+            contentContainerStyles = styles.contentContainer;
+        } else {
+            contentStyles = styles.contentWide;
+            largeVideoContainerStyles = styles.largeVideoContainerWide;
+            contentContainerStyles = styles.contentContainerWide;
+        }
 
         return (
-            <>
-                <View style = { styles.lobbyChatHeader }>
-                    <Text style = { styles.lobbyChatTitle }>
-                        { t(this._getScreenTitleKey(), { moderator: this.props._lobbyMessageRecipient }) }
-                    </Text>
-                    <TouchableOpacity onPress = { this._onToggleChat }>
-                        <Icon
-                            src = { IconClose }
-                            style = { styles.lobbyChatCloseButton } />
-                    </TouchableOpacity>
+            <JitsiScreen
+                safeAreaInsets = { [ 'right' ] }
+                style = { styles.contentWrapper }>
+                <View style = { contentStyles }>
+                    <View style = { largeVideoContainerStyles }>
+                        <LargeVideo />
+                    </View>
+                    <View style = { contentContainerStyles }>
+                        { this._renderContent() }
+                        { this._renderToolbarButtons() }
+                    </View>
                 </View>
-                <MessageContainer messages = { this.props._lobbyChatMessages } />
-                <ChatInputBar onSend = { this._onSendMessage } />
-            </>
+            </JitsiScreen>
         );
     }
 
@@ -108,15 +131,15 @@ class LobbyScreen extends AbstractLobbyScreen {
      */
     _renderJoining() {
         return (
-            <>
+            <View style = { styles.formWrapper }>
                 <LoadingIndicator
-                    color = 'black'
+                    color = { BaseTheme.palette.icon01 }
                     style = { styles.loadingIndicator } />
                 <Text style = { styles.joiningMessage }>
                     { this.props.t('lobby.joiningMessage') }
                 </Text>
                 { this._renderStandardButtons() }
-            </>
+            </View>
         );
     }
 
@@ -127,7 +150,7 @@ class LobbyScreen extends AbstractLobbyScreen {
      */
     _renderParticipantForm() {
         const { t } = this.props;
-        const { displayName, email } = this.state;
+        const { displayName } = this.state;
 
         return (
             <View style = { styles.formWrapper }>
@@ -138,13 +161,6 @@ class LobbyScreen extends AbstractLobbyScreen {
                     onChangeText = { this._onChangeDisplayName }
                     style = { styles.field }
                     value = { displayName } />
-                <Text style = { styles.fieldLabel }>
-                    { t('lobby.emailField') }
-                </Text>
-                <TextInput
-                    onChangeText = { this._onChangeEmail }
-                    style = { styles.field }
-                    value = { email } />
             </View>
         );
     }
@@ -155,28 +171,7 @@ class LobbyScreen extends AbstractLobbyScreen {
      * @inheritdoc
      */
     _renderParticipantInfo() {
-        const { displayName, email } = this.state;
-
-        return (
-            <View style = { styles.participantBox }>
-                <TouchableOpacity
-                    onPress = { this._onEnableEdit }
-                    style = { styles.editButton }>
-                    <Icon
-                        src = { IconEdit }
-                        style = { styles.editIcon } />
-                </TouchableOpacity>
-                <Avatar
-                    participantId = { this.props._participantId }
-                    size = { 64 } />
-                <Text style = { styles.displayNameText }>
-                    { displayName }
-                </Text>
-                { Boolean(email) && <Text style = { styles.secondaryText }>
-                    { email }
-                </Text> }
-            </View>
-        );
+        return this._renderParticipantForm();
     }
 
     /**
@@ -215,7 +210,17 @@ class LobbyScreen extends AbstractLobbyScreen {
         const { t } = this.props;
 
         return (
-            <>
+            <View style = { styles.passwordJoinButtonsWrapper }>
+                <TouchableOpacity
+                    onPress = { this._onSwitchToKnockMode }
+                    style = { [
+                        styles.button,
+                        styles.primaryButton
+                    ] }>
+                    <Text style = { styles.primaryButtonText }>
+                        { t('lobby.backToKnockModeButton') }
+                    </Text>
+                </TouchableOpacity>
                 <TouchableOpacity
                     disabled = { !this.state.password }
                     onPress = { this._onJoinWithPassword }
@@ -227,17 +232,34 @@ class LobbyScreen extends AbstractLobbyScreen {
                         { t('lobby.passwordJoinButton') }
                     </Text>
                 </TouchableOpacity>
-                <TouchableOpacity
-                    onPress = { this._onSwitchToKnockMode }
-                    style = { [
-                        styles.button,
-                        styles.secondaryButton
-                    ] }>
-                    <Text>
-                        { t('lobby.backToKnockModeButton') }
-                    </Text>
-                </TouchableOpacity>
-            </>
+            </View>
+        );
+    }
+
+    /**
+     * Renders the toolbar buttons menu.
+     *
+     * @inheritdoc
+     */
+    _renderToolbarButtons() {
+        const { _aspectRatio } = this.props;
+        let toolboxContainerStyles;
+
+        if (_aspectRatio === ASPECT_RATIO_NARROW) {
+            toolboxContainerStyles = styles.toolboxContainer;
+        } else {
+            toolboxContainerStyles = styles.toolboxContainerWide;
+        }
+
+        return (
+            <View style = { toolboxContainerStyles }>
+                <AudioMuteButton
+                    styles = { styles.buttonStylesBorderless } />
+                <VideoMuteButton
+                    styles = { styles.buttonStylesBorderless } />
+                <InviteButton
+                    styles = { styles.buttonStylesBorderless } />
+            </View>
         );
     }
 
@@ -248,50 +270,72 @@ class LobbyScreen extends AbstractLobbyScreen {
      */
     _renderStandardButtons() {
         const { _knocking, _renderPassword, _isLobbyChatActive, t } = this.props;
+        const { displayName } = this.state;
+        const askToJoinButtonStyles
+            = displayName ? styles.primaryButton : styles.primaryButtonDisabled;
 
         return (
-            <>
-                { _knocking || <TouchableOpacity
-                    disabled = { !this.state.displayName }
-                    onPress = { this._onAskToJoin }
+            <View style = { styles.standardButtonWrapper }>
+                { _knocking && _isLobbyChatActive && <TouchableOpacity
+                    onPress = { this._onNavigateToLobbyChat }
                     style = { [
                         styles.button,
                         styles.primaryButton
                     ] }>
                     <Text style = { styles.primaryButtonText }>
-                        { t('lobby.knockButton') }
-                    </Text>
-                </TouchableOpacity> }
-                { _knocking && _isLobbyChatActive && <TouchableOpacity
-                    onPress = { this._onToggleChat }
-                    style = { [
-                        styles.button,
-                        styles.secondaryButton
-                    ] }>
-                    <Text>
                         { t('toolbar.openChat') }
                     </Text>
                 </TouchableOpacity>}
+                { _knocking || <TouchableOpacity
+                    disabled = { !displayName }
+                    onPress = { this._onAskToJoin }
+                    style = { [
+                        styles.button,
+                        askToJoinButtonStyles
+                    ] }>
+                    <Text style = { styles.primaryButtonText }>
+                        { t('lobby.knockButton') }
+                    </Text>
+                </TouchableOpacity> }
                 { _renderPassword && <TouchableOpacity
                     onPress = { this._onSwitchToPasswordMode }
                     style = { [
                         styles.button,
-                        styles.secondaryButton
+                        styles.primaryButton
                     ] }>
-                    <Text>
+                    <Text style = { styles.primaryButtonText }>
                         { t('lobby.enterPasswordButton') }
                     </Text>
                 </TouchableOpacity> }
                 <TouchableOpacity
                     onPress = { this._onCancel }
-                    style = { styles.cancelButton }>
-                    <Text>
+                    style = { [
+                        styles.button,
+                        styles.cancelButton
+                    ] }>
+                    <Text style = { styles.cancelButtonText }>
                         { t('dialog.Cancel') }
                     </Text>
                 </TouchableOpacity>
-            </>
+            </View>
         );
     }
 }
 
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Props} ownProps - The own props of the component.
+ * @returns {{
+ *     _aspectRatio: Symbol
+ * }}
+ */
+function _mapStateToProps(state: Object, ownProps: Props) {
+    return {
+        ...abstractMapStateToProps(state, ownProps),
+        _aspectRatio: state['features/base/responsive-ui'].aspectRatio
+    };
+}
+
 export default translate(connect(_mapStateToProps)(LobbyScreen));

react/features/lobby/components/native/index.js

@@ -2,3 +2,4 @@
 
 export { default as KnockingParticipantList } from './KnockingParticipantList';
 export { default as LobbyScreen } from './LobbyScreen';
+export { default as LobbyChatScreen } from './LobbyChatScreen';

react/features/lobby/components/native/styles.js

@@ -1,6 +1,6 @@
 // @flow
 
-import BaseTheme from '../../../base/ui/components/BaseTheme';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
 
 const SECONDARY_COLOR = BaseTheme.palette.border04;
 
@@ -8,8 +8,24 @@ export default {
     button: {
         alignItems: 'center',
         borderRadius: 4,
-        marginVertical: BaseTheme.spacing[1],
-        paddingVertical: BaseTheme.spacing[2]
+        padding: BaseTheme.spacing[2],
+        width: '100%'
+    },
+
+    buttonStylesBorderless: {
+        iconStyle: {
+            backgroundColor: BaseTheme.palette.action02Active,
+            color: BaseTheme.palette.icon01,
+            fontSize: 24
+        },
+        style: {
+            backgroundColor: BaseTheme.palette.action02Active,
+            flexDirection: 'row',
+            justifyContent: 'center',
+            marginHorizontal: BaseTheme.spacing[3],
+            height: 24,
+            width: 24
+        }
     },
 
     lobbyChatWrapper: {
@@ -26,29 +42,66 @@ export default {
     },
 
     lobbyChatTitle: {
-        color: '#fff',
+        color: BaseTheme.palette.text01,
         fontSize: 20,
         fontWeight: 'bold',
         flexShrink: 1
     },
 
     lobbyChatCloseButton: {
-        fontSize: 20,
-        marginLeft: 20,
-        color: '#fff'
+        fontSize: 24,
+        marginLeft: BaseTheme.spacing[3],
+        marginTop: BaseTheme.spacing[1],
+        color: BaseTheme.palette.icon01
     },
 
     contentWrapper: {
-        alignItems: 'center',
-        display: 'flex',
-        flexDirection: 'column',
-        justifyItems: 'center',
-        height: '100%'
+        backgroundColor: BaseTheme.palette.ui02,
+        flex: 1
     },
 
-    closeIcon: {
-        color: 'red',
-        fontSize: 20
+    contentWide: {
+        backgroundColor: BaseTheme.palette.ui02,
+        flex: 1,
+        flexDirection: 'row'
+    },
+
+    largeVideoContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: '50%'
+    },
+
+    largeVideoContainerWide: {
+        height: '100%',
+        width: '50%'
+    },
+
+    contentContainer: {
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center'
+    },
+
+    contentContainerWide: {
+        justifyContent: 'center',
+        marginHorizontal: BaseTheme.spacing[2],
+        width: '50%'
+    },
+
+    toolboxContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: BaseTheme.spacing[4]
+    },
+
+    toolboxContainerWide: {
+        flexDirection: 'row',
+        justifyContent: 'center',
+        marginTop: BaseTheme.spacing[4]
     },
 
     dialogTitle: {
@@ -75,40 +128,55 @@ export default {
     },
 
     field: {
+        backgroundColor: BaseTheme.palette.field02,
         borderColor: SECONDARY_COLOR,
-        borderRadius: 4,
-        borderWidth: 1,
-        marginVertical: 8,
-        padding: 8
+        borderRadius: BaseTheme.shape.borderRadius,
+        borderWidth: 2,
+        marginHorizontal: BaseTheme.spacing[3],
+        padding: BaseTheme.spacing[2]
     },
 
     fieldError: {
-        color: BaseTheme.palette.warning07,
-        fontSize: 10
-    },
-
-    fieldRow: {
-        paddingTop: 16
+        color: BaseTheme.palette.warning03,
+        marginLeft: BaseTheme.spacing[3],
+        fontSize: 16
     },
 
     fieldLabel: {
+        color: BaseTheme.palette.text01,
+        marginVertical: BaseTheme.spacing[4],
         textAlign: 'center'
     },
 
     formWrapper: {
-        alignItems: 'stretch',
+        alignSelf: 'stretch'
+    },
+
+    standardButtonWrapper: {
         alignSelf: 'stretch',
-        paddingVertical: 16
+        marginHorizontal: BaseTheme.spacing[3]
+    },
+
+    joiningContainer: {
+        alignItems: 'center',
+        display: 'flex',
+        justifyContent: 'center'
     },
 
     joiningMessage: {
-        color: 'rgba(0, 0, 0, .7)',
-        paddingBottom: 36,
+        color: BaseTheme.palette.text01,
+        marginBottom: BaseTheme.spacing[2],
         textAlign: 'center'
     },
 
+    passwordJoinButtonsWrapper: {
+        alignItems: 'stretch',
+        alignSelf: 'stretch',
+        marginHorizontal: BaseTheme.spacing[3]
+    },
+
     loadingIndicator: {
-        marginVertical: 36
+        marginVertical: BaseTheme.spacing[4]
     },
 
     participantBox: {
@@ -122,29 +190,33 @@ export default {
     },
 
     primaryButton: {
-        alignSelf: 'stretch',
-        backgroundColor: 'rgb(3, 118, 218)'
+        backgroundColor: BaseTheme.palette.action01,
+        marginTop: BaseTheme.spacing[4]
+    },
+
+    primaryButtonDisabled: {
+        backgroundColor: BaseTheme.palette.action03Disabled,
+        marginTop: BaseTheme.spacing[4]
     },
 
     primaryButtonText: {
-        color: 'white'
+        color: BaseTheme.palette.text01
     },
 
-    secondaryButton: {
-        alignSelf: 'stretch',
-        backgroundColor: 'transparent'
-    },
-
-    secondaryText: {
-        color: 'rgba(0, 0, 0, .7)',
+    primaryText: {
+        color: BaseTheme.palette.text01,
         margin: 'auto',
         textAlign: 'center'
     },
 
     cancelButton: {
         alignItems: 'center',
-        backgroundColor: 'transparent',
-        marginVertical: 4
+        backgroundColor: BaseTheme.palette.action02Disabled,
+        marginTop: BaseTheme.spacing[4]
+    },
+
+    cancelButtonText: {
+        color: BaseTheme.palette.text01
     },
 
     // KnockingParticipantList

react/features/mobile/navigation/components/RootNavigationContainer.js

@@ -1,5 +1,3 @@
-// @flow
-
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';

react/features/mobile/navigation/components/conference/ConferenceNavigationContainerRef.js

@@ -1,8 +1,5 @@
-// @flow
-
 import React from 'react';
 
-// $FlowExpectedError
 export const conferenceNavigationRef = React.createRef();
 
 /**
@@ -13,7 +10,6 @@ export const conferenceNavigationRef = React.createRef();
  * @returns {Function}
  */
 export function navigate(name: string, params: Object) {
-    // $FlowExpectedError
     return conferenceNavigationRef.current?.navigate(name, params);
 }
 
@@ -23,7 +19,6 @@ export function navigate(name: string, params: Object) {
  * @returns {Function}
  */
 export function goBack() {
-    // $FlowExpectedError
     return conferenceNavigationRef.current?.goBack();
 }
 
@@ -34,7 +29,6 @@ export function goBack() {
  * @returns {Function}
  */
 export function setParams(params: Object) {
-    // $FlowExpectedError
     return conferenceNavigationRef.current?.setParams(params);
 }
 

react/features/mobile/navigation/components/conference/components/ConferenceNavigationContainer.js

@@ -1,5 +1,3 @@
-// @flow
-
 import { NavigationContainer } from '@react-navigation/native';
 import { createStackNavigator } from '@react-navigation/stack';
 import React from 'react';
@@ -13,7 +11,6 @@ import { SharedDocument } from '../../../../../etherpad';
 import { GifsMenu } from '../../../../../gifs/components';
 import AddPeopleDialog
     from '../../../../../invite/components/add-people-dialog/native/AddPeopleDialog';
-import LobbyScreen from '../../../../../lobby/components/native/LobbyScreen';
 import { ParticipantsPane } from '../../../../../participants-pane/components/native';
 import { StartLiveStreamDialog } from '../../../../../recording';
 import { StartRecordingDialog }
@@ -31,7 +28,6 @@ import {
     gifsMenuOptions,
     inviteScreenOptions,
     liveStreamScreenOptions,
-    lobbyScreenOptions,
     navigationContainerTheme,
     participantsScreenOptions,
     recordingScreenOptions,
@@ -42,6 +38,8 @@ import {
 } from '../../../screenOptions';
 import ChatAndPollsNavigationContainer
     from '../../chat/components/ChatAndPollsNavigationContainer';
+import LobbyNavigationContainer
+    from '../../lobby/components/LobbyNavigationContainer';
 import {
     conferenceNavigationRef
 } from '../ConferenceNavigationContainerRef';
@@ -134,9 +132,12 @@ const ConferenceNavigationContainer = () => {
                         title: t('notify.gifsMenu')
                     }} />
                 <ConferenceStack.Screen
-                    component = { LobbyScreen }
-                    name = { screen.lobby }
-                    options = { lobbyScreenOptions } />
+                    component = { LobbyNavigationContainer }
+                    name = { screen.lobby.root }
+                    options = {{
+                        gestureEnabled: false,
+                        headerShown: false
+                    }} />
                 <ConferenceStack.Screen
                     component = { AddPeopleDialog }
                     name = { screen.conference.invite }

react/features/mobile/navigation/components/lobby/LobbyNavigationContainerRef.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+export const lobbyNavigationContainerRef = React.createRef();
+
+/**
+ * User defined navigation action included inside the reference to the container.
+ *
+ * @param {string} name - Destination name of the route that has been defined somewhere.
+ * @param {Object} params - Params to pass to the destination route.
+ * @returns {Function}
+ */
+export function navigate(name: string, params: Object) {
+    return lobbyNavigationContainerRef.current?.navigate(name, params);
+}
+
+/**
+ * User defined navigation action included inside the reference to the container.
+ *
+ * @returns {Function}
+ */
+export function goBack() {
+    return lobbyNavigationContainerRef.current?.goBack();
+}

react/features/mobile/navigation/components/lobby/components/LobbyNavigationContainer.js

@@ -0,0 +1,47 @@
+import { NavigationContainer } from '@react-navigation/native';
+import { createStackNavigator } from '@react-navigation/stack';
+import React from 'react';
+import { useSelector } from 'react-redux';
+
+import { LobbyChatScreen, LobbyScreen } from '../../../../../lobby';
+import { screen } from '../../../routes';
+import {
+    lobbyChatScreenOptions,
+    lobbyScreenOptions, navigationContainerTheme
+} from '../../../screenOptions';
+import { lobbyNavigationContainerRef } from '../LobbyNavigationContainerRef';
+
+const LobbyStack = createStackNavigator();
+
+
+const LobbyNavigationContainer = () => {
+    const { isLobbyChatActive }
+        = useSelector(state => state['features/chat']);
+
+    return (
+        <NavigationContainer
+            independent = { true }
+            ref = { lobbyNavigationContainerRef }
+            theme = { navigationContainerTheme }>
+            <LobbyStack.Navigator
+                screenOptions = {{
+                    presentation: 'modal'
+                }}>
+                <LobbyStack.Screen
+                    component = { LobbyScreen }
+                    name = { screen.lobby.main }
+                    options = { lobbyScreenOptions } />
+                {
+                    isLobbyChatActive
+                    && <LobbyStack.Screen
+                        component = { LobbyChatScreen }
+                        name = { screen.lobby.chat }
+                        options = { lobbyChatScreenOptions } />
+                }
+            </LobbyStack.Navigator>
+        </NavigationContainer>
+    );
+
+};
+
+export default LobbyNavigationContainer;

react/features/mobile/navigation/functions.js

@@ -0,0 +1,31 @@
+import React from 'react';
+import { useTranslation } from 'react-i18next';
+import { Platform } from 'react-native';
+
+import { IconClose } from '../../base/icons';
+
+import HeaderNavigationButton from './components/HeaderNavigationButton';
+
+/**
+ * Close icon/text button based on platform.
+ *
+ * @param {Function} goBack - Goes back to the previous screen function.
+ * @returns {React.Component}
+ */
+export function screenHeaderCloseButton(goBack: Function) {
+    const { t } = useTranslation();
+
+    if (Platform.OS === 'ios') {
+        return (
+            <HeaderNavigationButton
+                label = { t('dialog.close') }
+                onPress = { goBack } />
+        );
+    }
+
+    return (
+        <HeaderNavigationButton
+            onPress = { goBack }
+            src = { IconClose } />
+    );
+}

react/features/mobile/navigation/middleware.js

@@ -1,8 +1,7 @@
-// @flow
-
 import debounce from 'lodash/debounce';
 
-import { SET_ROOM } from '../../base/conference/actionTypes';
+import { CONFERENCE_FAILED, SET_ROOM } from '../../base/conference/actionTypes';
+import { JitsiConferenceErrors } from '../../base/lib-jitsi-meet';
 import { MiddlewareRegistry } from '../../base/redux';
 import { readyToClose } from '../external-api/actions';
 
@@ -16,6 +15,9 @@ MiddlewareRegistry.register(store => next => action => {
     switch (action.type) {
     case SET_ROOM:
         return _setRoom(store, next, action);
+
+    case CONFERENCE_FAILED:
+        return _conferenceFailed(store, next, action);
     }
 
     return next(action);
@@ -61,3 +63,31 @@ function _setRoom({ dispatch, getState }, next, action) {
 
     return result;
 }
+
+/**
+ * Function to handle the conference failed event and navigate the user to the lobby screen
+ * based on the failure reason.
+ *
+ * @param {Object} store - The Redux store.
+ * @param {Function} next - The Redux next function.
+ * @param {Object} action - The Redux action.
+ * @returns {Object}
+ */
+function _conferenceFailed({ dispatch, getState }, next, action) {
+    const state = getState();
+    const isWelcomePageEnabled = isWelcomePageAppEnabled(state);
+    const { error } = action;
+
+    // We need to cover the case where knocking participant
+    // is rejected from entering the conference
+    if (error.name === JitsiConferenceErrors.CONFERENCE_ACCESS_DENIED) {
+        if (isWelcomePageEnabled) {
+            navigateRoot(screen.root);
+        } else {
+            // For JitsiSDK, WelcomePage is not available
+            _sendReadyToClose(dispatch);
+        }
+    }
+
+    return next(action);
+}

react/features/mobile/navigation/routes.js

@@ -34,5 +34,9 @@ export const screen = {
         invite: 'Invite',
         sharedDocument: 'Shared document'
     },
-    lobby: 'Lobby'
+    lobby: {
+        root: 'Lobby root',
+        main: 'Lobby',
+        chat: 'Lobby chat'
+    }
 };

react/features/mobile/navigation/screenOptions.js

@@ -1,13 +1,9 @@
-// @flow
-
 import { TransitionPresets } from '@react-navigation/stack';
 import React from 'react';
-import { useTranslation } from 'react-i18next';
 import { Platform } from 'react-native';
 
 import {
     Icon,
-    IconClose,
     IconHelp,
     IconHome,
     IconInfo,
@@ -15,8 +11,9 @@ import {
 } from '../../base/icons';
 import BaseTheme from '../../base/ui/components/BaseTheme.native';
 
-import HeaderNavigationButton from './components/HeaderNavigationButton';
 import { goBack } from './components/conference/ConferenceNavigationContainerRef';
+import { goBack as goBackToLobbyScreen } from './components/lobby/LobbyNavigationContainerRef';
+import { screenHeaderCloseButton } from './functions';
 
 
 /**
@@ -167,16 +164,12 @@ export const helpScreenOptions = {
 /**
  * Screen options for conference.
  */
-export const conferenceScreenOptions = {
-    ...fullScreenOptions
-};
+export const conferenceScreenOptions = fullScreenOptions;
 
 /**
  * Screen options for lobby modal.
  */
-export const lobbyScreenOptions = {
-    ...fullScreenOptions
-};
+export const lobbyScreenOptions = fullScreenOptions;
 
 /**
  * Tab bar options for chat screen.
@@ -198,23 +191,7 @@ export const chatTabBarOptions = {
 export const presentationScreenOptions = {
     ...conferenceModalPresentation,
     headerBackTitleVisible: false,
-    headerLeft: () => {
-        const { t } = useTranslation();
-
-        if (Platform.OS === 'ios') {
-            return (
-                <HeaderNavigationButton
-                    label = { t('dialog.close') }
-                    onPress = { goBack } />
-            );
-        }
-
-        return (
-            <HeaderNavigationButton
-                onPress = { goBack }
-                src = { IconClose } />
-        );
-    },
+    headerLeft: () => screenHeaderCloseButton(goBack),
     headerStatusBarHeight: 0,
     headerStyle: {
         backgroundColor: BaseTheme.palette.screen01Header
@@ -227,50 +204,44 @@ export const presentationScreenOptions = {
 /**
  * Screen options for chat.
  */
-export const chatScreenOptions = {
-    ...presentationScreenOptions
-};
+export const chatScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for invite modal.
  */
-export const inviteScreenOptions = {
-    ...presentationScreenOptions
-};
+export const inviteScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for participants modal.
  */
-export const participantsScreenOptions = {
-    ...presentationScreenOptions
-};
+export const participantsScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for speaker stats modal.
  */
-export const speakerStatsScreenOptions = {
-    ...presentationScreenOptions
-};
+export const speakerStatsScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for security options modal.
  */
-export const securityScreenOptions = {
-    ...presentationScreenOptions
-};
+export const securityScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for recording modal.
  */
-export const recordingScreenOptions = {
-    ...presentationScreenOptions
-};
+export const recordingScreenOptions = presentationScreenOptions;
 
 /**
  * Screen options for live stream modal.
  */
-export const liveStreamScreenOptions = {
-    ...presentationScreenOptions
+export const liveStreamScreenOptions = presentationScreenOptions;
+
+/**
+ * Screen options for lobby chat modal.
+ */
+export const lobbyChatScreenOptions = {
+    ...presentationScreenOptions,
+    headerLeft: () => screenHeaderCloseButton(goBackToLobbyScreen)
 };
 
 /**

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

@@ -1430,14 +1430,7 @@ function _mapStateToProps(state, ownProps) {
         }
     }
 
-    let { toolbarButtons } = ownProps;
-    const stateToolbarButtons = getToolbarButtons(state);
-
-    if (toolbarButtons) {
-        toolbarButtons = toolbarButtons.filter(name => isToolbarButtonEnabled(name, stateToolbarButtons));
-    } else {
-        toolbarButtons = stateToolbarButtons;
-    }
+    const toolbarButtons = ownProps.toolbarButtons || getToolbarButtons(state);
 
     return {
         _backgroundType: state['features/virtual-background'].backgroundType,

react/features/toolbox/functions.any.js

@@ -10,5 +10,5 @@ export function isAudioMuteButtonDisabled(state: Object) {
     const { available, muted, unmuteBlocked } = state['features/base/media'].audio;
     const { startSilent } = state['features/base/config'];
 
-    return !available || startSilent || (muted && unmuteBlocked);
+    return Boolean(!available || startSilent || (muted && unmuteBlocked));
 }

resources/install-letsencrypt-cert.sh

@@ -23,33 +23,30 @@ echo "by providing an email address for important account notifications"
 echo -n "Enter your email and press [ENTER]: "
 read EMAIL
 
-CERTBOT="$(command -v certbot)"
+CERTBOT="$(command -v certbot || true)"
 if [ ! -x "$CERTBOT" ] ; then
     DISTRO=$(lsb_release -is)
     DISTRO_VERSION=$(lsb_release -rs)
-    if [ "$DISTRO" = "Debian" ]; then
-        apt-get update
-        apt-get -y install certbot
-    elif [ "$DISTRO" = "Ubuntu" ]; then
-        if [ "$DISTRO_VERSION" = "20.04" ] || [ "$DISTRO_VERSION" = "19.10" ]; then
-                apt-get update
-                apt-get -y install software-properties-common
-                add-apt-repository -y universe
-                apt-get update
-                apt-get -y install certbot
-        elif [ "$DISTRO_VERSION" = "18.04" ]; then
-                apt-get update
-                apt-get -y install software-properties-common
-                add-apt-repository -y universe
-                add-apt-repository -y ppa:certbot/certbot
-                apt-get update
-                apt-get -y install certbot
-        fi
-    else
+
+    if [ "$DISTRO" != "Debian" ] && [ "$DISTRO" != "Ubuntu" ]; then
         echo "$DISTRO $DISTRO_VERSION is not supported"
-        echo "Only Debian 9,10 and Ubuntu 18.04,19.10,20.04 are supported"
+        echo "Only Debian and Ubuntu 18.04+ are supported"
         exit 1
     fi
+
+    if [ "$DISTRO" = "Ubuntu" ]; then
+        apt-get update
+        apt-get -y install software-properties-common
+        add-apt-repository -y universe
+        if [ "$DISTRO_VERSION" = "18.04" ]; then
+            add-apt-repository -y ppa:certbot/certbot
+        fi
+    fi
+
+    apt-get update
+    apt-get -y install certbot
+
+    CERTBOT="$(command -v certbot)"
 fi
 
 CRON_FILE="/etc/cron.weekly/letsencrypt-renew"