snapshot of https://github.com/jitsi/jitsi-meet.git @ fd1749dd28f4138aa80234fc7f311b19aaffa0e7 (2026-09-15)

react/features/recording/components/Recording/AbstractHighlightButton.ts

@@ -0,0 +1,126 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState, IStore } from '../../../app/types';
+import { openDialog } from '../../../base/dialog/actions';
+import { MEET_FEATURES } from '../../../base/jwt/constants';
+import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
+import { hideNotification, showNotification } from '../../../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../../../notifications/constants';
+import { iAmVisitor } from '../../../visitors/functions';
+import { highlightMeetingMoment } from '../../actions.any';
+import { PROMPT_RECORDING_NOTIFICATION_ID } from '../../constants';
+import {
+    getRecordButtonProps,
+    isCloudRecordingRunning,
+    isHighlightMeetingMomentDisabled
+} from '../../functions';
+
+import { RecordingTranscriptionDialog } from './index';
+
+export interface IProps extends WithTranslation {
+
+    /**
+     * Indicates whether or not the button is disabled.
+     */
+    _disabled: boolean;
+
+    /**
+     * Indicates whether or not a highlight request is in progress.
+     */
+    _isHighlightInProgress: boolean;
+
+    /**
+     * Indicates whether or not the button should be visible.
+     */
+    _visible: boolean;
+
+    /**
+     * Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+}
+
+/**
+ * Abstract class for the {@code AbstractHighlightButton} component.
+ */
+export default class AbstractHighlightButton<P extends IProps, S={}> extends Component<P, S> {
+    /**
+     * Initializes a new AbstractHighlightButton instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: P) {
+        super(props);
+
+        this._onClick = this._onClick.bind(this);
+    }
+
+    /**
+   * Handles clicking / pressing the button.
+   *
+   * @override
+   * @protected
+   * @returns {void}
+   */
+    _onClick() {
+        const { _disabled, _isHighlightInProgress, dispatch } = this.props;
+
+        if (_isHighlightInProgress) {
+            return;
+        }
+
+        if (_disabled) {
+            dispatch(showNotification({
+                descriptionKey: 'recording.highlightMomentDisabled',
+                titleKey: 'recording.highlightMoment',
+                uid: PROMPT_RECORDING_NOTIFICATION_ID,
+                customActionNameKey: [ 'localRecording.start' ],
+                customActionHandler: [ () => {
+                    dispatch(hideNotification(PROMPT_RECORDING_NOTIFICATION_ID));
+                    const dialogShown = dispatch(maybeShowPremiumFeatureDialog(MEET_FEATURES.RECORDING));
+
+                    if (!dialogShown) {
+                        dispatch(openDialog('RecordingTranscriptionDialog', RecordingTranscriptionDialog));
+                    }
+                } ],
+                appearance: NOTIFICATION_TYPE.NORMAL
+            }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+        } else {
+            dispatch(highlightMeetingMoment());
+        }
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code AbstractHighlightButton}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _disabled: boolean,
+ *     _isHighlightInProgress: boolean,
+ *     _visible: boolean
+ * }}
+ */
+export function _abstractMapStateToProps(state: IReduxState) {
+    const isRecordingRunning = isCloudRecordingRunning(state);
+    const isButtonDisabled = isHighlightMeetingMomentDisabled(state);
+    const { webhookProxyUrl } = state['features/base/config'];
+    const _iAmVisitor = iAmVisitor(state);
+    const {
+        disabled: isRecordButtonDisabled,
+        visible: isRecordButtonVisible
+    } = getRecordButtonProps(state);
+
+    const canStartRecording = isRecordButtonVisible && !isRecordButtonDisabled;
+    const _visible = Boolean((canStartRecording || isRecordingRunning) && Boolean(webhookProxyUrl) && !_iAmVisitor);
+
+    return {
+        _disabled: !isRecordingRunning,
+        _isHighlightInProgress: isButtonDisabled,
+        _visible
+    };
+}

react/features/recording/components/Recording/AbstractRecordButton.ts

@@ -0,0 +1,159 @@
+import { createToolbarEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
+import { IconRecord, IconStop } from '../../../base/icons/svg';
+import { MEET_FEATURES } from '../../../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../../../base/jwt/functions';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
+import { canAddTranscriber } from '../../../transcribing/functions';
+import { canStopRecording, getRecordButtonProps, supportsLocalRecording } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractRecordButton}.
+ */
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * True if the local participant can start/stop transcription.
+     */
+    _canTranscribe: boolean;
+
+    /**
+     * True if the button needs to be disabled.
+     */
+    _disabled: boolean;
+
+    /**
+     * True if there is a running active recording, false otherwise.
+     */
+    _isRecordingRunning: boolean;
+
+    /**
+     * The tooltip to display when hovering over the button.
+     */
+    _tooltip?: string;
+}
+
+/**
+ * An abstract implementation of a button for starting and stopping recording.
+ */
+export default class AbstractRecordButton<P extends IProps> extends AbstractButton<P> {
+    override accessibilityLabel = 'toolbar.recordAndTranscribe';
+    override toggledAccessibilityLabel = 'toolbar.recordAndTranscribe';
+    override icon = IconRecord;
+    override label = 'toolbar.recordAndTranscribe';
+    override toggledLabel = 'toolbar.recordAndTranscribe';
+    override toggledIcon = IconStop;
+
+    override _getLabel() {
+        return this.props._canTranscribe ? super._getLabel() : 'toolbar.record';
+    }
+
+    override _getAccessibilityLabel() {
+        return this.props._canTranscribe ? super._getAccessibilityLabel() : 'toolbar.record';
+    }
+
+    /**
+     * Returns the tooltip that should be displayed when the button is disabled.
+     *
+     * @private
+     * @returns {string}
+     */
+    override _getTooltip() {
+        return this.props._tooltip ?? '';
+    }
+
+    /**
+     * Helper function to be implemented by subclasses, which should be used
+     * to handle the start recoding button being clicked / pressed.
+     *
+     * @protected
+     * @returns {void}
+     */
+    _onHandleClick() {
+        // To be implemented by subclass.
+    }
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _handleClick() {
+        const { _isRecordingRunning, dispatch } = this.props;
+
+        sendAnalytics(createToolbarEvent(
+            'recording.button',
+            {
+                'is_recording': _isRecordingRunning,
+                type: JitsiRecordingConstants.mode.FILE
+            }));
+        const dialogShown = dispatch(maybeShowPremiumFeatureDialog(MEET_FEATURES.RECORDING));
+
+        if (!dialogShown) {
+            this._onHandleClick();
+        }
+    }
+
+    /**
+     * Helper function to be implemented by subclasses, which must return a
+     * boolean value indicating if this button is disabled or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    override _isDisabled() {
+        return this.props._disabled;
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    override _isToggled() {
+        return this.props._isRecordingRunning;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code RecordButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _disabled: boolean,
+ *     _isRecordingRunning: boolean,
+ *     _tooltip: string,
+ *     visible: boolean
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    const {
+        disabled: _disabled,
+        tooltip: _tooltip,
+        visible
+    } = getRecordButtonProps(state);
+    const { localRecording } = state['features/base/config'];
+    const localRecordingEnabled = !localRecording?.disable && supportsLocalRecording();
+    const isModerator = isLocalParticipantModerator(state);
+    const hasRecordingJwt = isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false);
+
+    return {
+        _canTranscribe: canAddTranscriber(state),
+        _disabled,
+        _isRecordingRunning: canStopRecording(state),
+        _tooltip,
+        visible: visible && (isModerator || localRecordingEnabled || hasRecordingJwt)
+    };
+}

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

@@ -0,0 +1,844 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createRecordingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState, IStore } from '../../../app/types';
+import { IJitsiConference } from '../../../base/conference/reducer';
+import { DEFAULT_LANGUAGE } from '../../../base/i18n/i18next';
+import { MEET_FEATURES } from '../../../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../../../base/jwt/functions';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
+import { updateDropboxToken } from '../../../dropbox/actions';
+import { getNewAccessToken, isEnabled as isDropboxEnabled } from '../../../dropbox/functions';
+import { getDropboxData } from '../../../dropbox/functions.any';
+import { showErrorNotification } from '../../../notifications/actions';
+import { setRequestingSubtitles } from '../../../subtitles/actions.any';
+import { canAddTranscriber, isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
+import {
+    setSelectedRecordingService,
+    setStartRecordingIntent,
+    setStopRecordingIntent,
+    startLocalVideoRecording,
+    stopLocalVideoRecording
+} from '../../actions.any';
+import { RECORDING_METADATA_ID, RECORDING_TYPES } from '../../constants';
+import {
+    getActiveSession,
+    hasRecordingOrTranscriptionFeature,
+    isRecordingRunning,
+    isRecordingSharingEnabled,
+    shouldAutoTranscribeOnRecord,
+    supportsLocalRecording
+} from '../../functions';
+import { ISessionData } from '../../reducer';
+
+/**
+ * The set of start/stop operations to apply on the running services. Each
+ * operation is applied only when its flag is true.
+ */
+interface IRecordingChanges {
+    startRecording?: boolean;
+    startTranscription?: boolean;
+    stopRecording?: boolean;
+    stopTranscription?: boolean;
+}
+
+export interface IProps extends WithTranslation {
+
+    /**
+     * The app key for the dropbox authentication.
+     */
+    _appKey: string;
+
+    /**
+     * Requests transcribing when recording is turned on.
+     */
+    _autoTranscribeOnRecord: boolean;
+
+    /**
+     * Whether the local participant can start/stop transcription.
+     */
+    _canTranscribe: boolean;
+
+    /**
+     * The {@code JitsiConference} for the current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * Whether subtitles should be displayed or not.
+     */
+    _displaySubtitles?: boolean;
+
+    /**
+     * Active FILE recording session, needed to stop recording.
+     */
+    _fileRecordingSession?: ISessionData;
+
+    /**
+     * Whether to show file recordings service, even if integrations
+     * are enabled.
+     */
+    _fileRecordingsServiceEnabled: boolean;
+
+    /**
+     * Whether to show the possibility to share file recording with other people (e.g. Meeting participants), based on
+     * the actual implementation on the backend.
+     */
+    _fileRecordingsServiceSharingEnabled: boolean;
+
+    /**
+     * If true the dropbox integration is enabled, otherwise - disabled.
+     */
+    _isDropboxEnabled: boolean;
+
+    /**
+     * Whether the local participant is a moderator.
+     */
+    _isModerator: boolean;
+
+    /**
+     * Whether a local recording is currently active.
+     */
+    _localRecording?: boolean;
+
+    /**
+     * Whether or not local recording is enabled.
+     */
+    _localRecordingEnabled: boolean;
+
+    /**
+     * The dropbox refresh token.
+     */
+    _rToken: string;
+
+    /**
+     * Whether file recording is currently running.
+     */
+    _recordingRunning?: boolean;
+
+    /**
+     * Whether or not the local participant is screensharing.
+     */
+    _screensharing: boolean;
+
+    /**
+     * Whether or not the screenshot capture feature is enabled.
+     */
+    _screenshotCaptureEnabled: boolean;
+
+    /**
+     * The selected language for subtitles.
+     */
+    _subtitlesLanguage: string | null;
+
+    /**
+     * The dropbox access token.
+     */
+    _token: string;
+
+    /**
+     * Access token's expiration date as UNIX timestamp.
+     */
+    _tokenExpireDate?: number;
+
+    /**
+     * Whether transcription is currently running.
+     */
+    _transcriptionRunning?: boolean;
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    navigation: any;
+
+    /**
+     * When false, the recording section is collapsed on open, putting the
+     * focus on the transcription section (e.g. subtitles/nudge flows).
+     */
+    recordAudioAndVideo?: boolean;
+}
+
+interface IState {
+
+    /**
+     * <tt>true</tt> if we have valid oauth token.
+     */
+    isTokenValid: boolean;
+
+    /**
+     * <tt>true</tt> if we are in process of validating the oauth token.
+     */
+    isValidating: boolean;
+
+    /**
+     * Whether the local recording should record just the local user streams.
+     */
+    localRecordingOnlySelf: boolean;
+
+    /**
+     * The language ("translation-languages:" prefixed) the transcription will
+     * be saved in.
+     */
+    selectedLanguage: string | null;
+
+    /**
+     * The currently selected recording service of type: RECORDING_TYPES.
+     */
+    selectedRecordingService: string;
+
+    /**
+     * True if the user requested the service to share the recording with others.
+     */
+    sharingEnabled: boolean;
+
+    /**
+     * Number of MiB of available space in user's Dropbox account.
+     */
+    spaceLeft?: number;
+
+    /**
+     * The display name of the user's Dropbox account.
+     */
+    userName?: string;
+}
+
+/**
+ * Component for the recording & transcription dialog. Exposes independent
+ * start/stop handlers for each service plus combined "both" handlers; each
+ * handler applies its changes immediately.
+ */
+class AbstractStartRecordingDialog extends Component<IProps, IState> {
+    /**
+     * Initializes a new {@code StartRecordingDialog} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handler so it is only bound once for every instance.
+        this._onSelectedRecordingServiceChanged
+            = this._onSelectedRecordingServiceChanged.bind(this);
+        this._onSharingSettingChanged = this._onSharingSettingChanged.bind(this);
+        this._toggleScreenshotCapture = this._toggleScreenshotCapture.bind(this);
+        this._onLocalRecordingSelfChange = this._onLocalRecordingSelfChange.bind(this);
+        this._onSubtitlesLanguageChanged = this._onSubtitlesLanguageChanged.bind(this);
+        this._onStartRecording = this._onStartRecording.bind(this);
+        this._onStopRecording = this._onStopRecording.bind(this);
+        this._onStartTranscription = this._onStartTranscription.bind(this);
+        this._onStopTranscription = this._onStopTranscription.bind(this);
+        this._onStartBoth = this._onStartBoth.bind(this);
+        this._onStopBoth = this._onStopBoth.bind(this);
+        this._onStartRecordingPress = this._onStartRecordingPress.bind(this);
+        this._onStopRecordingPress = this._onStopRecordingPress.bind(this);
+        this._onStartTranscriptionPress = this._onStartTranscriptionPress.bind(this);
+        this._onStopTranscriptionPress = this._onStopTranscriptionPress.bind(this);
+        this._onStartBothPress = this._onStartBothPress.bind(this);
+        this._onStopBothPress = this._onStopBothPress.bind(this);
+
+        this.state = {
+            isTokenValid: false,
+            isValidating: false,
+            userName: undefined,
+            sharingEnabled: true,
+            selectedLanguage: props._subtitlesLanguage
+                ?? `translation-languages:${DEFAULT_LANGUAGE}`,
+            spaceLeft: undefined,
+            selectedRecordingService: this._getDefaultRecordingService(props),
+            localRecordingOnlySelf: false
+        };
+    }
+
+    /**
+     * Picks the default recording service to preselect from the given props: the file recordings
+     * service takes priority, then local recording (unless an integration is enabled and preferred
+     * instead), then Dropbox, in that order. Returns '' if none is available, in which case the
+     * start recording button is disabled.
+     *
+     * @param {IProps} props - The props to compute the default from.
+     * @returns {string} - One of RECORDING_TYPES, or ''.
+     */
+    _getDefaultRecordingService(props: IProps): string {
+        if (props._fileRecordingsServiceEnabled) {
+            return RECORDING_TYPES.JITSI_REC_SERVICE;
+        }
+
+        if (this._areIntegrationsEnabled(props)) {
+            if (props._localRecordingEnabled && supportsLocalRecording()) {
+                return RECORDING_TYPES.LOCAL;
+            }
+
+            return RECORDING_TYPES.DROPBOX;
+        }
+
+        if (props._localRecordingEnabled && supportsLocalRecording()) {
+            return RECORDING_TYPES.LOCAL;
+        }
+
+        return '';
+    }
+
+    /**
+     * Validates the oauth access token.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        if (typeof this.props._token !== 'undefined') {
+            this._onTokenUpdated();
+        }
+    }
+
+    /**
+     * Validates the oauth access token.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        if (this.props._token !== prevProps._token) {
+            this._onTokenUpdated();
+        }
+
+        // selectedRecordingService is otherwise only ever set once, from props, in the
+        // constructor. If none of the services this dialog cares about were available/known yet
+        // at construction time (e.g. base/config hadn't finished loading when this instance
+        // mounted), it gets stuck at '' — permanently disabling the start button — even after the
+        // props that actually determine availability catch up moments later. Recompute it
+        // whenever those specific props change, but only while nothing has been selected yet, so
+        // this never overrides an explicit choice made via _onSelectedRecordingServiceChanged.
+        if (this.state.selectedRecordingService === ''
+                && (prevProps._fileRecordingsServiceEnabled !== this.props._fileRecordingsServiceEnabled
+                    || prevProps._isDropboxEnabled !== this.props._isDropboxEnabled
+                    || prevProps._localRecordingEnabled !== this.props._localRecordingEnabled)) {
+            const selectedRecordingService = this._getDefaultRecordingService(this.props);
+
+            if (selectedRecordingService) {
+                this.setState({ selectedRecordingService });
+            }
+        }
+    }
+
+    /**
+     * Returns true if the integrations with third party services are enabled
+     * and false otherwise.
+     *
+     * @param {IProps} props - The props to check against; defaults to this.props.
+     * @returns {boolean} - True if the integrations with third party services
+     * are enabled and false otherwise.
+     */
+    _areIntegrationsEnabled(props: IProps = this.props) {
+        return props._isDropboxEnabled
+            && !props._recordingRunning
+            && !props._transcriptionRunning;
+    }
+
+    /**
+     * Callback to handle sharing setting change from the dialog.
+     *
+     * @returns {void}
+     */
+    _onSharingSettingChanged() {
+        this.setState({
+            sharingEnabled: !this.state.sharingEnabled
+        });
+    }
+
+    /**
+     * Callback to handle local recording only self setting change.
+     *
+     * @returns {void}
+     */
+    _onLocalRecordingSelfChange() {
+        this.setState({
+            localRecordingOnlySelf: !this.state.localRecordingOnlySelf
+        });
+    }
+
+    /**
+     * Handles selected recording service changes.
+     *
+     * @param {string} selectedRecordingService - The new selected recording
+     * service.
+     * @returns {void}
+     */
+    _onSelectedRecordingServiceChanged(selectedRecordingService: string) {
+        this.setState({ selectedRecordingService }, () => {
+            this.props.dispatch(setSelectedRecordingService(selectedRecordingService));
+        });
+    }
+
+    /**
+     * Handles transcription language changes.
+     *
+     * @param {string} selectedLanguage - The new ("translation-languages:"
+     * prefixed) language.
+     * @returns {void}
+     */
+    _onSubtitlesLanguageChanged(selectedLanguage: string) {
+        this.setState({ selectedLanguage });
+    }
+
+    /**
+     * Validates the dropbox access token and fetches account information.
+     *
+     * @returns {void}
+     */
+    _onTokenUpdated() {
+        const { _appKey, _isDropboxEnabled, _token, _rToken, _tokenExpireDate, dispatch } = this.props;
+
+        if (!_isDropboxEnabled) {
+            return;
+        }
+
+        if (typeof _token === 'undefined') {
+            this.setState({
+                isTokenValid: false,
+                isValidating: false
+            });
+        } else { // @ts-ignore
+            if (_tokenExpireDate && Date.now() > new Date(_tokenExpireDate)) {
+                getNewAccessToken(_appKey, _rToken)
+                    .then((resp: { expireDate: number; rToken: string; token: string; }) =>
+                        dispatch(updateDropboxToken(resp.token, resp.rToken, resp.expireDate)));
+
+                return;
+            }
+
+            this.setState({
+                isTokenValid: false,
+                isValidating: true
+            });
+            getDropboxData(_token, _appKey).then(data => {
+                if (typeof data === 'undefined') {
+                    this.setState({
+                        isTokenValid: false,
+                        isValidating: false
+                    });
+                } else {
+                    this.setState({
+                        isTokenValid: true,
+                        isValidating: false,
+                        ...data
+                    });
+                }
+            });
+        }
+    }
+
+    /**
+     * Returns true when the start recording button should be disabled: either
+     * no recording service is available or the selected one is not ready to
+     * be used (e.g. Dropbox without a valid sign-in).
+     *
+     * @returns {boolean}
+     */
+    _isStartRecordingDisabled() {
+        const { isTokenValid, selectedRecordingService } = this.state;
+
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE
+                || selectedRecordingService === RECORDING_TYPES.LOCAL) {
+            return false;
+        }
+        if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return !isTokenValid;
+        }
+
+        return true;
+    }
+
+    /**
+     * Starts the audio & video recording. When the deployment is configured
+     * with {@code transcription.autoTranscribeOnRecord} the transcription is
+     * started along with it.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStartRecording() {
+        const { _autoTranscribeOnRecord, _canTranscribe, _transcriptionRunning } = this.props;
+
+        return this._applyChanges({
+            startRecording: true,
+            startTranscription: _autoTranscribeOnRecord && _canTranscribe && !_transcriptionRunning
+        });
+    }
+
+    /**
+     * Stops the audio & video recording, leaving a running transcription
+     * untouched.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStopRecording() {
+        return this._applyChanges({ stopRecording: true });
+    }
+
+    /**
+     * Starts the transcription, leaving the recording state untouched.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStartTranscription() {
+        return this._applyChanges({ startTranscription: true });
+    }
+
+    /**
+     * Stops the transcription, leaving a running recording untouched.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStopTranscription() {
+        return this._applyChanges({ stopTranscription: true });
+    }
+
+    /**
+     * Starts every service which is not running yet.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStartBoth() {
+        const { _recordingRunning, _transcriptionRunning } = this.props;
+
+        return this._applyChanges({
+            startRecording: !_recordingRunning,
+            startTranscription: !_transcriptionRunning
+        });
+    }
+
+    /**
+     * Stops every running service.
+     *
+     * @returns {boolean} - True when the action was applied.
+     */
+    _onStopBoth() {
+        const { _recordingRunning, _transcriptionRunning } = this.props;
+
+        return this._applyChanges({
+            stopRecording: _recordingRunning,
+            stopTranscription: _transcriptionRunning
+        });
+    }
+
+    /**
+     * Applies the requested recording/transcription changes by starting or
+     * stopping each service accordingly.
+     *
+     * @param {IRecordingChanges} changes - Which services to start/stop.
+     * @returns {boolean} - True when the changes were applied, false when the
+     * action could not be performed (e.g. validation failure).
+     */
+    _applyChanges({
+        startRecording = false,
+        startTranscription = false,
+        stopRecording = false,
+        stopTranscription = false
+    }: IRecordingChanges) {
+        const {
+            _appKey,
+            _conference,
+            _displaySubtitles,
+            _fileRecordingSession,
+            _isDropboxEnabled,
+            _localRecording,
+            _recordingRunning = false,
+            _rToken,
+            _subtitlesLanguage,
+            _token,
+            _transcriptionRunning = false,
+            dispatch
+        } = this.props;
+
+        const {
+            localRecordingOnlySelf,
+            selectedLanguage,
+            selectedRecordingService,
+            sharingEnabled
+        } = this.state;
+
+        // Pre-seed intents synchronously — must happen before any async operations
+        // so the sound/notification coordinator knows what to wait for.
+        if (startRecording || startTranscription) {
+            dispatch(setStartRecordingIntent({
+                recording: startRecording,
+                transcription: startTranscription
+            }));
+        }
+        if ((stopRecording || stopTranscription) && !_localRecording) {
+            dispatch(setStopRecordingIntent({
+                recording: stopRecording && Boolean(_fileRecordingSession),
+                transcription: stopTranscription
+            }));
+        }
+
+        // === Stop recording ===
+        if (stopRecording) {
+            sendAnalytics(createRecordingDialogEvent('stop', 'confirm.button'));
+            if (_localRecording) {
+                dispatch(stopLocalVideoRecording());
+            } else if (_fileRecordingSession) {
+                _conference?.stopRecording(_fileRecordingSession.id);
+                this._toggleScreenshotCapture();
+                // Keep isTranscribingEnabled in the metadata if transcription is still running,
+                // so the metadata listener does not see a false transition on that field.
+                _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                    isRecordingRequested: false,
+                    ...(_transcriptionRunning && !stopTranscription && { isTranscribingEnabled: true })
+                });
+            }
+        }
+
+        // === Stop transcription ===
+        if (stopTranscription) {
+            const recordingStillRunning = _recordingRunning && !stopRecording;
+
+            // When recording is still running, skip the subtitles-internal metadata write and do
+            // a single write ourselves. This prevents two consecutive metadata transitions
+            // (false→false on isRecordingRequested, then false→true) from firing spurious
+            // "recording stopped" and "recording started" sounds and notifications.
+            // Spread existing recording metadata so we only change isTranscribingEnabled —
+            // hardcoding isRecordingRequested: true would cause a spurious recordingStarting
+            // transition if that field was not previously set in the server metadata.
+            dispatch(setRequestingSubtitles(false, _displaySubtitles, _subtitlesLanguage, true, false, recordingStillRunning));
+            if (recordingStillRunning) {
+                const existingRecMeta = _conference?.getMetadataHandler()?.getMetadata()[RECORDING_METADATA_ID] ?? {};
+
+                _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                    ...existingRecMeta,
+                    isTranscribingEnabled: false
+                });
+            }
+        }
+
+        // === Start recording ===
+        if (startRecording) {
+            let appData;
+            const attributes: { type?: string; } = {};
+
+            switch (selectedRecordingService) {
+            case RECORDING_TYPES.DROPBOX: {
+                if (_isDropboxEnabled && _token) {
+                    appData = JSON.stringify({
+                        'file_recording_metadata': {
+                            'upload_credentials': {
+                                'service_name': RECORDING_TYPES.DROPBOX,
+                                'token': _token,
+                                'r_token': _rToken,
+                                'app_key': _appKey
+                            }
+                        }
+                    });
+                    attributes.type = RECORDING_TYPES.DROPBOX;
+                } else {
+                    dispatch(showErrorNotification({ titleKey: 'dialog.noDropboxToken' }));
+
+                    return false;
+                }
+                break;
+            }
+            case RECORDING_TYPES.JITSI_REC_SERVICE: {
+                appData = JSON.stringify({
+                    'file_recording_metadata': {
+                        'share': sharingEnabled
+                    }
+                });
+                attributes.type = RECORDING_TYPES.JITSI_REC_SERVICE;
+                break;
+            }
+            case RECORDING_TYPES.LOCAL: {
+                dispatch(startLocalVideoRecording(localRecordingOnlySelf));
+                _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                    isTranscribingEnabled:
+                        startTranscription || (_transcriptionRunning && !stopTranscription)
+                });
+
+                return true;
+            }
+            }
+
+            sendAnalytics(createRecordingDialogEvent('start', 'confirm.button', attributes));
+            this._toggleScreenshotCapture();
+            _conference?.startRecording({
+                mode: JitsiRecordingConstants.mode.FILE,
+                appData
+            });
+        }
+
+        // === Handle transcription start ===
+        // JITSI_REC_SERVICE uses setRequestingSubtitles; other services update metadata directly.
+        if (startTranscription) {
+            if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+                dispatch(setRequestingSubtitles(
+                    true, _displaySubtitles, selectedLanguage, true, startRecording || _recordingRunning));
+            } else {
+                // Spread the existing metadata so that starting transcription while a non-Jitsi
+                // recording is already running does not drop isRecordingRequested — that would
+                // read as recording having stopped to the metadata listener (see the stopRecording
+                // and stopTranscription branches above, which spread for the same reason).
+                const existingRecMeta = _conference?.getMetadataHandler()?.getMetadata()[RECORDING_METADATA_ID] ?? {};
+
+                _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                    ...existingRecMeta,
+                    ...(startRecording && { isRecordingRequested: true }),
+                    isTranscribingEnabled: true
+                });
+            }
+        } else if (startRecording) {
+            // Recording started without a transcription change: announce it in room metadata so the
+            // other participants get the recording start notification/sound (this is what the
+            // metadata listener turns into the remote notification). Preserve any existing
+            // isTranscribingEnabled so a running transcription is not signalled as stopped.
+            const existingRecMeta = _conference?.getMetadataHandler()?.getMetadata()[RECORDING_METADATA_ID] ?? {};
+
+            _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                ...existingRecMeta,
+                isRecordingRequested: true
+            });
+        }
+
+        return true;
+    }
+
+    /**
+     * Toggles screenshot capture feature.
+     *
+     * @returns {void}
+     */
+    _toggleScreenshotCapture() {
+        // To be implemented by subclass.
+    }
+
+    /**
+     * Dismisses the dialog/screen once an action from the list below has been applied.
+     *
+     * @returns {void}
+     */
+    _dismiss() {
+        // To be implemented by subclass.
+    }
+
+    /**
+     * Starts the recording and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStartRecordingPress() {
+        this._onStartRecording() && this._dismiss();
+    }
+
+    /**
+     * Stops the recording and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStopRecordingPress() {
+        this._onStopRecording() && this._dismiss();
+    }
+
+    /**
+     * Starts the transcription and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStartTranscriptionPress() {
+        this._onStartTranscription() && this._dismiss();
+    }
+
+    /**
+     * Stops the transcription and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStopTranscriptionPress() {
+        this._onStopTranscription() && this._dismiss();
+    }
+
+    /**
+     * Starts every service which is not running yet and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStartBothPress() {
+        this._onStartBoth() && this._dismiss();
+    }
+
+    /**
+     * Stops every running service and dismisses the dialog/screen.
+     *
+     * @returns {void}
+     */
+    _onStopBothPress() {
+        this._onStopBoth() && this._dismiss();
+    }
+
+    /**
+     * Renders the platform specific dialog content.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    _renderDialogContent: () => React.Component;
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code StartRecordingDialog} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {any} _ownProps - Component's own props.
+ * @private
+ * @returns {IProps}
+ */
+export function mapStateToProps(state: IReduxState, _ownProps: any) {
+    const {
+        recordingService,
+        dropbox = { appKey: undefined },
+        localRecording,
+        recordings = { recordAudioAndVideo: true }
+    } = state['features/base/config'];
+    const {
+        _displaySubtitles,
+        _language: _subtitlesLanguage
+    } = state['features/subtitles'];
+
+    // Only treat cloud recordings as "running" for users who can actually control them.
+    // Non-mods without the recording/transcription JWT feature cannot stop cloud sessions,
+    // so from their perspective only their own local recording counts as "running".
+    const canManageRecordingOrTranscription = isLocalParticipantModerator(state)
+        || hasRecordingOrTranscriptionFeature(state);
+
+    return {
+        _appKey: dropbox.appKey ?? '',
+        _autoTranscribeOnRecord: shouldAutoTranscribeOnRecord(state),
+        _canTranscribe: canAddTranscriber(state),
+        _conference: state['features/base/conference'].conference,
+        _displaySubtitles,
+        _fileRecordingSession: getActiveSession(state, JitsiRecordingConstants.mode.FILE),
+        _fileRecordingsServiceEnabled: recordingService?.enabled ?? false,
+        _fileRecordingsServiceSharingEnabled: isRecordingSharingEnabled(state),
+        _isModerator: isLocalParticipantModerator(state),
+        _isDropboxEnabled: isDropboxEnabled(state),
+        _localRecording: Boolean(state['features/recording'].localRecordingRunning),
+        _localRecordingEnabled: !localRecording?.disable,
+        _recordingRunning: canManageRecordingOrTranscription
+            ? isRecordingRunning(state)
+            : Boolean(state['features/recording'].localRecordingRunning),
+        _rToken: state['features/dropbox'].rToken ?? '',
+        _transcriptionRunning: canManageRecordingOrTranscription
+            ? isRecorderTranscriptionsRunning(state)
+            : false,
+        recordAudioAndVideo:
+            isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false)
+                ? _ownProps.recordAudioAndVideo ?? recordings?.recordAudioAndVideo ?? true : false,
+        _subtitlesLanguage,
+        _tokenExpireDate: state['features/dropbox'].expireDate,
+        _token: state['features/dropbox'].token ?? ''
+    };
+}
+
+export default AbstractStartRecordingDialog;

