fix(local-recording) Fixes (#11834)

Allow service change when only Dropbox and Local recording are enabled
Add space between REC indicator and meeting title
Hide Recording button if the feature is enabled but not supported
Don't play Stop recording sound on self recording

css/_subject.scss

@@ -12,6 +12,7 @@
     &#autoHide.with-always-on {
         overflow: hidden;
         animation: hideSubject forwards .6s ease-out;
+        margin-left: 4px;
 
         & > .subject-info-container {
             justify-content: flex-start;

react/features/recording/components/Recording/AbstractStartRecordingDialog.js

@@ -17,6 +17,7 @@ import { NOTIFICATION_TIMEOUT_TYPE, showErrorNotification } from '../../../notif
 import { toggleRequestingSubtitles } from '../../../subtitles';
 import { setSelectedRecordingService, startLocalVideoRecording } from '../../actions';
 import { RECORDING_TYPES } from '../../constants';
+import { supportsLocalRecording } from '../../functions';
 
 export type Props = {
 
@@ -52,6 +53,11 @@ export type Props = {
      */
     _isDropboxEnabled: boolean,
 
+    /**
+     * Whether or not local recording is enabled.
+     */
+    _localRecordingEnabled: boolean,
+
     /**
      * The dropbox refresh token.
      */
@@ -149,7 +155,11 @@ class AbstractStartRecordingDialog extends Component<Props, State> {
                 || !this._areIntegrationsEnabled()) {
             selectedRecordingService = RECORDING_TYPES.JITSI_REC_SERVICE;
         } else if (this._areIntegrationsEnabled()) {
-            selectedRecordingService = RECORDING_TYPES.DROPBOX;
+            if (props._localRecordingEnabled && supportsLocalRecording()) {
+                selectedRecordingService = RECORDING_TYPES.LOCAL;
+            } else {
+                selectedRecordingService = RECORDING_TYPES.DROPBOX;
+            }
         }
 
         this.state = {
@@ -406,7 +416,8 @@ export function mapStateToProps(state: Object) {
     const {
         transcription,
         recordingService,
-        dropbox = {}
+        dropbox = {},
+        localRecording
     } = state['features/base/config'];
 
     return {
@@ -416,6 +427,7 @@ export function mapStateToProps(state: Object) {
         _fileRecordingsServiceEnabled: recordingService?.enabled ?? false,
         _fileRecordingsServiceSharingEnabled: recordingService?.sharingEnabled ?? false,
         _isDropboxEnabled: isDropboxEnabled(state),
+        _localRecordingEnabled: !localRecording?.disable,
         _rToken: state['features/dropbox'].rToken,
         _tokenExpireDate: state['features/dropbox'].expireDate,
         _token: state['features/dropbox'].token

react/features/recording/components/Recording/StartRecordingDialogContent.js

@@ -10,9 +10,7 @@ import { ColorSchemeRegistry } from '../../../base/color-scheme';
 import {
     _abstractMapStateToProps
 } from '../../../base/dialog';
-import { isMobileBrowser } from '../../../base/environment/utils';
 import { translate } from '../../../base/i18n';
-import { browser } from '../../../base/lib-jitsi-meet';
 import {
     Button,
     Container,
@@ -26,7 +24,7 @@ import { StyleType } from '../../../base/styles';
 import { authorizeDropbox, updateDropboxToken } from '../../../dropbox';
 import { isVpaasMeeting } from '../../../jaas/functions';
 import { RECORDING_TYPES } from '../../constants';
-import { getRecordingDurationEstimation } from '../../functions';
+import { getRecordingDurationEstimation, supportsLocalRecording } from '../../functions';
 
 import {
     DROPBOX_LOGO,
@@ -163,9 +161,8 @@ class StartRecordingDialogContent extends Component<Props> {
      */
     constructor(props) {
         super(props);
-        const supportsLocalRecording = browser.isChromiumBased() && !browser.isElectron() && !isMobileBrowser();
 
-        this._localRecordingAvailable = props._localRecordingEnabled && supportsLocalRecording;
+        this._localRecordingAvailable = props._localRecordingEnabled && supportsLocalRecording();
 
         // Bind event handler so it is only bound once for every instance.
         this._onSignIn = this._onSignIn.bind(this);
@@ -452,7 +449,7 @@ class StartRecordingDialogContent extends Component<Props> {
             );
         }
 
-        if (this.props.fileRecordingsServiceEnabled) {
+        if (this.props.fileRecordingsServiceEnabled || this._localRecordingAvailable) {
             switchContent = (
                 <Switch
                     className = 'recording-switch'

react/features/recording/functions.js

@@ -1,6 +1,7 @@
 // @flow
 
-import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
+import { isMobileBrowser } from '../base/environment/utils';
+import { JitsiRecordingConstants, browser } from '../base/lib-jitsi-meet';
 import { getLocalParticipant, getRemoteParticipants, isLocalParticipantModerator } from '../base/participants';
 import { isInBreakoutRoom } from '../breakout-rooms/functions';
 import { isEnabled as isDropboxEnabled } from '../dropbox';
@@ -126,6 +127,16 @@ export function getSessionStatusToShow(state: Object, mode: string): ?string {
     return status;
 }
 
+/**
+ * Check if local recording is supported.
+ *
+ * @returns {boolean} - Wether local recording is supported or not.
+ */
+export function supportsLocalRecording() {
+    return browser.isChromiumBased() && !browser.isElectron() && !isMobileBrowser()
+        && navigator.product !== 'ReactNative';
+}
+
 /**
  * Returns the recording button props.
  *
@@ -155,11 +166,7 @@ export function getRecordButtonProps(state: Object): ?string {
         localRecording
     } = state['features/base/config'];
     const { features = {} } = getLocalParticipant(state);
-    let localRecordingEnabled = !localRecording?.disable;
-
-    if (navigator.product === 'ReactNative') {
-        localRecordingEnabled = false;
-    }
+    const localRecordingEnabled = !localRecording?.disable && supportsLocalRecording();
 
     const dropboxEnabled = isDropboxEnabled(state);
 

react/features/recording/middleware.js

@@ -176,12 +176,11 @@ MiddlewareRegistry.register(({ dispatch, getState }) => next => async action =>
 
     case STOP_LOCAL_RECORDING: {
         const { localRecording } = getState()['features/base/config'];
-        const { onlySelf } = action;
 
         if (LocalRecordingManager.isRecordingLocally()) {
             LocalRecordingManager.stopLocalRecording();
             dispatch(updateLocalRecordingStatus(false));
-            if (localRecording?.notifyAllParticipants && !onlySelf) {
+            if (localRecording?.notifyAllParticipants && !LocalRecordingManager.selfRecording) {
                 dispatch(playSound(RECORDING_OFF_SOUND_ID));
             }
         }