fix(support-url): Hide contact support button when SUPPORT_URL is empty

- fix issue on error notification on invite contacts

.github/workflows/ci.yml

@@ -12,6 +12,7 @@ jobs:
       with:
         node-version: '12.x'
     - run: npm install
-    - run: git status -s --untracked-files=no
+    - name: Check if the git repository is clean
+      run: exit $( git status --porcelain --untracked-files=no | head -255 | wc -l )
     - run: npm run lint
     - run: make

CONTRIBUTING.md

@@ -152,3 +152,20 @@ this model but new features should follow this new layout.
 
 When working on an old feature, adding the necessary changes to migrate to the new
 model is encouraged.
+
+
+### Avoiding bundle bloat
+
+When adding a new feature it's possible that it triggers a build failure due to the increased bundle size. We have safeguards inplace to avoid bundles growing disproportionatelly. While there are legit reasons for increasing the limits, please analyze the bundle first to make sure no unintended dependencies have been included, causing the increase in size.
+
+First, make a production build with bundle-analysis enabled:
+
+```
+npx webpack -p --analyze-bundle
+```
+
+Then open the interactive bundle analyzer tool:
+
+```
+npx webpack-bundle-analyzer build/app-stats.json
+```

README.md

@@ -2,9 +2,9 @@
 
 Jitsi Meet is an open-source (Apache) WebRTC JavaScript application that uses [Jitsi Videobridge](https://jitsi.org/videobridge) to provide high quality, [secure](https://jitsi.org/security) and scalable video conferences. Jitsi Meet in action can be seen at [here at the session #482 of the VoIP Users Conference](http://youtu.be/7vFUVClsNh0).
 
-The Jitsi Meet client runs in your browser, without installing anything else on your computer. You can try it out at https://meet.jit.si.
+The Jitsi Meet client runs in your browser, without installing anything on your computer. You can try it out at https://meet.jit.si.
 
-Jitsi Meet allows very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.
+Jitsi Meet allows for very efficient collaboration. Users can stream their desktop or only some windows. It also supports shared document editing with Etherpad.
 
 **NOTE:** If you are looking for Jitsi as a Service (JaaS) please start [here](https://jaas.8x8.vc).
 

android/gradle.properties

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

android/sdk/src/main/AndroidManifest.xml

@@ -40,7 +40,8 @@
 
         <service
             android:name=".ConnectionService"
-            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE">
+            android:permission="android.permission.BIND_TELECOM_CONNECTION_SERVICE"
+            android:exported="true">
             <intent-filter>
                 <action android:name="android.telecom.ConnectionService" />
             </intent-filter>

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

@@ -20,8 +20,10 @@ public class BroadcastIntentHelper {
         return intent;
     }
 
-    public static Intent buildToggleScreenShareIntent() {
-        return new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
+    public static Intent buildToggleScreenShareIntent(boolean enabled) {
+        Intent intent = new Intent(BroadcastAction.Type.TOGGLE_SCREEN_SHARE.getAction());
+        intent.putExtra("enabled", enabled);
+        return intent;
     }
 
     public static Intent buildOpenChatIntent(String participantId) {

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

@@ -47,7 +47,7 @@ class LocaleDetector extends ReactContextBaseJavaModule {
     public Map<String, Object> getConstants() {
         Context context = getReactApplicationContext();
         HashMap<String,Object> constants = new HashMap<>();
-        constants.put("locale", context.getResources().getConfiguration().locale.toString());
+        constants.put("locale", context.getResources().getConfiguration().locale.toLanguageTag());
         return constants;
     }
 
@@ -55,4 +55,4 @@ class LocaleDetector extends ReactContextBaseJavaModule {
     public String getName() {
         return "LocaleDetector";
     }
-}
+}

app.js

@@ -1,7 +1,6 @@
 /* application specific logic */
 
 import 'jquery';
-import 'jQuery-Impromptu';
 
 import 'olm';
 

babel.config.js

@@ -0,0 +1,9 @@
+module.exports = {
+    presets: [ 'module:metro-react-native-babel-preset' ],
+    env: {
+        production: {
+            plugins: [ 'react-native-paper/babel' ]
+        }
+    },
+    plugins: [ 'optional-require' ]
+};

conference.js

@@ -1,10 +1,12 @@
 /* global APP, JitsiMeetJS, config, interfaceConfig */
 
+import { jitsiLocalStorage } from '@jitsi/js-utils';
 import EventEmitter from 'events';
 import Logger from 'jitsi-meet-logger';
 
 import { openConnection } from './connection';
 import { ENDPOINT_TEXT_MESSAGE_NAME } from './modules/API/constants';
+import { AUDIO_ONLY_SCREEN_SHARE_NO_TRACK } from './modules/UI/UIErrors';
 import AuthHandler from './modules/UI/authentication/AuthHandler';
 import UIUtil from './modules/UI/util/UIUtil';
 import mediaDeviceHelper from './modules/devices/mediaDeviceHelper';
@@ -43,6 +45,7 @@ import {
     p2pStatusChanged,
     sendLocalParticipant
 } from './react/features/base/conference';
+import { getReplaceParticipant } from './react/features/base/config/functions';
 import {
     checkAndNotifyForNewDevice,
     getAvailableDevices,
@@ -125,8 +128,8 @@ import {
     makePrecallTest
 } from './react/features/prejoin';
 import { disableReceiver, stopReceiver } from './react/features/remote-control';
+import { setScreenAudioShareState, isScreenAudioShared } from './react/features/screen-share/';
 import { toggleScreenshotCaptureEffect } from './react/features/screenshot-capture';
-import { setSharedVideoStatus } from './react/features/shared-video/actions';
 import { AudioMixerEffect } from './react/features/stream-effects/audio-mixer/AudioMixerEffect';
 import { createPresenterEffect } from './react/features/stream-effects/presenter';
 import { endpointMessageReceived } from './react/features/subtitles';
@@ -174,8 +177,7 @@ const commands = {
     AVATAR_URL: AVATAR_URL_COMMAND,
     CUSTOM_ROLE: 'custom-role',
     EMAIL: EMAIL_COMMAND,
-    ETHERPAD: 'etherpad',
-    SHARED_VIDEO: 'shared-video'
+    ETHERPAD: 'etherpad'
 };
 
 /**
@@ -303,12 +305,20 @@ class ConferenceConnector {
 
         // not enough rights to create conference
         case JitsiConferenceErrors.AUTHENTICATION_REQUIRED: {
+
+            const replaceParticipant = getReplaceParticipant(APP.store.getState());
+
             // Schedule reconnect to check if someone else created the room.
             this.reconnectTimeout = setTimeout(() => {
                 APP.store.dispatch(conferenceWillJoin(room));
-                room.join();
+                room.join(null, replaceParticipant);
             }, 5000);
 
+            const { password }
+                = APP.store.getState()['features/base/conference'];
+
+            AuthHandler.requireAuth(room, password);
+
             break;
         }
 
@@ -387,7 +397,10 @@ class ConferenceConnector {
      *
      */
     connect() {
-        room.join();
+        const replaceParticipant = getReplaceParticipant(APP.store.getState());
+
+        // the local storage overrides here and in connection.js can be used by jibri
+        room.join(jitsiLocalStorage.getItem('xmpp_conference_password_override'), replaceParticipant);
     }
 }
 
@@ -730,7 +743,7 @@ export default {
         }
 
         if (!tracks.find(t => t.isVideoTrack())) {
-            this.setVideoMuteStatus(true);
+            this.setVideoMuteStatus();
         }
 
         if (config.iAmRecorder) {
@@ -984,7 +997,7 @@ export default {
             // This will only modify base/media.video.muted which is then synced
             // up with the track at the end of local tracks initialization.
             muteLocalVideo(mute);
-            this.setVideoMuteStatus(mute);
+            this.setVideoMuteStatus();
 
             return;
         } else if (this.isLocalVideoMuted() === mute) {
@@ -1078,17 +1091,6 @@ export default {
         return room && room.isCallstatsEnabled();
     },
 
-    /**
-     * Sends the given feedback through CallStats if enabled.
-     *
-     * @param overallFeedback an integer between 1 and 5 indicating the
-     * user feedback
-     * @param detailedFeedback detailed feedback from the user. Not yet used
-     */
-    sendFeedback(overallFeedback, detailedFeedback) {
-        return room.sendFeedback(overallFeedback, detailedFeedback);
-    },
-
     /**
      * Get speaker stats that track total dominant speaker time.
      *
@@ -1393,7 +1395,7 @@ export default {
                     .then(() => {
                         this.localVideo = newTrack;
                         this._setSharingScreen(newTrack);
-                        this.setVideoMuteStatus(this.isLocalVideoMuted());
+                        this.setVideoMuteStatus();
                     })
                     .then(resolve)
                     .catch(error => {
@@ -1544,6 +1546,8 @@ export default {
             this._desktopAudioStream = undefined;
         }
 
+        APP.store.dispatch(setScreenAudioShareState(false));
+
         if (didHaveVideo) {
             promise = promise.then(() => createLocalTracksF({ devices: [ 'video' ] }))
                 .then(([ stream ]) => {
@@ -1660,6 +1664,23 @@ export default {
                 = this._turnScreenSharingOff.bind(this, didHaveVideo);
 
             const desktopVideoStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
+            const dekstopAudioStream = desktopStreams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
+
+            if (dekstopAudioStream) {
+                dekstopAudioStream.on(
+                    JitsiTrackEvents.LOCAL_TRACK_STOPPED,
+                    () => {
+                        logger.debug(`Local screensharing audio track stopped. ${this.isSharingScreen}`);
+
+                        // Handle case where screen share was stopped from  the browsers 'screen share in progress'
+                        // window. If audio screen sharing is stopped via the normal UX flow this point shouldn't
+                        // be reached.
+                        isScreenAudioShared(APP.store.getState())
+                            && this._untoggleScreenSharing
+                            && this._untoggleScreenSharing();
+                    }
+                );
+            }
 
             if (desktopVideoStream) {
                 desktopVideoStream.on(
@@ -1743,16 +1764,12 @@ export default {
             const isPortrait = height >= width;
             const DESKTOP_STREAM_CAP = 720;
 
-            // Config.js setting for resizing high resolution desktop tracks to 720p when presenter is turned on.
-            const resizeEnabled = config.videoQuality && config.videoQuality.resizeDesktopForPresenter;
             const highResolutionTrack
                 = (isPortrait && width > DESKTOP_STREAM_CAP) || (!isPortrait && height > DESKTOP_STREAM_CAP);
 
             // Resizing the desktop track for presenter is causing blurriness of the desktop share on chrome.
             // Disable resizing by default, enable it only when config.js setting is enabled.
-            // Firefox doesn't return width and height for desktop tracks. Therefore, track needs to be resized
-            // for creating the canvas for presenter.
-            const resizeDesktopStream = browser.isFirefox() || (highResolutionTrack && resizeEnabled);
+            const resizeDesktopStream = highResolutionTrack && config.videoQuality?.resizeDesktopForPresenter;
 
             if (resizeDesktopStream) {
                 let desktopResizeConstraints = {};
@@ -1797,7 +1814,7 @@ export default {
             try {
                 await this.localVideo.setEffect(effect);
                 APP.store.dispatch(setVideoMuted(mute, MEDIA_TYPE.PRESENTER));
-                this.setVideoMuteStatus(mute);
+                this.setVideoMuteStatus();
             } catch (err) {
                 logger.error('Failed to apply the Presenter effect', err);
             }
@@ -1828,15 +1845,28 @@ export default {
 
         return this._createDesktopTrack(options)
             .then(async streams => {
-                const desktopVideoStream = streams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
+                let desktopVideoStream = streams.find(stream => stream.getType() === MEDIA_TYPE.VIDEO);
+
+                this._desktopAudioStream = streams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
+
+                const { audioOnly = false } = options;
+
+                // If we're in audio only mode dispose of the video track otherwise the screensharing state will be
+                // inconsistent.
+                if (audioOnly) {
+                    desktopVideoStream.dispose();
+                    desktopVideoStream = undefined;
+
+                    if (!this._desktopAudioStream) {
+                        return Promise.reject(AUDIO_ONLY_SCREEN_SHARE_NO_TRACK);
+                    }
+                }
 
                 if (desktopVideoStream) {
                     logger.debug(`_switchToScreenSharing is using ${desktopVideoStream} for useVideoStream`);
                     await this.useVideoStream(desktopVideoStream);
                 }
 
-                this._desktopAudioStream = streams.find(stream => stream.getType() === MEDIA_TYPE.AUDIO);
-
                 if (this._desktopAudioStream) {
                     // If there is a localAudio stream, mix in the desktop audio stream captured by the screen sharing
                     // api.
@@ -1848,7 +1878,9 @@ export default {
                         // If no local stream is present ( i.e. no input audio devices) we use the screen share audio
                         // stream as we would use a regular stream.
                         await this.useAudioStream(this._desktopAudioStream);
+
                     }
+                    APP.store.dispatch(setScreenAudioShareState(true));
                 }
             })
             .then(() => {
@@ -1916,6 +1948,9 @@ export default {
         } else if (error.name === JitsiTrackErrors.SCREENSHARING_GENERIC_ERROR) {
             descriptionKey = 'dialog.screenSharingFailed';
             titleKey = 'dialog.screenSharingFailedTitle';
+        } else if (error === AUDIO_ONLY_SCREEN_SHARE_NO_TRACK) {
+            descriptionKey = 'notify.screenShareNoAudio';
+            titleKey = 'notify.screenShareNoAudioTitle';
         }
 
         APP.UI.messageHandler.showError({
@@ -1942,7 +1977,12 @@ export default {
 
         room.on(
             JitsiConferenceEvents.CONFERENCE_UNIQUE_ID_SET,
-            (...args) => APP.store.dispatch(conferenceUniqueIdSet(room, ...args)));
+            (...args) => {
+                // Preserve the sessionId so that the value is accessible even after room
+                // is disconnected.
+                room.sessionId = room.getMeetingUniqueId();
+                APP.store.dispatch(conferenceUniqueIdSet(room, ...args));
+            });
 
         room.on(
             JitsiConferenceEvents.AUTH_STATUS_CHANGED,
@@ -1974,8 +2014,6 @@ export default {
             }
 
             logger.log(`USER ${id} LEFT:`, user);
-
-            APP.UI.onSharedVideoStop(id);
         });
 
         room.on(JitsiConferenceEvents.USER_STATUS_CHANGED, (id, status) => {
@@ -2134,7 +2172,24 @@ export default {
             JitsiConferenceEvents.LOCK_STATE_CHANGED,
             (...args) => APP.store.dispatch(lockStateChanged(room, ...args)));
 
-        room.on(JitsiConferenceEvents.KICKED, participant => {
+        room.on(JitsiConferenceEvents.KICKED, (participant, reason, isReplaced) => {
+            if (isReplaced) {
+                // this event triggers when the local participant is kicked, `participant`
+                // is the kicker. In replace participant case, kicker is undefined,
+                // as the server initiated it. We mark in store the local participant
+                // as being replaced based on jwt.
+                const localParticipant = getLocalParticipant(APP.store.getState());
+
+                APP.store.dispatch(participantUpdated({
+                    conference: room,
+                    id: localParticipant.id,
+                    isReplaced
+                }));
+
+                // we send readyToClose when kicked participant is replace so that
+                // embedding app can choose to dispose the iframe API on the handler.
+                APP.API.notifyReadyToClose();
+            }
             APP.store.dispatch(kickedOut(room, participant));
         });
 
@@ -2236,7 +2291,7 @@ export default {
         });
 
         APP.UI.addListener(UIEvents.AUTH_CLICKED, () => {
-            AuthHandler.authenticateExternal(room);
+            AuthHandler.authenticate(room);
         });
 
         APP.UI.addListener(
@@ -2260,7 +2315,7 @@ export default {
                     return this._createPresenterStreamEffect(height, cameraDeviceId)
                         .then(effect => this.localVideo.setEffect(effect))
                         .then(() => {
-                            this.setVideoMuteStatus(false);
+                            this.setVideoMuteStatus();
                             logger.log('Switched local video device while screen sharing and the video is unmuted');
                             this._updateVideoDeviceId();
                         })
@@ -2407,61 +2462,10 @@ export default {
         });
 
         APP.UI.addListener(
-            UIEvents.TOGGLE_SCREENSHARING, this.toggleScreenSharing.bind(this)
+            UIEvents.TOGGLE_SCREENSHARING, ({ enabled, audioOnly }) => {
+                this.toggleScreenSharing(enabled, { audioOnly });
+            }
         );
-
-        /* eslint-disable max-params */
-        APP.UI.addListener(
-            UIEvents.UPDATE_SHARED_VIDEO,
-            (url, state, time, isMuted, volume) => {
-                /* eslint-enable max-params */
-                // send start and stop commands once, and remove any updates
-                // that had left
-                if (state === 'stop'
-                        || state === 'start'
-                        || state === 'playing') {
-                    const localParticipant = getLocalParticipant(APP.store.getState());
-
-                    room.removeCommand(this.commands.defaults.SHARED_VIDEO);
-                    room.sendCommandOnce(this.commands.defaults.SHARED_VIDEO, {
-                        value: url,
-                        attributes: {
-                            state,
-                            time,
-                            muted: isMuted,
-                            volume,
-                            from: localParticipant.id
-                        }
-                    });
-                } else {
-                    // in case of paused, in order to allow late users to join
-                    // paused
-                    room.removeCommand(this.commands.defaults.SHARED_VIDEO);
-                    room.sendCommand(this.commands.defaults.SHARED_VIDEO, {
-                        value: url,
-                        attributes: {
-                            state,
-                            time,
-                            muted: isMuted,
-                            volume
-                        }
-                    });
-                }
-
-                APP.store.dispatch(setSharedVideoStatus(state));
-            });
-        room.addCommandListener(
-            this.commands.defaults.SHARED_VIDEO,
-            ({ value, attributes }, id) => {
-                if (attributes.state === 'stop') {
-                    APP.UI.onSharedVideoStop(id, attributes);
-                } else if (attributes.state === 'start') {
-                    APP.UI.onSharedVideoStart(id, value, attributes);
-                } else if (attributes.state === 'playing'
-                    || attributes.state === 'pause') {
-                    APP.UI.onSharedVideoUpdate(id, value, attributes);
-                }
-            });
     },
 
     /**
@@ -2815,14 +2819,11 @@ export default {
             requestFeedbackPromise = Promise.resolve(true);
         }
 
-        // All promises are returning Promise.resolve to make Promise.all to
-        // be resolved when both Promises are finished. Otherwise Promise.all
-        // will reject on first rejected Promise and we can redirect the page
-        // before all operations are done.
         Promise.all([
             requestFeedbackPromise,
             this.leaveRoomAndDisconnect()
-        ]).then(values => {
+        ])
+        .then(values => {
             this._room = undefined;
             room = undefined;
 
@@ -3060,12 +3061,9 @@ export default {
 
     /**
      * Sets the video muted status.
-     *
-     * @param {boolean} muted - New muted status.
      */
-    setVideoMuteStatus(muted) {
+    setVideoMuteStatus() {
         APP.UI.setVideoMuted(this.getMyUserId());
-        APP.API.notifyVideoMutedStatusChanged(muted);
     },
 
     /**

config.js

@@ -59,8 +59,10 @@ var config = {
         // simulcast is turned off for the desktop share. If presenter is turned
         // on while screensharing is in progress, the max bitrate is automatically
         // adjusted to 2.5 Mbps. This takes a value between 0 and 1 which determines
-        // the probability for this to be enabled.
-        // capScreenshareBitrate: 1 // 0 to disable
+        // the probability for this to be enabled. This setting has been deprecated.
+        // desktopSharingFrameRate.max now determines whether simulcast will be enabled
+        // or disabled for the screenshare.
+        // capScreenshareBitrate: 1 // 0 to disable - deprecated.
 
         // Enable callstats only for a percentage of users.
         // This takes a value between 0 and 100 which determines the probability for
@@ -80,6 +82,9 @@ var config = {
     // Media
     //
 
+    // Enable unified plan implementation support on Chromium based browsers.
+    // enableUnifiedOnChrome: false,
+
     // Audio
 
     // Disable measuring of audio levels.
@@ -96,6 +101,10 @@ var config = {
     // about the call.
     // enableSaveLogs: false,
 
+    // Enabling this will hide the "Show More" link in the GSM popover that can be
+    // used to display more statistics about the connection (IP, Port, protocol, etc).
+    // disableShowMoreStats: true,
+
     // Enabling this will run the lib-jitsi-meet noise detection module which will
     // notify the user if there is noise, other than voice, coming from the current
     // selected microphone. The purpose it to let the user know that the input could
@@ -117,14 +126,16 @@ var config = {
     // participants and to enable it back a reload is needed.
     // startSilent: false
 
-    // Sets the preferred target bitrate for the Opus audio codec by setting its
-    // 'maxaveragebitrate' parameter. Currently not available in p2p mode.
-    // Valid values are in the range 6000 to 510000
-    // opusMaxAverageBitrate: 20000,
-
     // Enables support for opus-red (redundancy for Opus).
     // enableOpusRed: false,
 
+    // Specify audio quality stereo and opusMaxAverageBitrate values in order to enable HD audio.
+    // Beware, by doing so, you are disabling echo cancellation, noise suppression and AGC.
+    // audioQuality: {
+    //     stereo: false,
+    //     opusMaxAverageBitrate: null // Value to fit the 6000 to 510000 range.
+    // },
+
     // Video
 
     // Sets the preferred resolution (height) for local video. Defaults to 720.
@@ -224,6 +235,11 @@ var config = {
     // Default value for the channel "last N" attribute. -1 for unlimited.
     channelLastN: -1,
 
+    // Provides a way for the lastN value to be controlled through the UI.
+    // When startLastN is present, conference starts with a last-n value of startLastN and channelLastN
+    // value will be used when the quality level is selected using "Manage Video Quality" slider.
+    // startLastN: 1,
+
     // Provides a way to use different "last N" values based on the number of participants in the conference.
     // The keys in an Object represent number of participants and the values are "last N" to be used when number of
     // participants gets to or above the number.
@@ -261,12 +277,24 @@ var config = {
     //    // to take effect.
     //    preferredCodec: 'VP8',
     //
+    //    // Provides a way to enforce the preferred codec for the conference even when the conference has endpoints
+    //    // that do not support the preferred codec. For example, older versions of Safari do not support VP9 yet.
+    //    // This will result in Safari not being able to decode video from endpoints sending VP9 video.
+    //    // When set to false, the conference falls back to VP8 whenever there is an endpoint that doesn't support the
+    //    // preferred codec and goes back to the preferred codec when that endpoint leaves.
+    //    // enforcePreferredCodec: false,
+    //
     //    // Provides a way to configure the maximum bitrates that will be enforced on the simulcast streams for
     //    // video tracks. The keys in the object represent the type of the stream (LD, SD or HD) and the values
     //    // are the max.bitrates to be set on that particular type of stream. The actual send may vary based on
     //    // the available bandwidth calculated by the browser, but it will be capped by the values specified here.
     //    // This is currently not implemented on app based clients on mobile.
     //    maxBitratesVideo: {
+    //          H264: {
+    //              low: 200000,
+    //              standard: 500000,
+    //              high: 1500000
+    //          },
     //          VP8 : {
     //              low: 200000,
     //              standard: 500000,
@@ -332,8 +360,7 @@ var config = {
     // enableIceRestart: false,
 
     // Enables forced reload of the client when the call is migrated as a result of
-    // the bridge going down. Currently enabled by default as call migration through
-    // session-terminate is causing siganling issues when Octo is enabled.
+    // the bridge going down.
     // enableForcedReload: true,
 
     // Use TURN/UDP servers for the jitsi-videobridge connection (by default
@@ -369,7 +396,9 @@ var config = {
     // enableClosePage: false,
 
     // Disable hiding of remote thumbnails when in a 1-on-1 conference call.
-    // disable1On1Mode: false,
+    // Setting this to null, will also disable showing the remote videos
+    // when the toolbar is shown on mouse movements
+    // disable1On1Mode: null | false | true,
 
     // Default language for the user interface.
     // defaultLanguage: 'en',
@@ -414,6 +443,10 @@ var config = {
     // Base URL for a Gravatar-compatible service. Defaults to libravatar.
     // gravatarBaseURL: 'https://seccdn.libravatar.org/avatar/',
 
+    // App name to be displayed in the invitation email subject, as an alternative to
+    // interfaceConfig.APP_NAME.
+    // inviteAppName: null,
+
     // Moved from interfaceConfig(TOOLBAR_BUTTONS).
     // The name of the toolbar buttons to display in the toolbar, including the
     // "More actions" menu. If present, the button will display. Exceptions are
@@ -428,7 +461,7 @@ var config = {
     // toolbarButtons: [
     //    'microphone', 'camera', 'closedcaptions', 'desktop', 'embedmeeting', 'fullscreen',
     //    'fodeviceselection', 'hangup', 'profile', 'chat', 'recording',
-    //    'livestreaming', 'etherpad', 'sharedvideo', 'settings', 'raisehand',
+    //    'livestreaming', 'etherpad', 'sharedvideo', 'shareaudio', 'settings', 'raisehand',
     //    'videoquality', 'filmstrip', 'invite', 'feedback', 'stats', 'shortcuts',
     //    'tileview', 'select-background', 'download', 'help', 'mute-everyone', 'mute-video-everyone', 'security'
     // ],
@@ -481,12 +514,8 @@ var config = {
         // connection.
         enabled: true,
 
-        // The STUN servers that will be used in the peer to peer connections
-        stunServers: [
-
-            // { urls: 'stun:jitsi-meet.example.com:3478' },
-            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
-        ]
+        // Enable unified plan implementation support on Chromium for p2p connection.
+        // enableUnifiedOnChrome: false,
 
         // Sets the ICE transport policy for the p2p connection. At the time
         // of this writing the list of possible values are 'all' and 'relay',
@@ -513,7 +542,14 @@ var config = {
 
         // How long we're going to wait, before going back to P2P after the 3rd
         // participant has left the conference (to filter out page reload).
-        // backToP2PDelay: 5
+        // backToP2PDelay: 5,
+
+        // The STUN servers that will be used in the peer to peer connections
+        stunServers: [
+
+            // { urls: 'stun:jitsi-meet.example.com:3478' },
+            { urls: 'stun:meet-jit-si-turnrelay.jitsi.net:443' }
+        ]
     },
 
     analytics: {
@@ -587,8 +623,8 @@ var config = {
     // localRecording: {
     // Enables local recording.
     // Additionally, 'localrecording' (all lowercase) needs to be added to
-    // TOOLBAR_BUTTONS in interface_config.js for the Local Recording
-    // button to show up on the toolbar.
+    // the `toolbarButtons`-array for the Local Recording button to show up
+    // on the toolbar.
     //
     //     enabled: true,
     //
@@ -651,7 +687,9 @@ var config = {
     // Options related to the remote participant menu.
     // remoteVideoMenu: {
     //     // If set to true the 'Kick out' button will be disabled.
-    //     disableKick: true
+    //     disableKick: true,
+    //     // If set to true the 'Grant moderator' button will be disabled.
+    //     disableGrantModerator: true
     // },
 
     // If set to true all muting operations of remote participants will be disabled.
@@ -663,8 +701,11 @@ var config = {
     /**
      External API url used to receive branding specific information.
      If there is no url set or there are missing fields, the defaults are applied.
+     The config file should be in JSON.
      None of the fields are mandatory and the response must have the shape:
      {
+         // The domain url to apply (will replace the domain in the sharing conference link/embed section)
+         inviteDomain: 'example-company.org,
          // The hex value for the colour used as background
          backgroundColor: '#fff',
          // The url for the image used as background
@@ -705,6 +746,18 @@ var config = {
     // is not persisting the local storage inside the iframe.
     // useHostPageLocalStorage: true,
 
+    // etherpad ("shared document") integration.
+    //
+
+    // If set, add a "Open shared document" link to the bottom right menu that
+    // will open an etherpad document.
+    // etherpad_base: 'https://your-etherpad-installati.on/p/',
+
+    // If etherpad_base is set, and useRoomAsSharedDocumentName is set to true,
+    // open a pad with the name of the room (lowercased) instead of a pad with a
+    // random UUID.
+    // useRoomAsSharedDocumentName: true,
+
     // List of undocumented settings used in jitsi-meet
     /**
      _immediateReloadThreshold
@@ -717,7 +770,6 @@ var config = {
      dialOutCodesUrl
      disableRemoteControl
      displayJids
-     etherpad_base
      externalConnectUrl
      firefox_fake_device
      googleApiApplicationClientID
@@ -760,6 +812,11 @@ var config = {
      websocketKeepAliveUrl
      */
 
+    /**
+     * Default interval (milliseconds) for triggering mouseMoved iframe API event
+     */
+    mouseMoveCallbackInterval: 1000,
+
     /**
         Use this array to configure which notifications will be shown to the user
         The items correspond to the title or description key of that notification
@@ -819,7 +876,10 @@ var config = {
     //     'toolbar.noisyAudioInputTitle', // shown when noise is detected for the current microphone
     //     'toolbar.talkWhileMutedPopup', // shown when user tries to speak while muted
     //     'transcribing.failedToStart' // shown when transcribing fails to start
-    // ]
+    // ],
+
+    // Prevent the filmstrip from autohiding when screen width is under a certain threshold
+    // disableFilmstripAutohiding: false,
 
     // Allow all above example options to include a trailing comma and
     // prevent fear when commenting out the last value.

connection.js

@@ -4,7 +4,6 @@ import { jitsiLocalStorage } from '@jitsi/js-utils';
 import Logger from 'jitsi-meet-logger';
 
 import { redirectToTokenAuthService } from './modules/UI/authentication/AuthHandler';
-import { hideLoginDialog } from './react/features/authentication/actions.web';
 import { LoginDialog } from './react/features/authentication/components';
 import { isTokenAuthEnabled } from './react/features/authentication/functions';
 import {
@@ -12,11 +11,14 @@ import {
     connectionFailed
 } from './react/features/base/connection/actions';
 import { openDialog } from './react/features/base/dialog/actions';
+import { setJWT } from './react/features/base/jwt';
 import {
     isFatalJitsiConnectionError,
     JitsiConnectionErrors,
     JitsiConnectionEvents
 } from './react/features/base/lib-jitsi-meet';
+import { isVpaasMeeting } from './react/features/billing-counter/functions';
+import { getJaasJWT } from './react/features/jaas/functions';
 import { setPrejoinDisplayNameRequired } from './react/features/prejoin/actions';
 const logger = Logger.getLogger(__filename);
 
@@ -83,9 +85,15 @@ function checkForAttachParametersAndConnect(id, password, connection) {
  * @returns {Promise<JitsiConnection>} connection if
  * everything is ok, else error.
  */
-export function connect(id, password, roomName) {
+export async function connect(id, password, roomName) {
     const connectionConfig = Object.assign({}, config);
-    const { jwt } = APP.store.getState()['features/base/jwt'];
+    const state = APP.store.getState();
+    let { jwt } = state['features/base/jwt'];
+
+    if (!jwt && isVpaasMeeting(state, false)) {
+        jwt = await getJaasJWT(state);
+        APP.store.dispatch(setJWT(jwt));
+    }
 
     // Use Websocket URL for the web app if configured. Note that there is no 'isWeb' check, because there's assumption
     // that this code executes only on web browsers/electron. This needs to be changed when mobile and web are unified.
@@ -243,7 +251,6 @@ function requestAuth(roomName) {
 
     return new Promise(resolve => {
         const onSuccess = connection => {
-            APP.store.dispatch(hideLoginDialog());
             resolve(connection);
         };
 

css/_atlaskit_overrides.scss

@@ -32,12 +32,25 @@
     .dropdown-menu div[style*="transform"] {
         outline: 1px solid #455166;
     }
+    .dropdown-menu button:not(:active):not(:hover) > span {
+        color: #B8C7E0;
+    }
+
+    /**
+    * Override @atlaskit/tab styling when in a modal because the
+    * tab text color clash with the modal backgrounds.
+    */
+    div[role="tablist"] > div:not([data-selected]):not(:hover),
+    label > div > span {
+        color: #B8C7E0 !important;
+    }
 }
 
 /**
  * Override @atlaskit/modal-dialog header styling
  */
 .atlaskit-portal [role="dialog"] header {
+    box-shadow: none;
     .jitsi-icon {
         cursor: pointer;
     }
@@ -47,6 +60,13 @@
     }
 }
 
+/**
+ * Override @atlaskit/modal-dialog footer styling.
+ */
+ .atlaskit-portal [role="dialog"] footer {
+     box-shadow: none;
+ }
+
 /**
  * Make header close button more easily tappable on mobile.
  */
@@ -80,12 +100,18 @@
 }
 
 .audio-preview > div:nth-child(2),
-.video-preview > div:nth-child(2) {
+.video-preview > div:nth-child(2),
+.reactions-menu-popup > div:nth-child(2) {
     margin-bottom: 4px;
     outline: none;
     padding: 0;
 }
 
+.reactions-menu-popup > div:nth-child(2) {
+    margin-bottom: 6px;
+    box-shadow: none;
+}
+
 /**
  * The following selectors keep the chat modal full-size anywhere between 100px
  * and 580px for desktop or 680px for mobile.

css/_audio-preview.scss

@@ -9,6 +9,11 @@
         max-height: 456px;
         overflow: auto;
         width: 300px;
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
     }
 
     &-header {
@@ -64,7 +69,13 @@
     &-speaker {
         position: relative;
 
-        &:hover {
+        &-ul {
+            margin:0;
+            padding:0;
+            list-style-type: none;
+        }
+
+        &:hover, &:focus-within, &:focus {
             .audio-preview-entry {
                 background: #36383C;
                 margin-left: 0;
@@ -81,7 +92,7 @@
             }
 
             .audio-preview-entry-text {
-                max-width: 196px;
+                max-width: 178px;
             }
         }
 
@@ -90,7 +101,7 @@
         }
 
         .audio-preview-entry-text {
-            max-width: 256px;
+            max-width: 238px;
         }
     }
 
@@ -150,8 +161,9 @@
         color: #1C2025;
         cursor: pointer;
         font-weight: 600;
+        font-size: 0.8rem;
         line-height: 24px;
-        padding: 2px 16px;
+        padding: 2px 8px;
         position: absolute;
         right: 16px;
         top: 5px;
@@ -162,4 +174,10 @@
         right: 16px;
         top: 14px;
     }
+
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
+        outline: none;
+        padding: 0;
+    }
 }

css/_aui_reset.scss

@@ -219,8 +219,9 @@ abbr {
 }
 
 a {
-  color: #3572b0;
+  color: #44A5FF;
   text-decoration: none;
+  font-weight: bold;
 }
 a:focus,
 a:hover,

css/_avatar.scss

@@ -1,7 +1,7 @@
 .avatar {
     background-color: #AAA;
     border-radius: 50%;
-    color: rgba(255, 255, 255, 0.6);
+    color: rgba(255, 255, 255, 1);
     font-weight: 100;
     object-fit: cover;
 
@@ -25,10 +25,6 @@
     width: 100%;
 }
 
-.defaultAvatar {
-    opacity: 0.6
-}
-
 .avatar-badge {
     position: relative;
 

css/_chat.scss

@@ -99,18 +99,19 @@
     div {
         svg {
             cursor: pointer;
-            fill: white
+            fill: white;
         }
     }
 }
 
+
 .chat-header {
     height: 70px;
     position: relative;
     width: 100%;
     z-index: 1;
     display: flex;
-    justify-content: flex-end;
+    justify-content: space-between;
     padding: 16px;
     align-items: center;
     box-sizing: border-box;
@@ -132,6 +133,7 @@
             .send-button {
                 background: #1B67EC;
                 cursor: pointer;
+                margin-left: 0.3rem;
 
                 @media (hover: hover) and (pointer: fine) {
                     &:hover {
@@ -188,8 +190,9 @@
     display: flex;
     align-items: center;
     justify-content: center;
-    height: 40px;
-    width: 40px;
+    height: 38px;
+    width: 38px;
+    margin: 2px;
     border-radius: 3px;
 }
 
@@ -226,6 +229,11 @@
     border: 0px none;
     box-shadow: none;
 }
+#usermsg:focus,
+#usermsg:active {
+    border-bottom: 1px solid white;
+    padding-bottom: 8px;
+ }
 
 #nickname {
     text-align: center;
@@ -234,6 +242,16 @@
     margin: auto 0;
     padding: 0 16px;
 
+    #nickname-title {
+        margin-bottom: 5px;
+        display: block;
+    }
+
+    label[for="nickinput"] {
+        > div > span {
+            color: #B8C7E0;
+        }
+    }
     input {
         height: 40px;
     }
@@ -254,7 +272,7 @@
         cursor: pointer;
 
         &.disabled {
-            color: #757575;
+            color: #AFB6BC;
             background: #11336E;
             pointer-events: none;
         }
@@ -301,6 +319,19 @@
     }
 }
 
+.sr-only {
+    border: 0 !important;
+    clip: rect(1px, 1px, 1px, 1px) !important;
+    clip-path: inset(50%) !important;
+    height: 1px !important;
+    margin: -1px !important;
+    overflow: hidden !important;
+    padding: 0 !important;
+    position: absolute !important;
+    width: 1px !important;
+    white-space: nowrap !important;
+}
+
 .chatmessage {
     background-color: $chatRemoteMessageBackgroundColor;
     border-radius: 0px 6px 6px 6px;
@@ -350,10 +381,6 @@
     color: #757575;
 }
 
-.smiley {
-    font-size: 14pt;
-}
-
 #smileys {
     font-size: 20pt;
     margin: auto;
@@ -382,7 +409,7 @@
     box-sizing: border-box;
     background-color: rgba(0, 0, 0, .6) !important;
     height: auto;
-    max-height: 0;
+    display: none;
     overflow: hidden;
     position: absolute;
     width: calc(#{$sidebarWidth} - 32px);
@@ -398,6 +425,7 @@
     transition: max-height 0.3s;
 
     &.show-smileys {
+        display: flex;
         max-height: 500%;
     }
 
@@ -413,7 +441,7 @@
 
 .smileyContainer {
     width: 40px;
-    height: 36px;
+    height: 40px;
     display: inline-block;
     text-align: center;
 }
@@ -509,7 +537,7 @@
 
     &-header {
         display: flex;
-        justify-content: flex-end;
+        justify-content: space-between;
         align-items: center;
         margin: 16px;
         width: calc(100% - 32px);

css/_connection-info.scss

@@ -45,6 +45,10 @@
         @extend .connection-info__icon;
     }
 
+    &__mobile {
+      margin: 15px;
+    }
+
     .connection-actions {
         margin: 10px auto;
         text-align: center;

css/_connection-status.scss

@@ -11,6 +11,8 @@
         line-height: 13px;
         margin: 0 auto;
         width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
     }
 
     &-header {

css/_drawer.scss

@@ -4,17 +4,16 @@
     right: 0;
     bottom: 0;
     z-index: $drawerZ;
+    background-color: #141414;
+    border-radius: 16px 16px 0 0;
 }
 
 .drawer-menu {
-    max-height: 50vh;
+    max-height: calc(80vh - 64px);
     background: #242528;
     border-radius: 16px 16px 0 0;
-    overflow-y: auto;
-
-    &.expanded {
-        max-height: 80vh;
-    }
+    overflow-y: hidden;
+    margin-bottom: env(safe-area-inset-bottom, 0);
 
     .drawer-toggle {
         display: flex;
@@ -42,6 +41,8 @@
         font-size: 1.2em;
         list-style-type: none;
         padding: 0;
+        height: calc(80vh - 144px - 64px);
+        overflow-y: auto;
 
         .overflow-menu-item {
             box-sizing: border-box;

css/_e2ee.scss

@@ -8,7 +8,10 @@
 
         .read-more {
             cursor: pointer;
-            opacity: .7;
+            opacity: .9;
+            color: #fff;
+            font-size: 0.8rem;
+            font-weight: bold;
         }
     }
 

css/_jquery-impromptu.scss

@@ -1,129 +0,0 @@
-/*
-------------------------------
-	Impromptu
-------------------------------
-*/
-.jqifade{
-	position: absolute; 
-	background-color: #000;
-}
-div.jqi{ 
-	width: 400px;
-	position: absolute;
-    color: #3a3a3a;
-	background-color: #ffffff; 
-	font-size: 11px; 
-	text-align: left; 
-	border: solid 1px #eeeeee;
-	border-radius: 6px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-	padding: 7px;
-}
-div.jqi .jqicontainer{ 
-}
-div.jqi .jqiclose{ 
-	position: absolute;
-	top: 4px; right: -2px; 
-	width: 18px; 
-	cursor: default; 
-	color: #bbbbbb; 
-	font-weight: bold; 
-}
-div.jqi .jqistate{
-	background-color: #fff;
-}
-div.jqi .jqititle{
-	padding: 5px 10px;
-	font-size: 16px; 
-	line-height: 20px; 
-	border-bottom: solid 1px #eeeeee;
-}
-div.jqi .jqimessage{ 
-	padding: 10px; 
-	line-height: 20px; 
-	color: #444444; 
-}
-div.jqi .jqibuttons{ 
-	text-align: right; 
-	margin: 0 -7px -7px -7px;
-	border-top: solid 1px #e4e4e4; 
-	background-color: #f4f4f4;
-	border-radius: 0 0 6px 6px;
-	-moz-border-radius: 0 0 6px 6px;
-	-webkit-border-radius: 0 0 6px 6px;
-}
-div.jqi .jqibuttons button{ 
-	margin: 0;
-	padding: 5px 20px;
-	background-color: transparent !important;
-	font-weight: normal; 
-	border: none;
-	border-left: solid 1px #e4e4e4; 
-	color: #777; 
-	font-weight: bold; 
-	font-size: 12px; 
-}
-div.jqi .jqibuttons button.jqidefaultbutton{
-	color: #489afe;
-}
-
-div.jqi .jqibuttons button:disabled {
-    color: #b6b6b6 !important;
-}
-div.jqi .jqibuttons button:hover,
-div.jqi .jqibuttons button:focus{
-	color: #287ade;
-	outline: none;
-}
-.jqiwarning .jqi .jqibuttons{ 
-	background-color: #b95656;
-}
-
-/* sub states */
-div.jqi .jqiparentstate::after{ 
-	background-color: #777;
-	opacity: 0.6;
-	filter: alpha(opacity=60);
-	content: '';
-	position: absolute;
-	top:0;left:0;bottom:0;right:0;
-	border-radius: 6px;
-	-moz-border-radius: 6px;
-	-webkit-border-radius: 6px;
-}
-div.jqi .jqisubstate{
-	position: absolute;
-	top:0;
-	left: 20%;
-	width: 60%;
-	padding: 7px;
-	border: solid 1px #eeeeee;
-	border-top: none;
-	border-radius: 0 0 6px 6px;
-	-moz-border-radius: 0 0 6px 6px;
-	-webkit-border-radius: 0 0 6px 6px;
-}
-div.jqi .jqisubstate .jqibuttons button{
-	padding: 10px 18px;
-}
-
-/* arrows for tooltips/tours */
-.jqi .jqiarrow{ position: absolute; height: 0; width:0; line-height: 0; font-size: 0; border: solid 10px transparent;}
-
-.jqi .jqiarrowtl{ left: 10px; top: -20px; border-bottom-color: #ffffff; }
-.jqi .jqiarrowtc{ left: 50%; top: -20px; border-bottom-color: #ffffff; margin-left: -10px; }
-.jqi .jqiarrowtr{ right: 10px; top: -20px; border-bottom-color: #ffffff; }
-
-.jqi .jqiarrowbl{ left: 10px; bottom: -20px; border-top-color: #ffffff; }
-.jqi .jqiarrowbc{ left: 50%; bottom: -20px; border-top-color: #ffffff; margin-left: -10px; }
-.jqi .jqiarrowbr{ right: 10px; bottom: -20px; border-top-color: #ffffff; }
-
-.jqi .jqiarrowlt{ left: -20px; top: 10px; border-right-color: #ffffff; }
-.jqi .jqiarrowlm{ left: -20px; top: 50%; border-right-color: #ffffff; margin-top: -10px; }
-.jqi .jqiarrowlb{ left: -20px; bottom: 10px; border-right-color: #ffffff; }
-
-.jqi .jqiarrowrt{ right: -20px; top: 10px; border-left-color: #ffffff; }
-.jqi .jqiarrowrm{ right: -20px; top: 50%; border-left-color: #ffffff; margin-top: -10px; }
-.jqi .jqiarrowrb{ right: -20px; bottom: 10px; border-left-color: #ffffff; }
-

css/_jquery.contextMenu.scss

@@ -1,206 +0,0 @@
-@charset "UTF-8";
-/*!
- * jQuery contextMenu - Plugin for simple contextMenu handling
- *
- * Version: v2.1.1
- *
- * Authors: Björn Brala (SWIS.nl), Rodney Rehm, Addy Osmani (patches for FF)
- * Web: http://swisnl.github.io/jQuery-contextMenu/
- *
- * Copyright (c) 2011-2016 SWIS BV and contributors
- *
- * Licensed under
- *   MIT License http://www.opensource.org/licenses/mit-license
- *
- * Date: 2016-02-28T09:53:18.890Z
- */
-@font-face {
-  font-family: "context-menu-icons";
-  font-style: normal; 
-  font-weight: normal;
-
-  src: url("font/context-menu-icons.eot?2qmzf");
-  src: url("font/context-menu-icons.eot?2qmzf#iefix") format("embedded-opentype"), url("font/context-menu-icons.woff2?2qmzf") format("woff2"), url("font/context-menu-icons.woff?2qmzf") format("woff"), url("font/context-menu-icons.ttf?2qmzf") format("truetype");
-}
-
-.context-menu-icon:before {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 28px; 
-  font-family: "context-menu-icons";
-  font-size: 16px;
-  font-style: normal;
-  font-weight: normal;
-  line-height: 1;
-  color: #2980b9;
-  text-align: center;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-.context-menu-icon-add:before {
-  content: "";
-}
-
-.context-menu-icon-copy:before {
-  content: "";
-}
-
-.context-menu-icon-cut:before {
-  content: "";
-}
-
-.context-menu-icon-delete:before {
-  content: "";
-}
-
-.context-menu-icon-edit:before {
-  content: "";
-}
-
-.context-menu-icon-paste:before {
-  content: "";
-}
-
-.context-menu-icon-quit:before {
-  content: "";
-}
-
-.context-menu-icon.context-menu-hover:before {
-  color: #fff;
-}
-
-.context-menu-list {
-  position: absolute; 
-  display: inline-block;
-  min-width: 180px;
-  max-width: 360px;
-  padding: 4px 0;
-  margin: 5px;
-  font-family: inherit;
-  font-size: inherit;
-  list-style-type: none;
-  background: #fff;
-  border: 1px solid #bebebe;
-  border-radius: $borderRadius;
-  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-          box-shadow: 0 2px 5px rgba(0, 0, 0, .5);
-}
-
-.context-menu-item {
-  position: relative;
-  padding: 3px 28px;
-  color: #2f2f2f;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-      -ms-user-select: none;
-          user-select: none; 
-  background-color: #fff;
-}
-
-.context-menu-separator {
-  padding: 0; 
-  margin: 5px 0;
-  border-bottom: 1px solid #e6e6e6;
-}
-
-.context-menu-item > label > input,
-.context-menu-item > label > textarea {
-  -webkit-user-select: text;
-     -moz-user-select: text;
-      -ms-user-select: text;
-          user-select: text;
-}
-
-.context-menu-item.context-menu-hover {
-  color: #fff;
-  cursor: pointer; 
-  background-color: #2980b9;
-}
-
-.context-menu-item.context-menu-disabled {
-  color: #626262; 
-  background-color: #fff;
-}
-
-.context-menu-item.context-menu-disabled {
-  color: #626262;
-}
-
-.context-menu-input.context-menu-hover,
-.context-menu-item.context-menu-disabled.context-menu-hover {
-  cursor: default; 
-  background-color: #eee;
-}
-
-.context-menu-submenu:after {
-  position: absolute;
-  top: 50%;
-  right: 8px;
-  z-index: $zindex1;
-  width: 0;
-  height: 0;
-  content: '';
-  border-color: transparent transparent transparent #2f2f2f;
-  border-style: solid;
-  border-width: 4px 0 4px 4px;
-  -webkit-transform: translateY(-50%);
-      -ms-transform: translateY(-50%);
-       -o-transform: translateY(-50%);
-          transform: translateY(-50%);
-}
-
-/**
- * Inputs
- */
-.context-menu-item.context-menu-input {
-  padding: 5px 10px;
-}
-
-/* vertically align inside labels */
-.context-menu-input > label > * {
-  vertical-align: top;
-}
-
-/* position checkboxes and radios as icons */
-.context-menu-input > label > input[type="checkbox"],
-.context-menu-input > label > input[type="radio"] {
-  position: relative;
-  top: 3px;
-}
-
-.context-menu-input > label,
-.context-menu-input > label > input[type="text"],
-.context-menu-input > label > textarea,
-.context-menu-input > label > select {
-  display: block;
-  width: 100%; 
-  -webkit-box-sizing: border-box;
-     -moz-box-sizing: border-box;
-          box-sizing: border-box;
-}
-
-.context-menu-input > label > textarea {
-  height: 100px;
-}
-
-.context-menu-item > .context-menu-list {
-  top: 5px; 
-  /* re-positioned by js */
-  right: -5px;
-  display: none;
-}
-
-.context-menu-item.context-menu-visible > .context-menu-list {
-  display: block;
-}
-
-.context-menu-accesskey {
-  text-decoration: underline;
-}

css/_labels.scss

@@ -1,68 +1,37 @@
-.large-video-labels {
+.label {
+    align-items: center;
+    background: #36383C;
+    border-radius: 3px;
+    color: #fff;
     display: flex;
-    position: absolute;
-    top: 30px;
-    right: 30px;
-    transition: right 0.5s;
-    z-index: $labelsZ;
+    font-size: 12px;
+    font-weight: 600;
+    height: 28px;
+    margin: 0 0 4px 4px;
+    padding: 0 8px;
 
-    .circular-label {
-        align-items: center;
-        color: white;
-        display: flex;
-        font-weight: bold;
-        justify-content: center;
-        margin-left: 8px;
-        opacity: 0.8;
+    &--green {
+        background: #31B76A;
     }
 
-    .circular-label {
-        background: #B8C7E0;
+    &--red {
+        background: #E34F56
     }
 
-    .circular-label.e2ee {
-        align-items: center;
-        background: #76CF9C;
-        display: flex;
-        justify-content: center;
-    }
+    &--white {
+        background: #fff;
+        color: #5e6d7a;
 
-    .circular-label.file {
-        background: #FF5630;
-    }
-
-    .circular-label.local-rec {
-        background: #FF5630;
-    }
-
-    .circular-label.stream {
-        background: #0065FF;
-    }
-
-    .circular-label.insecure {
-        background: $defaultWarningColor;
-    }
-
-    .recording-label.center-message {
-        background: $videoStateIndicatorBackground;
-        bottom: 50%;
-        display: block;
-        left: 50%;
-        padding: 10px;
-        position: fixed;
-        transform: translate(-50%, -50%);
-        z-index: $centeredVideoLabelZ;
+        svg {
+            fill: #5e6d7a;
+        }
     }
 }
 
-.circular-label {
-    background: $videoStateIndicatorBackground;
-    border-radius: 50%;
-    box-sizing: border-box;
-    cursor: default;
-    font-size: 13px;
-    height: $videoStateIndicatorSize;
-    line-height: $videoStateIndicatorSize;
-    text-align: center;
-    min-width: $videoStateIndicatorSize;
-}
+.label-text-with-icon {
+    margin-left: 8px;
+}
+
+.participants-count {
+    cursor: pointer;
+}

css/_lobby.scss

@@ -38,17 +38,17 @@
     }
 }
 
-#knocking-participant-list {
+#notification-participant-list {
     background-color: $newToolbarBackgroundColor;
     border: 1px solid rgba(255, 255, 255, .4);
     border-radius: 8px;
-    display: flex;
-    flex-direction: column;
     left: 0;
     margin: 20px;
+    max-height: 600px;
+    overflow: hidden;
+    overflow-y: auto;
     position: fixed;
-    top: 20;
-    transition: top 1s ease;
+    top: 30px;
     z-index: $toolbarZ + 1;
 
     &.toolbox-visible {
@@ -94,8 +94,6 @@
 
 .knocking-participants-container {
     list-style-type: none;
-    max-height: 600px;
-    overflow-y: scroll;
     padding: 0 15px 15px 15px;
 }
 

css/_meetings_list.scss

@@ -125,7 +125,8 @@
             cursor: pointer;
         }
 
-        &.with-click-handler:hover {
+        &.with-click-handler:hover,
+        &.with-click-handler:focus {
             background-color: #c7ddff;
         }
 
@@ -158,7 +159,7 @@
         }
     }
 
-    .item:hover {
+    .item:hover, .item:focus, .item:focus-within {
         .delete-meeting {
             display: block;
         }

css/_mini_toolbox.scss

@@ -8,9 +8,11 @@
     .toolbox-icon {
         cursor: pointer;
         padding: 7px;
+        width: 22px;
+        height : 22px;
 
         &.toggled {
-            background: $AOTToolbarButtonToggleColor;
+            background: none;
         }
 
         &.disabled {
@@ -25,6 +27,7 @@
     position: absolute;
     bottom: 10px;
     transform: translateX(-50%);
+    padding: 3px !important;
 }
 
 .filmstrip-toolbox {

css/_mixins.scss

@@ -206,3 +206,13 @@
     bottom: 0;
     width: 35%;
 }
+
+/**
+ * Resizes elements width to fill the whole screen width with some margin
+ */
+@mixin adjust-for-max-width($width, $margin) {
+    @media (max-width: $width) {
+        margin: 0 $margin;
+        width: $width - 2 * $margin;
+    }
+}

css/_participants-count.scss

@@ -1,26 +0,0 @@
-.participants-count {
-    background: #fff;
-    border-radius: 4px;
-    color: #5e6d7a;
-    cursor: pointer;
-    display: inline-block;
-    font-size: 13px;
-    line-height: 20px;
-    margin-left: 16px;
-    padding: 4px 8px;
-    pointer-events: auto;
-
-    &-number {
-        margin-right: 8px;
-        vertical-align: middle;
-    }
-
-    &-icon {
-        background: url('../images/user-groups.svg');
-        background-repeat: no-repeat;
-        display: inline-block;
-        height: 16px;
-        width: 16px;
-        vertical-align: middle;
-    }
-}

css/_participants-pane.scss

@@ -0,0 +1,51 @@
+.participants_pane {
+    background-color: $participantsPaneBgColor;
+    flex-shrink: 0;
+    overflow: hidden;
+    position: relative;
+    transition: width .16s ease-in-out;
+    width: 315px;
+    z-index: $zindex0;
+
+    &--closed {
+        width: 0;
+    }
+}
+
+.participants_pane-content {
+    display: flex;
+    flex-direction: column;
+    font-weight: 600;
+    height: 100%;
+    width: 315px;
+
+    & > *:first-child,
+    & > *:last-child {
+        flex-shrink: 0;
+    }
+}
+
+.participant-avatar {
+    margin: 8px 16px 8px 0;
+}
+
+@media (max-width: 375px) {
+    .participants_pane {
+        height: 100vh;
+        height: -webkit-fill-available;
+        left: 0;
+        position: fixed;
+        right: 0;
+        top: 0;
+        width: auto;
+
+        &--closed {
+            display: none;
+            width: auto;
+        }
+    }
+
+    .participants_pane-content {
+        width: 100%;
+    }
+}

css/_prejoin.scss

@@ -3,6 +3,15 @@
     &-input-area {
         margin: 0 auto;
         text-align: center;
+
+       &-label {
+           display: block;
+           margin-bottom: 5px;
+           color: #ffffff;
+           font-weight: 300;
+           font-size: 15px;
+           line-height: 24px;
+       }
     }
 
     &-title {
@@ -74,10 +83,10 @@
         z-index: 1;
 
         &--warning {
-            background: rgba(241, 173, 51, 0.7)
+            background: rgba(241, 173, 51, 1);
         }
         &--ok {
-            background: rgba(49, 183, 106, 0.7);
+            background: rgba(49, 183, 106, 1);
         }
     }
 
@@ -92,6 +101,8 @@
 
     &-error-desc {
         margin-right: 4px;
+        color: #fff;
+        font-weight: bold;
     }
 
     .settings-button-container {
@@ -102,6 +113,8 @@
     &-dropdown-btns {
         width: 320px;
         padding: 8px 0;
+
+        @include adjust-for-max-width(320px, 8px);
     }
 
     &-dropdown-btn {
@@ -129,6 +142,8 @@
     }
 
     &-dropdown-container {
+        margin-top: 16px;
+
         & > div:nth-child(2) {
             background: #fff;
             padding: 0;

css/_premeeting-screens.scss

@@ -1,8 +1,7 @@
 /**
  * Shared style for full screen local track based dialogs/modals.
  */
- .premeeting-screen,
-  .preview-overlay {
+ .premeeting-screen {
      position: absolute;
      left: 0;
      right: 0;
@@ -31,16 +30,18 @@
 
     .action-btn {
         border-radius: 3px;
+        box-sizing: border-box;
         color: #fff;
         cursor: pointer;
         display: inline-block;
         font-size: 15px;
         line-height: 24px;
-        margin-top: 16px;
         padding: 7px 16px;
         position: relative;
         text-align: center;
-        width: 286px;
+        width: 320px;
+
+        @include adjust-for-max-width(320px, 8px);
 
         &.primary {
             background: #0376DA;
@@ -93,11 +94,6 @@
         }
     }
 
-    .preview-overlay {
-        background-image: linear-gradient(transparent, black);
-        z-index: $toolbarZ + 1;
-    }
-
     .content {
         align-items: center;
         display: flex;
@@ -119,7 +115,7 @@
             cursor: pointer;
             color: #fff;
             display: flex;
-            flex-direction: row;
+            flex-direction: column;
             font-size: 15px;
             font-weight: 300;
             justify-content: center;
@@ -145,6 +141,9 @@
                     margin-left: 10px;
                 }
             }
+            .copy-button{
+                width: 298px;
+             }
 
             .copy-meeting-text {
                 width: 266px;
@@ -178,12 +177,14 @@
             text-align: center;
             width: 320px;
 
+            @include adjust-for-max-width(320px, 8px);
+
             &.error {
                 box-shadow: 0px 0px 4px 3px rgba(225, 45, 45, 0.4);
             }
 
             &.focused {
-                box-shadow: 0px 0px 4px 3px #0376DA;
+                box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px white;
             }
         }
     }
@@ -249,16 +250,23 @@
     transition: background 0.16s ease-out;
     width: 320px;
 
+    @include adjust-for-max-width(320px, 8px);
     @include flex-centered();
 
     svg {
         fill: transparent;
     }
 
+    label {
+        cursor: pointer;
+    }
+
     &:hover {
         background: rgba(255, 255, 255, 0.1);
 
-        @include icon-container(#A4B8D1, #1C2025);
+        .toggle-button-icon-container {
+            display: none;
+        }
     }
 
     &-container {
@@ -276,5 +284,15 @@
 
     &--toggled {
         @include icon-container(white, #1C2025);
+
+        &:hover {
+            .toggle-button-icon-container {
+                display: block;
+            }
+        }
+
+        .toggle-button-icon-container {
+            display: block;
+        }
     }
 }

css/_reactions-menu.scss

@@ -0,0 +1,189 @@
+@use 'sass:math';
+
+.reactions-menu {
+	width: 280px;
+	background: #292929;
+	box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.6), 0px 0px 4px 1px rgba(0, 0, 0, 0.25);
+	border-radius: 3px;
+	padding: 16px;
+
+	&.overflow {
+		width: auto;
+		padding-bottom: max(env(safe-area-inset-bottom, 0), 16px);
+		background-color: #141414;
+		box-shadow: none;
+		border-radius: 0;
+		position: relative;
+
+		.toolbox-icon {
+			width: 48px;
+			height: 48px;
+
+			span.emoji {
+				width: 48px;
+				height: 48px;
+			}
+		}
+
+		.reactions-row {
+			display: flex;
+			flex-direction: row;
+			justify-content: space-around;
+
+			.toolbox-button {
+				margin-right: 0;
+			}
+		}
+	}
+
+	.toolbox-icon {
+		width: 40px;
+		height: 40px;
+		border-radius: 6px;
+
+		span.emoji {
+			width: 40px;
+			height: 40px;
+			font-size: 22px;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+		}
+	}
+
+	.reactions-row {
+		.toolbox-button {
+			margin-right: 8px;
+			touch-action: manipulation;
+		}
+
+		.toolbox-button:last-of-type {
+			margin-right: 0;
+		}
+	}
+
+	.raise-hand-row {
+		margin-top: 16px;
+
+		.toolbox-button {
+			width: 100%;
+		}
+
+		.toolbox-icon {
+			width: 100%;
+			flex-direction: row;
+			align-items: center;
+
+			span.text {
+				font-style: normal;
+				font-weight: 600;
+				font-size: 14px;
+				line-height: 24px;
+				margin-left: 8px;
+			}
+		}
+	}
+}
+
+.reactions-animations-container {
+	position: absolute;
+	width: 20%;
+	bottom: 0;
+	left: 40%;
+	height: 48px;
+}
+
+.reactions-menu-popup-container,
+.reactions-menu-popup {
+	display: inline-block;
+	position: relative;
+}
+
+$reactionCount: 20;
+
+@function random($min, $max) {
+  @return math.random() * ($max - $min) + $min;
+}
+
+.reaction-emoji {
+	position: absolute;
+	font-size: 24px;
+	line-height: 32px;
+	width: 32px;
+	height: 32px;
+	top: 32px;
+	left: 10px;
+	opacity: 0;
+	z-index: 1;
+
+	&.reaction-0 {
+		animation: flowToRight 5s forwards ease-in-out;
+	}
+
+	@for $i from 1 through $reactionCount {
+	&.reaction-#{$i} {
+		animation: animation-#{$i} 5s forwards ease-in-out;
+		top: #{random(50, 0)}px;
+		left: #{random(-10, 10)}px;
+	}
+}
+}
+
+@keyframes flowToRight {
+	0% {
+		transform: translate(0px, 0px) scale(0.6);
+		opacity: 1;
+	}
+
+	70% {
+		transform: translate(40px, -70vh) scale(1.5);
+		opacity: 1;
+	}
+
+	75% {
+		transform: translate(40px, -70vh) scale(1.5);
+		opacity: 1;
+	}
+
+	100% {
+		transform: translate(140px, -50vh) scale(1);
+		opacity: 0;
+	}
+}
+
+@mixin animation-list {
+	@for $i from 1 through $reactionCount {
+		$topX: random(-100, 100);
+		$topY: random(65, 75);
+		$bottomX: random(150, 200);
+		$bottomY: random(40, 50);
+
+		@if $topX < 0 {
+			$bottomX: -$bottomX;
+		}
+
+		@keyframes animation-#{$i} {
+			0% {
+				transform: translate(0, 0) scale(0.6);
+				opacity: 1;
+			}
+
+			70% {
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				opacity: 1;
+			}
+
+			75% {
+				transform: translate(#{$topX}px, -#{$topY}vh) scale(1.5);
+				opacity: 1;
+			}
+
+			100% {
+				transform: translate(#{$bottomX}px, -#{$bottomY}vh) scale(1);
+				opacity: 0;
+			}
+		}
+	}
+}
+
+@include animation-list;

css/_recording.scss

@@ -105,6 +105,7 @@
 
     .helper-link {
         cursor: pointer;
+        font-weight: bold;
         display: inline-block;
         flex-shrink: 0;
         margin-left: auto;

css/_subject.scss

@@ -1,35 +1,60 @@
 .subject {
+    box-sizing: border-box;
+    color: #fff;
+    margin-top: 20px;
+    position: absolute;
     top: -120px;
     transition: top .3s ease-in;
-    height: 95px;
     width: 100%;
-    pointer-events: none;
-    position: absolute;
-    padding: 25px 140px 0 140px;
-    text-align: center;
-    font-size: 17px;
-    color: #fff;
-    z-index: $zindex10;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    box-sizing: border-box;
-    white-space: nowrap;
+    z-index: $zindex3;
 
     &.visible {
         top: 0px;
     }
+}
 
-    &.gradient {
-        background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
+.subject-info-container {
+    display: flex;
+    justify-content: center;
+    max-width: calc(100% - 280px);
+    margin: 0 auto;
+
+    &--full-width {
+        max-width: 100%;
     }
 
-    &-text {
-        vertical-align: middle;
-    }
-
-    &-conference-timer {
-        display: block;
-        font-size: 15px;
-        opacity: 0.6;
+    @media (max-width: 500px) {
+        flex-wrap: wrap;
+        max-width: 100%;
     }
 }
+
+.subject-info {
+    align-items: center;
+    display: flex;
+    margin-bottom: 4px;
+    max-width: 80%;
+    height: 28px;
+}
+
+.subject-text {
+    background: rgba(0, 0, 0, 0.6);
+    border-radius: 3px 0px 0px 3px;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 2px 16px;
+    height: 24px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.subject-timer {
+    background: rgba(0, 0, 0, 0.8);
+    border-radius: 0px 3px 3px 0px;
+    display: inline-block;
+    font-size: 12px;
+    line-height: 16px;
+    min-width: 34px;
+    padding: 6px 8px;
+}

css/_toolbars.scss

@@ -54,6 +54,7 @@
     margin-bottom: 16px;
     position: relative;
     z-index: $toolbarZ;
+    pointer-events: none;
 
     .button-group-center,
     .button-group-left,
@@ -103,15 +104,20 @@
     flex-direction: column;
     margin: 0 auto;
     max-width: 100%;
+    pointer-events: all;
+    background-color: #131519;
+    padding-bottom: env(safe-area-inset-bottom, 0);
+    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
+    border-radius: 6px;
 }
 
 .toolbox-content-items {
     background: $newToolbarBackgroundColor;
-    box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.25), 0px 0px 0px 1px rgba(0, 0, 0, 0.15);
     border-radius: 6px;
     margin: 0 auto;
     padding: 6px;
     text-align: center;
+    pointer-events: all;
 
     >div {
         margin-left: 8px;
@@ -275,6 +281,10 @@
     }
 }
 
+.profile-button-avatar {
+    align-items: center;
+}
+
 /**
  * START of fade in animation for main toolbar
  */

css/_variables.scss

@@ -30,6 +30,7 @@ $defaultSideBarFontColor: #44A5FF;
 $defaultSemiDarkColor: #ACACAC;
 $defaultDarkColor: #2b3d5c;
 $defaultWarningColor: rgb(215, 121, 118);
+$participantsPaneBgColor: #141414;
 $presence-available: rgb(110, 176, 5);
 $presence-away: rgb(250, 201, 20);
 $presence-busy: rgb(233, 0, 27);
@@ -41,8 +42,6 @@ $presence-idle: rgb(172, 172, 172);
 $newToolbarBackgroundColor: #131519;
 $newToolbarButtonHoverColor: rgba(255, 255, 255, 0.2);
 $newToolbarButtonToggleColor: rgba(255, 255, 255, 0.15);
-$AOTToolbarButtonHoverColor: rgba(14, 20, 35, 0.6);
-$AOTToolbarButtonToggleColor: rgba(14, 20, 35, 1);
 $menuBG:#242528;
 $newToolbarFontSize: 24px;
 $newToolbarHangupFontSize: 32px;
@@ -116,7 +115,6 @@ $zindex2: 2;
 $zindex3: 3;
 $toolbarBackgroundZ: 4;
 $labelsZ: 5;
-$filmstripVideosZ: 6;
 $subtitlesZ: 7;
 $popoverZ: 8;
 $zindex10: 10;
@@ -131,6 +129,9 @@ $dropdownMaskZ: 900;
 $dropdownZ: 901;
 $centeredVideoLabelZ: 1010;
 $overlayZ: 1016;
+// Place filmstrip videos over toolbar in order
+// to make connection info visible.
+$filmstripVideosZ: $toolbarZ + 1;
 
 
 /**

css/_video-preview.scss

@@ -79,4 +79,8 @@
             white-space: nowrap;
         }
     }
+    // Override @atlaskit/InlineDialog container which is made with styled components
+    & > div:nth-child(2) {
+        padding: 0;
+    }
 }

css/_videolayout_default.scss

@@ -1,5 +1,13 @@
 #videoconference_page {
     min-height: 100%;
+    position: relative;
+    transform: translate3d(0, 0, 0);
+    width: 100%;
+}
+
+#layout_wrapper {
+    display: flex;
+    height: 100%;
 }
 
 #videospace {
@@ -232,6 +240,15 @@
     object-fit: cover;
 }
 
+#sharedVideo video {
+    width: 100%;
+    height: 100%;
+}
+
+#sharedVideo.disable-pointer {
+    pointer-events: none;
+}
+
 #sharedVideo,
 #etherpad,
 #localVideoWrapper video,
@@ -411,7 +428,7 @@
     right: 0;
     z-index: $zindex2;
     width: 18px;
-    height: 13px;
+    height: 18px;
     color: #FFF;
     font-size: 10pt;
     margin-right: $remoteVideoMenuIconMargin;

css/_welcome_page.scss

@@ -122,11 +122,11 @@ body.welcome-page {
         #moderated-meetings {
             max-width: calc(100% - 40px);
             padding: 16px 0 39px 0;
-            margin: $welcomePageEnterRoomMargin;
             width: $welcomePageEnterRoomWidth;
 
             p {
                 color: $welcomePageDescriptionColor;
+                float: left;
                 text-align: $welcomePageHeaderTextAlign;
 
                 a {

css/buttons/copy.scss

@@ -3,7 +3,7 @@
     justify-content: space-between;
     align-items: center;
     padding: 8px 8px 8px 16px;
-    margin-top: 8px;
+    margin-top: 5px;
     width: calc(100% - 24px);
     height: 24px;
 

css/components/_input-slider.scss

@@ -1,3 +1,5 @@
+$rangeInputThumbSize: 14;
+
 /**
  * Disable the default webkit styles for range inputs (sliders).
  */
@@ -7,10 +9,10 @@ input[type=range]{
 }
 
 /**
- * Disable the default focus styles for webkit range inputs (sliders).
+ * Show focus for keyboard accessibility.
  */
 input[type=range]:focus {
-    outline: none;
+    outline: 1px solid white !important;
 }
 
 /**

css/filmstrip/_filmstrip_toolbar.scss

@@ -16,7 +16,6 @@
         padding: 0;
         margin: 0;
         border: none;
-        outline: none;
 
         -webkit-appearance: none;
 

css/filmstrip/_horizontal_filmstrip.scss

@@ -33,18 +33,18 @@
     }
 
     &__videos {
-        @extend %align-right;
         position:relative;
         padding: 0;
         /* The filmstrip should not be covered by the left toolbar. */
         bottom: 0;
         width:auto;
-        overflow: visible !important;
 
         &#remoteVideos {
             border: $thumbnailsBorder solid transparent;
             transition: bottom 2s;
             flex-grow: 1;
+            display: flex;
+            flex-direction: row-reverse;
             @include minHWAutoFix()
         }
 
@@ -60,41 +60,25 @@
         &.hidden {
             bottom: calc(-196px - #{$newToolbarSizeWithPadding});
         }
-
-        .remote-videos-container {
-            display: flex;
-        }
     }
 
-    .remote-videos-container {
-        transition: opacity 1s;
+    .remote-videos {
+        & > div {
+            transition: opacity 1s;
+            position: absolute;
+        }
+
+        &.is-not-overflowing > div {
+            right: 2px;
+        }
     }
 
     &.hide-videos {
-        .remote-videos-container {
-            opacity: 0;
-            pointer-events: none;
-        }
-    }
-
-    #filmstripRemoteVideos {
-        @include minHWAutoFix();
-
-        display: flex;
-        flex: 1;
-        width: auto;
-        justify-content: flex-end;
-        flex-direction: row;
-
-        #filmstripRemoteVideosContainer {
-            flex-direction: row-reverse;
-            /**
-             * Add padding as a hack for Firefox not to show scrollbars when
-             * unnecessary.
-             */
-            padding: 1px 0;
-            overflow-y: hidden;
-            overflow-x: scroll;
+        .remote-videos  {
+            & > div {
+                opacity: 0;
+                pointer-events: none;
+            }
         }
     }
 
@@ -103,25 +87,3 @@
     }
 }
 
-
-/**
- * Workarounds for Edge and Firefox not handling scrolling properly with
- * flex-direction: row-reverse.
- */
- @mixin undoRowReverseVideos() {
-    .horizontal-filmstrip {
-        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
-            flex-direction: row;
-        }
-    }
-}
-
-/** Firefox detection hack **/
-@-moz-document url-prefix() {
-    @include undoRowReverseVideos();
-}
-
-/** Edge detection hack **/
-@supports (-ms-ime-align:auto) {
-    @include undoRowReverseVideos();
-}

css/filmstrip/_tile_view.scss

@@ -7,16 +7,14 @@
      * see.
      */
     .active-speaker {
-        box-shadow: 0 0 5px 3px $videoThumbnailSelected
+        box-shadow: 0px 0px 1px 1.5px black, 0px 0px 1.3px 4px $videoThumbnailSelected;
     }
 
-    #filmstripRemoteVideos {
+    .remote-videos {
         align-items: center;
         box-sizing: border-box;
         display: flex;
         flex-direction: column;
-        height: 100%;
-        width: 100vw;
     }
 
     .filmstrip__videos .videocontainer {
@@ -34,6 +32,9 @@
          */
         height: 100% !important;
         width: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
     }
 
     .filmstrip {
@@ -51,7 +52,7 @@
                 margin-left: $sidebarWidth;
                 width: calc(100% - #{$sidebarWidth});
 
-                #filmstripRemoteVideos {
+                .remote-videos{
                     width: calc(100vw - #{$sidebarWidth});
                 }
             }
@@ -66,63 +67,49 @@
         display: block;
     }
 
-    #filmstripRemoteVideos {
+    .remote-videos {
         box-sizing: border-box;
 
+
         /**
-         * Allow vertical scrolling of the thumbnails.
-         */
-        overflow-x: hidden;
-        overflow-y: auto;
-    }
-
-    /**
-     * The size of the thumbnails should be set with javascript, based on
-     * desired column count and window width. The rows are created using flex
-     * and allowing the thumbnails to wrap.
-     */
-    #filmstripRemoteVideosContainer {
-        align-content: center;
-        align-items: center;
-        box-sizing: border-box;
-        display: flex;
-        flex-wrap: wrap;
-        flex-shrink: 0;
-        margin-top: auto;
-        margin-bottom: auto;
-        justify-content: center;
-
-        .videocontainer {
-            border: 0;
+        * The size of the thumbnails should be set with javascript, based on
+        * desired column count and window width. The rows are created using flex
+        * and allowing the thumbnails to wrap.
+        */
+        & > div {
+            align-content: center;
+            align-items: center;
             box-sizing: border-box;
-            display: block;
-            margin: 2px;
-        }
+            display: flex;
+            margin-top: auto;
+            margin-bottom: auto;
+            justify-content: center;
+            position: absolute;
 
-        video {
-            object-fit: contain;
-        }
+            .videocontainer {
+                border: 0;
+                box-sizing: border-box;
+                display: block;
+                margin: 2px;
+            }
 
-        /**
-         * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants.
-         */
-        @media only screen and (max-width: 500px) {
             video {
-                object-fit: cover;
+                object-fit: contain;
+            }
+
+            /**
+            * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants.
+            */
+            @media only screen and (max-width: 500px) {
+                video {
+                    object-fit: cover;
+                }
             }
         }
     }
-
-    .has-overflow#filmstripRemoteVideosContainer {
-        align-content: baseline;
-    }
-
-    .has-overflow .videocontainer {
-        align-self: baseline;
-    }
 }
 
-.shift-right #filmstripRemoteVideosContainer {
+.shift-right .remote-videos > div {
     /**
      * Max-width corresponding to the ASPECT_RATIO_BREAKPOINT from features/filmstrip/constants,
      * from which we subtract the chat size.
@@ -133,3 +120,7 @@
         }
     }
 }
+
+.indicator-icon-container {
+    display: inline-block;
+}

css/filmstrip/_vertical_filmstrip.scss

@@ -1,8 +1,10 @@
 .vertical-filmstrip .filmstrip {
     &.hide-videos {
-        .remote-videos-container {
-            opacity: 0;
-            pointer-events: none;
+        .remote-videos {
+            & > div {
+                opacity: 0;
+                pointer-events: none;
+            }
         }
     }
 
@@ -26,7 +28,7 @@
     flex-direction: column-reverse;
     height: 100%;
     width: 100%;
-    padding: ($desktopAppDragBarHeight - 5px) 5px 10px;
+    padding: ($desktopAppDragBarHeight - 5px) 5px calc(env(safe-area-inset-bottom, 0) + 10px);
     /**
      * fixed positioning is necessary for remote menus and tooltips to pop
      * out of the scrolling filmstrip. AtlasKit dialogs and tooltips use
@@ -39,10 +41,6 @@
     right: 0;
     z-index: $filmstripVideosZ;
 
-    &.reduce-height {
-        height: calc(100% - #{$newToolbarSizeWithPadding});
-    }
-
     /**
      * Hide videos by making them slight to the right.
      */
@@ -98,33 +96,10 @@
      * filmstrip from overlapping the left edge of the screen.
      */
     #filmstripLocalVideo,
-    #filmstripRemoteVideos {
+    .remote-videos {
         padding: 0;
     }
 
-    #filmstripRemoteVideos {
-        @include minHWAutoFix();
-
-        display: flex;
-        flex: 1;
-        flex-direction: column-reverse;
-        height: auto;
-        overflow-x: hidden;
-        overflow-y: scroll;
-
-        #filmstripRemoteVideosContainer {
-            @include minHWAutoFix();
-            flex-direction: column-reverse;
-            overflow: visible;
-            width: calc(100% - 8px); // 8px for margin + border of the thumbnails
-
-            .videocontainer {
-                height: 0px;
-                width: 100%;
-            }
-        }
-    }
-
     #remoteVideos {
         @include minHWAutoFix();
 
@@ -132,56 +107,21 @@
         flex-grow: 1;
     }
 
-    .remote-videos-container {
+    &.reduce-height {
+        height: calc(100% - calc(#{$newToolbarSizeWithPadding} + #{$scrollHeight}));
+    }
+
+    .remote-videos {
         display: flex;
-        transition: opacity 1s;
-    }
+        transition: height .3s ease-in;
 
-    .hide-scrollbar#filmstripRemoteVideos {
-        margin-right: 7px; // Scrollbar size
-        &::-webkit-scrollbar {
-            display: none;
+        & > div {
+            position: absolute;
+            transition: opacity 1s;
+        }
+
+        &.is-not-overflowing > div {
+            bottom: 0px;
         }
     }
 }
-
-/**
- * Workarounds for Edge and Firefox not handling scrolling properly with
- * flex-direction: column-reverse. The remove videos in filmstrip should
- * start scrolling from the bottom of the filmstrip, but in those browsers the
- * scrolling won't happen. Per W3C spec, scrolling should happen from the
- * bottom. As such, use css hacks to get around the css issue, with the intent
- * being to remove the hacks as the spec is supported.
- */
-@mixin undoColumnReverseVideos() {
-    .vertical-filmstrip {
-        #remoteVideos #filmstripRemoteVideos #filmstripRemoteVideosContainer {
-            flex-direction: column;
-        }
-    }
-}
-
-/**
- * FF does not include the scroll width when calculating the size of the content. That's why we need to include
- * ourselves the width of the scroll so that the remote videos are aligned with the local one.
- */
-@mixin filmstripSizeWithoutScroll {
-    .vertical-filmstrip {
-        #remoteVideos #filmstripRemoteVideos {
-            #filmstripRemoteVideosContainer {
-                width: calc(100% - 15px) // 8 px - margins + border of the thumbnails; 7px - for the scroll
-            }
-        }
-    }
-}
-
-/** Firefox detection hack **/
-@-moz-document url-prefix() {
-    @include undoColumnReverseVideos();
-    @include filmstripSizeWithoutScroll();
-}
-
-/** Edge detection hack **/
-@supports (-ms-ime-align:auto) {
-    @include undoColumnReverseVideos();
-}

css/filmstrip/_vertical_filmstrip_overrides.scss

@@ -81,7 +81,7 @@
 
     .local-video-menu-trigger,
     .remote-video-menu-trigger {
-        margin-bottom: 7px;
+        margin-bottom: 3px;
         margin-left: $remoteVideoMenuIconMargin;
     }
 }

css/main.scss

@@ -41,6 +41,8 @@ $flagsImagePath: "../images/";
 @import 'modals/feedback/feedback';
 @import 'modals/invite/info';
 @import 'modals/settings/settings';
+@import 'modals/screen-share/share-audio';
+@import 'modals/screen-share/share-screen-warning';
 @import 'modals/speaker_stats/speaker_stats';
 @import 'modals/video-quality/video-quality';
 @import 'modals/virtual-background/virtual-background';
@@ -48,7 +50,6 @@ $flagsImagePath: "../images/";
 @import 'videolayout_default';
 @import 'notice';
 @import 'subject';
-@import 'participants-count';
 @import 'popup_menu';
 @import 'recording';
 @import 'login_menu';
@@ -58,7 +59,6 @@ $flagsImagePath: "../images/";
 @import 'welcome_page_content';
 @import 'welcome_page_settings_toolbar';
 @import 'toolbars';
-@import 'jquery.contextMenu';
 @import 'keyboard-shortcuts';
 @import 'redirect_page';
 @import 'components/form-control';
@@ -105,5 +105,8 @@ $flagsImagePath: "../images/";
 @import 'responsive';
 @import 'connection-status';
 @import 'drawer';
+@import 'participants-pane';
+@import 'reactions-menu';
+@import 'plan-limit';
 
 /* Modules END */

css/modals/device-selection/_device-selection.scss

@@ -103,7 +103,7 @@
         font-size: 14px;
 
         a {
-            color: #2684FF;
+            color: #6FB1EA;
             cursor: pointer;
             text-decoration: none;
         }
@@ -119,7 +119,7 @@
         height: 8px;
 
         .audio-input-preview-level {
-            background: #4C9AFF;
+            background: #75B1FF;
             border-radius: 5px;
             height: 100%;
             -webkit-transition: width .1s ease-in-out;
@@ -129,3 +129,20 @@
         }
     }
 }
+
+.device-selection.video-hidden {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+
+    .column-selectors {
+        width: 100%;
+        margin-left: 0;
+    }
+
+    .column-video {
+        order: 1;
+        width: 100%;
+        margin-top: 8px;
+    }
+}

css/modals/feedback/_feedback.scss

@@ -94,5 +94,9 @@
             };
 
         }
+        .star-btn:focus,
+        .star-btn:active {
+            outline: 1px solid #B8C7E0;
+        }
     }
 }

css/modals/invite/_info.scss

@@ -30,20 +30,26 @@
         overflow: hidden;
         text-overflow: ellipsis;
         white-space: nowrap;
+        margin-right: 5px;
     }
 
     .info-password-none,
     .info-password-remote {
-        opacity: 0.5;
+        color: #fff;
     }
 
     .info-password-input {
         width: 100%;
-        background-color: transparent;
-        border: none;
+        background-color: #0E1624;
+        border-radius: 3px;
+        border: 2px solid #202B3D;
         color: inherit;
         padding-left: 0;
     }
+    .info-password-input:focus ,
+    .info-password-input:active {
+       border: 2px solid #B8C7E0;
+    }
 
     .info-password-local {
         user-select: text;

css/modals/invite/_invite_more.scss

@@ -97,18 +97,18 @@
                 border-top: none;
                 border-radius: 0 0 3px 3px;
 
-                & > * {
-                    display: flex;
-                    justify-content: center;
+                .copy-invite-icon, .provider-icon {
                     align-items: center;
-                    height: 40px;
-                    width: 40px;
-                    border-radius: 4px;
                     cursor: pointer;
+                    display: flex;
+                    height: 40px;
+                    place-content: center;
+                    width: 40px;
                 }
 
                 &:hover > div:hover {
                     background-color: rgba(255, 255, 255, 0.2);
+                    border-radius: 4px;
                 }
 
                 & > :not(:last-child) {
@@ -130,6 +130,7 @@
                 display: inline-block;
                 vertical-align: middle;
                 cursor: pointer;
+                height: 24px;
             }
         }
 
@@ -141,7 +142,7 @@
             & > a {
                 display: inline-block;
                 height: 24px;
-                width: 48px;
+                min-width: 48px;
                 border-radius: 3px;
                 text-align: center;
                 text-decoration: none;

css/modals/screen-share/_share-audio.scss

@@ -0,0 +1,22 @@
+.share-audio-dialog {
+    .share-audio-animation {
+        width: 100%;
+        height: 90%;
+        object-fit: contain;
+    }
+    input[type="checkbox"] + svg + span {
+        color: #9FB0CC;
+    }
+
+    .separator-line {
+        margin: 24px 0 24px -20px;
+        padding: 0 20px;
+        width: 100%;
+        height: 1px;
+        background: #5E6D7A;
+
+        &:last-child {
+            display: none;
+        }
+    }
+}

css/modals/screen-share/_share-screen-warning.scss

@@ -0,0 +1,23 @@
+.share-screen-warn-dialog {
+    font-size: 14px;
+
+    .separator-line {
+        margin: 24px 0 24px -20px;
+        padding: 0 20px;
+        width: 100%;
+        height: 1px;
+        background: #5E6D7A;
+
+        &:last-child {
+            display: none;
+        }
+    }
+
+    .header {
+        font-weight: 600;
+    }
+
+    .description {
+        margin-top: 16px;
+    }
+}

css/modals/settings/_settings.scss

@@ -16,12 +16,19 @@
     }
 
     .mock-atlaskit-label {
-        color: #56637A;
+        color: #b8c7e0;
         font-size: 12px;
         font-weight: 600;
         line-height: 1.33;
         padding: 20px 0px 4px 0px;
     }
+    input[type="checkbox"]:checked + svg {
+        --checkbox-background-color: #6492e7;
+        --checkbox-border-color: #6492e7;
+    }
+    input[type="checkbox"] + svg + span {
+        color: #b8c7e0;
+    }
 
     input[type="checkbox"] + svg + span {
         color: #9FB0CC;
@@ -29,6 +36,12 @@
 
     .calendar-tab,
     .more-tab,
+    .box {
+        display: flex;
+        justify-content: space-between;
+        width: 100%;
+    }
+
     .profile-edit {
         display: flex;
         width: 100%;
@@ -38,17 +51,24 @@
         flex: 1;
     }
     .settings-sub-pane {
-        flex-grow: 1;
+        flex: 1;
     }
 
+    .settings-sub-pane .right {
+        flex: 1;
+    }
+    .settings-sub-pane .left {
+        flex: 1;
+    }
+
+    .settings-sub-pane-element {
+        text-align: left;
+        flex: 1;
+    }
     .profile-edit-field {
         margin-right: 20px;
     }
 
-    .language-settings {
-        max-width: 50%;
-    }
-
     .calendar-tab {
         align-items: center;
         flex-direction: column;
@@ -64,4 +84,14 @@
     .sign-out-cta {
         margin-bottom: 20px;
     }
+
+    @media only screen and (max-width: $smallScreen) {
+        .device-selection {
+            display: flex;
+            flex-direction: column;
+        }
+        .more-tab {
+            flex-direction: column;
+        }
+    }
 }

css/modals/video-quality/_video-quality.scss

@@ -86,6 +86,7 @@
 
         .video-quality-dialog-label-container.active {
             color: $videoQualityActive;
+            font-weight: bold;
 
             &::before {
                 background: $videoQualityActive;

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

@@ -1,93 +1,231 @@
 .virtual-background-dialog {
+    margin-left: -10px;
+    position: relative;
+    max-height: 300px;
+    color: white;
     display: inline-grid;
-    grid-template-columns: auto auto auto auto auto auto auto;
-    max-width: 370px;
+    grid-template-columns: auto auto auto auto auto;
+    column-gap: 9px;
     cursor: pointer;
+    .desktop-share:hover,
+    .thumbnail:hover,
+    .blur:hover,
+    .slight-blur:hover,
+    .virtual-background-none:hover {
+        opacity: 0.5;
+        border: 2px solid #99bbf3;
+        @media (min-width: 432px) and (min-width: 432px) and (max-width: 632px) {
+            height: 60px;
+            width: 60px;
+        }
+        @media (max-width: 432px) {
+            height: 60px;
+            width: 60px;
+        }
+    }
+    .background-option {
+        margin-top: 8px;
+        border-radius: 6px;
+        height: 60px;
+        width: 107px;
+        text-align: center;
+        justify-content: center;
+        font-weight: bold;
+        box-sizing: border-box;
+        display: flex;
+        align-items: center;
+    }
     .thumbnail {
-        border-radius: 10px;
         object-fit: cover;
-        padding: 5px;
-        height: 40px;
-        width: 40px;
     }
 
     .thumbnail:hover ~ .delete-image-icon {
         display: block;
     }
     .thumbnail-selected {
-        border-radius: 10px;
         object-fit: cover;
-        padding: 5px;
-        height: 40px;
-        width: 40px;
-        border: 2px solid #a4b8d1;
+        border: 2px solid #246fe5;
+    }
+    .blur {
+        box-shadow: inset 0 0 12px #000000;
+        background: #7e8287;
+        padding: 0 10px;
     }
     .blur-selected {
-        border-radius: 10px;
-        border: 2px solid #a4b8d1;
+        box-shadow: inset 0 0 12px #000000;
+        background: #7e8287;
+        border: 2px solid #246fe5;
+        padding: 0 10px;
+    }
+    .slight-blur {
+        box-shadow: inset 0 0 12px #000000;
+        background: #a4a4a4;
+        padding: 0 10px;
+    }
+    .slight-blur-selected {
+        box-shadow: inset 0 0 12px #000000;
+        background: #a4a4a4;
+        border: 2px solid #246fe5;
+        padding: 0 10px;
     }
     .virtual-background-none {
-        font-weight: bold;
-        padding: 5px;
-        height: 34px;
-        width: 34px;
-        border-radius: 10px;
-        border: 1px solid #a4b8d1;
-        text-align: center;
-        vertical-align: middle;
-        line-height: 35px;
-        margin-right: 5px;
+        background: #525252;
+        padding: 0 10px;
     }
     .none-selected {
-        font-weight: bold;
-        padding: 5px;
-        height: 34px;
-        width: 34px;
-        border-radius: 10px;
-        border: 2px solid #a4b8d1;
-        text-align: center;
-        vertical-align: middle;
-        line-height: 35px;
-        margin-right: 5px;
+        background: #525252;
+        border: 2px solid #246fe5;
+        padding: 0 10px;
+    }
+
+    .desktop-share {
+        background: #525252;
+    }
+    .desktop-share-selected {
+        background: #525252;
+        border: 2px solid #246fe5;
+        padding: 0 10px;
+    }
+
+    @media (min-width: 432px) and (max-width: 632px) {
+        font-size: 1.5vw;
+        .desktop-share,
+        .virtual-background-none,
+        .thumbnail,
+        .blur,
+        .slight-blur {
+            height: 60px;
+            width: 60px;
+        }
+        .desktop-share-selected,
+        .thumbnail-selected,
+        .none-selected,
+        .blur-selected,
+        .slight-blur-selected {
+            height: 60px;
+            width: 60px;
+        }
+    }
+    @media (max-width: 432px) {
+        grid-template-columns: auto auto auto;
+        font-size: 1.5vw;
+        .desktop-share,
+        .virtual-background-none,
+        .thumbnail,
+        .blur,
+        .slight-blur {
+            height: 60px;
+            width: 60px;
+        }
+        .desktop-share-selected,
+        .thumbnail-selected,
+        .none-selected,
+        .blur-selected,
+        .slight-blur-selected {
+            height: 60px;
+            width: 60px;
+        }
+    }
+    @media (max-width: 320px) {
+        grid-template-columns: auto auto auto;
+        font-size: 1.5vw;
     }
 }
 
 .modal-dialog-form .virtual-background-loading {
     overflow: hidden;
+    position: fixed;
+    left: 50%;
+    margin-top: 10px;
+    transform: translateX(-50%);
+}
+.modal-dialog-form .video-preview {
+    height: 250px;
 }
 .file-upload-btn {
     display: none;
 }
-.custom-file-upload {
-    font-size: x-large;
-    font-weight: bold;
-    display: inline-block;
-    padding: 4px;
-    height: 35px;
-    width: 35px;
-    border-radius: 10px;
-    border: 1px solid #a4b8d1;
-    text-align: center;
-    vertical-align: middle;
-    line-height: 35px;
-    margin-left: 5px;
+.file-upload-label {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 20px;
+    margin-left: -10px;
+    margin-top: 16px;
+    margin-bottom: 8px;
+    color: #669aec;
+    display: inline-flex;
     cursor: pointer;
 }
 
 .delete-image-icon {
+    background: #3d3d3d;
     position: absolute;
     display: none;
-    left: 36;
-    bottom: 36;
+    left: 96;
+    bottom: 51;
+    @media (min-width: 432px) and (max-width: 632px) {
+        left: 51px;
+    }
 }
+
 .delete-image-icon:hover {
     display: block;
 }
 
 .thumbnail-container {
     position: relative;
+    &:focus-within {
+        .thumbnail ~ .delete-image-icon {
+            display: block;
+        }
+    }
 }
 
-.loading-content-text{
-  margin-right: 15px;
+.add-background {
+    margin-right: 8px;
+}
+
+.apply-background-btn {
+    margin-top: 16px;
+    float: right;
+}
+
+.video-background-preview-entry {
+    margin-left: -10px;
+    height: 250px;
+    width: 570px;
+    margin-bottom: 8px;
+    z-index: 2;
+    @media (min-width: 432px) and (max-width: 632px) {
+        max-width: 336;
+    }
+    @media (max-width: 432px) {
+        max-width: 336;
+    }
+}
+
+.virtual-background-preview-video {
+    margin-left: -10;
+    border-radius: 6px;
+    height: 100%;
+    object-fit: cover;
+    width: 100%;
+}
+.video-preview-loader {
+    border-radius: 6px;
+    background-color: transparent;
+    height: 250px;
+    margin-bottom: 8px;
+    width: 572px;
+    position: fixed;
+    z-index: 2;
+    @media (min-width: 432px) and (max-width: 632px) {
+        width: 340px;
+    }
+}
+
+.video-preview-loader svg {
+    position: absolute;
+    top: 40%;
+    left: 45%;
 }

css/themes/_light.scss

@@ -107,4 +107,4 @@ $selectActiveItemBg: darken($controlBackground, 20%);
 /**
  * TODO: Replace by themed component.
  */
-$videoQualityActive: #4C9AFF;
+$videoQualityActive: #57A0ff;

debian/jitsi-meet-prosody.postinst

@@ -125,11 +125,11 @@ case "$1" in
 
         # Check whether prosody config has the internal muc, if not add it,
         # as we are migrating configs
-        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "internal.auth.$JVB_HOSTNAME" $PROSODY_HOST_CONFIG; then
-            echo -e "\nComponent \"internal.auth.$JVB_HOSTNAME\" \"muc\"" >> $PROSODY_HOST_CONFIG
+        if [ -f $PROSODY_HOST_CONFIG ] && ! grep -q "internal.$JICOFO_AUTH_DOMAIN" $PROSODY_HOST_CONFIG; then
+            echo -e "\nComponent \"internal.$JICOFO_AUTH_DOMAIN\" \"muc\"" >> $PROSODY_HOST_CONFIG
             echo -e "    storage = \"memory\"" >> $PROSODY_HOST_CONFIG
             echo -e "    modules_enabled = { \"ping\"; }" >> $PROSODY_HOST_CONFIG
-            echo -e "    admins = { \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\", \"jvb@auth.$JVB_HOSTNAME\" }" >> $PROSODY_HOST_CONFIG
+            echo -e "    admins = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\", \"jvb@$JICOFO_AUTH_DOMAIN\" }" >> $PROSODY_HOST_CONFIG
         fi
 
         # Convert the old focus component config to the new one.
@@ -140,7 +140,7 @@ case "$1" in
         # Component "focus.jitmeet.example.com" "client_proxy"
         #    target_address = "focus@auth.jitmeet.example.com"
         if grep -q "Component \"focus.$JVB_HOSTNAME\"" $PROSODY_HOST_CONFIG && ! grep "Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"" $PROSODY_HOST_CONFIG ;then
-            sed -i "s/Component \"focus.$JVB_HOSTNAME\"/Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"\n    target_address = \"$JICOFO_AUTH_USER@auth.$JVB_HOSTNAME\"/g" $PROSODY_HOST_CONFIG
+            sed -i "s/Component \"focus.$JVB_HOSTNAME\"/Component \"focus.$JVB_HOSTNAME\" \"client_proxy\"\n    target_address = \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\"/g" $PROSODY_HOST_CONFIG
             PROSODY_CONFIG_PRESENT="false"
         fi
 
@@ -151,8 +151,21 @@ case "$1" in
             PROSODY_CONFIG_PRESENT="false"
         fi
 
+        # Updates main muc component
+        MAIN_MUC_PATTERN="Component \"conference.$JVB_HOSTNAME\" \"muc\""
+        if ! grep -A 2 -- "${MAIN_MUC_PATTERN}" $PROSODY_HOST_CONFIG | grep -q "restrict_room_creation" ;then
+            sed -i "s/${MAIN_MUC_PATTERN}/${MAIN_MUC_PATTERN}\n    restrict_room_creation = true/g" $PROSODY_HOST_CONFIG
+            PROSODY_CONFIG_PRESENT="false"
+        fi
+
+        if ! grep -q -- 'unlimited_jids' $PROSODY_HOST_CONFIG ;then
+            sed -i "1s/^/unlimited_jids = { \"$JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN\", \"jvb@$JICOFO_AUTH_DOMAIN\" }\n/" $PROSODY_HOST_CONFIG
+            sed -i "s/VirtualHost \"$JICOFO_AUTH_DOMAIN\"/VirtualHost \"$JICOFO_AUTH_DOMAIN\"\n    modules_enabled = { \"limits_exception\"; }/g" $PROSODY_HOST_CONFIG
+            PROSODY_CONFIG_PRESENT="false"
+        fi
+
         # Make sure the focus@auth user's roster includes the proxy component (this is idempotent)
-        prosodyctl mod_roster_command subscribe focus.$JVB_HOSTNAME $JICOFO_AUTH_USER@auth.$JVB_HOSTNAME
+        prosodyctl mod_roster_command subscribe focus.$JVB_HOSTNAME $JICOFO_AUTH_USER@$JICOFO_AUTH_DOMAIN
 
         if [ ! -f /var/lib/prosody/$JVB_HOSTNAME.crt ]; then
             # prosodyctl takes care for the permissions

debian/jitsi-meet-web.install

@@ -1,6 +1,5 @@
 interface_config.js		/usr/share/jitsi-meet/
 logging_config.js		/usr/share/jitsi-meet/
-*.json					/usr/share/jitsi-meet/
 *.html					/usr/share/jitsi-meet/
 *.ico					/usr/share/jitsi-meet/
 libs					/usr/share/jitsi-meet/

doc/debian/jitsi-meet-prosody/prosody.cfg.lua-jvb.example

@@ -20,6 +20,11 @@ ssl = {
     ciphers = "ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256:ECDHE-ECDSA-AES256-GCM-SHA384:ECDHE-RSA-AES256-GCM-SHA384:ECDHE-ECDSA-CHACHA20-POLY1305:ECDHE-RSA-CHACHA20-POLY1305:DHE-RSA-AES128-GCM-SHA256:DHE-RSA-AES256-GCM-SHA384"
 }
 
+unlimited_jids = {
+    "focusUser@auth.jitmeet.example.com",
+    "jvb@auth.jitmeet.example.com"
+}
+
 VirtualHost "jitmeet.example.com"
     -- enabled = false -- Remove this line to enable this host
     authentication = "anonymous"
@@ -35,6 +40,7 @@ VirtualHost "jitmeet.example.com"
         key = "/etc/prosody/certs/jitmeet.example.com.key";
         certificate = "/etc/prosody/certs/jitmeet.example.com.crt";
     }
+    av_moderation_component = "avmoderation.jitmeet.example.com"
     speakerstats_component = "speakerstats.jitmeet.example.com"
     conference_duration_component = "conferenceduration.jitmeet.example.com"
     -- we need bosh
@@ -46,6 +52,7 @@ VirtualHost "jitmeet.example.com"
         "external_services";
         "conference_duration";
         "muc_lobby_rooms";
+        "av_moderation";
     }
     c2s_require_encryption = false
     lobby_muc = "lobby.jitmeet.example.com"
@@ -53,6 +60,7 @@ VirtualHost "jitmeet.example.com"
     -- muc_lobby_whitelist = { "recorder.jitmeet.example.com" } -- Here we can whitelist jibri to enter lobby enabled rooms
 
 Component "conference.jitmeet.example.com" "muc"
+    restrict_room_creation = true
     storage = "memory"
     modules_enabled = {
         "muc_meeting_id";
@@ -74,6 +82,9 @@ Component "internal.auth.jitmeet.example.com" "muc"
     muc_room_default_public_jids = true
 
 VirtualHost "auth.jitmeet.example.com"
+    modules_enabled = {
+        "limits_exception";
+    }
     authentication = "internal_hashed"
 
 -- Proxy to jicofo's user JID, so that it doesn't have to register as a component.
@@ -86,6 +97,9 @@ Component "speakerstats.jitmeet.example.com" "speakerstats_component"
 Component "conferenceduration.jitmeet.example.com" "conference_duration_component"
     muc_component = "conference.jitmeet.example.com"
 
+Component "avmoderation.jitmeet.example.com" "av_moderation_component"
+    muc_component = "conference.jitmeet.example.com"
+
 Component "lobby.jitmeet.example.com" "muc"
     storage = "memory"
     restrict_room_creation = true

doc/debian/jitsi-meet/jitsi-meet.example

@@ -35,6 +35,7 @@ server {
     ssl_session_tickets off;
 
     add_header Strict-Transport-Security "max-age=63072000" always;
+    set $prefix "";
 
     ssl_certificate /etc/jitsi/meet/jitsi-meet.example.com.crt;
     ssl_certificate_key /etc/jitsi/meet/jitsi-meet.example.com.key;
@@ -76,7 +77,7 @@ server {
 
     # BOSH
     location = /http-bind {
-        proxy_pass       http://localhost:5280/http-bind;
+        proxy_pass http://127.0.0.1:5280/http-bind?prefix=$prefix&$args;
         proxy_set_header X-Forwarded-For $remote_addr;
         proxy_set_header Host $http_host;
     }
@@ -125,13 +126,6 @@ server {
         alias /etc/jitsi/meet/jitsi-meet.example.com-config.js;
     }
 
-    # Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
-    location ~ ^/([^/?&:'"]+)/(.*)$ {
-        set $subdomain "$1.";
-        set $subdir "$1/";
-        rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
-    }
-
     # BOSH for subdomains
     location ~ ^/([^/?&:'"]+)/http-bind {
         set $subdomain "$1.";
@@ -149,4 +143,11 @@ server {
 
         rewrite ^/(.*)$ /xmpp-websocket;
     }
+
+    # Anything that didn't match above, and isn't a real file, assume it's a room name and redirect to /
+    location ~ ^/([^/?&:'"]+)/(.*)$ {
+        set $subdomain "$1.";
+        set $subdir "$1/";
+        rewrite ^/([^/?&:'"]+)/(.*)$ /$2;
+    }
 }

index.html

@@ -186,10 +186,10 @@
     <!--#include virtual="static/settingsToolbarAdditionalContent.html" -->
   </head>
   <body>
-    <noscript>
+    <noscript aria-hidden="true">
         <div>JavaScript is disabled. </br>For this site to work you have to enable JavaScript.</div>
     </noscript>
     <!--#include virtual="body.html" -->
-    <div id="react"></div>
+    <div id="react" role="main"></div>
   </body>
 </html>

ios/app/app.xcodeproj/project.pbxproj

@@ -23,12 +23,13 @@
 		13B07FBD1A68108700A75B9A /* LaunchScreen.xib in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB11A68108700A75B9A /* LaunchScreen.xib */; };
 		13B07FBF1A68108700A75B9A /* Images.xcassets in Resources */ = {isa = PBXBuildFile; fileRef = 13B07FB51A68108700A75B9A /* Images.xcassets */; };
 		13B07FC11A68108700A75B9A /* main.m in Sources */ = {isa = PBXBuildFile; fileRef = 13B07FB71A68108700A75B9A /* main.m */; };
-		4E51B75E25E4115F0038575A /* DarwinNotificationCenter.m in Sources */ = {isa = PBXBuildFile; fileRef = 4E51B75D25E4115F0038575A /* DarwinNotificationCenter.m */; };
-		4EC49BB725BEDAC100E76218 /* ReplayKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 4EC49B8625BED71300E76218 /* ReplayKit.framework */; };
-		4EC49BBB25BEDAC100E76218 /* SampleHandler.m in Sources */ = {isa = PBXBuildFile; fileRef = 4EC49BBA25BEDAC100E76218 /* SampleHandler.m */; };
-		4EC49BBF25BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 4EC49BB625BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
-		4EC49BCB25BEDB6400E76218 /* SocketConnection.m in Sources */ = {isa = PBXBuildFile; fileRef = 4EC49BCA25BEDB6400E76218 /* SocketConnection.m */; };
-		4EC49BD125BF19CF00E76218 /* SampleUploader.m in Sources */ = {isa = PBXBuildFile; fileRef = 4EC49BD025BF19CF00E76218 /* SampleUploader.m */; };
+		4E90F9402632D1AB001102D4 /* Atomic.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4E90F93F2632D1AB001102D4 /* Atomic.swift */; };
+		4EB06024260E026600F524C5 /* ReplayKit.framework in Frameworks */ = {isa = PBXBuildFile; fileRef = 4EC49B8625BED71300E76218 /* ReplayKit.framework */; };
+		4EB06027260E026600F524C5 /* SampleHandler.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4EB06026260E026600F524C5 /* SampleHandler.swift */; };
+		4EB0602B260E026600F524C5 /* JitsiMeetBroadcastExtension.appex in Embed App Extensions */ = {isa = PBXBuildFile; fileRef = 4EB06023260E026600F524C5 /* JitsiMeetBroadcastExtension.appex */; settings = {ATTRIBUTES = (RemoveHeadersOnCopy, ); }; };
+		4EB0603C260E09D000F524C5 /* SocketConnection.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4EB06039260E09D000F524C5 /* SocketConnection.swift */; };
+		4EB0603D260E09D000F524C5 /* DarwinNotificationCenter.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4EB0603A260E09D000F524C5 /* DarwinNotificationCenter.swift */; };
+		4EB0603E260E09D000F524C5 /* SampleUploader.swift in Sources */ = {isa = PBXBuildFile; fileRef = 4EB0603B260E09D000F524C5 /* SampleUploader.swift */; };
 		55BEDABDA92D47D399A70A5E /* libPods-JitsiMeet.a in Frameworks */ = {isa = PBXBuildFile; fileRef = D878B07B3FBD6E305EAA6B27 /* libPods-JitsiMeet.a */; };
 		DE050389256E904600DEE3A5 /* WebRTC.xcframework in Frameworks */ = {isa = PBXBuildFile; fileRef = DE050388256E904600DEE3A5 /* WebRTC.xcframework */; };
 		DE05038A256E904600DEE3A5 /* WebRTC.xcframework in Embed Frameworks */ = {isa = PBXBuildFile; fileRef = DE050388256E904600DEE3A5 /* WebRTC.xcframework */; settings = {ATTRIBUTES = (CodeSignOnCopy, RemoveHeadersOnCopy, ); }; };
@@ -54,11 +55,11 @@
 			remoteGlobalIDString = 0BEA5C241F7B8F73000D0AB4;
 			remoteInfo = JitsiMeetCompanion;
 		};
-		4EC49BBD25BEDAC100E76218 /* PBXContainerItemProxy */ = {
+		4EB06029260E026600F524C5 /* PBXContainerItemProxy */ = {
 			isa = PBXContainerItemProxy;
 			containerPortal = 83CBB9F71A601CBA00E9B192 /* Project object */;
 			proxyType = 1;
-			remoteGlobalIDString = 4EC49BB525BEDAC100E76218;
+			remoteGlobalIDString = 4EB06022260E026600F524C5;
 			remoteInfo = "JitsiMeetBroadcast Extension";
 		};
 /* End PBXContainerItemProxy section */
@@ -104,7 +105,7 @@
 			dstPath = "";
 			dstSubfolderSpec = 13;
 			files = (
-				4EC49BBF25BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex in Embed App Extensions */,
+				4EB0602B260E026600F524C5 /* JitsiMeetBroadcastExtension.appex in Embed App Extensions */,
 			);
 			name = "Embed App Extensions";
 			runOnlyForDeploymentPostprocessing = 0;
@@ -139,19 +140,18 @@
 		13B07FB61A68108700A75B9A /* Info.plist */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
 		13B07FB71A68108700A75B9A /* main.m */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.objc; path = main.m; sourceTree = "<group>"; };
 		4670A512A688E2DC34528282 /* Pods-jitsi-meet.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-jitsi-meet.debug.xcconfig"; path = "../Pods/Target Support Files/Pods-jitsi-meet/Pods-jitsi-meet.debug.xcconfig"; sourceTree = "<group>"; };
-		4E51B75C25E4115F0038575A /* DarwinNotificationCenter.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = DarwinNotificationCenter.h; sourceTree = "<group>"; };
-		4E51B75D25E4115F0038575A /* DarwinNotificationCenter.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = DarwinNotificationCenter.m; sourceTree = "<group>"; };
+		4E90F93F2632D1AB001102D4 /* Atomic.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = Atomic.swift; sourceTree = "<group>"; };
+		4EB06023260E026600F524C5 /* JitsiMeetBroadcastExtension.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = JitsiMeetBroadcastExtension.appex; sourceTree = BUILT_PRODUCTS_DIR; };
+		4EB06026260E026600F524C5 /* SampleHandler.swift */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.swift; path = SampleHandler.swift; sourceTree = "<group>"; };
+		4EB06028260E026600F524C5 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
+		4EB06032260E08CC00F524C5 /* extension.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = extension.entitlements; sourceTree = "<group>"; };
+		4EB06039260E09D000F524C5 /* SocketConnection.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SocketConnection.swift; sourceTree = "<group>"; };
+		4EB0603A260E09D000F524C5 /* DarwinNotificationCenter.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = DarwinNotificationCenter.swift; sourceTree = "<group>"; };
+		4EB0603B260E09D000F524C5 /* SampleUploader.swift */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.swift; path = SampleUploader.swift; sourceTree = "<group>"; };
 		4EC49B8625BED71300E76218 /* ReplayKit.framework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.framework; name = ReplayKit.framework; path = System/Library/Frameworks/ReplayKit.framework; sourceTree = SDKROOT; };
-		4EC49BB625BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex */ = {isa = PBXFileReference; explicitFileType = "wrapper.app-extension"; includeInIndex = 0; path = "JitsiMeetBroadcast Extension.appex"; sourceTree = BUILT_PRODUCTS_DIR; };
-		4EC49BB925BEDAC100E76218 /* SampleHandler.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = SampleHandler.h; sourceTree = "<group>"; };
-		4EC49BBA25BEDAC100E76218 /* SampleHandler.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = SampleHandler.m; sourceTree = "<group>"; };
-		4EC49BBC25BEDAC100E76218 /* Info.plist */ = {isa = PBXFileReference; lastKnownFileType = text.plist.xml; path = Info.plist; sourceTree = "<group>"; };
-		4EC49BC925BEDB6400E76218 /* SocketConnection.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = SocketConnection.h; sourceTree = "<group>"; };
-		4EC49BCA25BEDB6400E76218 /* SocketConnection.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = SocketConnection.m; sourceTree = "<group>"; };
-		4EC49BCF25BF19CF00E76218 /* SampleUploader.h */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.h; path = SampleUploader.h; sourceTree = "<group>"; };
-		4EC49BD025BF19CF00E76218 /* SampleUploader.m */ = {isa = PBXFileReference; lastKnownFileType = sourcecode.c.objc; path = SampleUploader.m; sourceTree = "<group>"; };
-		4EC49BDB25BF280A00E76218 /* extension.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = extension.entitlements; sourceTree = "<group>"; };
+		5FEF9D87A4D2A38AD7193308 /* Pods-JitsiMeet-JitsiMeetBroadcastExtension.release.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JitsiMeet-JitsiMeetBroadcastExtension.release.xcconfig"; path = "../Pods/Target Support Files/Pods-JitsiMeet-JitsiMeetBroadcastExtension/Pods-JitsiMeet-JitsiMeetBroadcastExtension.release.xcconfig"; sourceTree = "<group>"; };
 		609CB2080B75F75A89923F3D /* Pods-JitsiMeet.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JitsiMeet.debug.xcconfig"; path = "../Pods/Target Support Files/Pods-JitsiMeet/Pods-JitsiMeet.debug.xcconfig"; sourceTree = "<group>"; };
+		A7B2827E068A0E05260054AC /* Pods-JitsiMeet-JitsiMeetBroadcastExtension.debug.xcconfig */ = {isa = PBXFileReference; includeInIndex = 1; lastKnownFileType = text.xcconfig; name = "Pods-JitsiMeet-JitsiMeetBroadcastExtension.debug.xcconfig"; path = "../Pods/Target Support Files/Pods-JitsiMeet-JitsiMeetBroadcastExtension/Pods-JitsiMeet-JitsiMeetBroadcastExtension.debug.xcconfig"; sourceTree = "<group>"; };
 		B3B083EB1D4955FF0069CEE7 /* app.entitlements */ = {isa = PBXFileReference; lastKnownFileType = text.plist.entitlements; path = app.entitlements; sourceTree = "<group>"; };
 		D878B07B3FBD6E305EAA6B27 /* libPods-JitsiMeet.a */ = {isa = PBXFileReference; explicitFileType = archive.ar; includeInIndex = 0; path = "libPods-JitsiMeet.a"; sourceTree = BUILT_PRODUCTS_DIR; };
 		DE050388256E904600DEE3A5 /* WebRTC.xcframework */ = {isa = PBXFileReference; lastKnownFileType = wrapper.xcframework; name = WebRTC.xcframework; path = "../../node_modules/react-native-webrtc/apple/WebRTC.xcframework"; sourceTree = "<group>"; };
@@ -189,11 +189,11 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		4EC49BB325BEDAC100E76218 /* Frameworks */ = {
+		4EB06020260E026600F524C5 /* Frameworks */ = {
 			isa = PBXFrameworksBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				4EC49BB725BEDAC100E76218 /* ReplayKit.framework in Frameworks */,
+				4EB06024260E026600F524C5 /* ReplayKit.framework in Frameworks */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -261,23 +261,22 @@
 			path = src;
 			sourceTree = "<group>";
 		};
-		4EC49BB825BEDAC100E76218 /* JitsiMeetBroadcast Extension */ = {
+		4EB06025260E026600F524C5 /* JitsiMeetBroadcast Extension */ = {
 			isa = PBXGroup;
 			children = (
-				4EC49BDB25BF280A00E76218 /* extension.entitlements */,
-				4EC49BB925BEDAC100E76218 /* SampleHandler.h */,
-				4EC49BBA25BEDAC100E76218 /* SampleHandler.m */,
-				4EC49BC925BEDB6400E76218 /* SocketConnection.h */,
-				4EC49BCA25BEDB6400E76218 /* SocketConnection.m */,
-				4EC49BCF25BF19CF00E76218 /* SampleUploader.h */,
-				4EC49BD025BF19CF00E76218 /* SampleUploader.m */,
-				4EC49BBC25BEDAC100E76218 /* Info.plist */,
-				4E51B75C25E4115F0038575A /* DarwinNotificationCenter.h */,
-				4E51B75D25E4115F0038575A /* DarwinNotificationCenter.m */,
+				4EB06032260E08CC00F524C5 /* extension.entitlements */,
+				4EB06026260E026600F524C5 /* SampleHandler.swift */,
+				4EB0603B260E09D000F524C5 /* SampleUploader.swift */,
+				4EB06039260E09D000F524C5 /* SocketConnection.swift */,
+				4EB0603A260E09D000F524C5 /* DarwinNotificationCenter.swift */,
+				4E90F93F2632D1AB001102D4 /* Atomic.swift */,
+				4EB06028260E026600F524C5 /* Info.plist */,
 			);
+			indentWidth = 4;
 			name = "JitsiMeetBroadcast Extension";
 			path = "broadcast-extension";
 			sourceTree = "<group>";
+			tabWidth = 4;
 		};
 		5E96ADD5E49F3B3822EF9A52 /* Pods */ = {
 			isa = PBXGroup;
@@ -286,6 +285,8 @@
 				09AA3B93E4CC62D84B424690 /* Pods-jitsi-meet.release.xcconfig */,
 				609CB2080B75F75A89923F3D /* Pods-JitsiMeet.debug.xcconfig */,
 				FC040BBED70876444D89E91C /* Pods-JitsiMeet.release.xcconfig */,
+				A7B2827E068A0E05260054AC /* Pods-JitsiMeet-JitsiMeetBroadcastExtension.debug.xcconfig */,
+				5FEF9D87A4D2A38AD7193308 /* Pods-JitsiMeet-JitsiMeetBroadcastExtension.release.xcconfig */,
 			);
 			name = Pods;
 			sourceTree = "<group>";
@@ -299,8 +300,8 @@
 				13B07FAE1A68108700A75B9A /* src */,
 				5E96ADD5E49F3B3822EF9A52 /* Pods */,
 				0BEA5C261F7B8F73000D0AB4 /* Watch app */,
-				4EC49BB825BEDAC100E76218 /* JitsiMeetBroadcast Extension */,
 				0BEA5C351F7B8F73000D0AB4 /* WatchKit extension */,
+				4EB06025260E026600F524C5 /* JitsiMeetBroadcast Extension */,
 			);
 			indentWidth = 2;
 			sourceTree = "<group>";
@@ -312,7 +313,7 @@
 				13B07F961A680F5B00A75B9A /* jitsi-meet.app */,
 				0BEA5C251F7B8F73000D0AB4 /* JitsiMeetCompanion.app */,
 				0BEA5C311F7B8F73000D0AB4 /* JitsiMeetCompanion Extension.appex */,
-				4EC49BB625BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex */,
+				4EB06023260E026600F524C5 /* JitsiMeetBroadcastExtension.appex */,
 			);
 			name = Products;
 			sourceTree = "<group>";
@@ -376,28 +377,28 @@
 			);
 			dependencies = (
 				0BEA5C401F7B8F73000D0AB4 /* PBXTargetDependency */,
-				4EC49BBE25BEDAC100E76218 /* PBXTargetDependency */,
+				4EB0602A260E026600F524C5 /* PBXTargetDependency */,
 			);
 			name = JitsiMeet;
 			productName = "Jitsi Meet";
 			productReference = 13B07F961A680F5B00A75B9A /* jitsi-meet.app */;
 			productType = "com.apple.product-type.application";
 		};
-		4EC49BB525BEDAC100E76218 /* JitsiMeetBroadcast Extension */ = {
+		4EB06022260E026600F524C5 /* JitsiMeetBroadcastExtension */ = {
 			isa = PBXNativeTarget;
-			buildConfigurationList = 4EC49BC025BEDAC100E76218 /* Build configuration list for PBXNativeTarget "JitsiMeetBroadcast Extension" */;
+			buildConfigurationList = 4EB0602C260E026700F524C5 /* Build configuration list for PBXNativeTarget "JitsiMeetBroadcastExtension" */;
 			buildPhases = (
-				4EC49BB225BEDAC100E76218 /* Sources */,
-				4EC49BB325BEDAC100E76218 /* Frameworks */,
-				4EC49BB425BEDAC100E76218 /* Resources */,
+				4EB0601F260E026600F524C5 /* Sources */,
+				4EB06020260E026600F524C5 /* Frameworks */,
+				4EB06021260E026600F524C5 /* Resources */,
 			);
 			buildRules = (
 			);
 			dependencies = (
 			);
-			name = "JitsiMeetBroadcast Extension";
+			name = JitsiMeetBroadcastExtension;
 			productName = "JitsiMeetBroadcast Extension";
-			productReference = 4EC49BB625BEDAC100E76218 /* JitsiMeetBroadcast Extension.appex */;
+			productReference = 4EB06023260E026600F524C5 /* JitsiMeetBroadcastExtension.appex */;
 			productType = "com.apple.product-type.app-extension";
 		};
 /* End PBXNativeTarget section */
@@ -406,6 +407,7 @@
 		83CBB9F71A601CBA00E9B192 /* Project object */ = {
 			isa = PBXProject;
 			attributes = {
+				LastSwiftUpdateCheck = 1240;
 				LastUpgradeCheck = 1020;
 				ORGANIZATIONNAME = Facebook;
 				TargetAttributes = {
@@ -429,8 +431,8 @@
 							};
 						};
 					};
-					4EC49BB525BEDAC100E76218 = {
-						CreatedOnToolsVersion = 12.2;
+					4EB06022260E026600F524C5 = {
+						CreatedOnToolsVersion = 12.4;
 					};
 				};
 			};
@@ -450,7 +452,7 @@
 				13B07F861A680F5B00A75B9A /* JitsiMeet */,
 				0BEA5C241F7B8F73000D0AB4 /* JitsiMeetCompanion */,
 				0BEA5C301F7B8F73000D0AB4 /* JitsiMeetCompanion Extension */,
-				4EC49BB525BEDAC100E76218 /* JitsiMeetBroadcast Extension */,
+				4EB06022260E026600F524C5 /* JitsiMeetBroadcastExtension */,
 			);
 		};
 /* End PBXProject section */
@@ -483,7 +485,7 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		4EC49BB425BEDAC100E76218 /* Resources */ = {
+		4EB06021260E026600F524C5 /* Resources */ = {
 			isa = PBXResourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
@@ -625,14 +627,15 @@
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
-		4EC49BB225BEDAC100E76218 /* Sources */ = {
+		4EB0601F260E026600F524C5 /* Sources */ = {
 			isa = PBXSourcesBuildPhase;
 			buildActionMask = 2147483647;
 			files = (
-				4EC49BCB25BEDB6400E76218 /* SocketConnection.m in Sources */,
-				4EC49BBB25BEDAC100E76218 /* SampleHandler.m in Sources */,
-				4E51B75E25E4115F0038575A /* DarwinNotificationCenter.m in Sources */,
-				4EC49BD125BF19CF00E76218 /* SampleUploader.m in Sources */,
+				4EB0603C260E09D000F524C5 /* SocketConnection.swift in Sources */,
+				4EB0603E260E09D000F524C5 /* SampleUploader.swift in Sources */,
+				4EB0603D260E09D000F524C5 /* DarwinNotificationCenter.swift in Sources */,
+				4EB06027260E026600F524C5 /* SampleHandler.swift in Sources */,
+				4E90F9402632D1AB001102D4 /* Atomic.swift in Sources */,
 			);
 			runOnlyForDeploymentPostprocessing = 0;
 		};
@@ -649,10 +652,10 @@
 			target = 0BEA5C241F7B8F73000D0AB4 /* JitsiMeetCompanion */;
 			targetProxy = 0BEA5C3F1F7B8F73000D0AB4 /* PBXContainerItemProxy */;
 		};
-		4EC49BBE25BEDAC100E76218 /* PBXTargetDependency */ = {
+		4EB0602A260E026600F524C5 /* PBXTargetDependency */ = {
 			isa = PBXTargetDependency;
-			target = 4EC49BB525BEDAC100E76218 /* JitsiMeetBroadcast Extension */;
-			targetProxy = 4EC49BBD25BEDAC100E76218 /* PBXContainerItemProxy */;
+			target = 4EB06022260E026600F524C5 /* JitsiMeetBroadcastExtension */;
+			targetProxy = 4EB06029260E026600F524C5 /* PBXContainerItemProxy */;
 		};
 /* End PBXTargetDependency section */
 
@@ -879,7 +882,7 @@
 			};
 			name = Release;
 		};
-		4EC49BC125BEDAC100E76218 /* Debug */ = {
+		4EB0602D260E026700F524C5 /* Debug */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				CLANG_ANALYZER_NONNULL = YES;
@@ -890,13 +893,13 @@
 				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = "broadcast-extension/extension.entitlements";
-				CODE_SIGN_IDENTITY = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				DEBUG_INFORMATION_FORMAT = dwarf;
 				DEVELOPMENT_TEAM = FC967L3QRG;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				INFOPLIST_FILE = "broadcast-extension/Info.plist";
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -907,11 +910,14 @@
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.meet.broadcast.extension;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;
+				SWIFT_ACTIVE_COMPILATION_CONDITIONS = DEBUG;
+				SWIFT_OPTIMIZATION_LEVEL = "-Onone";
+				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Debug;
 		};
-		4EC49BC225BEDAC100E76218 /* Release */ = {
+		4EB0602E260E026700F524C5 /* Release */ = {
 			isa = XCBuildConfiguration;
 			buildSettings = {
 				CLANG_ANALYZER_NONNULL = YES;
@@ -922,14 +928,14 @@
 				CLANG_WARN_QUOTED_INCLUDE_IN_FRAMEWORK_HEADER = YES;
 				CLANG_WARN_UNGUARDED_AVAILABILITY = YES_AGGRESSIVE;
 				CODE_SIGN_ENTITLEMENTS = "broadcast-extension/extension.entitlements";
-				CODE_SIGN_IDENTITY = "iPhone Developer";
+				CODE_SIGN_IDENTITY = "Apple Development";
 				CODE_SIGN_STYLE = Automatic;
 				COPY_PHASE_STRIP = NO;
 				DEBUG_INFORMATION_FORMAT = "dwarf-with-dsym";
 				DEVELOPMENT_TEAM = FC967L3QRG;
 				GCC_C_LANGUAGE_STANDARD = gnu11;
 				INFOPLIST_FILE = "broadcast-extension/Info.plist";
-				IPHONEOS_DEPLOYMENT_TARGET = 11.0;
+				IPHONEOS_DEPLOYMENT_TARGET = 14.4;
 				LD_RUNPATH_SEARCH_PATHS = (
 					"$(inherited)",
 					"@executable_path/Frameworks",
@@ -939,6 +945,8 @@
 				PRODUCT_BUNDLE_IDENTIFIER = org.jitsi.meet.broadcast.extension;
 				PRODUCT_NAME = "$(TARGET_NAME)";
 				SKIP_INSTALL = YES;
+				SWIFT_OPTIMIZATION_LEVEL = "-O";
+				SWIFT_VERSION = 5.0;
 				TARGETED_DEVICE_FAMILY = "1,2";
 			};
 			name = Release;
@@ -1087,11 +1095,11 @@
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;
 		};
-		4EC49BC025BEDAC100E76218 /* Build configuration list for PBXNativeTarget "JitsiMeetBroadcast Extension" */ = {
+		4EB0602C260E026700F524C5 /* Build configuration list for PBXNativeTarget "JitsiMeetBroadcastExtension" */ = {
 			isa = XCConfigurationList;
 			buildConfigurations = (
-				4EC49BC125BEDAC100E76218 /* Debug */,
-				4EC49BC225BEDAC100E76218 /* Release */,
+				4EB0602D260E026700F524C5 /* Debug */,
+				4EB0602E260E026700F524C5 /* Release */,
 			);
 			defaultConfigurationIsVisible = 0;
 			defaultConfigurationName = Release;

ios/app/broadcast-extension/Atomic.swift

@@ -0,0 +1,30 @@
+
+import Foundation
+
+@propertyWrapper
+struct Atomic<Value> {
+
+    private var value: Value
+    private let lock = NSLock()
+
+    init(wrappedValue value: Value) {
+        self.value = value
+    }
+
+    var wrappedValue: Value {
+      get { return load() }
+      set { store(newValue: newValue) }
+    }
+
+    func load() -> Value {
+        lock.lock()
+        defer { lock.unlock() }
+        return value
+    }
+
+    mutating func store(newValue: Value) {
+        lock.lock()
+        defer { lock.unlock() }
+        value = newValue
+    }
+}

ios/app/broadcast-extension/DarwinNotificationCenter.h

@@ -1,31 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import <Foundation/Foundation.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-extern NSNotificationName const kBroadcastStartedNotification;
-extern NSNotificationName const kBroadcastStoppedNotification;
-
-@interface DarwinNotificationCenter: NSObject
-
-+ (instancetype)sharedInstance;
-- (void)postNotificationWithName:(NSNotificationName)name;
-
-@end
-
-NS_ASSUME_NONNULL_END

ios/app/broadcast-extension/DarwinNotificationCenter.m

@@ -1,50 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import "DarwinNotificationCenter.h"
-
-NSNotificationName const kBroadcastStartedNotification = @"iOS_BroadcastStarted";
-NSNotificationName const kBroadcastStoppedNotification = @"iOS_BroadcastStopped";
-
-@implementation DarwinNotificationCenter {
-  CFNotificationCenterRef _notificationCenter;
-}
-
-+ (instancetype)sharedInstance {
-  static DarwinNotificationCenter *sharedInstance = nil;
-  static dispatch_once_t onceToken;
-  dispatch_once(&onceToken, ^{
-      sharedInstance = [[self alloc] init];
-  });
-  
-  return sharedInstance;
-}
-
-- (instancetype)init {
-  self = [super init];
-  if (self) {
-    _notificationCenter = CFNotificationCenterGetDarwinNotifyCenter();
-  }
-  
-  return self;
-}
-
-- (void)postNotificationWithName:(NSString*)name {
-  CFNotificationCenterPostNotification(_notificationCenter, (__bridge CFStringRef)name, NULL, NULL, true);
-}
-
-@end
-

ios/app/broadcast-extension/DarwinNotificationCenter.swift

@@ -0,0 +1,37 @@
+/*
+ * Copyright @ 2021-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Foundation
+
+enum DarwinNotification: String {
+    case broadcastStarted = "iOS_BroadcastStarted"
+    case broadcastStopped = "iOS_BroadcastStopped"
+}
+
+class DarwinNotificationCenter {
+    
+    static var shared = DarwinNotificationCenter()
+    
+    private var notificationCenter: CFNotificationCenter
+    
+    init() {
+        notificationCenter = CFNotificationCenterGetDarwinNotifyCenter()
+    }
+    
+    func postNotification(_ name: DarwinNotification) {
+        CFNotificationCenterPostNotification(notificationCenter, CFNotificationName(rawValue: name.rawValue as CFString), nil, nil, true)
+    }
+}

ios/app/broadcast-extension/Info.plist

@@ -5,7 +5,7 @@
 	<key>CFBundleDevelopmentRegion</key>
 	<string>$(DEVELOPMENT_LANGUAGE)</string>
 	<key>CFBundleDisplayName</key>
-	<string>JitsiMeet Broadcast Extension</string>
+	<string>Jitsi Meet Broadcast Extension</string>
 	<key>CFBundleExecutable</key>
 	<string>$(EXECUTABLE_NAME)</string>
 	<key>CFBundleIdentifier</key>
@@ -17,7 +17,7 @@
 	<key>CFBundlePackageType</key>
 	<string>$(PRODUCT_BUNDLE_PACKAGE_TYPE)</string>
 	<key>CFBundleShortVersionString</key>
-	<string>21.0.0</string>
+	<string>21.2.0</string>
 	<key>CFBundleVersion</key>
 	<string>1</string>
 	<key>NSExtension</key>
@@ -25,7 +25,7 @@
 		<key>NSExtensionPointIdentifier</key>
 		<string>com.apple.broadcast-services-upload</string>
 		<key>NSExtensionPrincipalClass</key>
-		<string>SampleHandler</string>
+		<string>$(PRODUCT_MODULE_NAME).SampleHandler</string>
 		<key>RPBroadcastProcessMode</key>
 		<string>RPBroadcastProcessModeSampleBuffer</string>
 	</dict>

ios/app/broadcast-extension/SampleHandler.h

@@ -1,21 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import <ReplayKit/ReplayKit.h>
-
-@interface SampleHandler : RPBroadcastSampleHandler
-
-@end

ios/app/broadcast-extension/SampleHandler.m

@@ -1,123 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import "SampleHandler.h"
-#import "SocketConnection.h"
-#import "SampleUploader.h"
-#import "DarwinNotificationCenter.h"
-
-@interface SampleHandler ()
-
-@property (nonatomic, retain) SocketConnection *clientConnection;
-@property (nonatomic, retain) SampleUploader *uploader;
-
-@end
-
-@implementation SampleHandler
-
-- (instancetype)init {
-  self = [super init];
-  if (self) {
-    self.clientConnection = [[SocketConnection alloc] initWithFilePath:self.socketFilePath];
-    [self setupConnection];
-    
-    self.uploader = [[SampleUploader alloc] initWithConnection:self.clientConnection];    
-  }
-  
-  return self;
-}
-
-- (void)broadcastStartedWithSetupInfo:(NSDictionary<NSString *,NSObject *> *)setupInfo {
-  // User has requested to start the broadcast. Setup info from the UI extension can be supplied but optional.
-  NSLog(@"broadcast started");
-  
-  [[DarwinNotificationCenter sharedInstance] postNotificationWithName:kBroadcastStartedNotification];
-  [self openConnection];
-}
-
-- (void)broadcastPaused {
-    // User has requested to pause the broadcast. Samples will stop being delivered.
-}
-
-- (void)broadcastResumed {
-    // User has requested to resume the broadcast. Samples delivery will resume.
-}
-
-- (void)broadcastFinished {
-    // User has requested to finish the broadcast.
-  [[DarwinNotificationCenter sharedInstance] postNotificationWithName:kBroadcastStoppedNotification];
-  [self.clientConnection close];
-}
-
-- (void)processSampleBuffer:(CMSampleBufferRef)sampleBuffer withType:(RPSampleBufferType)sampleBufferType {
-  static NSUInteger frameCount = 0;
-  switch (sampleBufferType) {
-    case RPSampleBufferTypeVideo:
-      // adjust frame rate by using every third frame
-      if (++frameCount%3 == 0 && self.uploader.isReady) {
-        [self.uploader sendSample:sampleBuffer];
-      }
-      break;
-
-    default:
-      break;
-  }
-}
-
-// MARK: Private Methods
-
-- (NSString *)socketFilePath {
-    // the appGroupIdentifier must match the value provided in the app's info.plist for the RTCAppGroupIdentifier key
-    NSString *appGroupIdentifier = @"group.org.jitsi.meet.appgroup";
-    NSURL *sharedContainer = [[NSFileManager defaultManager] containerURLForSecurityApplicationGroupIdentifier:appGroupIdentifier];
-    NSString *socketFilePath = [[sharedContainer URLByAppendingPathComponent:@"rtc_SSFD"] path];
-      
-    return socketFilePath;
-}
-
-- (void)setupConnection {
-  __weak __typeof(self) weakSelf = self;
-  self.clientConnection.didClose = ^(NSError *error) {
-    NSLog(@"client connection did close: %@", error);
-    if (error) {
-      [weakSelf finishBroadcastWithError:error];
-    }
-    else {
-      NSInteger JMScreenSharingStopped = 10001;
-      NSError *customError = [NSError errorWithDomain:RPRecordingErrorDomain
-                                                 code:JMScreenSharingStopped
-                                             userInfo:@{NSLocalizedDescriptionKey: @"Screen sharing stopped"}];
-      [weakSelf finishBroadcastWithError:customError];
-    }
-  };
-}
-
-- (void)openConnection {
-  dispatch_queue_t queue = dispatch_queue_create("org.jitsi.meet.broadcast.connectTimer", 0);
-  dispatch_source_t timer = dispatch_source_create(DISPATCH_SOURCE_TYPE_TIMER, 0, 0, queue);
-  dispatch_source_set_timer(timer, dispatch_walltime(NULL, 0), 0.1 * NSEC_PER_SEC, 0.1 * NSEC_PER_SEC);
-  
-  dispatch_source_set_event_handler(timer, ^{
-    BOOL success = [self.clientConnection open];
-    if (success) {
-      dispatch_source_cancel(timer);
-    }
-  });
-
-  dispatch_resume(timer);
-}
-
-@end

ios/app/broadcast-extension/SampleHandler.swift

@@ -0,0 +1,117 @@
+/*
+ * Copyright @ 2021-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import ReplayKit
+import JitsiMeetSDK
+
+private enum Constants {
+    // the App Group ID value that the app and the broadcast extension targets are setup with. It differs for each app.
+    static let appGroupIdentifier = "group.org.jitsi.meet.appgroup"
+}
+
+class SampleHandler: RPBroadcastSampleHandler {
+    
+    private var clientConnection: SocketConnection?
+    private var uploader: SampleUploader?
+    
+    private var frameCount: Int = 0
+    
+    var socketFilePath: String {
+      let sharedContainer = FileManager.default.containerURL(forSecurityApplicationGroupIdentifier: Constants.appGroupIdentifier)
+        
+        return sharedContainer?.appendingPathComponent("rtc_SSFD").path ?? ""
+    }
+    
+    override init() {
+      super.init()
+        if let connection = SocketConnection(filePath: socketFilePath) {
+          clientConnection = connection
+          setupConnection()
+          
+          uploader = SampleUploader(connection: connection)
+        }
+    }
+
+    override func broadcastStarted(withSetupInfo setupInfo: [String: NSObject]?) {
+        // User has requested to start the broadcast. Setup info from the UI extension can be supplied but optional.
+        print("broadcast started")
+        
+        frameCount = 0
+        
+        DarwinNotificationCenter.shared.postNotification(.broadcastStarted)
+        openConnection()
+    }
+    
+    override func broadcastPaused() {
+        // User has requested to pause the broadcast. Samples will stop being delivered.
+    }
+    
+    override func broadcastResumed() {
+        // User has requested to resume the broadcast. Samples delivery will resume.
+    }
+    
+    override func broadcastFinished() {
+        // User has requested to finish the broadcast.
+        DarwinNotificationCenter.shared.postNotification(.broadcastStopped)
+        clientConnection?.close()
+    }
+    
+    override func processSampleBuffer(_ sampleBuffer: CMSampleBuffer, with sampleBufferType: RPSampleBufferType) {
+        switch sampleBufferType {
+        case RPSampleBufferType.video:
+            // very simple mechanism for adjusting frame rate by using every third frame
+            frameCount += 1
+            if frameCount % 3 == 0 {
+                uploader?.send(sample: sampleBuffer)
+            }
+        default:
+            break
+        }
+    }
+}
+
+private extension SampleHandler {
+  
+    func setupConnection() {
+        clientConnection?.didClose = { [weak self] error in
+            print("client connection did close \(String(describing: error))")
+          
+            if let error = error {
+                self?.finishBroadcastWithError(error)
+            } else {
+                // the displayed failure message is more user friendly when using NSError instead of Error
+                let JMScreenSharingStopped = 10001
+                let customError = NSError(domain: RPRecordingErrorDomain, code: JMScreenSharingStopped, userInfo: [NSLocalizedDescriptionKey: "Screen sharing stopped"])
+                self?.finishBroadcastWithError(customError)
+            }
+        }
+    }
+    
+    func openConnection() {
+        let queue = DispatchQueue(label: "broadcast.connectTimer")
+        let timer = DispatchSource.makeTimerSource(queue: queue)
+        timer.schedule(deadline: .now(), repeating: .milliseconds(100), leeway: .milliseconds(500))
+        timer.setEventHandler { [weak self] in
+            guard self?.clientConnection?.open() == true else {
+                return
+            }
+            
+            timer.cancel()
+        }
+        
+        timer.resume()
+    }
+}

ios/app/broadcast-extension/SampleUploader.h

@@ -1,33 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import <Foundation/Foundation.h>
-#import <ReplayKit/ReplayKit.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@class SocketConnection;
-
-@interface SampleUploader : NSObject
-
-@property (nonatomic, assign, readonly) BOOL isReady;
-
-- (instancetype)initWithConnection:(SocketConnection *)connection;
-- (void)sendSample:(CMSampleBufferRef)sampleBuffer;
-
-@end
-
-NS_ASSUME_NONNULL_END

ios/app/broadcast-extension/SampleUploader.m

@@ -1,155 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import <MessageUI/MessageUI.h>
-#import <ReplayKit/ReplayKit.h>
-
-#import "SampleUploader.h"
-#import "SocketConnection.h"
-
-static const NSInteger kBufferMaxLenght = 10 * 1024;
-
-@interface SampleUploader ()
-
-@property (nonatomic, assign) BOOL isReady;
-
-@property (nonatomic, strong) dispatch_queue_t serialQueue;
-@property (nonatomic, strong) SocketConnection *connection;
-@property (nonatomic, strong) CIContext *imageContext;
-
-@property (nonatomic, strong) NSData *dataToSend;
-@property (nonatomic, assign) NSUInteger byteIndex;
-
-@end
-
-@implementation SampleUploader
-
-- (instancetype)initWithConnection:(SocketConnection *)connection {
-  self = [super init];
-  if (self) {
-    self.serialQueue = dispatch_queue_create("org.jitsi.meet.broadcast.sampleUploader", DISPATCH_QUEUE_SERIAL);
-    
-    self.connection = connection;
-    [self setupConnection];
-    
-    self.imageContext = [[CIContext alloc] initWithOptions:nil];
-    self.isReady = false;
-  }
-  
-  return self;
-}
-
-- (void)sendSample:(CMSampleBufferRef)sampleBuffer {
-  self.isReady = false;
-  
-  self.dataToSend = [self prepareSample:sampleBuffer];
-  self.byteIndex = 0;
-  
-  dispatch_async(self.serialQueue, ^{
-    [self sendData];
-  });
-}
-
-// MARK: Private Methods
-
-- (void)setupConnection {
-  __weak __typeof(self) weakSelf = self;
-  self.connection.didOpen = ^{
-    weakSelf.isReady = true;
-  };
-  self.connection.streamHasSpaceAvailable = ^{
-    dispatch_async(weakSelf.serialQueue, ^{
-      weakSelf.isReady = ![weakSelf sendData];
-    });
-  };
-}
-
-/**
- This function downscales and converts to jpeg the provided sample buffer, then wraps the resulted image data into a CFHTTPMessageRef. Returns the serialized CFHTTPMessageRef.
- */
-- (NSData *)prepareSample:(CMSampleBufferRef)sampleBuffer {
-  CVImageBufferRef imageBuffer = CMSampleBufferGetImageBuffer(sampleBuffer);
-    
-  CVPixelBufferLockBaseAddress(imageBuffer, kCVPixelBufferLock_ReadOnly);
-  
-  CGFloat scaleFactor = 2;
-  size_t width = CVPixelBufferGetWidth(imageBuffer)/scaleFactor;
-  size_t height = CVPixelBufferGetHeight(imageBuffer)/scaleFactor;
-    
-  CGAffineTransform scaleTransform = CGAffineTransformMakeScale(1/scaleFactor, 1/scaleFactor);
-  NSData *bufferData = [self jpegDataFromPixelBuffer:imageBuffer withScaling:scaleTransform];
-  
-  CVPixelBufferUnlockBaseAddress(imageBuffer, kCVPixelBufferLock_ReadOnly);
-  
-  if (bufferData) {
-    CFHTTPMessageRef httpResponse = CFHTTPMessageCreateResponse(kCFAllocatorDefault, 200, NULL, kCFHTTPVersion1_1);
-    CFHTTPMessageSetHeaderFieldValue(httpResponse, (__bridge CFStringRef)@"Content-Length", (__bridge CFStringRef)[NSString stringWithFormat:@"%ld", bufferData.length]);
-    CFHTTPMessageSetHeaderFieldValue(httpResponse, (__bridge CFStringRef)@"Buffer-Width", (__bridge CFStringRef)[NSString stringWithFormat:@"%ld", width]);
-    CFHTTPMessageSetHeaderFieldValue(httpResponse, (__bridge CFStringRef)@"Buffer-Height", (__bridge CFStringRef)[NSString stringWithFormat:@"%ld", height]);
-
-    CFHTTPMessageSetBody(httpResponse, (__bridge CFDataRef)bufferData);
-
-    CFDataRef serializedMessage = CFHTTPMessageCopySerializedMessage(httpResponse);
-    CFRelease(httpResponse);
-    
-    return CFBridgingRelease(serializedMessage);
-  }
-  
-  return nil;
-}
-
-- (BOOL)sendData {
-  if (!self.dataToSend) {
-    NSLog(@"no data to send");
-    return false;
-  }
-
-  NSUInteger bytesLeft = self.dataToSend.length - self.byteIndex;
-  
-  NSInteger length = bytesLeft > kBufferMaxLenght ? kBufferMaxLenght : bytesLeft;
-  uint8_t buffer[length];
-  [self.dataToSend getBytes:&buffer range:NSMakeRange(self.byteIndex, length)];
-
-  length = [self.connection writeBufferToStream:buffer maxLength:length];
-  if (length > 0) {
-    self.byteIndex += length;
-    bytesLeft -= length;
-
-    if (bytesLeft == 0) {
-      NSLog(@"video sample processed successfully");
-      self.dataToSend = nil;
-      self.byteIndex = 0;
-    }
-  }
-  else {
-    NSLog(@"writeBufferToStream failure");
-  }
-  
-  return true;
-}
-
-- (NSData *)jpegDataFromPixelBuffer:(CVPixelBufferRef)pixelBuffer withScaling:(CGAffineTransform)scaleTransform {
-  CIImage *image = [[CIImage alloc] initWithCVPixelBuffer:pixelBuffer];
-  image = [image imageByApplyingTransform:scaleTransform];
-  
-  NSDictionary *options = @{(NSString *)kCGImageDestinationLossyCompressionQuality: [NSNumber numberWithFloat:1.0]};
-  NSData *imageData = [self.imageContext JPEGRepresentationOfImage:image
-                                                        colorSpace:image.colorSpace
-                                                           options:options];
-  return imageData;
-}
-
-@end

ios/app/broadcast-extension/SampleUploader.swift

@@ -0,0 +1,154 @@
+/*
+ * Copyright @ 2021-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Foundation
+import ReplayKit
+
+private enum Constants {
+    static let bufferMaxLength = 10240
+}
+
+class SampleUploader {
+    
+    private static var imageContext = CIContext(options: nil)
+    
+    @Atomic private var isReady: Bool = false
+    private var connection: SocketConnection
+  
+    private var dataToSend: Data?
+    private var byteIndex = 0
+  
+    private let serialQueue: DispatchQueue
+    
+    init(connection: SocketConnection) {
+        self.connection = connection
+        self.serialQueue = DispatchQueue(label: "org.jitsi.meet.broadcast.sampleUploader")
+      
+        setupConnection()
+    }
+  
+    @discardableResult func send(sample buffer: CMSampleBuffer) -> Bool {
+        guard isReady == true else {
+            return false
+        }
+        
+        isReady = false
+
+        dataToSend = prepare(sample: buffer)
+        byteIndex = 0
+
+        serialQueue.async { [weak self] in
+            self?.sendDataChunk()
+        }
+        
+        return true
+    }
+}
+
+private extension SampleUploader {
+    
+    func setupConnection() {
+        connection.didOpen = { [weak self] in
+            self?.isReady = true
+        }
+        connection.streamHasSpaceAvailable = { [weak self] in
+            self?.serialQueue.async {
+                self?.isReady = !(self?.sendDataChunk() ?? true)
+            }
+        }
+    }
+    
+    @discardableResult func sendDataChunk() -> Bool {
+        guard let dataToSend = dataToSend else {
+            return false
+        }
+      
+        var bytesLeft = dataToSend.count - byteIndex
+        var length = bytesLeft > Constants.bufferMaxLength ? Constants.bufferMaxLength : bytesLeft
+
+        length = dataToSend[byteIndex..<(byteIndex + length)].withUnsafeBytes {
+            guard let ptr = $0.bindMemory(to: UInt8.self).baseAddress else {
+                return 0
+            }
+          
+            return connection.writeToStream(buffer: ptr, maxLength: length)
+        }
+
+        if length > 0 {
+            byteIndex += length
+            bytesLeft -= length
+
+            if bytesLeft == 0 {
+                self.dataToSend = nil
+                byteIndex = 0
+            }
+        } else {
+            print("writeBufferToStream failure")
+        }
+      
+        return true
+    }
+    
+    func prepare(sample buffer: CMSampleBuffer) -> Data? {
+        guard let imageBuffer = CMSampleBufferGetImageBuffer(buffer) else {
+            print("image buffer not available")
+            return nil
+        }
+        
+        CVPixelBufferLockBaseAddress(imageBuffer, .readOnly)
+        
+        let scaleFactor = 2.0
+        let width = CVPixelBufferGetWidth(imageBuffer)/Int(scaleFactor)
+        let height = CVPixelBufferGetHeight(imageBuffer)/Int(scaleFactor)
+        let orientation = CMGetAttachment(buffer, key: RPVideoSampleOrientationKey as CFString, attachmentModeOut: nil)?.uintValue ?? 0
+                                    
+        let scaleTransform = CGAffineTransform(scaleX: CGFloat(1.0/scaleFactor), y: CGFloat(1.0/scaleFactor))
+        let bufferData = self.jpegData(from: imageBuffer, scale: scaleTransform)
+        
+        CVPixelBufferUnlockBaseAddress(imageBuffer, .readOnly)
+        
+        guard let messageData = bufferData else {
+            print("corrupted image buffer")
+            return nil
+        }
+              
+        let httpResponse = CFHTTPMessageCreateResponse(nil, 200, nil, kCFHTTPVersion1_1).takeRetainedValue()
+        CFHTTPMessageSetHeaderFieldValue(httpResponse, "Content-Length" as CFString, String(messageData.count) as CFString)
+        CFHTTPMessageSetHeaderFieldValue(httpResponse, "Buffer-Width" as CFString, String(width) as CFString)
+        CFHTTPMessageSetHeaderFieldValue(httpResponse, "Buffer-Height" as CFString, String(height) as CFString)
+        CFHTTPMessageSetHeaderFieldValue(httpResponse, "Buffer-Orientation" as CFString, String(orientation) as CFString)
+        
+        CFHTTPMessageSetBody(httpResponse, messageData as CFData)
+        
+        let serializedMessage = CFHTTPMessageCopySerializedMessage(httpResponse)?.takeRetainedValue() as Data?
+      
+        return serializedMessage
+    }
+    
+    func jpegData(from buffer: CVPixelBuffer, scale scaleTransform: CGAffineTransform) -> Data? {
+        var image = CIImage(cvPixelBuffer: buffer)
+        image = image.transformed(by: scaleTransform)
+        
+        guard let colorSpace = image.colorSpace else {
+            return nil
+        }
+      
+        let options: [CIImageRepresentationOption: Float] = [kCGImageDestinationLossyCompressionQuality as CIImageRepresentationOption: 1.0]
+        let imageData = SampleUploader.imageContext.jpegRepresentation(of: image, colorSpace: colorSpace, options: options)
+      
+        return imageData
+    }
+}

ios/app/broadcast-extension/SocketConnection.h

@@ -1,34 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#import <Foundation/Foundation.h>
-
-NS_ASSUME_NONNULL_BEGIN
-
-@interface SocketConnection : NSObject
-
-@property (nonatomic, copy, nullable) void (^didOpen)(void);
-@property (nonatomic, copy, nullable) void (^didClose)(NSError*);
-@property (nonatomic, copy, nullable) void (^streamHasSpaceAvailable)(void);
-
-- (instancetype)initWithFilePath:(nonnull NSString *)filePath;
-- (BOOL)open;
-- (void)close;
-- (NSInteger)writeBufferToStream:(const uint8_t*)buffer maxLength:(NSInteger)length;
-
-@end
-
-NS_ASSUME_NONNULL_END

ios/app/broadcast-extension/SocketConnection.m

@@ -1,189 +0,0 @@
-/*
- * Copyright @ 2021-present 8x8, Inc.
- *
- * Licensed under the Apache License, Version 2.0 (the "License");
- * you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- *     http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- */
-
-#include <sys/socket.h>
-#include <sys/un.h>
-
-#import "SocketConnection.h"
-
-@interface SocketConnection () <NSStreamDelegate>
-
-@property (nonatomic, copy) NSString *filePath;
-
-@property (nonatomic, strong) NSInputStream *inputStream;
-@property (nonatomic, strong) NSOutputStream *outputStream;
-
-@property (nonatomic, strong) NSThread *networkThread;
-
-@end
-
-@implementation SocketConnection {
-  int _socket;
-  struct sockaddr_un _socketAddr;
-}
-
-- (instancetype)initWithFilePath:(NSString *)path {
-  self = [super init];
-  if (self) {
-    self.filePath = path;
-    
-    [self setupSocketWithFilePath:path];
-    [self setupNetworkThread];
-  }
-  
-  return self;
-}
-
-- (BOOL)open {
-  NSLog(@"Open socket connection");
-  
-  if (![[NSFileManager defaultManager] fileExistsAtPath:self.filePath]) {
-      NSLog(@"failure: socket file missing");
-      return false;
-  }
-
-  int status = connect(_socket, (struct sockaddr *)&_socketAddr, sizeof(_socketAddr));
-  if (status < 0) {
-      NSLog(@"failure: socket connect (%d)", status);
-      return false;
-  }
-  
-  [self.networkThread start];
-
-  CFReadStreamRef readStream;
-  CFWriteStreamRef writeStream;
-
-  CFStreamCreatePairWithSocket(kCFAllocatorDefault, _socket, &readStream, &writeStream);
-
-  self.inputStream = (__bridge_transfer NSInputStream *)readStream;
-  self.inputStream.delegate = self;
-  [self.inputStream setProperty:@"kCFBooleanTrue" forKey:@"kCFStreamPropertyShouldCloseNativeSocket"];
-
-  self.outputStream = (__bridge_transfer NSOutputStream *)writeStream;
-  self.outputStream.delegate = self;
-  [self.outputStream setProperty:@"kCFBooleanTrue" forKey:@"kCFStreamPropertyShouldCloseNativeSocket"];
-  
-  [self performSelector:@selector(scheduleStreams) onThread:self.networkThread withObject:nil waitUntilDone:true];
-
-  [self.inputStream open];
-  [self.outputStream open];
-
-  NSLog(@"read stream status: %ld", CFReadStreamGetStatus(readStream));
-  NSLog(@"write stream status: %ld", CFWriteStreamGetStatus(writeStream));
-  
-  return true;
-}
-
-- (void)close {
-  [self performSelector:@selector(unscheduleStreams) onThread:self.networkThread withObject:nil waitUntilDone:true];
-
-  self.inputStream.delegate = nil;
-  self.outputStream.delegate = nil;
-  
-  [self.inputStream close];
-  [self.outputStream close];
-
-  [self.networkThread cancel];
-}
-
-- (NSInteger)writeBufferToStream:(const uint8_t*)buffer maxLength:(NSInteger)length {
-  return [self.outputStream write:buffer maxLength:length];
-}
-
-// MARK: Private Methods
-
-- (BOOL)isOpen {
-  return self.inputStream.streamStatus == NSStreamStatusOpen && self.outputStream.streamStatus == NSStreamStatusOpen;
-}
-
-- (void)setupSocketWithFilePath:(NSString*)path {
-  _socket = socket(AF_UNIX, SOCK_STREAM, 0);
-  
-  memset(&_socketAddr, 0, sizeof(_socketAddr));
-  _socketAddr.sun_family = AF_UNIX;
-  strncpy(_socketAddr.sun_path, path.UTF8String, sizeof(_socketAddr.sun_path) - 1);
-}
-
-- (void)setupNetworkThread {
-  self.networkThread = [[NSThread alloc] initWithBlock:^{
-    do {
-      @autoreleasepool {
-        [[NSRunLoop currentRunLoop] run];
-      }
-    } while (![NSThread currentThread].isCancelled);
-  }];
-  self.networkThread.qualityOfService = NSQualityOfServiceUserInitiated;
-}
-
-- (void)scheduleStreams {
-  [self.inputStream scheduleInRunLoop:NSRunLoop.currentRunLoop forMode:NSRunLoopCommonModes];
-  [self.outputStream scheduleInRunLoop:NSRunLoop.currentRunLoop forMode:NSRunLoopCommonModes];
-}
-
-- (void)unscheduleStreams {
-  [self.inputStream removeFromRunLoop:NSRunLoop.currentRunLoop forMode:NSRunLoopCommonModes];
-  [self.outputStream removeFromRunLoop:NSRunLoop.currentRunLoop forMode:NSRunLoopCommonModes];
-}
-
-- (void)notifyDidClose:(NSError *)error {
-  if (self.didClose) {
-    self.didClose(error);
-  }
-}
-
-@end
-
-#pragma mark - NSStreamDelegate
-
-@implementation SocketConnection (NSStreamDelegate)
-
-- (void)stream:(NSStream *)aStream handleEvent:(NSStreamEvent)eventCode {
-  switch (eventCode) {
-    case NSStreamEventOpenCompleted:
-      NSLog(@"client stream open completed");
-      if (aStream == self.outputStream && self.didOpen) {
-        self.didOpen();
-      }
-      break;
-    case NSStreamEventHasBytesAvailable:
-      if (aStream == self.inputStream) {
-        uint8_t buffer;
-        NSInteger numberOfBytesRead = [(NSInputStream *)aStream read:&buffer maxLength:sizeof(buffer)];
-        if (!numberOfBytesRead && aStream.streamStatus == NSStreamStatusAtEnd) {
-          NSLog(@"server socket closed");
-          [self close];
-          [self notifyDidClose:nil];
-        }
-      }
-      break;
-    case NSStreamEventHasSpaceAvailable:
-      if (aStream == self.outputStream && self.streamHasSpaceAvailable) {
-        NSLog(@"client stream has space available");
-        self.streamHasSpaceAvailable();
-      }
-      break;
-    case NSStreamEventErrorOccurred:
-      NSLog(@"client stream error occurred: %@", aStream.streamError);
-      [self close];
-      [self notifyDidClose:aStream.streamError];
-      break;
-      
-    default:
-      break;
-  }
-}
-
-@end

ios/app/broadcast-extension/SocketConnection.swift

@@ -0,0 +1,205 @@
+/*
+ * Copyright @ 2021-present 8x8, Inc.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import Foundation
+
+class SocketConnection: NSObject {
+    var didOpen: (() -> Void)?
+    var didClose: ((Error?) -> Void)?
+    var streamHasSpaceAvailable: (() -> Void)?
+
+    private let filePath: String
+    private var socketHandle: Int32 = -1
+    private var address: sockaddr_un?
+
+    private var inputStream: InputStream?
+    private var outputStream: OutputStream?
+    
+    private var networkQueue: DispatchQueue?
+    private var shouldKeepRunning = false
+
+    init?(filePath path: String) {
+        filePath = path
+        socketHandle = Darwin.socket(AF_UNIX, SOCK_STREAM, 0)
+
+        guard socketHandle != -1 else {
+            print("failure: create socket")
+            return nil
+        }
+    }
+
+    func open() -> Bool {
+        print("open socket connection")
+
+        guard FileManager.default.fileExists(atPath: filePath) else {
+            print("failure: socket file missing")
+            return false
+        }
+      
+        guard setupAddress() == true else {
+            return false
+        }
+        
+        guard connectSocket() == true else {
+            return false
+        }
+
+        setupStreams()
+        
+        inputStream?.open()
+        outputStream?.open()
+
+        return true
+    }
+
+    func close() {
+        unscheduleStreams()
+
+        inputStream?.delegate = nil
+        outputStream?.delegate = nil
+
+        inputStream?.close()
+        outputStream?.close()
+        
+        inputStream = nil
+        outputStream = nil
+    }
+
+    func writeToStream(buffer: UnsafePointer<UInt8>, maxLength length: Int) -> Int {
+        return outputStream?.write(buffer, maxLength: length) ?? 0
+    }
+}
+
+extension SocketConnection: StreamDelegate {
+
+    func stream(_ aStream: Stream, handle eventCode: Stream.Event) {
+        switch eventCode {
+        case .openCompleted:
+            print("client stream open completed")
+            if aStream == outputStream {
+                didOpen?()
+            }
+        case .hasBytesAvailable:
+            if aStream == inputStream {
+                var buffer: UInt8 = 0
+                let numberOfBytesRead = inputStream?.read(&buffer, maxLength: 1)
+                if numberOfBytesRead == 0 && aStream.streamStatus == .atEnd {
+                    print("server socket closed")
+                    close()
+                    notifyDidClose(error: nil)
+                }
+            }
+        case .hasSpaceAvailable:
+            if aStream == outputStream {
+                streamHasSpaceAvailable?()
+            }
+        case .errorOccurred:
+            print("client stream error occured: \(String(describing: aStream.streamError))")
+            close()
+            notifyDidClose(error: aStream.streamError)
+
+        default:
+            break
+        }
+    }
+}
+
+private extension SocketConnection {
+  
+    func setupAddress() -> Bool {
+        var addr = sockaddr_un()
+        guard filePath.count < MemoryLayout.size(ofValue: addr.sun_path) else {
+            print("failure: fd path is too long")
+            return false
+        }
+
+        _ = withUnsafeMutablePointer(to: &addr.sun_path.0) { ptr in
+            filePath.withCString {
+                strncpy(ptr, $0, filePath.count)
+            }
+        }
+        
+        address = addr
+        return true
+    }
+
+    func connectSocket() -> Bool {
+        guard var addr = address else {
+            return false
+        }
+        
+        let status = withUnsafePointer(to: &addr) { ptr in
+            ptr.withMemoryRebound(to: sockaddr.self, capacity: 1) {
+                Darwin.connect(socketHandle, $0, socklen_t(MemoryLayout<sockaddr_un>.size))
+            }
+        }
+
+        guard status == noErr else {
+            print("failure: \(status)")
+            return false
+        }
+        
+        return true
+    }
+
+    func setupStreams() {
+        var readStream: Unmanaged<CFReadStream>?
+        var writeStream: Unmanaged<CFWriteStream>?
+
+        CFStreamCreatePairWithSocket(kCFAllocatorDefault, socketHandle, &readStream, &writeStream)
+
+        inputStream = readStream?.takeRetainedValue()
+        inputStream?.delegate = self
+        inputStream?.setProperty(kCFBooleanTrue, forKey: Stream.PropertyKey(kCFStreamPropertyShouldCloseNativeSocket as String))
+
+        outputStream = writeStream?.takeRetainedValue()
+        outputStream?.delegate = self
+        outputStream?.setProperty(kCFBooleanTrue, forKey: Stream.PropertyKey(kCFStreamPropertyShouldCloseNativeSocket as String))
+
+        scheduleStreams()
+    }
+  
+    func scheduleStreams() {
+        shouldKeepRunning = true
+        
+        networkQueue = DispatchQueue.global(qos: .userInitiated)
+        networkQueue?.async { [weak self] in
+            self?.inputStream?.schedule(in: .current, forMode: .common)
+            self?.outputStream?.schedule(in: .current, forMode: .common)
+            
+            var isRunning = false
+                        
+            repeat {
+                isRunning = self?.shouldKeepRunning ?? false && RunLoop.current.run(mode: .default, before: .distantFuture)
+            } while (isRunning)
+        }
+    }
+    
+    func unscheduleStreams() {
+        networkQueue?.sync { [weak self] in
+            self?.inputStream?.remove(from: .current, forMode: .common)
+            self?.outputStream?.remove(from: .current, forMode: .common)
+        }
+        
+        shouldKeepRunning = false
+    }
+    
+    func notifyDidClose(error: Error?) {
+        if didClose != nil {
+            didClose?(error)
+        }
+    }
+}

ios/app/src/Info.plist

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

ios/app/watchos/app/Info.plist

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

ios/app/watchos/extension/Info.plist

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

ios/fastlane/Fastfile

@@ -9,6 +9,15 @@ platform :ios do
     # Make sure we are on a clean tree
     ensure_git_status_clean
 
+    # Connect to Apple Store Connect
+    app_store_connect_api_key(
+      key_id: ENV["ASC_KEY_ID"],
+      issuer_id: ENV["ASC_ISSUER_ID"],
+      key_content: ENV["ASC_KEY_CONTENT"],
+      duration: 1200,
+      in_house: false
+    )
+
     # Set the app identifier
     update_app_identifier(
       xcodeproj: "app/app.xcodeproj",
@@ -94,12 +103,24 @@ platform :ios do
       uses_non_exempt_encryption: false
     )
 
-    # Upload dSYMs to Crashlytics
-    download_dsyms
-    upload_symbols_to_crashlytics
-
     # Cleanup
     clean_build_artifacts
     reset_git_repo(skip_clean: true)
   end
+
+  lane :refresh_dsyms do
+    # Connect to Apple Store Connect
+    app_store_connect_api_key(
+      key_id: ENV["ASC_KEY_ID"],
+      issuer_id: ENV["ASC_ISSUER_ID"],
+      key_content: ENV["ASC_KEY_CONTENT"],
+      duration: 1200,
+      in_house: false
+    )
+
+    # Upload dSYMs to Crashlytics
+    download_dsyms(min_version: ENV["DSYMS_MIN_VERSION"])  # Download dSYM files from iTC
+    upload_symbols_to_crashlytics                          # Upload them to Crashlytics
+    clean_build_artifacts                                  # Delete the local dSYM files
+  end
 end

ios/sdk/sdk.xcodeproj/project.pbxproj

@@ -198,7 +198,6 @@
 				0BCA495C1EC4B6C600B793EE /* AudioMode.m */,
 				C69EFA02209A0EFD0027712B /* callkit */,
 				A4A934E7212F3AB8001E9388 /* dropbox */,
-				0BA13D301EE83FF8007BEF7F /* ExternalAPI.m */,
 				0BD906E91EC0C00300C8C18E /* Info.plist */,
 				DE438CD82350934700DD541D /* JavaScriptSandbox.m */,
 				0BD906E81EC0C00300C8C18E /* JitsiMeet.h */,
@@ -235,6 +234,7 @@
 				C8AFD27D2462C613000293D2 /* InfoPlistUtil.h */,
 				C8AFD27E2462C613000293D2 /* InfoPlistUtil.m */,
 				C81E9AB825AC5AD800B134D9 /* ExternalAPI.h */,
+				0BA13D301EE83FF8007BEF7F /* ExternalAPI.m */,
 				4E51B76225E5345E0038575A /* ScheenshareEventEmiter.h */,
 				4E51B76325E5345E0038575A /* ScheenshareEventEmiter.m */,
 			);

ios/sdk/src/ExternalAPI.h

@@ -21,7 +21,7 @@
 - (void)sendHangUp;
 - (void)sendSetAudioMuted:(BOOL)muted;
 - (void)sendEndpointTextMessage:(NSString*)message :(NSString*)to;
-- (void)toggleScreenShare;
+- (void)toggleScreenShare:(BOOL)enabled;
 - (void)retrieveParticipantsInfo:(void (^)(NSArray*))completion;
 - (void)openChat:(NSString*)to;
 - (void)closeChat;

ios/sdk/src/ExternalAPI.m

@@ -164,8 +164,11 @@ RCT_EXPORT_METHOD(sendEvent:(NSString *)name
     [self sendEventWithName:sendEndpointTextMessageAction body:data];
 }
 
-- (void)toggleScreenShare {
-    [self sendEventWithName:toggleScreenShareAction body:nil];
+- (void)toggleScreenShare:(BOOL)enabled {
+    NSMutableDictionary *data = [[NSMutableDictionary alloc] init];
+    data[@"enabled"] = [NSNumber numberWithBool:enabled];
+    
+    [self sendEventWithName:toggleScreenShareAction body:data];
 }
 
 - (void)retrieveParticipantsInfo:(void (^)(NSArray*))completionHandler {

ios/sdk/src/Info.plist

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

ios/sdk/src/JitsiMeetConferenceOptions.h

@@ -71,6 +71,16 @@
 - (void)setFeatureFlag:(NSString *_Nonnull)flag withBoolean:(BOOL)value;
 - (void)setFeatureFlag:(NSString *_Nonnull)flag withValue:(id _Nonnull)value;
 
+/**
+ * CallKit call handle, to be used when implementing incoming calls.
+ */
+@property (nonatomic, copy, nullable) NSString *callHandle;
+
+/**
+ * CallKit call UUID, to be used when implementing incoming calls.
+ */
+@property (nonatomic, copy, nullable) NSUUID *callUUID;
+
 @end
 
 @interface JitsiMeetConferenceOptions : NSObject
@@ -92,6 +102,9 @@
 
 @property (nonatomic, nullable) JitsiMeetUserInfo *userInfo;
 
+@property (nonatomic, copy, nullable, readonly) NSString *callHandle;
+@property (nonatomic, copy, nullable, readonly) NSUUID *callUUID;
+
 + (instancetype _Nonnull)fromBuilder:(void (^_Nonnull)(JitsiMeetConferenceOptionsBuilder *_Nonnull))initBlock;
 - (instancetype _Nonnull)init NS_UNAVAILABLE;
 

ios/sdk/src/JitsiMeetConferenceOptions.m

@@ -52,6 +52,9 @@ static NSString *const WelcomePageEnabledFeatureFlag = @"welcomepage.enabled";
         _videoMuted = nil;
 
         _userInfo = nil;
+
+        _callHandle = nil;
+        _callUUID = nil;
     }
     
     return self;
@@ -168,6 +171,9 @@ static NSString *const WelcomePageEnabledFeatureFlag = @"welcomepage.enabled";
         _featureFlags = [NSDictionary dictionaryWithDictionary:builder.featureFlags];
 
         _userInfo = builder.userInfo;
+
+        _callHandle = builder.callHandle;
+        _callUUID = builder.callUUID;
     }
 
     return self;
@@ -205,6 +211,12 @@ static NSString *const WelcomePageEnabledFeatureFlag = @"welcomepage.enabled";
     if (_subject != nil) {
         config[@"subject"] = self.subject;
     }
+    if (_callHandle != nil) {
+        config[@"callHandle"] = self.callHandle;
+    }
+    if (_callUUID != nil) {
+        config[@"callUUID"] = [self.callUUID UUIDString];
+    }
 
     NSMutableDictionary *urlProps = [[NSMutableDictionary alloc] init];
 

ios/sdk/src/JitsiMeetView.h

@@ -39,7 +39,7 @@
 - (void)hangUp;
 - (void)setAudioMuted:(BOOL)muted;
 - (void)sendEndpointTextMessage:(NSString * _Nonnull)message :(NSString * _Nullable)to;
-- (void)toggleScreenShare;
+- (void)toggleScreenShare:(BOOL)enabled;
 - (void)retrieveParticipantsInfo:(void (^ _Nonnull)(NSArray * _Nullable))completionHandler;
 - (void)openChat:(NSString * _Nullable)to;
 - (void)closeChat;

ios/sdk/src/JitsiMeetView.m

@@ -130,9 +130,9 @@ static void initializeViewsMap() {
     [externalAPI sendEndpointTextMessage:message :to];
 }
 
-- (void)toggleScreenShare {
+- (void)toggleScreenShare:(BOOL)enabled {
     ExternalAPI *externalAPI = [[JitsiMeet sharedInstance] getExternalAPI];
-    [externalAPI toggleScreenShare];
+    [externalAPI toggleScreenShare:enabled];
 }
 
 - (void)retrieveParticipantsInfo:(void (^ _Nonnull)(NSArray * _Nullable))completionHandler {