react/features/recording/components/Recording/AbstractStartRecordingDialogContent.tsx

@@ -0,0 +1,668 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createRecordingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState, IStore } from '../../../app/types';
+import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry';
+import { _abstractMapStateToProps } from '../../../base/dialog/functions';
+import { MEET_FEATURES } from '../../../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../../../base/jwt/functions';
+import { isLocalParticipantModerator } from '../../../base/participants/functions';
+import { authorizeDropbox, updateDropboxToken } from '../../../dropbox/actions';
+import { setFollowMeRecorderExclusive } from '../../../follow-me/actions';
+import { isFollowMeActive, isFollowMeRecorderActive } from '../../../follow-me/functions';
+import { isVpaasMeeting } from '../../../jaas/functions';
+import { getAvailableSubtitlesLanguages } from '../../../subtitles/functions.any';
+import { canAddTranscriber, isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
+import { RECORDING_TYPES } from '../../constants';
+import { hasRecordingOrTranscriptionFeature, isLiveStreamingRunning, supportsLocalRecording } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractStartRecordingDialogContent}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * The available ("translation-languages:" prefixed) transcription
+     * languages.
+     */
+    _availableLanguages: Array<string>;
+
+    /**
+     * Whether the local participant can manage recording/transcription (moderator or holds the
+     * recording/transcription feature claim).
+     */
+    _canManageRecordingOrTranscription: boolean;
+
+    /**
+     * Whether the local participant can start transcribing.
+     */
+    _canStartTranscribing: boolean;
+
+    /**
+     * Style of the dialogs feature.
+     */
+    _dialogStyles: any;
+
+    /**
+     * Whether any moderator has the regular Follow Me feature active.
+     */
+    _followMeActive: boolean;
+
+    /**
+     * Whether any moderator has the recorder Follow Me feature active.
+     */
+    _followMeRecorderActive: boolean;
+
+    /**
+     * Whether the local participant has the recorder Follow Me setting enabled.
+     */
+    _followMeRecorderEnabled: boolean;
+
+    /**
+     * Whether to hide the storage warning or not.
+     */
+    _hideStorageWarning: boolean;
+
+    /**
+     * Whether a live stream session is currently active.
+     */
+    _isLiveStreamRunning: boolean;
+
+    /**
+     * Whether the local participant is a moderator.
+     */
+    _isModerator: boolean;
+
+    /**
+     * Whether local recording is available or not.
+     */
+    _localRecordingAvailable: boolean;
+
+    /**
+     * Whether local recording is enabled or not.
+     */
+    _localRecordingEnabled: boolean;
+
+    /**
+     * Whether we won't notify the other participants about the recording.
+     */
+    _localRecordingNoNotification: boolean;
+
+    /**
+     * Whether a local recording is currently in progress.
+     */
+    _localRecordingRunning: boolean;
+
+    /**
+     * Whether self local recording is enabled or not.
+     */
+    _localRecordingSelfEnabled: boolean;
+
+    /**
+     * Whether to render recording.
+     */
+    _renderRecording: boolean;
+
+    /**
+     * The color-schemed stylesheet of this component.
+     */
+    _styles: any;
+
+    /**
+     * Whether transcription is currently running.
+     */
+    _transcriptionRunning: boolean;
+
+    /**
+     * CSS classes object (web only).
+     */
+    classes?: Partial<Record<string, string>>;
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * Whether to show file recordings service, even if integrations
+     * are enabled.
+     */
+    fileRecordingsServiceEnabled: boolean;
+
+    /**
+     * Whether to show the possibility to share file recording with other people (e.g. Meeting participants), based on
+     * the actual implementation on the backend.
+     */
+    fileRecordingsServiceSharingEnabled: boolean;
+
+    /**
+     * If true the content related to the integrations will be shown.
+     */
+    integrationsEnabled: boolean;
+
+    /**
+     * <tt>true</tt> if we have valid oauth token.
+     */
+    isTokenValid: boolean;
+
+    /**
+     * <tt>true</tt> if we are in process of validating the oauth token.
+     */
+    isValidating: boolean;
+
+    /**
+     * Whether or not the current meeting is a vpaas one.
+     */
+    isVpaas: boolean;
+
+    /**
+     * Whether or not we should only record the local streams.
+     */
+    localRecordingOnlySelf?: boolean;
+
+    /**
+     * Callback to change the local recording only self setting.
+     */
+    onLocalRecordingSelfChange?: () => void;
+
+    /**
+     * The function will be called when the selected recording service changes.
+     */
+    onRecordingServiceChange: (service: string) => void;
+
+    /**
+     * Callback to be invoked on sharing setting change.
+     */
+    onSharingSettingChanged: () => void;
+
+    /**
+     * Starts every service which is not running.
+     */
+    onStartBoth: () => void;
+
+    /**
+     * Starts the audio & video recording.
+     */
+    onStartRecording: () => void;
+
+    /**
+     * Starts the transcription.
+     */
+    onStartTranscription: () => void;
+
+    /**
+     * Stops every running service.
+     */
+    onStopBoth: () => void;
+
+    /**
+     * Stops the audio & video recording.
+     */
+    onStopRecording: () => void;
+
+    /**
+     * Stops the transcription.
+     */
+    onStopTranscription: () => void;
+
+    /**
+     * Callback to be invoked when the transcription language changes.
+     */
+    onSubtitlesLanguageChange: (language: string) => void;
+
+    /**
+     * When false, the recording section starts collapsed and the
+     * transcription section starts expanded, putting the focus on
+     * transcription (e.g. subtitles/nudge flows).
+     */
+    recordAudioAndVideo?: boolean;
+
+    /**
+     * When true, audio/video recording is specifically in progress.
+     */
+    recordingRunning: boolean;
+
+    /**
+     * The ("translation-languages:" prefixed) language the transcription will
+     * be saved in.
+     */
+    selectedLanguage: string | null;
+
+    /**
+     * The currently selected recording service of type: RECORDING_TYPES.
+     */
+    selectedRecordingService: string | null;
+
+    /**
+     * Boolean to set file recording sharing on or off.
+     */
+    sharingSetting: boolean;
+
+    /**
+     * Number of MiB of available space in user's Dropbox account.
+     */
+    spaceLeft?: number;
+
+    /**
+     * Whether the start recording action is currently unavailable (no usable
+     * service selected).
+     */
+    startRecordingDisabled: boolean;
+
+    /**
+     * Whether transcription is currently running (from the dialog's point of
+     * view, i.e. Only when the local participant can control it).
+     */
+    transcriptionRunning: boolean;
+
+    /**
+     * The display name of the user's Dropbox account.
+     */
+    userName?: string;
+}
+
+export interface IState {
+
+    /**
+     * Whether the language list is expanded (used by the native inline
+     * picker; the web renders a combobox instead).
+     */
+    showLanguageList: boolean;
+
+    /**
+     * Whether the recording section options are expanded.
+     */
+    showRecordingOptions: boolean;
+
+    /**
+     * Whether the transcription section options are expanded.
+     */
+    showTranscriptionOptions: boolean;
+}
+
+/**
+ * React Component for the recording & transcription dialog content: two
+ * sections (audio & video recording, transcription), each with its own
+ * start/stop button and a collapsible options area, plus footer buttons
+ * acting on both services at once.
+ *
+ * @augments Component
+ */
+class AbstractStartRecordingDialogContent extends Component<IProps, IState> {
+    /**
+     * Initializes a new {@code AbstractStartRecordingDialogContent} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handler; it bounds once for every instance.
+        this._onSignIn = this._onSignIn.bind(this);
+        this._onSignOut = this._onSignOut.bind(this);
+        this._onRecordingServiceChange = this._onRecordingServiceChange.bind(this);
+        this._onFollowMeRecorderChange = this._onFollowMeRecorderChange.bind(this);
+        this._onToggleRecordingOptions = this._onToggleRecordingOptions.bind(this);
+        this._onToggleTranscriptionOptions = this._onToggleTranscriptionOptions.bind(this);
+        this._onToggleLanguageList = this._onToggleLanguageList.bind(this);
+
+        // Both sections start collapsed, except transcription options are pre-expanded when a
+        // caller (e.g. the transcription nudge) explicitly asks to focus transcription instead
+        // of recording by passing recordAudioAndVideo: false.
+        this.state = {
+            showLanguageList: false,
+            showRecordingOptions: false,
+            showTranscriptionOptions: props.recordAudioAndVideo === false
+        };
+    }
+
+    /**
+     * Implements {@code Component#componentDidUpdate}.
+     *
+     * @inheritdoc
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        // Auto sign-out when the user chooses another recording service.
+        if (prevProps.selectedRecordingService === RECORDING_TYPES.DROPBOX
+                && this.props.selectedRecordingService !== RECORDING_TYPES.DROPBOX && this.props.isTokenValid) {
+            this._onSignOut();
+        }
+    }
+
+    /**
+     * Toggles the recording section options.
+     *
+     * @returns {void}
+     */
+    _onToggleRecordingOptions() {
+        this.setState({ showRecordingOptions: !this.state.showRecordingOptions });
+    }
+
+    /**
+     * Toggles the transcription section options.
+     *
+     * @returns {void}
+     */
+    _onToggleTranscriptionOptions() {
+        this.setState({ showTranscriptionOptions: !this.state.showTranscriptionOptions });
+    }
+
+    /**
+     * Toggles the inline language list.
+     *
+     * @returns {void}
+     */
+    _onToggleLanguageList() {
+        this.setState({ showLanguageList: !this.state.showLanguageList });
+    }
+
+    /**
+     * Returns the list of recording services (RECORDING_TYPES values) the
+     * participant can currently pick from.
+     *
+     * Cloud based services (Jitsi recording service, Dropbox) require the
+     * recording JWT feature and are unavailable while a live stream runs
+     * (both use Jibri). Dropbox is additionally unavailable while a session
+     * is running (integrationsEnabled covers that).
+     *
+     * @returns {Array<string>}
+     */
+    _getRecordingServiceOptions(): Array<string> {
+        const {
+            _isLiveStreamRunning,
+            _localRecordingAvailable,
+            _renderRecording,
+            fileRecordingsServiceEnabled,
+            integrationsEnabled
+        } = this.props;
+        const options = [];
+
+        if (_renderRecording && !_isLiveStreamRunning) {
+            if (fileRecordingsServiceEnabled) {
+                options.push(RECORDING_TYPES.JITSI_REC_SERVICE);
+            }
+            if (integrationsEnabled) {
+                options.push(RECORDING_TYPES.DROPBOX);
+            }
+        }
+        if (_localRecordingAvailable) {
+            options.push(RECORDING_TYPES.LOCAL);
+        }
+
+        return options;
+    }
+
+    /**
+     * Whether the audio & video recording section should be rendered.
+     *
+     * @param {Array<string>} [options] - The result of {@code _getRecordingServiceOptions()},
+     * when the caller already computed it (avoids recomputing it a second time).
+     * @returns {boolean}
+     */
+    _shouldRenderRecordingSection(options: Array<string> = this._getRecordingServiceOptions()) {
+        return this.props.recordingRunning || options.length > 0;
+    }
+
+    /**
+     * Whether the transcription section should be rendered.
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderTranscriptionSection() {
+        return this._canStartTranscribing() || this.props.transcriptionRunning;
+    }
+
+    /**
+     * Whether the footer buttons (start both / stop both) should be rendered.
+     * They only make sense when the participant can act on both services.
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderFooter() {
+        return this._shouldRenderRecordingSection() && this._shouldRenderTranscriptionSection();
+    }
+
+    /**
+     * Whether the file sharing content should be rendered or not.
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderFileSharingContent() {
+        const {
+            fileRecordingsServiceEnabled,
+            fileRecordingsServiceSharingEnabled,
+            isVpaas,
+            selectedRecordingService
+        } = this.props;
+
+        if (!fileRecordingsServiceEnabled
+            || !fileRecordingsServiceSharingEnabled
+            || isVpaas
+            || selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Whether the recorder follow me option should be rendered: moderators
+     * only, and only for the cloud based services which spawn a recorder
+     * participant that can follow (local recordings record the own view).
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderFollowMeRecorder() {
+        const { _isModerator, selectedRecordingService } = this.props;
+
+        return _isModerator
+            && (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE
+                || selectedRecordingService === RECORDING_TYPES.DROPBOX);
+    }
+
+    /**
+     * Whether the save transcription content should be rendered or not.
+     *
+     * @returns {boolean}
+     */
+    _canStartTranscribing() {
+        return this.props._canStartTranscribing;
+    }
+
+    /**
+     * Returns the translation key labelling the given recording service in
+     * the storage service picker.
+     *
+     * @param {string} service - One of the RECORDING_TYPES values.
+     * @returns {string}
+     */
+    _getServiceLabelKey(service: string | null) {
+        switch (service) {
+        case RECORDING_TYPES.JITSI_REC_SERVICE:
+            return this.props.isVpaas ? 'recording.serviceDescriptionCloud' : 'recording.serviceName';
+        case RECORDING_TYPES.DROPBOX:
+            return 'recording.dropbox';
+        case RECORDING_TYPES.LOCAL:
+            return 'recording.localRecording';
+        }
+
+        return '';
+    }
+
+    /**
+     * Returns the one line summary of the recording options, shown in the
+     * collapsed accordion header: the selected storage service followed by
+     * the state of its suboptions.
+     *
+     * @returns {string}
+     */
+    _getRecordingSummary() {
+        const {
+            isTokenValid,
+            localRecordingOnlySelf,
+            selectedRecordingService,
+            sharingSetting,
+            t,
+            userName
+        } = this.props;
+
+        if (!selectedRecordingService) {
+            return '';
+        }
+
+        const parts = [ t(this._getServiceLabelKey(selectedRecordingService)) ];
+
+        switch (selectedRecordingService) {
+        case RECORDING_TYPES.JITSI_REC_SERVICE:
+            if (this._shouldRenderFileSharingContent()) {
+                parts.push(t(sharingSetting ? 'recording.linkShared' : 'recording.linkNotShared'));
+            }
+            break;
+        case RECORDING_TYPES.DROPBOX:
+            parts.push(isTokenValid ? t('recording.loggedIn', { userName }) : t('recording.notSignedIn'));
+            break;
+        case RECORDING_TYPES.LOCAL:
+            if (localRecordingOnlySelf) {
+                parts.push(t('recording.onlyRecordSelf'));
+            }
+            break;
+        }
+
+        if (this._shouldRenderFollowMeRecorder() && this._isFollowMeRecorderChecked()) {
+            parts.push(t('settings.followMeRecorder'));
+        }
+
+        return parts.join(' · ');
+    }
+
+    /**
+     * Returns the one line summary of the transcription options, shown in the
+     * collapsed accordion header: the selected language.
+     *
+     * @returns {string}
+     */
+    _getTranscriptionSummary() {
+        const { selectedLanguage, t } = this.props;
+
+        return selectedLanguage ? t(selectedLanguage) : '';
+    }
+
+    /**
+     * Handler for recording service selection changes.
+     *
+     * @param {string} service - The newly selected service.
+     * @returns {void}
+     */
+    _onRecordingServiceChange(service: string) {
+        const { isTokenValid, onRecordingServiceChange, selectedRecordingService } = this.props;
+
+        if (service === selectedRecordingService) {
+            return;
+        }
+
+        onRecordingServiceChange(service);
+
+        if (service === RECORDING_TYPES.DROPBOX && !isTokenValid) {
+            this._onSignIn();
+        }
+    }
+
+    /**
+     * Handler for the recorder follow me setting.
+     *
+     * @param {boolean} enabled - The new value.
+     * @returns {void}
+     */
+    _onFollowMeRecorderChange(enabled?: boolean) {
+        const value = enabled ?? !this.props._followMeRecorderEnabled;
+
+        this.props.dispatch(setFollowMeRecorderExclusive(value));
+    }
+
+    /**
+     * Whether the recorder follow me option is checked.
+     *
+     * @returns {boolean}
+     */
+    _isFollowMeRecorderChecked() {
+        const { _followMeRecorderActive, _followMeRecorderEnabled } = this.props;
+
+        return _followMeRecorderEnabled && !_followMeRecorderActive;
+    }
+
+    /**
+     * Whether the recorder follow me option is disabled: another moderator
+     * has one of the follow me modes active, or a recording is already in
+     * progress — the recorder cannot pick up the change after it started.
+     *
+     * @returns {boolean}
+     */
+    _isFollowMeRecorderDisabled() {
+        const { _followMeActive, _followMeRecorderActive, recordingRunning } = this.props;
+
+        return _followMeActive || _followMeRecorderActive || recordingRunning;
+    }
+
+    /**
+     * Sings in a user.
+     *
+     * @returns {void}
+     */
+    _onSignIn() {
+        sendAnalytics(createRecordingDialogEvent('start', 'signIn.button'));
+        this.props.dispatch(authorizeDropbox());
+    }
+
+    /**
+     * Sings out an user from dropbox.
+     *
+     * @returns {void}
+     */
+    _onSignOut() {
+        sendAnalytics(createRecordingDialogEvent('start', 'signOut.button'));
+        this.props.dispatch(updateDropboxToken());
+    }
+}
+
+/**
+ * Maps part of the redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {IProps}
+ */
+export function mapStateToProps(state: IReduxState) {
+    const { localRecording, recordingService } = state['features/base/config'];
+    const _localRecordingAvailable = !localRecording?.disable && supportsLocalRecording();
+    const canManageRecordingOrTranscription
+        = isLocalParticipantModerator(state) || hasRecordingOrTranscriptionFeature(state);
+    const { followMeRecorderEnabled } = state['features/follow-me'];
+    const subtitlesLanguage = state['features/subtitles']._language?.replace('translation-languages:', '');
+
+    return {
+        ..._abstractMapStateToProps(state),
+        isVpaas: isVpaasMeeting(state),
+        _availableLanguages: getAvailableSubtitlesLanguages(state, subtitlesLanguage)
+            .map((lang: string) => `translation-languages:${lang}`),
+        _canManageRecordingOrTranscription: canManageRecordingOrTranscription,
+        _canStartTranscribing: canAddTranscriber(state),
+        _followMeActive: isFollowMeActive(state),
+        _followMeRecorderActive: isFollowMeRecorderActive(state),
+        _followMeRecorderEnabled: Boolean(followMeRecorderEnabled),
+        _isLiveStreamRunning: isLiveStreamingRunning(state),
+        _hideStorageWarning: Boolean(recordingService?.hideStorageWarning),
+        _isModerator: isLocalParticipantModerator(state),
+        _renderRecording: isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false),
+        _transcriptionRunning: canManageRecordingOrTranscription ? isRecorderTranscriptionsRunning(state) : false,
+        _localRecordingAvailable,
+        _localRecordingEnabled: !localRecording?.disable,
+        _localRecordingRunning: Boolean(state['features/recording'].localRecordingRunning),
+        _localRecordingSelfEnabled: !localRecording?.disableSelfRecording,
+        _localRecordingNoNotification: !localRecording?.notifyAllParticipants,
+        _styles: ColorSchemeRegistry.get(state, 'StartRecordingDialogContent')
+    };
+}
+
+export default AbstractStartRecordingDialogContent;

react/features/recording/components/Recording/AbstractStopRecordingDialog.ts

@@ -0,0 +1,195 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createRecordingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState, IStore } from '../../../app/types';
+import { IJitsiConference } from '../../../base/conference/reducer';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { setVideoMuted } from '../../../base/media/actions';
+import { setRequestingSubtitles } from '../../../subtitles/actions.any';
+import { isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
+import { setStopRecordingIntent, stopLocalVideoRecording } from '../../actions';
+import { RECORDING_METADATA_ID } from '../../constants';
+import { getActiveSession } from '../../functions';
+import { ISessionData } from '../../reducer';
+
+import LocalRecordingManager from './LocalRecordingManager';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractStopRecordingDialog}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * The {@code JitsiConference} for the current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * Whether subtitles should be displayed or not.
+     */
+    _displaySubtitles?: boolean;
+
+    /**
+     * The redux representation of the recording session to be stopped.
+     */
+    _fileRecordingSession?: ISessionData;
+
+    /**
+     * Whether the recording is a local recording or not.
+     */
+    _localRecording: boolean;
+
+    /**
+     * The selected language for subtitles.
+     */
+    _subtitlesLanguage: string | null;
+
+    /**
+     * Whether a transcription session is running.
+     */
+    _transcriptionRunning: boolean;
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The user trying to stop the video while local recording is running.
+     */
+    localRecordingVideoStop?: boolean;
+
+    /**
+     * Controls which service is stopped: 'recording' stops the file recording
+     * session, 'transcription' stops only transcription and leaves recording
+     * running.
+     */
+    stopMode: 'recording' | 'transcription';
+}
+
+/**
+ * Abstract React Component for getting confirmation to stop a file recording
+ * session in progress.
+ *
+ * @augments Component
+ */
+export default class AbstractStopRecordingDialog<P extends IProps>
+    extends Component<P> {
+    /**
+     * Initializes a new {@code AbstrStopRecordingDialog} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: P) {
+        super(props);
+
+        // Bind event handler so it is only bound once for every instance.
+        this._onSubmit = this._onSubmit.bind(this);
+        this._toggleScreenshotCapture = this._toggleScreenshotCapture.bind(this);
+    }
+
+    /**
+     * Stops the recording session.
+     *
+     * @private
+     * @returns {boolean} - True (to note that the modal should be closed).
+     */
+    _onSubmit() {
+        sendAnalytics(createRecordingDialogEvent('stop', 'confirm.button'));
+
+        const {
+            _conference,
+            _displaySubtitles,
+            _fileRecordingSession,
+            _localRecording,
+            _subtitlesLanguage,
+            _transcriptionRunning,
+            dispatch,
+            localRecordingVideoStop,
+            stopMode
+        } = this.props;
+
+        const stoppingRecording = stopMode === 'recording';
+        const stoppingTranscription = stopMode === 'transcription';
+
+        // Pre-seed stopRecordingIntent so the off-sound/notification coordinator
+        // (maybeNotifyRecordingStop) knows what to wait for. Each button only
+        // signals the service it is responsible for stopping.
+        if (!_localRecording) {
+            const recordingRunning = stoppingRecording && Boolean(_fileRecordingSession);
+            const transcriptionRunning = stoppingTranscription && _transcriptionRunning;
+
+            if (recordingRunning || transcriptionRunning) {
+                dispatch(setStopRecordingIntent({
+                    recording: recordingRunning,
+                    transcription: transcriptionRunning
+                }));
+            }
+        }
+
+        if (stoppingRecording) {
+            if (_localRecording) {
+                dispatch(stopLocalVideoRecording());
+                if (localRecordingVideoStop) {
+                    dispatch(setVideoMuted(true));
+                }
+            } else if (_fileRecordingSession) {
+                _conference?.stopRecording(_fileRecordingSession.id);
+                this._toggleScreenshotCapture();
+            }
+
+            _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                isRecordingRequested: false
+            });
+        }
+
+        if (stoppingTranscription) {
+            // TODO: this should be an action in transcribing. -saghul
+            dispatch(
+                setRequestingSubtitles(Boolean(_displaySubtitles), _displaySubtitles, _subtitlesLanguage, true));
+
+            _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                isTranscribingEnabled: false
+            });
+        }
+
+        return true;
+    }
+
+    /**
+     * Toggles screenshot capture feature.
+     *
+     * @returns {void}
+     */
+    _toggleScreenshotCapture() {
+        // To be implemented by subclass.
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated props for the
+ * {@code StopRecordingDialog} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {IProps}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    const {
+        _displaySubtitles,
+        _language: _subtitlesLanguage
+    } = state['features/subtitles'];
+
+    return {
+        _conference: state['features/base/conference'].conference,
+        _displaySubtitles,
+        _fileRecordingSession:
+            getActiveSession(state, JitsiRecordingConstants.mode.FILE),
+        _localRecording: LocalRecordingManager.isRecordingLocally(),
+        _subtitlesLanguage,
+        _transcriptionRunning: isRecorderTranscriptionsRunning(state)
+    };
+}

react/features/recording/components/Recording/LocalRecordingManager.native.ts

@@ -0,0 +1,64 @@
+import { IStore } from '../../../app/types';
+
+interface ILocalRecordingManager {
+    addAudioTrackToLocalRecording: (track: any) => void;
+    isRecordingLocally: () => boolean;
+    isSupported: () => boolean;
+    selfRecording: {
+        on: boolean;
+        withVideo: boolean;
+    };
+    startLocalRecording: (store: IStore, onlySelf: boolean) => Promise<void>;
+    stopLocalRecording: () => void;
+}
+
+const LocalRecordingManager: ILocalRecordingManager = {
+    selfRecording: {
+        on: false,
+        withVideo: false
+    },
+
+    /**
+     * Adds audio track to the recording stream.
+     *
+     * @param {any} track - Track to be added,.
+     * @returns {void}
+     */
+    addAudioTrackToLocalRecording() { }, // eslint-disable-line @typescript-eslint/no-empty-function
+
+    /**
+     * Stops local recording.
+     *
+     * @returns {void}
+     * */
+    stopLocalRecording() { }, // eslint-disable-line @typescript-eslint/no-empty-function
+
+    /**
+     * Starts a local recording.
+     *
+     * @param {IStore} store - The Redux store.
+     * @returns {void}
+     */
+    async startLocalRecording() { }, // eslint-disable-line @typescript-eslint/no-empty-function
+
+    /**
+     * Whether or not local recording is supported.
+     *
+     * @returns {boolean}
+     */
+    isSupported() {
+        return false;
+    },
+
+    /**
+     * Whether or not we're currently recording locally.
+     *
+     * @returns {boolean}
+     */
+    isRecordingLocally() {
+        return false;
+    }
+
+};
+
+export default LocalRecordingManager;

react/features/recording/components/Recording/LocalRecordingManager.web.ts

@@ -0,0 +1,395 @@
+// @ts-ignore
+import * as ebml from 'ts-ebml/dist/EBML.min.js';
+import { v4 as uuidV4 } from 'uuid';
+
+import { IStore } from '../../../app/types';
+import { getRoomName } from '../../../base/conference/functions';
+import { isMobileBrowser } from '../../../base/environment/utils';
+import { browser } from '../../../base/lib-jitsi-meet';
+import { MEDIA_TYPE } from '../../../base/media/constants';
+import { getLocalTrack, getTrackState } from '../../../base/tracks/functions';
+import { isEmbedded } from '../../../base/util/embedUtils';
+import { stopLocalVideoRecording } from '../../actions.any';
+import logger from '../../logger';
+
+interface ISelfRecording {
+    on: boolean;
+    withVideo: boolean;
+}
+
+interface ILocalRecordingManager {
+    addAudioTrackToLocalRecording: (track: MediaStreamTrack) => void;
+    audioContext: AudioContext | undefined;
+    audioDestination: MediaStreamAudioDestinationNode | undefined;
+    fileHandle: FileSystemFileHandle | undefined;
+    firstChunk: Blob | undefined;
+    getFilename: () => string;
+    initializeAudioMixer: () => void;
+    isRecordingLocally: () => boolean;
+    isSupported: () => boolean;
+    mediaType: string;
+    mixAudioStream: (stream: MediaStream) => void;
+    recorder: MediaRecorder | undefined;
+    roomName: string;
+    selfRecording: ISelfRecording;
+    startLocalRecording: (store: IStore, onlySelf: boolean) => Promise<void>;
+    startTime: number | undefined;
+    stopLocalRecording: () => void;
+    stream: MediaStream | undefined;
+    writableStream: FileSystemWritableFileStream | undefined;
+}
+
+/**
+ * After a lot of trial and error, this is the preferred media type for
+ * local recording. It is the only one that works across all platforms, with the
+ * only caveat being that the resulting file wouldn't be seekable.
+ *
+ * We solve that by fixing the first Blob in order to reserve the space for the
+ * corrected metadata, and after the recording is done, we do it again, this time with
+ * the real duration, and overwrite the first part of the file.
+ */
+const PREFERRED_MEDIA_TYPE = 'video/webm;codecs=vp8,opus';
+
+const VIDEO_BIT_RATE = 2500000; // 2.5Mbps in bits
+
+
+const LocalRecordingManager: ILocalRecordingManager = {
+    recorder: undefined,
+    stream: undefined,
+    audioContext: undefined,
+    audioDestination: undefined,
+    roomName: '',
+    selfRecording: {
+        on: false,
+        withVideo: false
+    },
+    firstChunk: undefined,
+    fileHandle: undefined,
+    startTime: undefined,
+    writableStream: undefined,
+
+    get mediaType() {
+        if (this.selfRecording.on && !this.selfRecording.withVideo) {
+            return 'audio/webm;';
+        }
+
+        return PREFERRED_MEDIA_TYPE;
+    },
+
+    /**
+     * Initializes audio context used for mixing audio tracks.
+     *
+     * @returns {void}
+     */
+    initializeAudioMixer() {
+        this.audioContext = new AudioContext();
+        this.audioDestination = this.audioContext.createMediaStreamDestination();
+    },
+
+    /**
+     * Mixes multiple audio tracks to the destination media stream.
+     *
+     * @param {MediaStream} stream - The stream to mix.
+     * @returns {void}
+     * */
+    mixAudioStream(stream) {
+        if (stream.getAudioTracks().length > 0 && this.audioDestination) {
+            this.audioContext?.createMediaStreamSource(stream).connect(this.audioDestination);
+        }
+    },
+
+    /**
+     * Adds audio track to the recording stream.
+     *
+     * @param {MediaStreamTrack} track - The track to be added.
+     * @returns {void}
+     */
+    addAudioTrackToLocalRecording(track) {
+        if (this.selfRecording.on) {
+            return;
+        }
+        if (track) {
+            const stream = new MediaStream([ track ]);
+
+            this.mixAudioStream(stream);
+        }
+    },
+
+    /**
+     * Returns a filename based ono the Jitsi room name in the URL and timestamp.
+     *
+     * @returns {string}
+     * */
+    getFilename() {
+        const now = new Date();
+        const timestamp = now.toISOString();
+
+        return `${this.roomName}_${timestamp}`;
+    },
+
+    /**
+     * Stops local recording.
+     *
+     * @returns {void}
+     * */
+    stopLocalRecording() {
+        this.recorder?.stop();
+    },
+
+    /**
+     * Starts a local recording.
+     *
+     * @param {IStore} store - The redux store.
+     * @param {boolean} onlySelf - Whether to record only self streams.
+     * @returns {void}
+     */
+    async startLocalRecording(store, onlySelf) {
+        const { dispatch, getState } = store;
+
+        this.roomName = getRoomName(getState()) ?? '';
+
+        // Get a handle to the file we are going to write.
+        const options = {
+            startIn: 'downloads',
+            suggestedName: `${this.getFilename()}.webm`,
+        };
+
+        // @ts-expect-error
+        this.fileHandle = await window.showSaveFilePicker(options);
+        this.writableStream = await this.fileHandle?.createWritable();
+
+        const supportsCaptureHandle = !isEmbedded();
+        const tabId = uuidV4();
+
+        this.selfRecording.on = onlySelf;
+        let gdmStream: MediaStream = new MediaStream();
+        const tracks = getTrackState(getState());
+
+        if (onlySelf) {
+            const audioTrack: MediaStreamTrack | undefined = getLocalTrack(tracks, MEDIA_TYPE.AUDIO)?.jitsiTrack?.track;
+            let videoTrack: MediaStreamTrack | undefined = getLocalTrack(tracks, MEDIA_TYPE.VIDEO)?.jitsiTrack?.track;
+
+            if (videoTrack && videoTrack.readyState !== 'live') {
+                videoTrack = undefined;
+            }
+
+            if (!audioTrack && !videoTrack) {
+                throw new Error('NoLocalStreams');
+            }
+
+            this.selfRecording.withVideo = Boolean(videoTrack);
+            const localTracks: MediaStreamTrack[] = [];
+
+            audioTrack && localTracks.push(audioTrack.clone());
+            videoTrack && localTracks.push(videoTrack.clone());
+            this.stream = new MediaStream(localTracks);
+        } else {
+            if (supportsCaptureHandle) {
+                // @ts-ignore
+                navigator.mediaDevices.setCaptureHandleConfig({
+                    handle: `JitsiMeet-${tabId}`,
+                    permittedOrigins: [ '*' ]
+                });
+            }
+
+            gdmStream = await navigator.mediaDevices.getDisplayMedia({
+                video: {
+                    displaySurface: 'browser',
+                    frameRate: 30
+                },
+                audio: {
+                    autoGainControl: false,
+                    channelCount: 2,
+                    echoCancellation: false,
+                    noiseSuppression: false,
+                    // @ts-ignore
+                    restrictOwnAudio: false,
+                    // @ts-ignore
+                    suppressLocalAudioPlayback: false,
+                },
+                // @ts-ignore
+                preferCurrentTab: true,
+                surfaceSwitching: 'exclude'
+            });
+
+            const gdmVideoTrack = gdmStream.getVideoTracks()[0];
+
+            if (supportsCaptureHandle) {
+                const isBrowser = gdmVideoTrack.getSettings().displaySurface === 'browser';
+                const matchesHandle = (supportsCaptureHandle // @ts-ignore
+                    && gdmVideoTrack.getCaptureHandle()?.handle === `JitsiMeet-${tabId}`);
+
+                if (!isBrowser || !matchesHandle) {
+                    gdmStream.getTracks().forEach((track: MediaStreamTrack) => track.stop());
+                    throw new Error('WrongSurfaceSelected');
+                }
+            }
+
+            this.initializeAudioMixer();
+
+            const gdmAudioTrack = gdmStream.getAudioTracks()[0];
+
+            if (!gdmAudioTrack) {
+                throw new Error('NoAudioTrackFound');
+            }
+
+            this.addAudioTrackToLocalRecording(gdmAudioTrack);
+
+            const localAudioTrack = getLocalTrack(tracks, MEDIA_TYPE.AUDIO)?.jitsiTrack?.track;
+
+            if (localAudioTrack) {
+                this.addAudioTrackToLocalRecording(localAudioTrack);
+            }
+
+            this.stream = new MediaStream([
+                ...this.audioDestination?.stream.getAudioTracks() || [],
+                gdmVideoTrack
+            ]);
+        }
+
+        this.recorder = new MediaRecorder(this.stream, {
+            // @ts-ignore
+            audioBitrateMode: 'constant',
+            mimeType: this.mediaType,
+            videoBitsPerSecond: VIDEO_BIT_RATE
+        });
+
+        // Serialize all chunk writes so the stop handler can await them before closing the
+        // stream. Without this, the stop event fires concurrently with the last dataavailable
+        // callback's async fixDuration call, and close() races the write — leaving an empty
+        // file for recordings shorter than the 5-second timeslice.
+        let writeQueue: Promise<void> = Promise.resolve();
+
+        this.recorder.addEventListener('dataavailable', e => {
+            if (e.data && e.data.size > 0) {
+                const chunk = e.data;
+
+                writeQueue = writeQueue.then(async () => {
+                    let data = chunk;
+
+                    if (!this.firstChunk) {
+                        this.firstChunk = data = await fixDuration(chunk, 864000000); // Reserve 24h.
+                    }
+
+                    await this.writableStream?.write(data);
+                });
+            }
+        });
+
+        this.recorder.addEventListener('start', () => {
+            this.startTime = Date.now();
+        });
+
+        this.recorder.addEventListener('stop', async () => {
+            const duration = Date.now() - this.startTime!;
+
+            this.stream?.getTracks().forEach((track: MediaStreamTrack) => track.stop());
+            gdmStream?.getTracks().forEach((track: MediaStreamTrack) => track.stop());
+
+            this.recorder = undefined;
+            this.audioContext?.close();
+            this.audioContext = undefined;
+            this.audioDestination = undefined;
+            this.startTime = undefined;
+            this.stream = undefined;
+            this.selfRecording.on = false;
+            this.selfRecording.withVideo = false;
+
+            // Wait for all pending dataavailable writes before closing the stream.
+            await writeQueue;
+
+            if (this.writableStream) {
+                try {
+                    if (this.firstChunk) {
+                        await this.writableStream.seek(0);
+                        await this.writableStream.write(await fixDuration(this.firstChunk!, duration));
+                    }
+                    await this.writableStream.close();
+                } catch (e) {
+                    logger.error('Error while writing to the local recording file', e);
+                } finally {
+                    this.firstChunk = undefined;
+                    this.fileHandle = undefined;
+                    this.writableStream = undefined;
+                }
+            }
+        });
+
+        if (!onlySelf) {
+            gdmStream?.addEventListener('inactive', () => {
+                dispatch(stopLocalVideoRecording());
+            });
+
+            this.stream.addEventListener('inactive', () => {
+                dispatch(stopLocalVideoRecording());
+            });
+        }
+
+        this.recorder.start(5000);
+    },
+
+    /**
+     * Whether or not local recording is supported.
+     *
+     * @returns {boolean}
+     */
+    isSupported() {
+        return browser.isChromiumBased()
+            && !browser.isElectron()
+            && !browser.isReactNative()
+            && !isMobileBrowser()
+
+            // @ts-expect-error
+            && Boolean(navigator.mediaDevices.setCaptureHandleConfig)
+            // @ts-expect-error
+            && typeof window.showSaveFilePicker !== 'undefined'
+            && MediaRecorder.isTypeSupported(PREFERRED_MEDIA_TYPE);
+    },
+
+    /**
+     * Whether or not we're currently recording locally.
+     *
+     * @returns {boolean}
+     */
+    isRecordingLocally() {
+        return Boolean(this.recorder);
+    }
+
+};
+
+/**
+ * Fixes the duration in the WebM container metadata.
+ * Note: cues are omitted.
+ *
+ * @param {Blob} data - The first Blob of WebM data.
+ * @param {number} duration - Actual duration of the video in milliseconds.
+ * @returns {Promise<Blob>}
+ */
+async function fixDuration(data: Blob, duration: number): Promise<Blob> {
+    const decoder = new ebml.Decoder();
+    const reader = new ebml.Reader();
+
+    reader.logging = false;
+    reader.drop_default_duration = false;
+
+    const dataBuf = await data.arrayBuffer();
+    const elms = decoder.decode(dataBuf);
+
+    for (const elm of elms) {
+        reader.read(elm);
+    }
+    reader.stop();
+
+    const newMetadataBuf = ebml.tools.makeMetadataSeekable(
+        reader.metadatas,
+        duration,
+        [] // No cues
+    );
+
+    const body = new Uint8Array(dataBuf).subarray(reader.metadataSize);
+
+    // @ts-ignore
+    return new Blob([ newMetadataBuf, body ], { type: data.type });
+}
+
+export default LocalRecordingManager;

react/features/recording/components/Recording/index.native.ts

@@ -0,0 +1,2 @@
+export { default as RecordingTranscriptionDialog } from './native/RecordingTranscriptionDialog';
+export { default as RecordingConsentDialog } from './native/RecordingConsentDialog';

react/features/recording/components/Recording/index.web.ts

@@ -0,0 +1,2 @@
+export { default as RecordingTranscriptionDialog } from './web/RecordingTranscriptionDialog';
+export { default as RecordingConsentDialog } from './web/RecordingConsentDialog';

react/features/recording/components/Recording/native/HighlightButton.tsx

@@ -0,0 +1,58 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import { IconHighlight } from '../../../../base/icons/svg';
+import Label from '../../../../base/label/components/native/Label';
+import BaseTheme from '../../../../base/ui/components/BaseTheme';
+import AbstractHighlightButton, {
+    IProps as AbstractProps,
+    _abstractMapStateToProps
+} from '../AbstractHighlightButton';
+import styles from '../styles.native';
+
+interface IProps extends AbstractProps {
+
+    _disabled: boolean;
+
+    /**
+     * Flag controlling visibility of the component.
+     */
+    _visible: boolean;
+}
+
+/**
+ * React {@code Component} responsible for displaying an action that
+ * allows users to highlight a meeting moment.
+ */
+export class HighlightButton extends AbstractHighlightButton<IProps> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _disabled,
+            _visible,
+            t
+        } = this.props;
+
+        if (!_visible || _disabled) {
+            return null;
+        }
+
+        return (
+            <Label
+                icon = { IconHighlight }
+                iconColor = { BaseTheme.palette.field01 }
+                style = { styles.highlightButton }
+                text = { t('recording.highlight') }
+                textStyle = { styles.highlightButtonText } />
+        );
+    }
+}
+
+export default translate(connect(_abstractMapStateToProps)(HighlightButton));

react/features/recording/components/Recording/native/HighlightDialog.tsx

@@ -0,0 +1,51 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import { StyleProp, Text, TextStyle, View, ViewStyle } from 'react-native';
+import { batch, useDispatch } from 'react-redux';
+
+import { hideSheet } from '../../../../base/dialog/actions';
+import BottomSheet from '../../../../base/dialog/components/native/BottomSheet';
+import Button from '../../../../base/ui/components/native/Button';
+import { BUTTON_TYPES } from '../../../../base/ui/constants.native';
+import { highlightMeetingMoment } from '../../../actions.any';
+import styles from '../styles.native';
+
+const HighlightDialog = () => {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const closeDialog = useCallback(() => dispatch(hideSheet()), [ dispatch ]);
+    const highlightMoment = useCallback(() => {
+        batch(() => {
+            dispatch(highlightMeetingMoment());
+            dispatch(hideSheet());
+        });
+    }, [ dispatch ]);
+
+    return (
+        <BottomSheet>
+            <View style = { styles.highlightDialog as StyleProp<ViewStyle> }>
+                <Text style = { styles.highlightDialogHeading as StyleProp<TextStyle> }>
+                    { `${t('recording.highlightMoment')}?` }
+                </Text>
+                <Text style = { styles.highlightDialogText as StyleProp<TextStyle> }>
+                    { t('recording.highlightMomentSucessDescription') }
+                </Text>
+                <View style = { styles.highlightDialogButtonsContainer as StyleProp<ViewStyle> } >
+                    <Button
+                        accessibilityLabel = 'dialog.Cancel'
+                        labelKey = 'dialog.Cancel'
+                        onClick = { closeDialog }
+                        type = { BUTTON_TYPES.SECONDARY } />
+                    <View style = { styles.highlightDialogButtonsSpace as StyleProp<ViewStyle> } />
+                    <Button
+                        accessibilityLabel = 'recording.highlight'
+                        labelKey = 'recording.highlight'
+                        onClick = { highlightMoment }
+                        type = { BUTTON_TYPES.PRIMARY } />
+                </View>
+            </View>
+        </BottomSheet>
+    );
+};
+
+export default HighlightDialog;

react/features/recording/components/Recording/native/RecordButton.ts

@@ -0,0 +1,60 @@
+import { Platform } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { IOS_RECORDING_ENABLED, RECORDING_ENABLED } from '../../../../base/flags/constants';
+import { getFeatureFlag } from '../../../../base/flags/functions';
+import { translate } from '../../../../base/i18n/functions';
+import { navigate }
+    from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../../../../mobile/navigation/routes';
+import {
+    IProps, _mapStateToProps as abstractStartLiveStreamDialogMapStateToProps
+} from '../../LiveStream/AbstractStartLiveStreamDialog';
+import AbstractRecordButton, {
+    IProps as AbstractProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractRecordButton';
+
+type Props = IProps & AbstractProps;
+
+/**
+ * Button for opening the recording/transcription management screen.
+ * The screen handles both starting a new session and managing a running one.
+ */
+class RecordButton extends AbstractRecordButton<Props> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _onHandleClick() {
+        navigate(screen.conference.recording);
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for this component.
+ *
+ * @param {Object} state - The redux state.
+ * @param {Object} ownProps - The properties explicitly passed to the component
+ * instance.
+ * @private
+ * @returns {Props}
+ */
+export function mapStateToProps(state: IReduxState) {
+    const enabled = getFeatureFlag(state, RECORDING_ENABLED, true);
+    const iosEnabled = Platform.OS !== 'ios' || getFeatureFlag(state, IOS_RECORDING_ENABLED, false);
+    const abstractProps = _abstractMapStateToProps(state);
+
+    return {
+        ...abstractProps,
+        ...abstractStartLiveStreamDialogMapStateToProps(state),
+        visible: Boolean(enabled && iosEnabled && abstractProps.visible)
+    };
+}
+
+export default translate(connect(mapStateToProps)(RecordButton));

react/features/recording/components/Recording/native/RecordingConsentDialog.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+import Dialog from 'react-native-dialog';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import ConfirmDialog from '../../../../base/dialog/components/native/ConfirmDialog';
+import { setAudioMuted, setAudioUnmutePermissions, setVideoMuted, setVideoUnmutePermissions } from '../../../../base/media/actions';
+import { VIDEO_MUTISM_AUTHORITY } from '../../../../base/media/constants';
+import Link from '../../../../base/react/components/native/Link';
+import { IRecordingConsentDialogProps } from '../../../reducer';
+import styles from '../styles.native';
+
+/**
+ * Component that renders the dialog for explicit consent for recordings.
+ *
+ * @param {IRecordingConsentDialogProps} props - The component props.
+ * @returns {JSX.Element}
+ */
+export default function RecordingConsentDialog({ audioWasMuted = false, videoWasMuted = false }: IRecordingConsentDialogProps) {
+    const dispatch = useDispatch();
+    const { t } = useTranslation();
+    const { recordings } = useSelector((state: IReduxState) => state['features/base/config']);
+    const { consentLearnMoreLink } = recordings ?? {};
+
+    const consent = useCallback(() => {
+        dispatch(setAudioUnmutePermissions(false, true));
+        dispatch(setVideoUnmutePermissions(false, true));
+
+        return true;
+    }, []);
+
+    const consentAndUnmute = useCallback(() => {
+        dispatch(setAudioUnmutePermissions(false, true));
+        dispatch(setVideoUnmutePermissions(false, true));
+
+        // Restore to the mute state before consent was requested.
+        dispatch(setAudioMuted(audioWasMuted, false));
+        dispatch(setVideoMuted(videoWasMuted, VIDEO_MUTISM_AUTHORITY.USER, false));
+
+        return true;
+    }, [ audioWasMuted, videoWasMuted ]);
+
+    return (
+        <ConfirmDialog
+            backLabel = { 'dialog.UnderstandAndUnmute' }
+            confirmLabel = { 'dialog.Understand' }
+            isBackHidden = { false }
+            isCancelHidden = { true }
+            onBack = { consentAndUnmute }
+            onSubmit = { consent }
+            title = { 'dialog.recordingInProgressTitle' }
+            verticalButtons = { true }>
+            <Dialog.Description>
+                {t('dialog.recordingInProgressDescription')}
+                {consentLearnMoreLink && (
+                    <Link
+                        style = { styles.learnMoreLink }
+                        url = { consentLearnMoreLink }>
+                        {` (${t('dialog.learnMore')})`}
+                    </Link>
+                )}
+                {'.'}
+            </Dialog.Description>
+        </ConfirmDialog>
+    );
+}

react/features/recording/components/Recording/native/RecordingOptionRow.tsx

@@ -0,0 +1,91 @@
+import React, { useCallback } from 'react';
+import { TouchableOpacity, View, ViewStyle } from 'react-native';
+import { Text } from 'react-native-paper';
+
+import Icon from '../../../../base/icons/components/Icon';
+import { IconCheck } from '../../../../base/icons/svg';
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
+
+interface IProps {
+
+    /**
+     * Whether the row can be selected.
+     */
+    disabled?: boolean;
+
+    /**
+     * The already translated label of the row.
+     */
+    label: string;
+
+    /**
+     * Callback invoked with the row value on selection.
+     */
+    onSelect: (value: string) => void;
+
+    /**
+     * Whether the row is the selected one.
+     */
+    selected: boolean;
+
+    /**
+     * The value the row represents.
+     */
+    value: string;
+}
+
+const styles = {
+    row: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        paddingVertical: BaseTheme.spacing[2]
+    } as ViewStyle,
+
+    iconWrapper: {
+        alignItems: 'center',
+        width: BaseTheme.spacing[5]
+    } as ViewStyle,
+
+    label: {
+        color: BaseTheme.palette.text01
+    },
+
+    labelSelected: {
+        fontWeight: 'bold' as const
+    },
+
+    disabled: {
+        opacity: 0.5
+    }
+};
+
+/**
+ * A selectable row of the inline pickers (storage service, transcription
+ * language) used by the native recording dialog.
+ *
+ * @returns {JSX.Element}
+ */
+const RecordingOptionRow = ({ disabled, label, onSelect, selected, value }: IProps) => {
+    const onPress = useCallback(() => onSelect(value), [ onSelect, value ]);
+
+    return (
+        <TouchableOpacity
+            accessibilityLabel = { label }
+            accessibilityRole = 'button'
+            accessibilityState = {{ disabled: Boolean(disabled), selected }}
+            disabled = { disabled }
+            onPress = { onPress }
+            style = { [ styles.row, disabled && styles.disabled ] }>
+            <View style = { styles.iconWrapper }>
+                { selected && <Icon
+                    size = { 20 }
+                    src = { IconCheck } /> }
+            </View>
+            <Text style = { [ styles.label, selected && styles.labelSelected ] }>
+                { label }
+            </Text>
+        </TouchableOpacity>
+    );
+};
+
+export default RecordingOptionRow;

react/features/recording/components/Recording/native/RecordingTranscriptionDialog.tsx

@@ -0,0 +1,117 @@
+import React from 'react';
+import { ScrollView } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { translate } from '../../../../base/i18n/functions';
+import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
+import { goBack } from
+    '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import AbstractStartRecordingDialog, {
+    mapStateToProps as abstractMapStateToProps
+} from '../AbstractStartRecordingDialog';
+import styles from '../styles.native';
+
+import StartRecordingDialogContent from './StartRecordingDialogContent';
+
+
+/**
+ * React Component for managing a recording/transcription session on native.
+ * Each section (audio & video recording, transcription) has its own
+ * start/stop button which applies the action immediately and navigates back.
+ *
+ * @augments Component
+ */
+class RecordingTranscriptionDialog extends AbstractStartRecordingDialog {
+
+    /**
+     * Dismisses the screen by navigating back.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override _dismiss() {
+        goBack();
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const {
+            _fileRecordingsServiceEnabled,
+            _fileRecordingsServiceSharingEnabled,
+            _recordingRunning,
+            _transcriptionRunning,
+            recordAudioAndVideo
+        } = this.props;
+        const {
+            isTokenValid,
+            isValidating,
+            localRecordingOnlySelf,
+            selectedLanguage,
+            selectedRecordingService,
+            sharingEnabled,
+            spaceLeft,
+            userName
+        } = this.state;
+
+        return (
+            <JitsiScreen style = { styles.startRecodingContainer }>
+                <ScrollView>
+                    <StartRecordingDialogContent
+                        fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
+                        fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }
+                        integrationsEnabled = { this._areIntegrationsEnabled() }
+                        isTokenValid = { isTokenValid }
+                        isValidating = { isValidating }
+                        localRecordingOnlySelf = { localRecordingOnlySelf }
+                        onLocalRecordingSelfChange = { this._onLocalRecordingSelfChange }
+                        onRecordingServiceChange = { this._onSelectedRecordingServiceChanged }
+                        onSharingSettingChanged = { this._onSharingSettingChanged }
+                        onStartBoth = { this._onStartBothPress }
+                        onStartRecording = { this._onStartRecordingPress }
+                        onStartTranscription = { this._onStartTranscriptionPress }
+                        onStopBoth = { this._onStopBothPress }
+                        onStopRecording = { this._onStopRecordingPress }
+                        onStopTranscription = { this._onStopTranscriptionPress }
+                        onSubtitlesLanguageChange = { this._onSubtitlesLanguageChanged }
+                        recordAudioAndVideo = { recordAudioAndVideo }
+                        recordingRunning = { Boolean(_recordingRunning) }
+                        selectedLanguage = { selectedLanguage }
+                        selectedRecordingService = { selectedRecordingService }
+                        sharingSetting = { sharingEnabled }
+                        spaceLeft = { spaceLeft }
+                        startRecordingDisabled = { this._isStartRecordingDisabled() }
+                        transcriptionRunning = { Boolean(_transcriptionRunning) }
+                        userName = { userName } />
+                </ScrollView>
+            </JitsiScreen>
+        );
+    }
+}
+
+/**
+ * Maps redux state to component props, bridging the navigation route params
+ * (native-only) into the shared {@code recordAudioAndVideo} prop.
+ *
+ * @param {Object} state - Redux state.
+ * @param {any} ownProps - Component's own props. Kept as `any`: this component is registered
+ * directly as a react-navigation Screen (see ConferenceNavigationContainer.tsx), whose generic
+ * `route`/`navigation` prop types don't compose with a narrower own-props type here without
+ * modeling the whole navigation ParamList, which AbstractStartRecordingDialog's own
+ * mapStateToProps(_ownProps: any) already opts out of for the same reason.
+ * @returns {Object}
+ */
+function mapStateToProps(state: IReduxState, ownProps: any) {
+    return {
+        ...abstractMapStateToProps(state, {
+            ...ownProps,
+            recordAudioAndVideo: ownProps.recordAudioAndVideo ?? ownProps.route?.params?.recordAudioAndVideo
+        })
+    };
+}
+
+export default translate(connect(mapStateToProps)(RecordingTranscriptionDialog));

react/features/recording/components/Recording/native/StartRecordingDialogContent.tsx

@@ -0,0 +1,532 @@
+import React from 'react';
+import { Image, TouchableOpacity, View } from 'react-native';
+import { Text } from 'react-native-paper';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import Icon from '../../../../base/icons/components/Icon';
+import { IconArrowDown, IconArrowRight } from '../../../../base/icons/svg';
+import LoadingIndicator from '../../../../base/react/components/native/LoadingIndicator';
+import Button from '../../../../base/ui/components/native/Button';
+import Switch from '../../../../base/ui/components/native/Switch';
+import { BUTTON_TYPES } from '../../../../base/ui/constants.native';
+import LanguageListItem from '../../../../subtitles/components/native/LanguageListItem';
+import { RECORDING_TYPES } from '../../../constants';
+import { getRecordingDurationEstimation } from '../../../functions';
+import AbstractStartRecordingDialogContent, { IProps, mapStateToProps } from '../AbstractStartRecordingDialogContent';
+import {
+    ICON_INFO,
+    ICON_USERS
+} from '../styles.native';
+
+import RecordingOptionRow from './RecordingOptionRow';
+
+
+/**
+ * The recording & transcription dialog content for the mobile application.
+ */
+class StartRecordingDialogContent extends AbstractStartRecordingDialogContent {
+    /**
+     * Initializes a new {@code StartRecordingDialogContent} instance.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onLanguageSelected = this._onLanguageSelected.bind(this);
+    }
+
+    /**
+     * Handles a language selection from the inline language list: applies it
+     * and collapses the list.
+     *
+     * @param {string} language - The selected ("translation-languages:"
+     * prefixed) language.
+     * @returns {void}
+     */
+    _onLanguageSelected(language: string) {
+        this.props.onSubtitlesLanguageChange(language);
+        this.setState({ showLanguageList: false });
+    }
+
+    /**
+     * Renders the component.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    override render() {
+        const { _styles: styles } = this.props;
+
+        return (
+            <View style = { styles.container }>
+                { this._renderRecordingSection() }
+                { this._renderTranscriptionSection() }
+                { this._renderFooter() }
+            </View>
+        );
+    }
+
+    /**
+     * Renders a section header: title and the start/stop button of the
+     * section's service.
+     *
+     * @param {Object} options - Rendering options.
+     * @returns {React$Component}
+     */
+    _renderSectionHeader({ onButtonPress, running, startDisabled, startLabelKey, stopLabelKey, titleKey }: {
+        onButtonPress: () => void;
+        running: boolean;
+        startDisabled?: boolean;
+        startLabelKey: string;
+        stopLabelKey: string;
+        titleKey: string;
+    }) {
+        const { _dialogStyles, _styles: styles, t } = this.props;
+
+        return (
+            <View style = { styles.header }>
+                <Text
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.title
+                    }}>
+                    { t(titleKey) }
+                </Text>
+                <Button
+                    accessibilityLabel = { running ? stopLabelKey : startLabelKey }
+                    disabled = { !running && startDisabled }
+                    labelKey = { running ? 'dialog.stop' : 'dialog.start' }
+                    onClick = { onButtonPress }
+                    type = { running ? BUTTON_TYPES.DESTRUCTIVE : BUTTON_TYPES.PRIMARY } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the accordion wrapping a section's options: a header with the
+     * options title, a one line summary of the current choices and a chevron,
+     * followed by the options themselves when expanded.
+     *
+     * @param {Object} options - Rendering options.
+     * @returns {React$Component}
+     */
+    _renderAccordion({ body, expanded, onToggle, summary, titleKey }: {
+        body: React.ReactNode;
+        expanded: boolean;
+        onToggle: () => void;
+        summary: string;
+        titleKey: string;
+    }) {
+        const { _styles: styles, t } = this.props;
+
+        return (
+            <View style = { styles.accordion }>
+                <TouchableOpacity
+                    accessibilityLabel = { t(titleKey) }
+                    accessibilityRole = 'button'
+                    accessibilityState = {{ expanded }}
+                    onPress = { onToggle }
+                    style = { styles.accordionHeader }>
+                    <View style = { styles.accordionText }>
+                        <Text style = { styles.accordionTitle }>
+                            { t(titleKey) }
+                        </Text>
+                        { !expanded && (
+                            <Text
+                                numberOfLines = { 1 }
+                                style = { styles.accordionSummary }>
+                                { summary }
+                            </Text>
+                        ) }
+                    </View>
+                    <Icon
+                        size = { 18 }
+                        src = { IconArrowDown }
+                        style = { expanded ? styles.accordionChevronOpen : undefined } />
+                </TouchableOpacity>
+                { expanded && (
+                    <View style = { styles.accordionBody }>
+                        { body }
+                    </View>
+                ) }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the audio & video recording section.
+     *
+     * @returns {React$Component}
+     */
+    _renderRecordingSection() {
+        const recordingServiceOptions = this._getRecordingServiceOptions();
+
+        if (!this._shouldRenderRecordingSection(recordingServiceOptions)) {
+            return null;
+        }
+
+        const {
+            _dialogStyles,
+            _styles: styles,
+            isValidating,
+            onStartRecording,
+            onStopRecording,
+            recordingRunning,
+            selectedRecordingService,
+            startRecordingDisabled,
+            t
+        } = this.props;
+        const { showRecordingOptions } = this.state;
+
+        return (
+            <View style = { styles.section }>
+                { this._renderSectionHeader({
+                    onButtonPress: recordingRunning ? onStopRecording : onStartRecording,
+                    running: recordingRunning,
+                    startDisabled: startRecordingDisabled || isValidating,
+                    startLabelKey: 'dialog.startRecording',
+                    stopLabelKey: 'dialog.stopRecording',
+                    titleKey: 'recording.recordAudioAndVideo'
+                }) }
+                { this._renderAccordion({
+                    body: (
+                        <>
+                            <Text
+                                style = {{
+                                    ..._dialogStyles.text,
+                                    ...styles.pickerLabel
+                                }}>
+                                { t('recording.storageLocation') }
+                            </Text>
+                            { recordingServiceOptions.map(service => (
+                                <RecordingOptionRow
+                                    disabled = { recordingRunning || isValidating }
+                                    key = { service }
+                                    label = { t(this._getServiceLabelKey(service)) }
+                                    onSelect = { this._onRecordingServiceChange }
+                                    selected = { selectedRecordingService === service }
+                                    value = { service } />
+                            )) }
+                            { selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE
+                                && this._renderJitsiServiceOptions() }
+                            { selectedRecordingService === RECORDING_TYPES.DROPBOX
+                                && this._renderDropboxOptions() }
+                            { this._renderFollowMeRecorder() }
+                        </>
+                    ),
+                    expanded: showRecordingOptions,
+                    onToggle: this._onToggleRecordingOptions,
+
+                    // Only rendered by _renderAccordion while collapsed — skip computing it
+                    // (and its nested t() calls) while the section is expanded.
+                    summary: showRecordingOptions ? '' : this._getRecordingSummary(),
+                    titleKey: 'recording.recordingOptions'
+                }) }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the options of the Jitsi recording service: the recording link
+     * sharing switch and the vpaas storage warning.
+     *
+     * @returns {React$Component}
+     */
+    _renderJitsiServiceOptions() {
+        const {
+            _dialogStyles,
+            _styles: styles,
+            isValidating,
+            onSharingSettingChanged,
+            recordingRunning,
+            sharingSetting,
+            t
+        } = this.props;
+
+        return (
+            <>
+                { this._shouldRenderFileSharingContent() && (
+                    <View
+                        key = 'fileSharingSetting'
+                        style = { styles.headerNested }>
+                        <Image
+                            source = { ICON_USERS }
+                            style = { styles.recordingIcon } />
+                        <Text
+                            style = {{
+                                ..._dialogStyles.text,
+                                ...styles.optionLabel
+                            }}>
+                            { t('recording.fileSharingdescription') }
+                        </Text>
+                        <Switch
+                            checked = { sharingSetting }
+                            disabled = { isValidating || recordingRunning }
+                            onChange = { onSharingSettingChanged }
+                            style = { styles.switch } />
+                    </View>
+                ) }
+                { this._renderUploadToTheCloudInfo() }
+            </>
+        );
+    }
+
+    /**
+     * Renders the info in case recording is uploaded to the cloud.
+     *
+     * @returns {React$Component}
+     */
+    _renderUploadToTheCloudInfo() {
+        const {
+            _dialogStyles,
+            _hideStorageWarning,
+            _styles: styles,
+            isVpaas,
+            t
+        } = this.props;
+
+        if (!isVpaas || _hideStorageWarning) {
+            return null;
+        }
+
+        return (
+            <View
+                key = 'cloudUploadInfo'
+                style = { styles.headerInfo }>
+                <Image
+                    source = { ICON_INFO }
+                    style = { styles.recordingInfoIcon } />
+                <Text
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.titleInfo
+                    }}>
+                    { t('recording.serviceDescriptionCloudInfo') }
+                </Text>
+            </View>
+        );
+    }
+
+    /**
+     * Renders the Dropbox account area: sign in button, or account info plus
+     * sign out button once authorized.
+     *
+     * @returns {React$Component}
+     */
+    _renderDropboxOptions() {
+        const { _dialogStyles, _styles: styles, isTokenValid, isValidating, spaceLeft, t, userName } = this.props;
+
+        if (isValidating) {
+            return (
+                <View style = { styles.loggedIn }>
+                    <LoadingIndicator size = 'small' />
+                </View>
+            );
+        }
+
+        if (!isTokenValid) {
+            return (
+                <View style = { styles.headerNested }>
+                    <Text
+                        style = {{
+                            ..._dialogStyles.text,
+                            ...styles.optionLabel
+                        }}>
+                        { t('recording.dropboxSignInPrompt') }
+                    </Text>
+                    <Button
+                        accessibilityLabel = 'recording.signIn'
+                        labelKey = 'recording.signIn'
+                        onClick = { this._onSignIn }
+                        type = { BUTTON_TYPES.PRIMARY } />
+                </View>
+            );
+        }
+
+        const duration = getRecordingDurationEstimation(spaceLeft);
+
+        return (
+            <View style = { styles.headerNested }>
+                <View style = { styles.loggedInInfo }>
+                    <Text
+                        style = { [
+                            styles.text,
+                            styles.recordingText
+                        ] }>
+                        { t('recording.loggedIn', { userName }) }
+                    </Text>
+                    <Text
+                        style = { [
+                            styles.text,
+                            styles.recordingText
+                        ] }>
+                        {
+                            t('recording.availableSpace', {
+                                spaceLeft,
+                                duration
+                            })
+                        }
+                    </Text>
+                </View>
+                <Button
+                    accessibilityLabel = 'recording.signOut'
+                    labelKey = 'recording.signOut'
+                    onClick = { this._onSignOut }
+                    type = { BUTTON_TYPES.SECONDARY } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the recorder follow me switch for cloud based recordings.
+     *
+     * @returns {React$Component}
+     */
+    _renderFollowMeRecorder() {
+        if (!this._shouldRenderFollowMeRecorder()) {
+            return null;
+        }
+
+        const { _dialogStyles, _styles: styles, t } = this.props;
+
+        return (
+            <View style = { styles.headerNested }>
+                <Text
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.optionLabel
+                    }}>
+                    { t('settings.followMeRecorder') }
+                </Text>
+                <Switch
+                    checked = { this._isFollowMeRecorderChecked() }
+                    disabled = { this._isFollowMeRecorderDisabled() }
+                    onChange = { this._onFollowMeRecorderChange }
+                    style = { styles.switch } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the transcription section with the inline language picker.
+     *
+     * @returns {React$Component}
+     */
+    _renderTranscriptionSection() {
+        if (!this._shouldRenderTranscriptionSection()) {
+            return null;
+        }
+
+        const {
+            _availableLanguages,
+            _dialogStyles,
+            _styles: styles,
+            onStartTranscription,
+            onStopTranscription,
+            selectedLanguage,
+            t,
+            transcriptionRunning
+        } = this.props;
+        const { showLanguageList, showTranscriptionOptions } = this.state;
+
+        return (
+            <View style = { styles.section }>
+                { this._renderSectionHeader({
+                    onButtonPress: transcriptionRunning ? onStopTranscription : onStartTranscription,
+                    running: transcriptionRunning,
+                    startLabelKey: 'dialog.startTranscription',
+                    stopLabelKey: 'dialog.stopTranscription',
+                    titleKey: 'recording.recordTranscription'
+                }) }
+                { this._renderAccordion({
+                    body: (
+                        <>
+                            <View style = { styles.headerNested }>
+                                <Text
+                                    style = {{
+                                        ..._dialogStyles.text,
+                                        ...styles.pickerLabel
+                                    }}>
+                                    { `${t('recording.transcriptionLanguage')}: ${t(selectedLanguage ?? '')}` }
+                                </Text>
+                                <Icon
+                                    ariaPressed = { showLanguageList }
+                                    onClick = { transcriptionRunning ? undefined : this._onToggleLanguageList }
+                                    role = 'button'
+                                    size = { 24 }
+                                    src = { showLanguageList ? IconArrowDown : IconArrowRight } />
+                            </View>
+                            { showLanguageList && !transcriptionRunning
+                                && _availableLanguages.map((language: string) => (
+                                    <LanguageListItem
+                                        key = { language }
+                                        lang = { language }
+                                        onLanguageSelected = { this._onLanguageSelected }
+                                        selected = { selectedLanguage === language } />
+                                )) }
+                        </>
+                    ),
+                    expanded: showTranscriptionOptions,
+                    onToggle: this._onToggleTranscriptionOptions,
+
+                    // Only rendered by _renderAccordion while collapsed — skip computing it while
+                    // the section is expanded.
+                    summary: showTranscriptionOptions ? '' : this._getTranscriptionSummary(),
+                    titleKey: 'recording.transcriptionOptions'
+                }) }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the footer buttons acting on both services at once. When only
+     * one service is running both buttons are shown: stop both stops the
+     * running one, start both starts the missing one.
+     *
+     * @returns {React$Component}
+     */
+    _renderFooter() {
+        if (!this._shouldRenderFooter()) {
+            return null;
+        }
+
+        const {
+            _styles: styles,
+            isValidating,
+            onStartBoth,
+            onStopBoth,
+            recordingRunning,
+            startRecordingDisabled,
+            transcriptionRunning
+        } = this.props;
+        const showStopBoth = recordingRunning || transcriptionRunning;
+        const showStartBoth = !recordingRunning || !transcriptionRunning;
+        const startBothDisabled = !recordingRunning && (startRecordingDisabled || isValidating);
+
+        return (
+            <View style = { styles.footer }>
+                { showStopBoth && (
+                    <Button
+                        accessibilityLabel = 'dialog.stopBoth'
+                        labelKey = 'dialog.stopBoth'
+                        onClick = { onStopBoth }
+                        style = { styles.footerButton }
+                        type = { BUTTON_TYPES.DESTRUCTIVE } />
+                ) }
+                { showStartBoth && (
+                    <Button
+                        accessibilityLabel = 'dialog.startBoth'
+                        disabled = { startBothDisabled }
+                        labelKey = 'dialog.startBoth'
+                        onClick = { onStartBoth }
+                        style = { styles.footerButton }
+                        type = { BUTTON_TYPES.PRIMARY } />
+                ) }
+            </View>
+        );
+    }
+}
+
+export default translate(connect(mapStateToProps)(StartRecordingDialogContent));

react/features/recording/components/Recording/native/StopRecordingDialog.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import ConfirmDialog from '../../../../base/dialog/components/native/ConfirmDialog';
+import { translate } from '../../../../base/i18n/functions';
+import AbstractStopRecordingDialog, {
+    IProps,
+    _mapStateToProps
+} from '../AbstractStopRecordingDialog';
+
+/**
+ * React Component for getting confirmation to stop a file recording session in
+ * progress.
+ *
+ * @augments Component
+ */
+class StopRecordingDialog extends AbstractStopRecordingDialog<IProps> {
+
+    /**
+     * Implements {@code Component#render}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <ConfirmDialog
+                descriptionKey = 'dialog.stopRecordingWarning'
+                onSubmit = { this._onSubmit } />
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StopRecordingDialog));

react/features/recording/components/Recording/styles.native.ts

@@ -0,0 +1,229 @@
+import ColorSchemeRegistry from '../../../base/color-scheme/ColorSchemeRegistry';
+import { schemeColor } from '../../../base/color-scheme/functions';
+import { BoxModel } from '../../../base/styles/components/styles/BoxModel';
+import BaseTheme from '../../../base/ui/components/BaseTheme.native';
+
+/* eslint-disable @typescript-eslint/no-var-requires */
+export const ICON_INFO = require('../../../../../images/icon-info.png');
+export const ICON_USERS = require('../../../../../images/icon-users.png');
+/* eslint-enable @typescript-eslint/no-var-requires */
+
+// XXX The "standard" {@code BoxModel.padding} has been deemed insufficient in
+// the special case(s) of the recording feature below.
+const _PADDING = BoxModel.padding * 1.5;
+
+const header = {
+    alignItems: 'center',
+    flex: 0,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    paddingBottom: _PADDING,
+    paddingTop: _PADDING
+};
+
+const recordingIcon = {
+    width: BaseTheme.spacing[4],
+    height: BaseTheme.spacing[4]
+};
+
+const title = {
+    flex: 1,
+    fontSize: 16,
+    fontWeight: 'bold',
+    textAlign: 'left',
+    paddingLeft: BoxModel.padding
+};
+
+export default {
+    /**
+     * Container for the StartRecordingDialog screen.
+     */
+    startRecodingContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        paddingTop: BaseTheme.spacing[3]
+    },
+
+    highlightButton: {
+        backgroundColor: BaseTheme.palette.ui09,
+        flexDirection: 'row',
+        alignItems: 'center',
+        marginLeft: BaseTheme.spacing[0],
+        marginBottom: BaseTheme.spacing[0],
+        marginRight: BaseTheme.spacing[1]
+    },
+    highlightButtonText: {
+        color: BaseTheme.palette.field01,
+        paddingLeft: BaseTheme.spacing[2],
+        ...BaseTheme.typography.labelBold
+    },
+    highlightDialog: {
+        paddingLeft: BaseTheme.spacing[3],
+        paddingRight: BaseTheme.spacing[3],
+        paddingTop: BaseTheme.spacing[4],
+        paddingBottom: BaseTheme.spacing[7]
+    },
+    highlightDialogHeading: {
+        ...BaseTheme.typography.heading5,
+        color: BaseTheme.palette.text01,
+        marginBottom: BaseTheme.spacing[3]
+    },
+    highlightDialogText: {
+        ...BaseTheme.typography.bodyLongRegularLarge,
+        color: BaseTheme.palette.text01,
+        marginBottom: BaseTheme.spacing[5]
+    },
+    highlightDialogButtonsContainer: {
+        display: 'flex',
+        flexDirection: 'column-reverse'
+    },
+    highlightDialogButtonsSpace: {
+        height: 16,
+        width: '100%'
+    },
+    learnMoreLink: {
+        color: BaseTheme.palette.link01,
+        fontWeight: 'bold'
+    }
+};
+
+/**
+ * Color schemed styles for the @{code StartRecordingDialogContent} component.
+ */
+ColorSchemeRegistry.register('StartRecordingDialogContent', {
+
+    container: {
+        flex: 0,
+        flexDirection: 'column'
+    },
+
+    footer: {
+        flexDirection: 'row',
+        justifyContent: 'flex-end',
+        marginHorizontal: BaseTheme.spacing[3],
+        paddingVertical: _PADDING
+    },
+
+    footerButton: {
+        marginLeft: BaseTheme.spacing[3]
+    },
+
+    header: {
+        ...header,
+        marginHorizontal: BaseTheme.spacing[3]
+    },
+
+    headerNested: {
+        ...header,
+        paddingBottom: 0
+    },
+
+    headerInfo: {
+        ...header,
+        backgroundColor: BaseTheme.palette.warning02,
+        marginBottom: BaseTheme.spacing[4],
+        paddingHorizontal: BaseTheme.spacing[3]
+    },
+
+    loggedIn: {
+        paddingHorizontal: _PADDING,
+        paddingVertical: BaseTheme.spacing[2]
+    },
+
+    loggedInInfo: {
+        flex: 1,
+        marginRight: BaseTheme.spacing[2]
+    },
+
+    optionLabel: {
+        flex: 1,
+        fontSize: 16,
+        marginRight: BaseTheme.spacing[2],
+        textAlign: 'left'
+    },
+
+    pickerLabel: {
+        color: BaseTheme.palette.text02,
+        flex: 1,
+        textAlign: 'left'
+    },
+
+    section: {
+        flex: 0,
+        flexDirection: 'column',
+        paddingVertical: BaseTheme.spacing[2]
+    },
+
+    accordion: {
+        backgroundColor: BaseTheme.palette.ui02,
+        borderColor: BaseTheme.palette.ui03,
+        borderRadius: 11,
+        borderWidth: 1,
+        marginHorizontal: BaseTheme.spacing[3],
+        marginTop: BaseTheme.spacing[2],
+        overflow: 'hidden'
+    },
+
+    accordionHeader: {
+        alignItems: 'center',
+        flexDirection: 'row',
+        padding: BaseTheme.spacing[2]
+    },
+
+    accordionText: {
+        flex: 1,
+        flexDirection: 'column',
+        marginRight: BaseTheme.spacing[2]
+    },
+
+    accordionTitle: {
+        color: BaseTheme.palette.text01,
+        fontWeight: '600'
+    },
+
+    accordionSummary: {
+        color: BaseTheme.palette.text02,
+        fontSize: 12
+    },
+
+    accordionChevronOpen: {
+        transform: [ { rotate: '180deg' } ]
+    },
+
+    accordionBody: {
+        paddingBottom: BaseTheme.spacing[2],
+        paddingHorizontal: BaseTheme.spacing[2]
+    },
+
+    recordingIcon: {
+        ...recordingIcon
+    },
+
+    recordingInfoIcon: {
+        ...recordingIcon
+    },
+
+    recordingText: {
+        color: BaseTheme.palette.text01
+    },
+
+    switch: {
+        color: BaseTheme.palette.ui10
+    },
+
+    title: {
+        ...title
+    },
+
+    titleInfo: {
+        ...title,
+        color: BaseTheme.palette.ui01
+    },
+
+    text: {
+        color: schemeColor('text')
+    }
+});

react/features/recording/components/Recording/styles.web.ts

@@ -0,0 +1,220 @@
+import { Theme } from '@mui/material';
+
+export const ICON_INFO = 'images/icon-info.png';
+
+export const ICON_USERS = 'images/icon-users.png';
+
+/**
+ * Creates the theme based styles of the recording & transcription dialog
+ * content.
+ *
+ * @param {Theme} theme - The current theme.
+ * @returns {Object}
+ */
+export const startRecordingDialogStyles = (theme: Theme) => {
+    return {
+        container: {
+            flex: 0,
+            flexDirection: 'column' as const
+        },
+
+        section: {
+            padding: `${theme.spacing(2)} 0`
+        },
+
+        // No overflow: hidden here — the dropdown menus must be able to
+        // overflow the accordion; the header carries its own border radius.
+        accordion: {
+            background: theme.palette.ui02,
+            border: `1px solid ${theme.palette.ui03}`,
+            borderRadius: '4px',
+            boxSizing: 'border-box' as const,
+            marginTop: theme.spacing(2),
+            width: '100%'
+        },
+
+        // Also resets the native button appearance — the header is a <button>
+        // so it is keyboard operable out of the box.
+        accordionHeader: {
+            alignItems: 'center',
+            appearance: 'none' as const,
+            background: 'none',
+            border: 0,
+            borderRadius: '4px',
+            boxSizing: 'border-box' as const,
+            color: theme.palette.text01,
+            cursor: 'pointer',
+            display: 'flex',
+            font: 'inherit',
+            gap: theme.spacing(2),
+            padding: '10px 12px',
+            textAlign: 'left' as const,
+            width: '100%',
+
+            '&:hover': {
+                background: theme.palette.ui03
+            },
+
+            '&:focus-visible': {
+                boxShadow: `0px 0px 0px 2px ${theme.palette.selectFocus} inset`,
+                outline: 0
+            }
+        },
+
+        accordionText: {
+            display: 'flex',
+            flex: 1,
+            flexDirection: 'column' as const,
+            gap: '2px',
+            minWidth: 0
+        },
+
+        accordionTitle: {
+            fontSize: '0.8125rem',
+            fontWeight: 600,
+            lineHeight: 1.2
+        },
+
+        accordionSummary: {
+            color: theme.palette.text02,
+            fontSize: '0.75rem',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap' as const
+        },
+
+        accordionChevron: {
+            color: theme.palette.text02,
+            display: 'flex',
+            marginLeft: 'auto',
+            transition: 'transform .16s'
+        },
+
+        accordionChevronOpen: {
+            transform: 'rotate(180deg)'
+        },
+
+        accordionBody: {
+            padding: '12px'
+        },
+
+        authorizationPanel: {
+            display: 'flex',
+            flexDirection: 'column' as const,
+            margin: `${theme.spacing(2)} 0 0`
+        },
+
+        loggedInPanel: {
+            padding: `${theme.spacing(2)} 0`
+        },
+
+        footer: {
+            display: 'flex',
+            flexDirection: 'row' as const,
+            justifyContent: 'flex-end',
+            padding: '12px 0 4px',
+
+            '& button:not(:first-child)': {
+                marginLeft: theme.spacing(2)
+            }
+        },
+
+        header: {
+            alignItems: 'center',
+            display: 'flex',
+            flex: 0,
+            flexDirection: 'row' as const,
+            justifyContent: 'space-between'
+        },
+
+        headerSpaceTop: {
+            marginTop: '10px'
+        },
+
+        title: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            fontSize: '0.875rem',
+            marginLeft: theme.spacing(3),
+            maxWidth: '70%'
+        },
+
+        titleNoMargin: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            fontSize: '0.875rem',
+            fontWeight: 600,
+            maxWidth: '70%'
+        },
+
+        optionLabel: {
+            alignItems: 'center',
+            display: 'inline-flex',
+            fontSize: '0.875rem',
+            maxWidth: '70%'
+        },
+
+        switch: {
+            marginLeft: 'auto'
+        },
+
+        iconContainer: {
+            alignItems: 'center',
+            display: 'inline-flex'
+        },
+
+        fileSharingIconContainer: {
+            backgroundColor: theme.palette.ui04,
+            borderRadius: '4px',
+            height: '40px',
+            justifyContent: 'center',
+            width: '42px'
+        },
+
+        fileSharingIcon: {
+            height: '18px',
+            objectFit: 'contain' as const,
+            width: '18px'
+        },
+
+        info: {
+            backgroundColor: theme.palette.warning02,
+            color: theme.palette.uiBackground,
+            display: 'inline-flex',
+            margin: '16px 0 8px',
+            width: '100%'
+        },
+
+        infoIcon: {
+            alignSelf: 'center',
+            height: '14px',
+            margin: '0 24px 0 16px',
+            objectFit: 'contain' as const,
+            width: '14px'
+        },
+
+        infoTitle: {
+            display: 'inline-flex',
+            fontSize: '0.875rem',
+            width: '290px'
+        },
+
+        localRecordingWarning: {
+            display: 'block',
+            fontSize: '0.875rem',
+            lineHeight: '1.25rem',
+            marginTop: theme.spacing(2),
+            padding: '8px 16px'
+        },
+
+        localRecordingWarningText: {
+            backgroundColor: theme.palette.ui03,
+            color: theme.palette.text01
+        },
+
+        localRecordingWarningNotification: {
+            backgroundColor: theme.palette.warning02,
+            color: theme.palette.uiBackground
+        }
+    };
+};

react/features/recording/components/Recording/web/DropdownSelect.tsx

@@ -0,0 +1,374 @@
+import React, { useCallback, useEffect, useRef, useState } from 'react';
+import { makeStyles } from 'tss-react/mui';
+
+import Icon from '../../../../base/icons/components/Icon';
+import { IconArrowDown } from '../../../../base/icons/svg';
+import ContextMenu from '../../../../base/ui/components/web/ContextMenu';
+import ContextMenuItem from '../../../../base/ui/components/web/ContextMenuItem';
+import ContextMenuItemGroup from '../../../../base/ui/components/web/ContextMenuItemGroup';
+
+interface IOption {
+    label: string;
+    value: string;
+}
+
+interface IProps {
+
+    /**
+     * Whether or not the dropdown is disabled.
+     */
+    disabled?: boolean;
+
+    /**
+     * Id of the trigger element.
+     */
+    id: string;
+
+    /**
+     * Label to be displayed above the dropdown.
+     */
+    label?: string;
+
+    /**
+     * Change handler, invoked with the value of the picked option.
+     */
+    onChange: (value: string) => void;
+
+    /**
+     * The options of the dropdown.
+     */
+    options: Array<IOption>;
+
+    /**
+     * The value of the selected option.
+     */
+    value: string | null;
+}
+
+interface IItemProps {
+    label: string;
+    onSelect: (value: string) => void;
+    selected: boolean;
+    value: string;
+}
+
+const useStyles = makeStyles()(theme => {
+    return {
+        container: {
+            display: 'flex',
+            flexDirection: 'column'
+        },
+
+        label: {
+            color: theme.palette.selectLabel,
+            ...theme.typography.bodyShortRegular,
+            marginBottom: theme.spacing(2)
+        },
+
+        dropdownContainer: {
+            position: 'relative'
+        },
+
+        trigger: {
+            alignItems: 'center',
+            backgroundColor: theme.palette.selectBackground,
+            border: 0,
+            borderRadius: `${theme.shape.borderRadius}px`,
+            color: theme.palette.selectText,
+            cursor: 'pointer',
+            display: 'flex',
+            justifyContent: 'space-between',
+            ...theme.typography.bodyShortRegular,
+            padding: '10px 16px',
+            textAlign: 'left',
+            width: '100%',
+
+            '&:focus': {
+                outline: 0,
+                boxShadow: `0px 0px 0px 2px ${theme.palette.selectFocus}`
+            },
+
+            '&:disabled': {
+                color: theme.palette.selectDisabled,
+                cursor: 'default'
+            }
+        },
+
+        triggerText: {
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap'
+        },
+
+        chevron: {
+            marginLeft: theme.spacing(2),
+            transition: 'transform .16s'
+        },
+
+        chevronOpen: {
+            transform: 'rotate(180deg)'
+        },
+
+        // The z-index must beat the Switch knob (zIndex 10) of the option rows
+        // rendered under the dropdown.
+        menuWrapper: {
+            left: 0,
+            position: 'absolute',
+            right: 0,
+            top: `calc(100% + ${theme.spacing(1)})`,
+            zIndex: 50
+        },
+
+        menuWrapperUp: {
+            bottom: `calc(100% + ${theme.spacing(1)})`,
+            top: 'auto'
+        },
+
+        // Neutralizes the ContextMenu default positioning (marginTop/right/top
+        // target the participants pane) so the menu sits in the wrapper. The
+        // :focus highlight makes the arrow key navigation visible — the items
+        // only style the .focus-visible polyfill class, which programmatic
+        // focus() calls never set.
+        menu: {
+            boxSizing: 'border-box',
+            margin: 0,
+            maxHeight: '250px',
+            overflowY: 'auto',
+            position: 'static',
+            right: 'auto',
+            width: '100%',
+
+            '& [role="menuitem"]:focus': {
+                backgroundColor: theme.palette.overflowMenuItemHover,
+                outline: 0
+            }
+        }
+    };
+});
+
+/**
+ * An entry of the dropdown options list.
+ *
+ * @returns {JSX.Element}
+ */
+const DropdownSelectItem = ({ label, onSelect, selected, value }: IItemProps) => {
+    const onClick = useCallback(() => onSelect(value), [ onSelect, value ]);
+
+    return (
+        <ContextMenuItem
+            accessibilityLabel = { label }
+            onClick = { onClick }
+            role = 'menuitem'
+            selected = { selected }
+            text = { label } />
+    );
+};
+
+/**
+ * A themed single choice dropdown: a select look-alike built out of
+ * ContextMenu so the options list matches the app theme (the native <select>
+ * popup cannot be styled). The menu is rendered right under the trigger,
+ * matching its width.
+ *
+ * @returns {JSX.Element}
+ */
+// eslint-disable-next-line react/no-multi-comp
+const DropdownSelect = ({ disabled, id, label, onChange, options, value }: IProps) => {
+    const { classes, cx } = useStyles();
+    const [ isOpen, setIsOpen ] = useState(false);
+    const [ openUp, setOpenUp ] = useState(false);
+    const containerRef = useRef<HTMLDivElement>(null);
+    const menuRef = useRef<HTMLDivElement>(null);
+    const triggerRef = useRef<HTMLButtonElement>(null);
+    const onToggle = useCallback(() => {
+        if (disabled) {
+            return;
+        }
+
+        // When opening, check whether the menu fits below the trigger within
+        // the closest scroll container (the dialog content) and open upwards
+        // otherwise — the menu would be clipped/scrolled out of view below.
+        if (!isOpen && containerRef.current) {
+            let clipBottom = window.innerHeight;
+            let parent = containerRef.current.parentElement;
+
+            while (parent) {
+                const { overflowY } = window.getComputedStyle(parent);
+
+                if (overflowY === 'auto' || overflowY === 'scroll') {
+                    clipBottom = parent.getBoundingClientRect().bottom;
+                    break;
+                }
+                parent = parent.parentElement;
+            }
+
+            const { bottom } = containerRef.current.getBoundingClientRect();
+            const menuHeight = Math.min(250, (options.length * 40) + 16) + 8;
+
+            setOpenUp(clipBottom - bottom < menuHeight);
+        }
+
+        setIsOpen(!isOpen);
+    }, [ disabled, isOpen, options.length ]);
+    const onSelect = useCallback((selectedValue: string) => {
+        onChange(selectedValue);
+        setIsOpen(false);
+        triggerRef.current?.focus();
+    }, [ onChange ]);
+
+    const getMenuItems = useCallback(
+        () => Array.from(menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]') ?? []), []);
+
+    // Opens the menu with the arrow keys per the menu button pattern; when it
+    // is already open, moves the focus into the item list.
+    const onTriggerKeyDown = useCallback((e: React.KeyboardEvent) => {
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp') {
+            return;
+        }
+
+        e.preventDefault();
+
+        if (isOpen) {
+            const items = getMenuItems();
+
+            (e.key === 'ArrowDown' ? items[0] : items[items.length - 1])?.focus();
+        } else {
+            onToggle();
+        }
+    }, [ getMenuItems, isOpen, onToggle ]);
+
+    // Arrow key navigation between the menu items, wrapping around the ends.
+    const onMenuKeyDown = useCallback((e: React.KeyboardEvent) => {
+        const items = getMenuItems();
+        const currentIndex = items.indexOf(document.activeElement as HTMLElement);
+
+        switch (e.key) {
+        case 'ArrowDown':
+            e.preventDefault();
+            items[(currentIndex + 1) % items.length]?.focus();
+            break;
+        case 'ArrowUp':
+            e.preventDefault();
+            items[currentIndex <= 0 ? items.length - 1 : currentIndex - 1]?.focus();
+            break;
+        case 'Home':
+            e.preventDefault();
+            items[0]?.focus();
+            break;
+        case 'End':
+            e.preventDefault();
+            items[items.length - 1]?.focus();
+            break;
+        case 'Tab':
+            setIsOpen(false);
+            break;
+        }
+    }, [ getMenuItems ]);
+
+    // Move focus to the selected item when the menu opens.
+    useEffect(() => {
+        if (isOpen) {
+            const selectedIndex = Math.max(0, options.findIndex(option => option.value === value));
+            const items = menuRef.current?.querySelectorAll<HTMLElement>('[role="menuitem"]');
+
+            items?.[Math.min(selectedIndex, items.length - 1)]?.focus();
+        }
+    }, [ isOpen ]);
+
+    useEffect(() => {
+        if (!isOpen) {
+            return;
+        }
+
+        const onOutsideClick = (e: MouseEvent) => {
+            if (!containerRef.current?.contains(e.target as Node)) {
+                setIsOpen(false);
+            }
+        };
+
+        // Capture phase so closing the menu does not also close the dialog.
+        const onEscKey = (e: KeyboardEvent) => {
+            if (e.key === 'Escape') {
+                e.stopPropagation();
+                setIsOpen(false);
+                triggerRef.current?.focus();
+            }
+        };
+
+        window.addEventListener('click', onOutsideClick);
+        window.addEventListener('keydown', onEscKey, true);
+
+        return () => {
+            window.removeEventListener('click', onOutsideClick);
+            window.removeEventListener('keydown', onEscKey, true);
+        };
+    }, [ isOpen ]);
+
+    // Fall back to the first option's label when the current value isn't among the options
+    // (e.g. it just became unavailable while the dialog stayed open) — otherwise the trigger
+    // would render blank instead of a usable service name.
+    const selectedLabel = options.find(option => option.value === value)?.label ?? options[0]?.label ?? '';
+
+    return (
+        <div className = { classes.container }>
+            { label && (
+                <label
+                    className = { classes.label }
+                    htmlFor = { id }>
+                    { label }
+                </label>
+            ) }
+            <div
+                className = { classes.dropdownContainer }
+                ref = { containerRef }>
+                <button
+                    aria-controls = { `${id}-menu` }
+                    aria-expanded = { isOpen }
+                    aria-haspopup = 'menu'
+                    className = { classes.trigger }
+                    disabled = { disabled }
+                    id = { id }
+                    onClick = { onToggle }
+                    onKeyDown = { onTriggerKeyDown }
+                    ref = { triggerRef }
+                    type = 'button'>
+                    <span className = { classes.triggerText }>
+                        { selectedLabel }
+                    </span>
+                    <Icon
+                        className = { cx(classes.chevron, isOpen && classes.chevronOpen) }
+                        size = { 18 }
+                        src = { IconArrowDown } />
+                </button>
+                { isOpen && (
+                    // The arrow key interactions of the menu are handled on the
+                    // wrapper; the items themselves take care of Enter/Space.
+                    <div
+                        className = { cx(classes.menuWrapper, openUp && classes.menuWrapperUp) }
+                        onKeyDown = { onMenuKeyDown }
+                        ref = { menuRef }>
+                        <ContextMenu
+                            accessibilityLabel = { label }
+                            className = { classes.menu }
+                            hidden = { false }
+                            id = { `${id}-menu` }
+                            role = 'menu'>
+                            <ContextMenuItemGroup>
+                                { options.map(option => (
+                                    <DropdownSelectItem
+                                        key = { option.value }
+                                        label = { option.label }
+                                        onSelect = { onSelect }
+                                        selected = { option.value === value }
+                                        value = { option.value } />
+                                )) }
+                            </ContextMenuItemGroup>
+                        </ContextMenu>
+                    </div>
+                ) }
+            </div>
+        </div>
+    );
+};
+
+export default DropdownSelect;

react/features/recording/components/Recording/web/HighlightButton.tsx

@@ -0,0 +1,225 @@
+import { Theme } from '@mui/material';
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
+
+import { openDialog } from '../../../../base/dialog/actions';
+import { translate } from '../../../../base/i18n/functions';
+import { IconHighlight } from '../../../../base/icons/svg';
+import { MEET_FEATURES } from '../../../../base/jwt/constants';
+import Label from '../../../../base/label/components/web/Label';
+import Tooltip from '../../../../base/tooltip/components/Tooltip';
+import BaseTheme from '../../../../base/ui/components/BaseTheme.web';
+import { maybeShowPremiumFeatureDialog } from '../../../../jaas/actions';
+import RecordingTranscriptionDialog from '../../Recording/web/RecordingTranscriptionDialog';
+import AbstractHighlightButton, {
+    IProps as AbstractProps,
+    _abstractMapStateToProps
+} from '../AbstractHighlightButton';
+
+interface IProps extends AbstractProps {
+    _disabled: boolean;
+
+    /**
+     * The message to show within the label's tooltip.
+     */
+    _tooltipKey: string;
+
+    /**
+     * Flag controlling visibility of the component.
+     */
+    _visible: boolean;
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
+}
+
+/**
+ * The type of the React {@code Component} state of {@link HighlightButton}.
+ */
+interface IState {
+
+    /**
+     * Whether the notification which prompts for starting recording is open is not.
+     */
+    isNotificationOpen: boolean;
+}
+
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = (theme: Theme) => {
+    return {
+        container: {
+            position: 'relative' as const
+        },
+        disabled: {
+            background: theme.palette.recordingHighlightButtonDisabled
+        },
+        regular: {
+            background: theme.palette.recordingHighlightButton
+        },
+        highlightNotification: {
+            backgroundColor: theme.palette.recordingHighlightButton,
+            borderRadius: '6px',
+            boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
+            boxSizing: 'border-box' as const,
+            color: theme.palette.recordingNotificationText,
+            fontSize: '0.875rem',
+            fontWeight: 400,
+            left: '4px',
+            padding: '16px',
+            position: 'absolute' as const,
+            top: '32px',
+            width: 320
+        },
+        highlightNotificationButton: {
+            color: theme.palette.recordingNotificationAction,
+            cursor: 'pointer',
+            fontWeight: 600,
+            marginTop: '8px'
+        }
+    };
+};
+
+/**
+ * React {@code Component} responsible for displaying an action that
+ * allows users to highlight a meeting moment.
+ */
+export class HighlightButton extends AbstractHighlightButton<IProps, IState> {
+    /**
+     * Initializes a new HighlightButton instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            isNotificationOpen: false
+        };
+
+        this._onOpenDialog = this._onOpenDialog.bind(this);
+        this._onWindowClickListener = this._onWindowClickListener.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount()}.
+     *
+     * @inheritdoc
+     */
+    override componentDidMount() {
+        window.addEventListener('click', this._onWindowClickListener);
+    }
+
+    /**
+     * Implements React's {@link Component#componentWillUnmount()}.
+     *
+     * @inheritdoc
+     */
+    override componentWillUnmount() {
+        window.removeEventListener('click', this._onWindowClickListener);
+    }
+
+    /**
+    * Handles clicking / pressing the start recording button.
+    *
+    * @returns {void}
+    */
+    _onOpenDialog() {
+        const { dispatch } = this.props;
+        const dialogShown = dispatch(maybeShowPremiumFeatureDialog(MEET_FEATURES.RECORDING));
+
+        if (!dialogShown) {
+            dispatch(openDialog('RecordingTranscriptionDialog', RecordingTranscriptionDialog));
+        }
+    }
+
+    /**
+    * Handles clicking / pressing the highlight button.
+    *
+    * @override
+    * @param {Event} e - The click event.
+    * @returns {void}
+    */
+    override _onClick(e?: React.MouseEvent) {
+        e?.stopPropagation();
+
+        const { _disabled } = this.props;
+
+        if (_disabled) {
+            this.setState({
+                isNotificationOpen: true
+            });
+        } else {
+            super._onClick();
+        }
+    }
+
+    /**
+     * Window click event listener.
+     *
+     * @returns {void}
+     */
+    _onWindowClickListener() {
+        this.setState({
+            isNotificationOpen: false
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const {
+            _disabled,
+            _visible,
+            t
+        } = this.props;
+        const classes = withStyles.getClasses(this.props);
+
+        if (!_visible) {
+            return null;
+        }
+
+        const className = _disabled ? classes.disabled : classes.regular;
+        const tooltipKey = _disabled ? 'recording.highlightMomentDisabled' : 'recording.highlightMoment';
+
+        return (
+            <div className = { classes.container }>
+                <Tooltip
+                    content = { t(tooltipKey) }
+                    position = { 'bottom' }>
+                    <Label
+                        className = { className }
+                        icon = { IconHighlight }
+                        iconColor = { _disabled ? BaseTheme.palette.recordingHighlightButtonIconDisabled : BaseTheme.palette.recordingHighlightButtonIcon }
+                        id = 'highlightMeetingLabel'
+                        onClick = { this._onClick } />
+                </Tooltip>
+                {this.state.isNotificationOpen && (
+                    <div className = { classes.highlightNotification }>
+                        {t('recording.highlightMomentDisabled')}
+                        <div
+                            className = { classes.highlightNotificationButton }
+                            onClick = { this._onOpenDialog }>
+                            {t('localRecording.start')}
+                        </div>
+                    </div>
+                )}
+            </div>
+        );
+    }
+}
+
+export default withStyles(translate(connect(_abstractMapStateToProps)(HighlightButton)), styles);

react/features/recording/components/Recording/web/RecordButton.ts

@@ -0,0 +1,59 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { openDialog } from '../../../../base/dialog/actions';
+import { translate } from '../../../../base/i18n/functions';
+import { isRecordingRunning } from '../../../functions';
+import AbstractRecordButton, {
+    IProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractRecordButton';
+
+import RecordingTranscriptionDialog from './RecordingTranscriptionDialog';
+
+
+/**
+ * Button for opening the unified recording & transcription management dialog.
+ */
+class RecordingButton extends AbstractRecordButton<IProps> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _onHandleClick() {
+        const { dispatch } = this.props;
+
+        dispatch(openDialog('RecordingTranscriptionDialog', RecordingTranscriptionDialog));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code RecordButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _fileRecordingsDisabledTooltipKey: ?string,
+ *     _isRecordingRunning: boolean,
+ *     _disabled: boolean,
+ *     visible: boolean
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    const abstractProps = _abstractMapStateToProps(state);
+    const { toolbarButtons } = state['features/toolbox'];
+    const visible = Boolean(toolbarButtons?.includes('recording') && abstractProps.visible);
+
+    return {
+        ...abstractProps,
+        _isRecordingRunning: isRecordingRunning(state),
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecordingButton));

react/features/recording/components/Recording/web/RecordingConsentDialog.tsx

@@ -0,0 +1,67 @@
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import { grantRecordingConsent, grantRecordingConsentAndUnmute } from '../../../actions.web';
+
+
+/**
+ * Component that renders the dialog for explicit consent for recordings.
+ * The prejoin mute state is read from Redux by the action creator.
+ *
+ * @returns {JSX.Element}
+ */
+export default function RecordingConsentDialog() {
+    const { t } = useTranslation();
+    const dispatch = useDispatch();
+    const { recordings } = useSelector((state: IReduxState) => state['features/base/config']);
+    const { consentLearnMoreLink } = recordings ?? {};
+
+    useEffect(() => {
+        APP.API.notifyRecordingConsentDialogOpen(true);
+
+        return () => {
+            APP.API.notifyRecordingConsentDialogOpen(false);
+        };
+    }, []);
+
+    const consent = useCallback(() => {
+        dispatch(grantRecordingConsent());
+    }, []);
+
+    const consentAndUnmute = useCallback(() => {
+        dispatch(grantRecordingConsentAndUnmute());
+    }, []);
+
+    return (
+        <Dialog
+            back = {{
+                hidden: false,
+                onClick: consentAndUnmute,
+                translationKey: 'dialog.UnderstandAndUnmute'
+            }}
+            cancel = {{ hidden: true }}
+            disableBackdropClose = { true }
+            disableEscape = { true }
+            hideCloseButton = { true }
+            ok = {{ translationKey: 'dialog.Understand' }}
+            onSubmit = { consent }
+            titleKey = 'dialog.recordingInProgressTitle'>
+            { t('dialog.recordingInProgressDescription') }
+            { consentLearnMoreLink && (
+                <>
+                    {' '}
+                    <a
+                        href = { consentLearnMoreLink }
+                        rel = 'noopener noreferrer'
+                        target = '_blank'>
+                        { t('dialog.learnMore') }
+                    </a>
+                    {'.'}
+                </>
+            ) }
+        </Dialog>
+    );
+}

react/features/recording/components/Recording/web/RecordingTranscriptionDialog.tsx

@@ -0,0 +1,125 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { hideDialog } from '../../../../base/dialog/actions';
+import { translate } from '../../../../base/i18n/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture/actions';
+import { isScreenshotCaptureEnabled } from '../../../../screenshot-capture/functions';
+import AbstractStartRecordingDialog, {
+    mapStateToProps as abstractMapStateToProps
+} from '../AbstractStartRecordingDialog';
+
+import StartRecordingDialogContent from './StartRecordingDialogContent';
+
+
+/**
+ * React Component for the recording & transcription dialog. Each section
+ * (audio & video recording, transcription) has its own start/stop button
+ * which applies the action immediately and closes the dialog.
+ *
+ * @augments Component
+ */
+class RecordingTranscriptionDialog extends AbstractStartRecordingDialog {
+
+    /**
+     * Dismisses the dialog.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override _dismiss() {
+        this.props.dispatch(hideDialog());
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const {
+            isTokenValid,
+            isValidating,
+            localRecordingOnlySelf,
+            selectedLanguage,
+            selectedRecordingService,
+            sharingEnabled,
+            spaceLeft,
+            userName
+        } = this.state;
+        const {
+            _canTranscribe,
+            _fileRecordingsServiceEnabled,
+            _fileRecordingsServiceSharingEnabled,
+            _recordingRunning,
+            _transcriptionRunning,
+            recordAudioAndVideo
+        } = this.props;
+
+        return (
+            <Dialog
+                cancel = {{ hidden: true }}
+                disableEnter = { true }
+                ok = {{ hidden: true }}
+                titleKey = { _canTranscribe ? 'dialog.recordAndTranscribe' : 'toolbar.record' }>
+                <StartRecordingDialogContent
+                    fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
+                    fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }
+                    integrationsEnabled = { this._areIntegrationsEnabled() }
+                    isTokenValid = { isTokenValid }
+                    isValidating = { isValidating }
+                    localRecordingOnlySelf = { localRecordingOnlySelf }
+                    onLocalRecordingSelfChange = { this._onLocalRecordingSelfChange }
+                    onRecordingServiceChange = { this._onSelectedRecordingServiceChanged }
+                    onSharingSettingChanged = { this._onSharingSettingChanged }
+                    onStartBoth = { this._onStartBothPress }
+                    onStartRecording = { this._onStartRecordingPress }
+                    onStartTranscription = { this._onStartTranscriptionPress }
+                    onStopBoth = { this._onStopBothPress }
+                    onStopRecording = { this._onStopRecordingPress }
+                    onStopTranscription = { this._onStopTranscriptionPress }
+                    onSubtitlesLanguageChange = { this._onSubtitlesLanguageChanged }
+                    recordAudioAndVideo = { recordAudioAndVideo }
+                    recordingRunning = { Boolean(_recordingRunning) }
+                    selectedLanguage = { selectedLanguage }
+                    selectedRecordingService = { selectedRecordingService }
+                    sharingSetting = { sharingEnabled }
+                    spaceLeft = { spaceLeft }
+                    startRecordingDisabled = { this._isStartRecordingDisabled() }
+                    transcriptionRunning = { Boolean(_transcriptionRunning) }
+                    userName = { userName } />
+            </Dialog>
+        );
+    }
+
+    /**
+     * Toggles screenshot capture feature.
+     *
+     * @returns {void}
+     */
+    override _toggleScreenshotCapture() {
+        const { dispatch, _screenshotCaptureEnabled } = this.props;
+
+        if (_screenshotCaptureEnabled) {
+            dispatch(toggleScreenshotCaptureSummary(true));
+        }
+    }
+}
+
+/**
+ * Maps redux state to component props.
+ *
+ * @param {Object} state - Redux state.
+ * @param {any} ownProps - Component's own props.
+ * @returns {Object}
+ */
+function mapStateToProps(state: IReduxState, ownProps: any) {
+    return {
+        ...abstractMapStateToProps(state, ownProps),
+        _screenshotCaptureEnabled: isScreenshotCaptureEnabled(state, true, false)
+    };
+}
+
+export default translate(connect(mapStateToProps)(RecordingTranscriptionDialog));

react/features/recording/components/Recording/web/StartRecordingDialogContent.tsx

@@ -0,0 +1,548 @@
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
+
+import { translate } from '../../../../base/i18n/functions';
+import Icon from '../../../../base/icons/components/Icon';
+import { IconArrowDown } from '../../../../base/icons/svg';
+import Container from '../../../../base/react/components/web/Container';
+import Image from '../../../../base/react/components/web/Image';
+import LoadingIndicator from '../../../../base/react/components/web/LoadingIndicator';
+import Text from '../../../../base/react/components/web/Text';
+import Button from '../../../../base/ui/components/web/Button';
+import Switch from '../../../../base/ui/components/web/Switch';
+import { BUTTON_TYPES } from '../../../../base/ui/constants.web';
+import { RECORDING_TYPES } from '../../../constants';
+import { getRecordingDurationEstimation } from '../../../functions';
+import AbstractStartRecordingDialogContent, { mapStateToProps } from '../AbstractStartRecordingDialogContent';
+import {
+    ICON_INFO,
+    ICON_USERS,
+    startRecordingDialogStyles
+} from '../styles.web';
+
+import DropdownSelect from './DropdownSelect';
+
+const EMPTY_FUNCTION = () => {
+    // empty
+};
+
+/**
+ * The recording & transcription dialog content for the web application.
+ */
+class StartRecordingDialogContent extends AbstractStartRecordingDialogContent {
+    override render() {
+        const classes = this.props.classes ?? {};
+
+        return (
+            <Container className = { classes.container }>
+                { this._renderRecordingSection() }
+                { this._renderTranscriptionSection() }
+                { this._renderFooter() }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the accordion wrapping a section's options: a header with the
+     * options title, a one line summary of the current choices and a chevron,
+     * followed by the options themselves when expanded.
+     *
+     * @param {Object} options - Rendering options.
+     * @returns {React$Component}
+     */
+    _renderAccordion({ body, expanded, id, onToggle, summary, titleKey }: {
+        body: React.ReactNode;
+        expanded: boolean;
+        id: string;
+        onToggle: () => void;
+        summary: string;
+        titleKey: string;
+    }) {
+        const { t } = this.props;
+        const classes = this.props.classes ?? {};
+
+        return (
+            <Container className = { classes.accordion }>
+                <button
+                    aria-controls = { `${id}-content` }
+                    aria-expanded = { expanded }
+                    className = { classes.accordionHeader }
+                    id = { id }
+                    onClick = { onToggle }
+                    type = 'button'>
+                    <Container className = { classes.accordionText }>
+                        <span className = { classes.accordionTitle }>
+                            { t(titleKey) }
+                        </span>
+                        { !expanded && (
+                            <span className = { classes.accordionSummary }>
+                                { summary }
+                            </span>
+                        ) }
+                    </Container>
+                    <Icon
+                        className = { `${classes.accordionChevron} ${expanded ? classes.accordionChevronOpen : ''}` }
+                        size = { 18 }
+                        src = { IconArrowDown } />
+                </button>
+                { expanded && (
+                    <div
+                        className = { classes.accordionBody }
+                        id = { `${id}-content` }>
+                        { body }
+                    </div>
+                ) }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the audio & video recording section: the action row with the
+     * start/stop button and the options accordion holding the storage service
+     * combobox and the selected service's options.
+     *
+     * @returns {React$Component}
+     */
+    _renderRecordingSection() {
+        const recordingServiceOptions = this._getRecordingServiceOptions();
+
+        if (!this._shouldRenderRecordingSection(recordingServiceOptions)) {
+            return null;
+        }
+
+        const {
+            isValidating,
+            onStartRecording,
+            onStopRecording,
+            recordingRunning,
+            selectedRecordingService,
+            startRecordingDisabled,
+            t
+        } = this.props;
+        const { showRecordingOptions } = this.state;
+        const classes = this.props.classes ?? {};
+        const serviceOptions = recordingServiceOptions.map(service => {
+            return {
+                label: t(this._getServiceLabelKey(service)),
+                value: service
+            };
+        });
+
+        return (
+            <Container className = { classes.section }>
+                <Container className = { classes.header }>
+                    <label className = { classes.titleNoMargin }>
+                        { t('recording.recordAudioAndVideo') }
+                    </label>
+                    <Container className = { classes.switch }>
+                        { recordingRunning ? (
+                            <Button
+                                accessibilityLabel = { t('dialog.stopRecording') }
+                                labelKey = 'dialog.stop'
+                                onClick = { onStopRecording }
+                                testId = 'recordingDialog.stopRecording'
+                                type = { BUTTON_TYPES.DESTRUCTIVE } />
+                        ) : (
+                            <Button
+                                accessibilityLabel = { t('dialog.startRecording') }
+                                disabled = { startRecordingDisabled || isValidating }
+                                labelKey = 'dialog.start'
+                                onClick = { onStartRecording }
+                                testId = 'recordingDialog.startRecording'
+                                type = { BUTTON_TYPES.PRIMARY } />
+                        ) }
+                    </Container>
+                </Container>
+                { this._renderAccordion({
+                    body: (
+                        <>
+                            <DropdownSelect
+                                disabled = { recordingRunning || isValidating }
+                                id = 'recording-service-select'
+                                label = { t('recording.storageLocation') }
+                                onChange = { this._onRecordingServiceChange }
+                                options = { serviceOptions }
+                                value = { selectedRecordingService ?? '' } />
+                            { selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE
+                                && this._renderJitsiServiceOptions() }
+                            { selectedRecordingService === RECORDING_TYPES.DROPBOX
+                                && this._renderDropboxOptions() }
+                            { selectedRecordingService === RECORDING_TYPES.LOCAL
+                                && this._renderLocalRecordingOptions() }
+                            { this._renderFollowMeRecorder() }
+                        </>
+                    ),
+                    expanded: showRecordingOptions,
+                    id: 'recording-options',
+                    onToggle: this._onToggleRecordingOptions,
+
+                    // Only rendered by _renderAccordion while collapsed — skip computing it
+                    // (and its nested t() calls) while the section is expanded.
+                    summary: showRecordingOptions ? '' : this._getRecordingSummary(),
+                    titleKey: 'recording.recordingOptions'
+                }) }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the options of the Jitsi recording service: the recording link
+     * sharing switch and the vpaas storage warning.
+     *
+     * @returns {React$Component}
+     */
+    _renderJitsiServiceOptions() {
+        const {
+            isValidating,
+            onSharingSettingChanged,
+            recordingRunning,
+            sharingSetting,
+            t
+        } = this.props;
+        const classes = this.props.classes ?? {};
+
+        return (
+            <>
+                { this._shouldRenderFileSharingContent() && (
+                    <Container
+                        className = { `${classes.header} ${classes.headerSpaceTop}` }
+                        key = 'fileSharingSetting'>
+                        <Container className = { `${classes.iconContainer} ${classes.fileSharingIconContainer}` }>
+                            <Image
+                                alt = ''
+                                className = { classes.fileSharingIcon }
+                                src = { ICON_USERS } />
+                        </Container>
+                        <label
+                            className = { classes.title }
+                            htmlFor = 'recording-switch-share'>
+                            { t('recording.fileSharingdescription') }
+                        </label>
+                        <Switch
+                            checked = { sharingSetting }
+                            className = { classes.switch }
+                            disabled = { isValidating || recordingRunning }
+                            id = 'recording-switch-share'
+                            onChange = { onSharingSettingChanged } />
+                    </Container>
+                ) }
+                { this._renderUploadToTheCloudInfo() }
+            </>
+        );
+    }
+
+    /**
+     * Renders the info in case recording is uploaded to the cloud.
+     *
+     * @returns {React$Component}
+     */
+    _renderUploadToTheCloudInfo() {
+        const {
+            _hideStorageWarning,
+            isVpaas,
+            t
+        } = this.props;
+
+        if (!isVpaas || _hideStorageWarning) {
+            return null;
+        }
+
+        const classes = this.props.classes ?? {};
+
+        return (
+            <Container
+                className = { classes.info }
+                key = 'cloudUploadInfo'>
+                <Image
+                    alt = ''
+                    className = { classes.infoIcon }
+                    src = { ICON_INFO } />
+                <Text className = { classes.infoTitle }>
+                    { t('recording.serviceDescriptionCloudInfo') }
+                </Text>
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the Dropbox account area: sign in button, or account info plus
+     * sign out button once authorized.
+     *
+     * @returns {React$Component}
+     */
+    _renderDropboxOptions() {
+        const {
+            isTokenValid,
+            isValidating,
+            spaceLeft,
+            t,
+            userName
+        } = this.props;
+        const classes = this.props.classes ?? {};
+
+        if (isValidating) {
+            return (
+                <Container className = { classes.authorizationPanel }>
+                    <LoadingIndicator size = 'small' />
+                </Container>
+            );
+        }
+
+        if (!isTokenValid) {
+            return (
+                <Container className = { `${classes.header} ${classes.headerSpaceTop}` }>
+                    <span className = { classes.optionLabel }>
+                        { t('recording.dropboxSignInPrompt') }
+                    </span>
+                    <Container className = { classes.switch }>
+                        <Button
+                            accessibilityLabel = { t('recording.signIn') }
+                            labelKey = 'recording.signIn'
+                            onClick = { this._onSignIn }
+                            type = { BUTTON_TYPES.PRIMARY } />
+                    </Container>
+                </Container>
+            );
+        }
+
+        const duration = getRecordingDurationEstimation(spaceLeft);
+
+        return (
+            <Container className = { `${classes.header} ${classes.headerSpaceTop}` }>
+                <Container className = { classes.loggedInPanel }>
+                    <Container>
+                        <Text>
+                            { t('recording.loggedIn', { userName }) }
+                        </Text>
+                    </Container>
+                    <Container>
+                        <Text>
+                            {
+                                t('recording.availableSpace', {
+                                    spaceLeft,
+                                    duration
+                                })
+                            }
+                        </Text>
+                    </Container>
+                </Container>
+                <Container className = { classes.switch }>
+                    <Button
+                        accessibilityLabel = { t('recording.signOut') }
+                        labelKey = 'recording.signOut'
+                        onClick = { this._onSignOut }
+                        type = { BUTTON_TYPES.SECONDARY } />
+                </Container>
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the options for local recordings.
+     *
+     * @returns {React$Component}
+     */
+    _renderLocalRecordingOptions() {
+        const {
+            _localRecordingNoNotification,
+            _localRecordingSelfEnabled,
+            isValidating,
+            localRecordingOnlySelf,
+            onLocalRecordingSelfChange,
+            recordingRunning,
+            t
+        } = this.props;
+        const classes = this.props.classes ?? {};
+
+        return (
+            <>
+                { _localRecordingSelfEnabled && (
+                    <Container className = { `${classes.header} ${classes.headerSpaceTop}` }>
+                        <Container className = { `${classes.iconContainer} ${classes.fileSharingIconContainer}` }>
+                            <Image
+                                alt = ''
+                                className = { classes.fileSharingIcon }
+                                src = { ICON_USERS } />
+                        </Container>
+                        <label
+                            className = { classes.title }
+                            htmlFor = 'recording-switch-myself'>
+                            { t('recording.onlyRecordSelf') }
+                        </label>
+                        <Switch
+                            checked = { Boolean(localRecordingOnlySelf) }
+                            className = { classes.switch }
+                            disabled = { isValidating || recordingRunning }
+                            id = 'recording-switch-myself'
+                            onChange = { onLocalRecordingSelfChange ?? EMPTY_FUNCTION } />
+                    </Container>
+                ) }
+                <Text className = { `${classes.localRecordingWarning} ${classes.localRecordingWarningText}` }>
+                    { t('recording.localRecordingWarning') }
+                </Text>
+                { _localRecordingNoNotification && !localRecordingOnlySelf
+                    && <Text className = { `${classes.localRecordingWarning} ${classes.localRecordingWarningNotification}` }>
+                        { t('recording.localRecordingNoNotificationWarning') }
+                    </Text>
+                }
+            </>
+        );
+    }
+
+    /**
+     * Renders the recorder follow me switch for cloud based recordings.
+     *
+     * @returns {React$Component}
+     */
+    _renderFollowMeRecorder() {
+        if (!this._shouldRenderFollowMeRecorder()) {
+            return null;
+        }
+
+        const { t } = this.props;
+        const classes = this.props.classes ?? {};
+
+        return (
+            <Container className = { `${classes.header} ${classes.headerSpaceTop}` }>
+                <label
+                    className = { classes.optionLabel }
+                    htmlFor = 'recording-switch-follow-me'>
+                    { t('settings.followMeRecorder') }
+                </label>
+                <Switch
+                    checked = { this._isFollowMeRecorderChecked() }
+                    className = { classes.switch }
+                    disabled = { this._isFollowMeRecorderDisabled() }
+                    id = 'recording-switch-follow-me'
+                    onChange = { this._onFollowMeRecorderChange } />
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the transcription section: header with the start/stop button
+     * and a collapsible area holding the language combobox.
+     *
+     * @returns {React$Component}
+     */
+    _renderTranscriptionSection() {
+        if (!this._shouldRenderTranscriptionSection()) {
+            return null;
+        }
+
+        const {
+            _availableLanguages,
+            onStartTranscription,
+            onStopTranscription,
+            selectedLanguage,
+            t,
+            transcriptionRunning
+        } = this.props;
+        const { showTranscriptionOptions } = this.state;
+        const classes = this.props.classes ?? {};
+        const languageOptions = _availableLanguages.map((lang: string) => {
+            return {
+                label: t(lang),
+                value: lang
+            };
+        });
+
+        return (
+            <Container className = { classes.section }>
+                <Container className = { classes.header }>
+                    <label className = { classes.titleNoMargin }>
+                        { t('recording.recordTranscription') }
+                    </label>
+                    <Container className = { classes.switch }>
+                        { transcriptionRunning ? (
+                            <Button
+                                accessibilityLabel = { t('dialog.stopTranscription') }
+                                labelKey = 'dialog.stop'
+                                onClick = { onStopTranscription }
+                                testId = 'recordingDialog.stopTranscription'
+                                type = { BUTTON_TYPES.DESTRUCTIVE } />
+                        ) : (
+                            <Button
+                                accessibilityLabel = { t('dialog.startTranscription') }
+                                labelKey = 'dialog.start'
+                                onClick = { onStartTranscription }
+                                testId = 'recordingDialog.startTranscription'
+                                type = { BUTTON_TYPES.PRIMARY } />
+                        ) }
+                    </Container>
+                </Container>
+                { this._renderAccordion({
+                    body: (
+                        <DropdownSelect
+                            disabled = { transcriptionRunning }
+                            id = 'transcription-language-select'
+                            label = { t('recording.transcriptionLanguage') }
+                            onChange = { this.props.onSubtitlesLanguageChange }
+                            options = { languageOptions }
+                            value = { selectedLanguage ?? '' } />
+                    ),
+                    expanded: showTranscriptionOptions,
+                    id: 'transcription-options',
+                    onToggle: this._onToggleTranscriptionOptions,
+
+                    // Only rendered by _renderAccordion while collapsed — skip computing it while
+                    // the section is expanded.
+                    summary: showTranscriptionOptions ? '' : this._getTranscriptionSummary(),
+                    titleKey: 'recording.transcriptionOptions'
+                }) }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the footer buttons acting on both services at once. When only
+     * one service is running both buttons are shown: stop both stops the
+     * running one, start both starts the missing one.
+     *
+     * @returns {React$Component}
+     */
+    _renderFooter() {
+        if (!this._shouldRenderFooter()) {
+            return null;
+        }
+
+        const {
+            isValidating,
+            onStartBoth,
+            onStopBoth,
+            recordingRunning,
+            startRecordingDisabled,
+            t,
+            transcriptionRunning
+        } = this.props;
+        const showStopBoth = recordingRunning || transcriptionRunning;
+        const showStartBoth = !recordingRunning || !transcriptionRunning;
+        const startBothDisabled = !recordingRunning && (startRecordingDisabled || isValidating);
+        const classes = this.props.classes ?? {};
+
+        return (
+            <Container className = { classes.footer }>
+                { showStopBoth && (
+                    <Button
+                        accessibilityLabel = { t('dialog.stopBoth') }
+                        labelKey = 'dialog.stopBoth'
+                        onClick = { onStopBoth }
+                        testId = 'recordingDialog.stopBoth'
+                        type = { BUTTON_TYPES.DESTRUCTIVE } />
+                ) }
+                { showStartBoth && (
+                    <Button
+                        accessibilityLabel = { t('dialog.startBoth') }
+                        disabled = { startBothDisabled }
+                        labelKey = 'dialog.startBoth'
+                        onClick = { onStartBoth }
+                        testId = 'recordingDialog.startBoth'
+                        type = { BUTTON_TYPES.PRIMARY } />
+                ) }
+            </Container>
+        );
+    }
+}
+
+export default withStyles(translate(connect(mapStateToProps)(StartRecordingDialogContent)), startRecordingDialogStyles);

react/features/recording/components/Recording/web/StopRecordingDialog.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import { toggleScreenshotCaptureSummary } from '../../../../screenshot-capture/actions';
+import AbstractStopRecordingDialog, {
+    IProps,
+    _mapStateToProps
+} from '../AbstractStopRecordingDialog';
+
+/**
+ * React Component for getting confirmation to stop a file recording session in
+ * progress.
+ *
+ * @augments Component
+ */
+class StopRecordingDialog extends AbstractStopRecordingDialog<IProps> {
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { localRecordingVideoStop, stopMode, t } = this.props;
+
+        const titleKey = stopMode === 'transcription' ? 'dialog.stopTranscription' : 'dialog.recording';
+        const bodyKey = stopMode === 'transcription'
+            ? 'dialog.stopTranscriptionWarning'
+            : (localRecordingVideoStop ? 'recording.localRecordingVideoStop' : 'dialog.stopRecordingWarning');
+
+        return (
+            <Dialog
+                ok = {{ translationKey: 'dialog.confirm' }}
+                onSubmit = { this._onSubmit }
+                titleKey = { titleKey }>
+                { t(bodyKey) }
+            </Dialog>
+        );
+    }
+
+    /**
+     * Toggles screenshot capture.
+     *
+     * @returns {void}
+     */
+    override _toggleScreenshotCapture() {
+        this.props.dispatch(toggleScreenshotCaptureSummary(false));
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StopRecordingDialog));