init

react/features/recording/actionTypes.ts

@@ -0,0 +1,104 @@
+/**
+ * The type of Redux action which clears all the data of every sessions.
+ *
+ * {
+ *     type: CLEAR_RECORDING_SESSIONS
+ * }
+ * @public
+ */
+export const CLEAR_RECORDING_SESSIONS = 'CLEAR_RECORDING_SESSIONS';
+
+/**
+ * The type of Redux action which marks a session ID as consent requested.
+ *
+ * {
+ *     type: MARK_CONSENT_REQUESTED,
+ *     sessionId: string
+ * }
+ */
+export const MARK_CONSENT_REQUESTED = 'MARK_CONSENT_REQUESTED';
+
+/**
+ * The type of Redux action which updates the current known state of a recording
+ * session.
+ *
+ * {
+ *     type: RECORDING_SESSION_UPDATED,
+ *     sessionData: Object
+ * }
+ * @public
+ */
+export const RECORDING_SESSION_UPDATED = 'RECORDING_SESSION_UPDATED';
+
+/**
+ * The type of Redux action which sets the pending recording notification UID to
+ * use it for when hiding the notification is necessary, or unsets it when
+ * undefined (or no param) is passed.
+ *
+ * {
+ *     type: SET_PENDING_RECORDING_NOTIFICATION_UID,
+ *     streamType: string,
+ *     uid: ?number
+ * }
+ * @public
+ */
+export const SET_PENDING_RECORDING_NOTIFICATION_UID
+    = 'SET_PENDING_RECORDING_NOTIFICATION_UID';
+
+/**
+ * The type of Redux action which sets the selected recording service.
+ *
+ * {
+ *     type: SET_SELECTED_RECORDING_SERVICE
+ * }
+ * @public
+ */
+export const SET_SELECTED_RECORDING_SERVICE = 'SET_SELECTED_RECORDING_SERVICE';
+
+/**
+ * Sets the stream key last used by the user for later reuse.
+ *
+ * {
+ *     type: SET_STREAM_KEY,
+ *     streamKey: string
+ * }
+ */
+export const SET_STREAM_KEY = 'SET_STREAM_KEY';
+
+/**
+ * Sets the enable state of the meeting highlight button.
+ *
+ * {
+ *     type: SET_MEETING_HIGHLIGHT_BUTTON_STATE,
+ *     disabled: boolean
+ * }
+ */
+export const SET_MEETING_HIGHLIGHT_BUTTON_STATE = 'SET_MEETING_HIGHLIGHT_BUTTON_STATE';
+
+/**
+ * Attempts to start the local recording.
+ *
+ * {
+ *     type: START_LOCAL_RECORDING,
+ *     onlySelf: boolean
+ * }
+ */
+export const START_LOCAL_RECORDING = 'START_LOCAL_RECORDING';
+
+/**
+ * Stops local recording.
+ *
+ * {
+ *     type: STOP_LOCAL_RECORDING
+ * }
+ */
+export const STOP_LOCAL_RECORDING = 'STOP_LOCAL_RECORDING';
+
+/**
+ * Indicates that the start recording notification has been shown.
+ *
+ * {
+ *    type: SET_START_RECORDING_NOTIFICATION_SHOWN
+ * }
+ */
+export const SET_START_RECORDING_NOTIFICATION_SHOWN = 'SET_START_RECORDING_NOTIFICATION_SHOWN';

react/features/recording/actions.any.ts

@@ -0,0 +1,493 @@
+import { IStore } from '../app/types';
+import { getMeetingRegion, getRecordingSharingUrl } from '../base/config/functions';
+import { MEET_FEATURES } from '../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../base/jwt/functions';
+import JitsiMeetJS, { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
+import { getLocalParticipant, getParticipantDisplayName } from '../base/participants/functions';
+import { BUTTON_TYPES } from '../base/ui/constants.any';
+import { copyText } from '../base/util/copyText';
+import { getVpaasTenant, isVpaasMeeting } from '../jaas/functions';
+import {
+    hideNotification,
+    showErrorNotification,
+    showNotification,
+    showWarningNotification
+} from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE, NOTIFICATION_TYPE } from '../notifications/constants';
+import { INotificationProps } from '../notifications/types';
+import { setRequestingSubtitles } from '../subtitles/actions.any';
+import { isRecorderTranscriptionsRunning } from '../transcribing/functions';
+
+import {
+    CLEAR_RECORDING_SESSIONS,
+    MARK_CONSENT_REQUESTED,
+    RECORDING_SESSION_UPDATED,
+    SET_MEETING_HIGHLIGHT_BUTTON_STATE,
+    SET_PENDING_RECORDING_NOTIFICATION_UID,
+    SET_SELECTED_RECORDING_SERVICE,
+    SET_START_RECORDING_NOTIFICATION_SHOWN,
+    SET_STREAM_KEY,
+    START_LOCAL_RECORDING,
+    STOP_LOCAL_RECORDING
+} from './actionTypes';
+import {
+    RECORDING_METADATA_ID,
+    START_RECORDING_NOTIFICATION_ID
+} from './constants';
+import {
+    getRecordButtonProps,
+    getRecordingLink,
+    getResourceId,
+    isRecordingRunning,
+    isRecordingSharingEnabled,
+    isSavingRecordingOnDropbox,
+    sendMeetingHighlight,
+    shouldAutoTranscribeOnRecord
+} from './functions';
+import logger from './logger';
+
+
+/**
+ * Clears the data of every recording sessions.
+ *
+ * @returns {{
+ *     type: CLEAR_RECORDING_SESSIONS
+ * }}
+ */
+export function clearRecordingSessions() {
+    return {
+        type: CLEAR_RECORDING_SESSIONS
+    };
+}
+
+
+/**
+ * Marks the start recording notification as shown.
+ *
+ * @returns {{
+ *      type: SET_START_RECORDING_NOTIFICATION_SHOWN
+ * }}
+ */
+export function setStartRecordingNotificationShown() {
+    return {
+        type: SET_START_RECORDING_NOTIFICATION_SHOWN
+    };
+}
+
+/**
+ * Sets the meeting highlight button disable state.
+ *
+ * @param {boolean} disabled - The disabled state value.
+ * @returns {{
+ *     type: CLEAR_RECORDING_SESSIONS
+ * }}
+ */
+export function setHighlightMomentButtonState(disabled: boolean) {
+    return {
+        type: SET_MEETING_HIGHLIGHT_BUTTON_STATE,
+        disabled
+    };
+}
+
+/**
+ * Signals that the pending recording notification should be removed from the
+ * screen.
+ *
+ * @param {string} streamType - The type of the stream ({@code 'file'} or
+ * {@code 'stream'}).
+ * @returns {Function}
+ */
+export function hidePendingRecordingNotification(streamType: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const { pendingNotificationUids } = getState()['features/recording'];
+        const pendingNotificationUid = pendingNotificationUids[streamType];
+
+        if (pendingNotificationUid) {
+            dispatch(hideNotification(pendingNotificationUid));
+            dispatch(
+                _setPendingRecordingNotificationUid(
+                    undefined, streamType));
+        }
+    };
+}
+
+/**
+ * Sets the stream key last used by the user for later reuse.
+ *
+ * @param {string} streamKey - The stream key to set.
+ * @returns {{
+ *     type: SET_STREAM_KEY,
+ *     streamKey: string
+ * }}
+ */
+export function setLiveStreamKey(streamKey: string) {
+    return {
+        type: SET_STREAM_KEY,
+        streamKey
+    };
+}
+
+/**
+ * Signals that the pending recording notification should be shown on the
+ * screen.
+ *
+ * @param {string} streamType - The type of the stream ({@code file} or
+ * {@code stream}).
+ * @returns {Function}
+ */
+export function showPendingRecordingNotification(streamType: string) {
+    return (dispatch: IStore['dispatch']) => {
+        const isLiveStreaming
+            = streamType === JitsiMeetJS.constants.recording.mode.STREAM;
+        const dialogProps = isLiveStreaming ? {
+            descriptionKey: 'liveStreaming.pending',
+            titleKey: 'dialog.liveStreaming'
+        } : {
+            descriptionKey: 'recording.pending',
+            titleKey: 'dialog.recording'
+        };
+        const notification = dispatch(showNotification({
+            ...dialogProps
+        }, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+
+        if (notification) {
+            dispatch(_setPendingRecordingNotificationUid(notification.uid, streamType));
+        }
+    };
+}
+
+/**
+ * Highlights a meeting moment.
+ *
+ * {@code stream}).
+ *
+ * @returns {Function}
+ */
+export function highlightMeetingMoment() {
+    return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        dispatch(setHighlightMomentButtonState(true));
+
+        const success = await sendMeetingHighlight(getState());
+
+        if (success) {
+            dispatch(showNotification({
+                descriptionKey: 'recording.highlightMomentSucessDescription',
+                titleKey: 'recording.highlightMomentSuccess'
+            }, NOTIFICATION_TIMEOUT_TYPE.SHORT));
+        }
+
+        dispatch(setHighlightMomentButtonState(false));
+    };
+}
+
+/**
+ * Signals that the recording error notification should be shown.
+ *
+ * @param {Object} props - The Props needed to render the notification.
+ * @returns {showErrorNotification}
+ */
+export function showRecordingError(props: Object) {
+    return showErrorNotification(props);
+}
+
+/**
+ * Signals that the recording warning notification should be shown.
+ *
+ * @param {Object} props - The Props needed to render the notification.
+ * @returns {showWarningNotification}
+ */
+export function showRecordingWarning(props: Object) {
+    return showWarningNotification(props);
+}
+
+/**
+ * Signals that the stopped recording notification should be shown on the
+ * screen for a given period.
+ *
+ * @param {string} streamType - The type of the stream ({@code file} or
+ * {@code stream}).
+ * @param {string?} participantName - The participant name stopping the recording.
+ * @returns {showNotification}
+ */
+export function showStoppedRecordingNotification(streamType: string, participantName?: string) {
+    const isLiveStreaming
+        = streamType === JitsiMeetJS.constants.recording.mode.STREAM;
+    const descriptionArguments = { name: participantName };
+    const dialogProps = isLiveStreaming ? {
+        descriptionKey: participantName ? 'liveStreaming.offBy' : 'liveStreaming.off',
+        descriptionArguments,
+        titleKey: 'dialog.liveStreaming'
+    } : {
+        descriptionKey: participantName ? 'recording.offBy' : 'recording.off',
+        descriptionArguments,
+        titleKey: 'dialog.recording'
+    };
+
+    return showNotification(dialogProps, NOTIFICATION_TIMEOUT_TYPE.SHORT);
+}
+
+/**
+ * Signals that a started recording notification should be shown on the
+ * screen for a given period.
+ *
+ * @param {string} mode - The type of the recording: Stream of File.
+ * @param {string | Object } initiator - The participant who started recording.
+ * @param {string} sessionId - The recording session id.
+ * @returns {Function}
+ */
+export function showStartedRecordingNotification(
+        mode: string,
+        initiator: { getId: Function; } | string,
+        sessionId: string) {
+    return async (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const state = getState();
+        const initiatorId = getResourceId(initiator);
+        const participantName = getParticipantDisplayName(state, initiatorId);
+        const notifyProps: {
+            dialogProps: INotificationProps;
+            type: string;
+        } = {
+            dialogProps: {
+                descriptionKey: participantName ? 'liveStreaming.onBy' : 'liveStreaming.on',
+                descriptionArguments: { name: participantName },
+                titleKey: 'dialog.liveStreaming'
+            },
+            type: NOTIFICATION_TIMEOUT_TYPE.SHORT
+        };
+
+        if (mode !== JitsiMeetJS.constants.recording.mode.STREAM) {
+            const recordingSharingUrl = getRecordingSharingUrl(state);
+            const iAmRecordingInitiator = getLocalParticipant(state)?.id === initiatorId;
+            const { showRecordingLink } = state['features/base/config'].recordings || {};
+
+            notifyProps.dialogProps = {
+                customActionHandler: undefined,
+                customActionNameKey: undefined,
+                descriptionKey: participantName ? 'recording.onBy' : 'recording.on',
+                descriptionArguments: { name: participantName },
+                titleKey: 'dialog.recording'
+            };
+
+            // fetch the recording link from the server for recording initiators in jaas meetings
+            if (recordingSharingUrl
+                && isVpaasMeeting(state)
+                && iAmRecordingInitiator
+                && !isSavingRecordingOnDropbox(state)) {
+                const region = getMeetingRegion(state);
+                const tenant = getVpaasTenant(state);
+
+                try {
+                    const response = await getRecordingLink(recordingSharingUrl, sessionId, region, tenant);
+                    const { url: link, urlExpirationTimeMillis: ttl } = response;
+
+                    if (typeof APP === 'object') {
+                        APP.API.notifyRecordingLinkAvailable(link, ttl);
+                    }
+
+                    // add the option to copy recording link
+                    if (showRecordingLink) {
+                        const actions = [
+                            ...notifyProps.dialogProps.customActionNameKey ?? [],
+                            'recording.copyLink'
+                        ];
+                        const handlers = [
+                            ...notifyProps.dialogProps.customActionHandler ?? [],
+                            () => copyText(link)
+                        ];
+
+                        notifyProps.dialogProps = {
+                            ...notifyProps.dialogProps,
+                            customActionNameKey: actions,
+                            customActionHandler: handlers,
+                            titleKey: 'recording.on',
+                            descriptionKey: 'recording.linkGenerated'
+                        };
+
+                        notifyProps.type = NOTIFICATION_TIMEOUT_TYPE.STICKY;
+                    }
+                } catch (err) {
+                    dispatch(showErrorNotification({
+                        titleKey: 'recording.errorFetchingLink'
+                    }));
+
+                    return logger.error('Could not fetch recording link', err);
+                }
+            }
+        }
+
+        dispatch(showNotification(notifyProps.dialogProps, notifyProps.type));
+    };
+}
+
+/**
+ * Updates the known state for a given recording session.
+ *
+ * @param {Object} session - The new state to merge with the existing state in
+ * redux.
+ * @returns {{
+ *     type: RECORDING_SESSION_UPDATED,
+ *     sessionData: Object
+ * }}
+ */
+export function updateRecordingSessionData(session: any) {
+    const status = session.getStatus();
+    const timestamp
+        = status === JitsiRecordingConstants.status.ON
+            ? Date.now() / 1000
+            : undefined;
+
+    return {
+        type: RECORDING_SESSION_UPDATED,
+        sessionData: {
+            error: session.getError(),
+            id: session.getID(),
+            initiator: session.getInitiator(),
+            liveStreamViewURL: session.getLiveStreamViewURL(),
+            mode: session.getMode(),
+            status,
+            terminator: session.getTerminator(),
+            timestamp
+        }
+    };
+}
+
+/**
+ * Sets the selected recording service.
+ *
+ * @param {string} selectedRecordingService - The new selected recording service.
+ * @returns {Object}
+ */
+export function setSelectedRecordingService(selectedRecordingService: string) {
+    return {
+        type: SET_SELECTED_RECORDING_SERVICE,
+        selectedRecordingService
+    };
+}
+
+/**
+ * Sets UID of the the pending streaming notification to use it when hinding
+ * the notification is necessary, or unsets it when undefined (or no param) is
+ * passed.
+ *
+ * @param {?number} uid - The UID of the notification.
+ * @param {string} streamType - The type of the stream ({@code file} or
+ * {@code stream}).
+ * @returns {{
+ *     type: SET_PENDING_RECORDING_NOTIFICATION_UID,
+ *     streamType: string,
+ *     uid: number
+ * }}
+ */
+function _setPendingRecordingNotificationUid(uid: string | undefined, streamType: string) {
+    return {
+        type: SET_PENDING_RECORDING_NOTIFICATION_UID,
+        streamType,
+        uid
+    };
+}
+
+/**
+ * Starts local recording.
+ *
+ * @param {boolean} onlySelf - Whether to only record the local streams.
+ * @returns {Object}
+ */
+export function startLocalVideoRecording(onlySelf?: boolean) {
+    return {
+        type: START_LOCAL_RECORDING,
+        onlySelf
+    };
+}
+
+/**
+ * Stops local recording.
+ *
+ * @returns {Object}
+ */
+export function stopLocalVideoRecording() {
+    return {
+        type: STOP_LOCAL_RECORDING
+    };
+}
+
+/**
+ * Displays the notification suggesting to start the recording.
+ *
+ * @param {Function} openRecordingDialog - The callback to open the recording dialog.
+ * @returns {void}
+ */
+export function showStartRecordingNotificationWithCallback(openRecordingDialog: Function) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        let state = getState();
+        const { recordings } = state['features/base/config'];
+        const { suggestRecording } = recordings || {};
+        const recordButtonProps = getRecordButtonProps(state);
+        const isAlreadyRecording = isRecordingRunning(state) || isRecorderTranscriptionsRunning(state);
+        const wasNotificationShown = state['features/recording'].wasStartRecordingSuggested;
+
+        if (!suggestRecording
+            || isAlreadyRecording
+            || !recordButtonProps.visible
+            || recordButtonProps.disabled
+            || wasNotificationShown) {
+            return;
+        }
+
+        dispatch(setStartRecordingNotificationShown());
+        dispatch(showNotification({
+            titleKey: 'notify.suggestRecordingTitle',
+            descriptionKey: 'notify.suggestRecordingDescription',
+            uid: START_RECORDING_NOTIFICATION_ID,
+            customActionType: [ BUTTON_TYPES.PRIMARY ],
+            customActionNameKey: [ 'notify.suggestRecordingAction' ],
+            customActionHandler: [ () => {
+                state = getState();
+                const { recordingService } = state['features/base/config'];
+                const canBypassDialog = recordingService?.enabled
+                    && isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false);
+
+                if (canBypassDialog) {
+                    const options = {
+                        'file_recording_metadata': {
+                            share: isRecordingSharingEnabled(state)
+                        }
+                    };
+
+                    const { conference } = state['features/base/conference'];
+                    const autoTranscribeOnRecord = shouldAutoTranscribeOnRecord(state);
+
+                    conference?.startRecording({
+                        mode: JitsiRecordingConstants.mode.FILE,
+                        appData: JSON.stringify(options)
+                    });
+
+                    if (autoTranscribeOnRecord) {
+                        conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+                            isTranscribingEnabled: true
+                        });
+                        dispatch(setRequestingSubtitles(true, false, null, true));
+                    }
+                } else {
+                    openRecordingDialog();
+                }
+
+                dispatch(hideNotification(START_RECORDING_NOTIFICATION_ID));
+            } ],
+            appearance: NOTIFICATION_TYPE.NORMAL
+        }, NOTIFICATION_TIMEOUT_TYPE.EXTRA_LONG));
+    };
+}
+
+/**
+ * Marks the given session as consent requested. No further consent requests will be
+ * made for this session.
+ *
+ * @param {string} sessionId - The session id.
+ * @returns {Object}
+ */
+export function markConsentRequested(sessionId: string) {
+    return {
+        type: MARK_CONSENT_REQUESTED,
+        sessionId
+    };
+}

react/features/recording/actions.native.ts

@@ -0,0 +1,72 @@
+import { IStore } from '../app/types';
+import { openSheet } from '../base/dialog/actions';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
+import { navigate } from '../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { screen } from '../mobile/navigation/routes';
+import { showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+
+import { showStartRecordingNotificationWithCallback } from './actions.any';
+import HighlightDialog from './components/Recording/native/HighlightDialog';
+
+export * from './actions.any';
+
+/**
+ * Opens the highlight dialog.
+ *
+ * @returns {Function}
+ */
+export function openHighlightDialog() {
+    return (dispatch: IStore['dispatch']) => {
+        dispatch(openSheet(HighlightDialog));
+    };
+}
+
+/**
+ * Signals that a started recording notification should be shown on the
+ * screen for a given period.
+ *
+ * @param {string} streamType - The type of the stream ({@code file} or
+ * {@code stream}).
+ * @returns {showNotification}
+ */
+export function showRecordingLimitNotification(streamType: string) {
+    return (dispatch: IStore['dispatch'], getState: IStore['getState']) => {
+        const isLiveStreaming = streamType === JitsiMeetJS.constants.recording.mode.STREAM;
+        let descriptionKey, titleKey;
+
+        if (isLiveStreaming) {
+            descriptionKey = 'liveStreaming.limitNotificationDescriptionNative';
+            titleKey = 'dialog.liveStreaming';
+        } else {
+            descriptionKey = 'recording.limitNotificationDescriptionNative';
+            titleKey = 'dialog.recording';
+        }
+
+        const { recordingLimit = {} } = getState()['features/base/config'];
+        const { limit, appName } = recordingLimit;
+
+        return dispatch(showNotification({
+            descriptionArguments: {
+                limit,
+                app: appName
+            },
+            descriptionKey,
+            titleKey,
+            maxLines: 2
+        }, NOTIFICATION_TIMEOUT_TYPE.LONG));
+    };
+}
+
+/**
+ * Displays the notification suggesting to start the recording.
+ *
+ * @returns {void}
+ */
+export function showStartRecordingNotification() {
+    return (dispatch: IStore['dispatch']) => {
+        const openDialogCallback = () => navigate(screen.conference.recording);
+
+        dispatch(showStartRecordingNotificationWithCallback(openDialogCallback));
+    };
+}

react/features/recording/actions.web.tsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import { batch } from 'react-redux';
+
+import { IStore } from '../app/types';
+import { hideDialog, openDialog } from '../base/dialog/actions';
+import JitsiMeetJS from '../base/lib-jitsi-meet';
+import {
+    setAudioMuted,
+    setAudioUnmutePermissions,
+    setVideoMuted,
+    setVideoUnmutePermissions
+} from '../base/media/actions';
+import { VIDEO_MUTISM_AUTHORITY } from '../base/media/constants';
+import { showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+
+import { showStartRecordingNotificationWithCallback } from './actions.any';
+import { StartRecordingDialog } from './components/Recording';
+import RecordingLimitNotificationDescription from './components/web/RecordingLimitNotificationDescription';
+
+export * from './actions.any';
+
+/**
+ * Grants recording consent by setting audio and video unmute permissions.
+ *
+ * @returns {Function}
+ */
+export function grantRecordingConsent() {
+    return (dispatch: IStore['dispatch']) => {
+        batch(() => {
+            dispatch(setAudioUnmutePermissions(false, true));
+            dispatch(setVideoUnmutePermissions(false, true));
+            dispatch(hideDialog());
+        });
+    };
+}
+
+/**
+ * Grants recording consent, unmutes audio/video, and closes the dialog.
+ *
+ * @returns {Function}
+ */
+export function grantRecordingConsentAndUnmute() {
+    return (dispatch: IStore['dispatch']) => {
+        batch(() => {
+            dispatch(setAudioUnmutePermissions(false, true));
+            dispatch(setVideoUnmutePermissions(false, true));
+            dispatch(setAudioMuted(false, true));
+            dispatch(setVideoMuted(false, VIDEO_MUTISM_AUTHORITY.USER, true));
+            dispatch(hideDialog());
+        });
+    };
+}
+
+/**
+ * Signals that a started recording notification should be shown on the
+ * screen for a given period.
+ *
+ * @param {string} streamType - The type of the stream ({@code file} or
+ * {@code stream}).
+ * @returns {showNotification}
+ */
+export function showRecordingLimitNotification(streamType: string) {
+    const isLiveStreaming = streamType === JitsiMeetJS.constants.recording.mode.STREAM;
+
+    return showNotification({
+        description: <RecordingLimitNotificationDescription isLiveStreaming = { isLiveStreaming } />,
+        titleKey: isLiveStreaming ? 'dialog.liveStreaming' : 'dialog.recording'
+    }, NOTIFICATION_TIMEOUT_TYPE.LONG);
+}
+
+/**
+ * Displays the notification suggesting to start the recording.
+ *
+ * @returns {void}
+ */
+export function showStartRecordingNotification() {
+    return (dispatch: IStore['dispatch']) => {
+        const openDialogCallback = () => dispatch(openDialog(StartRecordingDialog));
+
+        dispatch(showStartRecordingNotificationWithCallback(openDialogCallback));
+    };
+}

react/features/recording/components/AbstractRecordingLabel.ts

@@ -0,0 +1,96 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState } from '../../app/types';
+import { JitsiRecordingConstants } from '../../base/lib-jitsi-meet';
+import { isRecorderTranscriptionsRunning } from '../../transcribing/functions';
+import {
+    getSessionStatusToShow,
+    isLiveStreamingRunning,
+    isRecordingRunning,
+    isRemoteParticipantRecordingLocally
+} from '../functions';
+
+export interface IProps extends WithTranslation {
+
+    /**
+     * Whether this is the Jibri recorder participant.
+     */
+    _iAmRecorder: boolean;
+
+
+    /**
+     * Whether this meeting is being transcribed.
+    */
+    _isTranscribing: boolean;
+
+    /**
+    * Whether the recording/livestreaming/transcriber is currently running.
+    */
+    _isVisible: boolean;
+
+    /**
+     * The status of the higher priority session.
+     */
+    _status?: string;
+
+    /**
+     * The recording mode this indicator should display.
+     */
+    mode: string;
+}
+
+/**
+ * Abstract class for the {@code RecordingLabel} component.
+ */
+export default class AbstractRecordingLabel<P extends IProps = IProps> extends Component<P> {
+    /**
+     * Implements React {@code Component}'s render.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { _iAmRecorder, _isVisible } = this.props;
+
+        return _isVisible && !_iAmRecorder ? this._renderLabel() : null;
+    }
+
+    /**
+     * Renders the platform specific label component.
+     *
+     * @protected
+     * @returns {React$Element}
+     */
+    _renderLabel(): React.ReactNode | null {
+        return null;
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code AbstractRecordingLabel}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The component's own props.
+ * @private
+ * @returns {{
+ *     _status: ?string
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const { mode } = ownProps;
+    const isLiveStreamingLabel = mode === JitsiRecordingConstants.mode.STREAM;
+    const _isTranscribing = isRecorderTranscriptionsRunning(state);
+    const _isLivestreamingRunning = isLiveStreamingRunning(state);
+    const _isVisible = isLiveStreamingLabel
+        ? _isLivestreamingRunning // this is the livestreaming label
+        : isRecordingRunning(state) || isRemoteParticipantRecordingLocally(state)
+            || _isTranscribing; // this is the recording label
+
+    return {
+        _isVisible,
+        _iAmRecorder: Boolean(state['features/base/config'].iAmRecorder),
+        _isTranscribing,
+        _status: getSessionStatusToShow(state, mode)
+    };
+}

react/features/recording/components/LiveStream/AbstractLiveStreamButton.ts

@@ -0,0 +1,157 @@
+import { IReduxState } from '../../../app/types';
+import { IconSites } from '../../../base/icons/svg';
+import { MEET_FEATURES } from '../../../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../../../base/jwt/functions';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { isInBreakoutRoom } from '../../../breakout-rooms/functions';
+import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
+import { isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
+import { isCloudRecordingRunning, isLiveStreamingButtonVisible, isLiveStreamingRunning } from '../../functions';
+
+import { getLiveStreaming } from './functions';
+
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractLiveStreamButton}.
+ */
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * True if the button needs to be disabled.
+     */
+    _disabled: boolean;
+
+    /**
+     * True if there is a running active live stream, false otherwise.
+     */
+    _isLiveStreamRunning: boolean;
+
+    /**
+     * The tooltip to display when hovering over the button.
+     */
+    _tooltip?: string;
+}
+
+/**
+ * An abstract class of a button for starting and stopping live streaming.
+ */
+export default class AbstractLiveStreamButton<P extends IProps> extends AbstractButton<P> {
+    override accessibilityLabel = 'dialog.startLiveStreaming';
+    override toggledAccessibilityLabel = 'dialog.stopLiveStreaming';
+    override icon = IconSites;
+    override label = 'dialog.startLiveStreaming';
+    override toggledLabel = 'dialog.stopLiveStreaming';
+
+    /**
+     * 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 live stream 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 { dispatch } = this.props;
+
+        const dialogShown = dispatch(maybeShowPremiumFeatureDialog(MEET_FEATURES.RECORDING));
+
+        if (!dialogShown) {
+            this._onHandleClick();
+        }
+    }
+
+    /**
+     * Returns a boolean value indicating if this button is disabled or not.
+     *
+     * @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._isLiveStreamRunning;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code AbstractLiveStreamButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the Component.
+ * @private
+ * @returns {{
+ *     _disabled: boolean,
+ *     _isLiveStreamRunning: boolean,
+ *     visible: boolean
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState, ownProps: IProps) {
+    let { visible } = ownProps;
+
+    // A button can be disabled/enabled only if enableFeaturesBasedOnToken
+    // is on or if the recording is running.
+    let _disabled = false;
+    let _tooltip = '';
+
+    if (typeof visible === 'undefined') {
+        // If the containing component provides the visible prop, that is one
+        // above all, but if not, the button should be autonomous and decide on
+        // its own to be visible or not.
+        const liveStreaming = getLiveStreaming(state);
+
+        visible = isLiveStreamingButtonVisible({
+            liveStreamingAllowed: isJwtFeatureEnabled(state, MEET_FEATURES.LIVESTREAMING, false),
+            liveStreamingEnabled: liveStreaming?.enabled,
+            isInBreakoutRoom: isInBreakoutRoom(state)
+        });
+    }
+
+    // disable the button if the recording is running.
+    if (visible && (isCloudRecordingRunning(state) || isRecorderTranscriptionsRunning(state))) {
+        _disabled = true;
+        _tooltip = 'dialog.liveStreamingDisabledBecauseOfActiveRecordingTooltip';
+    }
+
+    // disable the button if we are in a breakout room.
+    if (isInBreakoutRoom(state)) {
+        _disabled = true;
+    }
+
+    return {
+        _disabled,
+        _isLiveStreamRunning: isLiveStreamingRunning(state),
+        _tooltip,
+        visible
+    };
+}

react/features/recording/components/LiveStream/AbstractStartLiveStreamDialog.ts

@@ -0,0 +1,251 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createLiveStreamingDialogEvent } 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';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractStartLiveStreamDialog}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * The {@code JitsiConference} for the current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * The current state of interactions with the Google API. Determines what
+     * Google related UI should display.
+     */
+    _googleAPIState: number;
+
+    /**
+     * The email of the user currently logged in to the Google web client
+     * application.
+     */
+    _googleProfileEmail: string;
+
+    /**
+     * The live stream key that was used before.
+     */
+    _streamKey?: string;
+
+    /**
+     * The Redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    navigation?: any;
+}
+
+/**
+ * The type of the React {@code Component} state of
+ * {@link AbstractStartLiveStreamDialog}.
+ */
+export interface IState {
+
+    /**
+     * Details about the broadcasts available for use for the logged in Google
+     * user's YouTube account.
+     */
+    broadcasts?: Array<any>;
+
+    /**
+     * The error type, as provided by Google, for the most recent error
+     * encountered by the Google API.
+     */
+    errorType?: string;
+
+    /**
+     * The boundStreamID of the broadcast currently selected in the broadcast
+     * dropdown.
+     */
+    selectedBoundStreamID?: string;
+
+    /**
+     * The selected or entered stream key to use for YouTube live streaming.
+     */
+    streamKey?: string;
+}
+
+/**
+ * Implements an abstract class for the StartLiveStreamDialog on both platforms.
+ *
+ * NOTE: Google log-in is not supported for mobile yet for later implementation
+ * but the abstraction of its properties are already present in this abstract
+ * class.
+ */
+export default class AbstractStartLiveStreamDialog<P extends IProps>
+    extends Component<P, IState> {
+    _isMounted: boolean;
+
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: P) {
+        super(props);
+
+        this.state = {
+            broadcasts: undefined,
+            errorType: undefined,
+            selectedBoundStreamID: undefined,
+            streamKey: ''
+        };
+
+        /**
+         * Instance variable used to flag whether the component is or is not
+         * mounted. Used as a hack to avoid setting state on an unmounted
+         * component.
+         *
+         * @private
+         * @type {boolean}
+         */
+        this._isMounted = false;
+
+        this._onCancel = this._onCancel.bind(this);
+        this._onStreamKeyChange = this._onStreamKeyChange.bind(this);
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Implements {@link Component#componentDidMount()}. Invoked immediately
+     * after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        this._isMounted = true;
+    }
+
+    /**
+     * Implements React's {@link Component#componentWillUnmount()}. Invoked
+     * immediately before this component is unmounted and destroyed.
+     *
+     * @inheritdoc
+     */
+    override componentWillUnmount() {
+        this._isMounted = false;
+    }
+
+    /**
+     * Invokes the passed in {@link onCancel} callback and closes
+     * {@code StartLiveStreamDialog}.
+     *
+     * @private
+     * @returns {boolean} True is returned to close the modal.
+     */
+    _onCancel() {
+        sendAnalytics(createLiveStreamingDialogEvent('start', 'cancel.button'));
+
+        return true;
+    }
+
+    /**
+     * Asks the user to sign in, if not already signed in, and then requests a
+     * list of the user's YouTube broadcasts.
+     *
+     * NOTE: To be implemented by platforms.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _onGetYouTubeBroadcasts(): Promise<any> | void {
+        // to be overwritten by child classes.
+    }
+
+    /**
+     * Callback invoked to update the {@code StartLiveStreamDialog} component's
+     * display of the entered YouTube stream key.
+     *
+     * @param {string} streamKey - The stream key entered in the field.
+     * @private
+     * @returns {void}
+     */
+    _onStreamKeyChange(streamKey: string) {
+        this._setStateIfMounted({
+            streamKey,
+            selectedBoundStreamID: undefined
+        });
+    }
+
+    /**
+     * Invokes the passed in {@link onSubmit} callback with the entered stream
+     * key, and then closes {@code StartLiveStreamDialog}.
+     *
+     * @private
+     * @returns {boolean} False if no stream key is entered to preventing
+     * closing, true to close the modal.
+     */
+    _onSubmit() {
+        const { broadcasts, selectedBoundStreamID } = this.state;
+        const key
+            = (this.state.streamKey || this.props._streamKey || '').trim();
+
+        if (!key) {
+            return false;
+        }
+
+        let selectedBroadcastID = null;
+
+        if (selectedBoundStreamID) {
+            const selectedBroadcast = broadcasts?.find(
+                broadcast => broadcast.boundStreamID === selectedBoundStreamID);
+
+            selectedBroadcastID = selectedBroadcast?.id;
+        }
+
+        sendAnalytics(
+            createLiveStreamingDialogEvent('start', 'confirm.button'));
+
+        this.props._conference?.startRecording({
+            broadcastId: selectedBroadcastID,
+            mode: JitsiRecordingConstants.mode.STREAM,
+            streamId: key
+        });
+
+        return true;
+    }
+
+    /**
+     * Updates the internal state if the component is still mounted. This is a
+     * workaround for all the state setting that occurs after ajax.
+     *
+     * @param {Object} newState - The new state to merge into the existing
+     * state.
+     * @private
+     * @returns {void}
+     */
+    _setStateIfMounted(newState: IState) {
+        if (this._isMounted) {
+            this.setState(newState);
+        }
+    }
+}
+
+/**
+ * Maps part of the Redux state to the component's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _conference: Object,
+ *     _googleAPIState: number,
+ *     _googleProfileEmail: string,
+ *     _streamKey: string
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    return {
+        _conference: state['features/base/conference'].conference,
+        _googleAPIState: state['features/google-api'].googleAPIState,
+        _googleProfileEmail: state['features/google-api'].profileEmail,
+        _streamKey: state['features/recording'].streamKey
+    };
+}

react/features/recording/components/LiveStream/AbstractStopLiveStreamDialog.ts

@@ -0,0 +1,84 @@
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { createLiveStreamingDialogEvent } from '../../../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../../../analytics/functions';
+import { IReduxState } from '../../../app/types';
+import { IJitsiConference } from '../../../base/conference/reducer';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { getActiveSession } from '../../functions';
+import { ISessionData } from '../../reducer';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link StopLiveStreamDialog}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The {@code JitsiConference} for the current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * The redux representation of the live streaming to be stopped.
+     */
+    _session?: ISessionData;
+}
+
+/**
+ * A React Component for confirming the participant wishes to stop the currently
+ * active live stream of the conference.
+ *
+ * @augments Component
+ */
+export default class AbstractStopLiveStreamDialog extends Component<IProps> {
+    /**
+     * Initializes a new {@code StopLiveStreamDialog} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handler so it is only bound once for every instance.
+        this._onSubmit = this._onSubmit.bind(this);
+    }
+
+    /**
+     * Callback invoked when stopping of live streaming is confirmed.
+     *
+     * @private
+     * @returns {boolean} True to close the modal.
+     */
+    _onSubmit() {
+        sendAnalytics(createLiveStreamingDialogEvent('stop', 'confirm.button'));
+
+        const { _session } = this.props;
+
+        if (_session) {
+            this.props._conference?.stopRecording(_session.id);
+        }
+
+        return true;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the React {@code Component} props of
+ * {@code StopLiveStreamDialog}.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     _conference: Object,
+ *     _session: Object
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    return {
+        _conference: state['features/base/conference'].conference,
+        _session: getActiveSession(state, JitsiRecordingConstants.mode.STREAM)
+    };
+}

react/features/recording/components/LiveStream/AbstractStreamKeyForm.ts

@@ -0,0 +1,179 @@
+import { type DebouncedFunc, debounce } from 'lodash-es';
+import { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { IReduxState } from '../../../app/types';
+
+import { getLiveStreaming } from './functions';
+
+
+export type LiveStreaming = {
+
+    // Terms link
+    dataPrivacyLink: string;
+    enabled: boolean;
+    helpLink: string;
+
+    // Documentation reference for the live streaming feature.
+    termsLink: string; // Data privacy link
+    validatorRegExpString: string; // RegExp string that validates the stream key input field
+};
+
+export type LiveStreamingProps = {
+    dataPrivacyURL?: string;
+    enabled: boolean;
+    helpURL?: string;
+    streamLinkRegexp: RegExp;
+    termsURL?: string;
+};
+
+/**
+ * The props of the component.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * The live streaming dialog properties.
+     */
+    _liveStreaming: LiveStreamingProps;
+
+    /**
+     * Callback invoked when the entered stream key has changed.
+     */
+    onChange: Function;
+
+    /**
+     * The stream key value to display as having been entered so far.
+     */
+    value: string;
+}
+
+/**
+ * The state of the component.
+ */
+interface IState {
+
+    /**
+     * Whether or not to show the warnings that the passed in value seems like
+     * an improperly formatted stream key.
+     */
+    showValidationError: boolean;
+}
+
+/**
+ * An abstract React Component for entering a key for starting a YouTube live
+ * stream.
+ *
+ * @augments Component
+ */
+export default class AbstractStreamKeyForm<P extends IProps>
+    extends Component<P, IState> {
+
+    _debouncedUpdateValidationErrorVisibility: DebouncedFunc<() => void>;
+
+    /**
+     * Constructor for the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: P) {
+        super(props);
+
+        this.state = {
+            showValidationError: Boolean(this.props.value)
+                && !this._validateStreamKey(this.props.value)
+        };
+
+        this._debouncedUpdateValidationErrorVisibility = debounce(
+            this._updateValidationErrorVisibility.bind(this),
+            800,
+            { leading: false }
+        );
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onInputChange = this._onInputChange.bind(this);
+    }
+
+    /**
+     * Implements React Component's componentDidUpdate.
+     *
+     * @inheritdoc
+     */
+    override componentDidUpdate(prevProps: P) {
+        if (this.props.value !== prevProps.value) {
+            this._debouncedUpdateValidationErrorVisibility();
+        }
+    }
+
+    /**
+     * Implements React Component's componentWillUnmount.
+     *
+     * @inheritdoc
+     */
+    override componentWillUnmount() {
+        this._debouncedUpdateValidationErrorVisibility.cancel();
+    }
+
+    /**
+     * Callback invoked when the value of the input field has updated through
+     * user input. This forwards the value (string only, even if it was a dom
+     * event) to the onChange prop provided to the component.
+     *
+     * @param {Object | string} change - DOM Event for value change or the
+     * changed text.
+     * @private
+     * @returns {void}
+     */
+    _onInputChange(change: any) {
+        const value = typeof change === 'object' ? change.target.value : change;
+
+        this.props.onChange(value);
+    }
+
+    /**
+     * Checks if the stream key value seems like a valid stream key and sets the
+     * state for showing or hiding the notification about the stream key seeming
+     * invalid.
+     *
+     * @private
+     * @returns {boolean}
+     */
+    _updateValidationErrorVisibility() {
+        const newShowValidationError = Boolean(this.props.value)
+            && !this._validateStreamKey(this.props.value);
+
+        if (newShowValidationError !== this.state.showValidationError) {
+            this.setState({
+                showValidationError: newShowValidationError
+            });
+        }
+    }
+
+    /**
+     * Checks if a passed in stream key appears to be in a valid format.
+     *
+     * @param {string} streamKey - The stream key to check for valid formatting.
+     * @returns {void}
+     * @returns {boolean}
+     */
+    _validateStreamKey(streamKey = '') {
+        const trimmedKey = streamKey.trim();
+        const match = this.props._liveStreaming.streamLinkRegexp.exec(trimmedKey);
+
+        return Boolean(match);
+    }
+}
+
+/**
+ * Maps part of the Redux state to the component's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _liveStreaming: LiveStreamingProps
+ * }}
+ */
+export function _mapStateToProps(state: IReduxState) {
+    return {
+        _liveStreaming: getLiveStreaming(state)
+    };
+}

react/features/recording/components/LiveStream/constants.ts

@@ -0,0 +1,26 @@
+/**
+ * The URL for Google Privacy Policy.
+ */
+export const GOOGLE_PRIVACY_POLICY = 'https://policies.google.com/privacy';
+
+/**
+ * The URL that is the main landing page for YouTube live streaming and should
+ * have a user's live stream key.
+ */
+export const YOUTUBE_LIVE_DASHBOARD_URL = 'https://www.youtube.com/live_dashboard';
+
+/**
+ * The URL for YouTube terms and conditions.
+ */
+export const YOUTUBE_TERMS_URL = 'https://www.youtube.com/t/terms';
+
+/**
+ * The live streaming help link to display.
+ */
+export const JITSI_LIVE_STREAMING_HELP_LINK = 'https://jitsi.org/live';
+
+/**
+ *  The YouTube stream link RegExp.
+ */
+export const FOUR_GROUPS_DASH_SEPARATED = /^(?:[a-zA-Z0-9]{4}(?:-(?!$)|$)){4}/;
+

react/features/recording/components/LiveStream/functions.ts

@@ -0,0 +1,28 @@
+import { IReduxState } from '../../../app/types';
+import { sanitizeUrl } from '../../../base/util/uri';
+
+import {
+    FOUR_GROUPS_DASH_SEPARATED,
+    GOOGLE_PRIVACY_POLICY,
+    JITSI_LIVE_STREAMING_HELP_LINK,
+    YOUTUBE_TERMS_URL
+} from './constants';
+
+/**
+ * Get the live streaming options.
+ *
+ * @param {Object} state - The global state.
+ * @returns {LiveStreaming}
+ */
+export function getLiveStreaming(state: IReduxState) {
+    const { liveStreaming = {} } = state['features/base/config'];
+    const regexp = liveStreaming.validatorRegExpString && new RegExp(liveStreaming.validatorRegExpString);
+
+    return {
+        enabled: Boolean(liveStreaming.enabled),
+        helpURL: sanitizeUrl(liveStreaming.helpLink || JITSI_LIVE_STREAMING_HELP_LINK)?.toString(),
+        termsURL: sanitizeUrl(liveStreaming.termsLink || YOUTUBE_TERMS_URL)?.toString(),
+        dataPrivacyURL: sanitizeUrl(liveStreaming.dataPrivacyLink || GOOGLE_PRIVACY_POLICY)?.toString(),
+        streamLinkRegexp: regexp || FOUR_GROUPS_DASH_SEPARATED
+    };
+}

react/features/recording/components/LiveStream/native/GoogleSigninForm.tsx

@@ -0,0 +1,229 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+import { Text, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState, IStore } from '../../../../app/types';
+import { _abstractMapStateToProps } from '../../../../base/dialog/functions';
+import { translate } from '../../../../base/i18n/functions';
+import { setGoogleAPIState } from '../../../../google-api/actions';
+import GoogleSignInButton from '../../../../google-api/components/GoogleSignInButton.native';
+import {
+    GOOGLE_API_STATES,
+    GOOGLE_SCOPE_YOUTUBE
+} from '../../../../google-api/constants';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import googleApi from '../../../../google-api/googleApi.native';
+import logger from '../../../logger';
+
+import styles from './styles';
+
+/**
+ * Prop type of the component {@code GoogleSigninForm}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * Style of the dialogs feature.
+     */
+    _dialogStyles: any;
+
+    /**
+     * The Redux dispatch Function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The current state of the Google api as defined in {@code constants.js}.
+     */
+    googleAPIState: number;
+
+    /**
+     * The recently received Google response.
+     */
+    googleResponse: any;
+
+    /**
+     * A callback to be invoked when an authenticated user changes, so
+     * then we can get (or clear) the YouTube stream key.
+     */
+    onUserChanged: Function;
+}
+
+/**
+ * Class to render a google sign in form, or a google stream picker dialog.
+ *
+ * @augments Component
+ */
+class GoogleSigninForm extends Component<IProps> {
+    /**
+     * Instantiates a new {@code GoogleSigninForm} component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._logGoogleError = this._logGoogleError.bind(this);
+        this._onGoogleButtonPress = this._onGoogleButtonPress.bind(this);
+    }
+
+    /**
+     * Implements React's Component.componentDidMount.
+     *
+     * @inheritdoc
+     */
+    override componentDidMount() {
+        googleApi.hasPlayServices()
+            .then(() => {
+                googleApi.configure({
+                    offlineAccess: false,
+                    scopes: [ GOOGLE_SCOPE_YOUTUBE ]
+                });
+
+                googleApi.signInSilently().then((response: any) => {
+                    this._setApiState(response
+                        ? GOOGLE_API_STATES.SIGNED_IN
+                        : GOOGLE_API_STATES.LOADED,
+                        response);
+                }, () => {
+                    this._setApiState(GOOGLE_API_STATES.LOADED);
+                });
+            })
+            .catch((error: Error) => {
+                this._logGoogleError(error);
+                this._setApiState(GOOGLE_API_STATES.NOT_AVAILABLE);
+            });
+    }
+
+    /**
+     * Renders the component.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { _dialogStyles, t } = this.props;
+        const { googleAPIState, googleResponse } = this.props;
+        const signedInUser = googleResponse?.user?.email;
+
+        if (googleAPIState === GOOGLE_API_STATES.NOT_AVAILABLE
+                || googleAPIState === GOOGLE_API_STATES.NEEDS_LOADING
+                || typeof googleAPIState === 'undefined') {
+            return null;
+        }
+
+        const userInfo = signedInUser
+            ? `${t('liveStreaming.signedInAs')} ${signedInUser}`
+            : t('liveStreaming.signInCTA');
+
+        return (
+            <View style = { styles.formWrapper as ViewStyle }>
+                <View style = { styles.helpText as ViewStyle }>
+                    <Text
+                        style = { [
+                            _dialogStyles.text,
+                            styles.text
+                        ] }>
+                        { userInfo }
+                    </Text>
+                </View>
+                <GoogleSignInButton
+                    onClick = { this._onGoogleButtonPress }
+                    signedIn = {
+                        googleAPIState === GOOGLE_API_STATES.SIGNED_IN } />
+            </View>
+        );
+    }
+
+    /**
+     * A helper function to log developer related errors.
+     *
+     * @private
+     * @param {Object} error - The error to be logged.
+     * @returns {void}
+     */
+    _logGoogleError(error: Error) {
+        // NOTE: This is a developer error message, not intended for the
+        // user to see.
+        logger.error('Google API error. Possible cause: bad config.', error);
+    }
+
+    /**
+     * Callback to be invoked when the user presses the Google button,
+     * regardless of being logged in or out.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onGoogleButtonPress() {
+        const { googleResponse } = this.props;
+
+        if (googleResponse?.user) {
+            // the user is signed in
+            this._onSignOut();
+        } else {
+            this._onSignIn();
+        }
+    }
+
+    /**
+     * Initiates a sign in if the user is not signed in yet.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onSignIn() {
+        googleApi.signIn().then((response: any) => {
+            this._setApiState(GOOGLE_API_STATES.SIGNED_IN, response);
+        }, this._logGoogleError);
+    }
+
+    /**
+     * Initiates a sign out if the user is signed in.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onSignOut() {
+        googleApi.signOut().then((response: any) => {
+            this._setApiState(GOOGLE_API_STATES.LOADED, response);
+        }, this._logGoogleError);
+    }
+
+    /**
+     * Updates the API (Google Auth) state.
+     *
+     * @private
+     * @param {number} apiState - The state of the API.
+     * @param {?Object} googleResponse - The response from the API.
+     * @returns {void}
+     */
+    _setApiState(apiState: number, googleResponse?: Object) {
+        this.props.onUserChanged(googleResponse);
+        this.props.dispatch(setGoogleAPIState(apiState, googleResponse));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code GoogleSigninForm} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     googleAPIState: number,
+  *    googleResponse: Object
+ * }}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { googleAPIState, googleResponse } = state['features/google-api'];
+
+    return {
+        ..._abstractMapStateToProps(state),
+        googleAPIState,
+        googleResponse
+    };
+}
+
+export default translate(connect(_mapStateToProps)(GoogleSigninForm));

react/features/recording/components/LiveStream/native/LiveStreamButton.ts

@@ -0,0 +1,63 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { openDialog } from '../../../../base/dialog/actions';
+import { LIVE_STREAMING_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 AbstractLiveStreamButton, {
+    IProps as AbstractProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractLiveStreamButton';
+import { IProps } from '../AbstractStartLiveStreamDialog';
+
+import StopLiveStreamDialog from './StopLiveStreamDialog';
+
+type Props = IProps & AbstractProps;
+
+/**
+ * Button for opening the live stream settings screen.
+ */
+class LiveStreamButton extends AbstractLiveStreamButton<Props> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _onHandleClick() {
+        const { _isLiveStreamRunning, dispatch } = this.props;
+
+        if (_isLiveStreamRunning) {
+            dispatch(openDialog(StopLiveStreamDialog));
+        } else {
+            navigate(screen.conference.liveStream);
+        }
+    }
+}
+
+/**
+ * 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, ownProps: any) {
+    const enabled = getFeatureFlag(state, LIVE_STREAMING_ENABLED, true);
+    const abstractProps = _abstractMapStateToProps(state, ownProps);
+
+    return {
+        ...abstractProps,
+        visible: enabled && abstractProps.visible
+    };
+}
+
+export default translate(connect(mapStateToProps)(LiveStreamButton));

react/features/recording/components/LiveStream/native/StartLiveStreamDialog.tsx

@@ -0,0 +1,160 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
+import { StyleType } from '../../../../base/styles/functions.any';
+// eslint-disable-next-line lines-around-comment
+// @ts-ignore
+import googleApi from '../../../../google-api/googleApi.native';
+import HeaderNavigationButton
+    from '../../../../mobile/navigation/components/HeaderNavigationButton';
+import { goBack }
+    from '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { setLiveStreamKey } from '../../../actions';
+import AbstractStartLiveStreamDialog, { IProps, _mapStateToProps } from '../AbstractStartLiveStreamDialog';
+
+import GoogleSigninForm from './GoogleSigninForm';
+import StreamKeyForm from './StreamKeyForm';
+import StreamKeyPicker from './StreamKeyPicker';
+import styles from './styles';
+
+/**
+ * A React Component for requesting a YouTube stream key to use for live
+ * streaming of the current conference.
+ */
+class StartLiveStreamDialog extends AbstractStartLiveStreamDialog<IProps> {
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onStartPress = this._onStartPress.bind(this);
+        this._onStreamKeyChangeNative
+            = this._onStreamKeyChangeNative.bind(this);
+        this._onStreamKeyPick = this._onStreamKeyPick.bind(this);
+        this._onUserChanged = this._onUserChanged.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount()}. Invoked
+     * immediately after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        const { navigation, t } = this.props;
+
+        navigation.setOptions({
+            headerRight: () => (
+                <HeaderNavigationButton
+                    label = { t('dialog.start') }
+                    onPress = { this._onStartPress }
+                    twoActions = { true } />
+            )
+        });
+    }
+
+    /**
+     * Starts live stream session and goes back to the previous screen.
+     *
+     * @returns {void}
+     */
+    _onStartPress() {
+        this._onSubmit() && goBack();
+    }
+
+    /**
+     * Implements {@code Component}'s render.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        return (
+            <JitsiScreen style = { styles.startLiveStreamContainer as StyleType }>
+                <GoogleSigninForm
+                    onUserChanged = { this._onUserChanged } />
+                <StreamKeyPicker
+                    broadcasts = { this.state.broadcasts }
+                    onChange = { this._onStreamKeyPick } />
+                <StreamKeyForm
+                    onChange = { this._onStreamKeyChangeNative }
+                    value = {
+                        this.state.streamKey || this.props._streamKey || ''
+                    } />
+            </JitsiScreen>
+        );
+    }
+
+    /**
+     * Callback to handle stream key changes.
+     *
+     * FIXME: This is a temporary method to store the streaming key on mobile
+     * for easier use, until the Google sign-in is implemented. We don't store
+     * the key on web for security reasons (e.g. We don't want to have the key
+     * stored if the used signed out).
+     *
+     * @private
+     * @param {string} streamKey - The new key value.
+     * @returns {void}
+     */
+    _onStreamKeyChangeNative(streamKey: string) {
+        this.props.dispatch(setLiveStreamKey(streamKey));
+        this._onStreamKeyChange(streamKey);
+    }
+
+    /**
+     * Callback to be invoked when the user selects a stream from the picker.
+     *
+     * @private
+     * @param {string} streamKey - The key of the selected stream.
+     * @returns {void}
+     */
+    _onStreamKeyPick(streamKey: string) {
+        this.setState({
+            streamKey
+        });
+    }
+
+    /**
+     * A callback to be invoked when an authenticated user changes, so
+     * then we can get (or clear) the YouTube stream key.
+     *
+     * TODO: Handle errors by showing some indication to the user.
+     *
+     * @private
+     * @param {Object} response - The retrieved signin response.
+     * @returns {void}
+     */
+    _onUserChanged(response: Object) {
+        if (response) {
+            googleApi.getTokens()
+                .then((tokens: any) => {
+                    googleApi.getYouTubeLiveStreams(tokens.accessToken)
+                        .then((broadcasts: any) => {
+                            this.setState({
+                                broadcasts
+                            });
+                        });
+                })
+                .catch(() => {
+                    this.setState({
+                        broadcasts: undefined,
+                        streamKey: undefined
+                    });
+                });
+        } else {
+            this.setState({
+                broadcasts: undefined,
+                streamKey: undefined
+            });
+        }
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StartLiveStreamDialog));

react/features/recording/components/LiveStream/native/StopLiveStreamDialog.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 AbstractStopLiveStreamDialog, {
+    _mapStateToProps
+} from '../AbstractStopLiveStreamDialog';
+
+/**
+ * A React Component for confirming the participant wishes to stop the currently
+ * active live stream of the conference.
+ *
+ * @augments Component
+ */
+class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        return (
+            <ConfirmDialog
+                descriptionKey = 'dialog.stopStreamingWarning'
+                onSubmit = { this._onSubmit } />
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StopLiveStreamDialog));

react/features/recording/components/LiveStream/native/StreamKeyForm.tsx

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Linking, Text, View, ViewStyle } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { _abstractMapStateToProps } from '../../../../base/dialog/functions';
+import { translate } from '../../../../base/i18n/functions';
+import Button from '../../../../base/ui/components/native/Button';
+import Input from '../../../../base/ui/components/native/Input';
+import { BUTTON_TYPES } from '../../../../base/ui/constants.native';
+import AbstractStreamKeyForm, {
+    IProps as AbstractProps
+} from '../AbstractStreamKeyForm';
+import { getLiveStreaming } from '../functions';
+
+import styles from './styles';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * Style of the dialogs feature.
+     */
+    _dialogStyles: any;
+}
+
+/**
+ * A React Component for entering a key for starting a YouTube live stream.
+ *
+ * @augments Component
+ */
+class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
+    /**
+     * Initializes a new {@code StreamKeyForm} instance.
+     *
+     * @param {IProps} props - The React {@code Component} props to initialize
+     * the new {@code StreamKeyForm} instance with.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onOpenGooglePrivacyPolicy = this._onOpenGooglePrivacyPolicy.bind(this);
+        this._onOpenHelp = this._onOpenHelp.bind(this);
+        this._onOpenYoutubeTerms = this._onOpenYoutubeTerms.bind(this);
+
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { _dialogStyles, t } = this.props;
+
+        return (
+            <>
+                <View style = { styles.formWrapper as ViewStyle }>
+                    <Input
+                        customStyles = {{
+                            input: styles.streamKeyInput,
+                            container: styles.streamKeyContainer }}
+                        onChange = { this._onInputChange }
+                        placeholder = { t('liveStreaming.enterStreamKey') }
+                        value = { this.props.value } />
+                    <View style = { styles.formValidationItem as ViewStyle }>
+                        {
+                            this.state.showValidationError && <Text
+                                style = { [
+                                    _dialogStyles.text,
+                                    styles.warningText
+                                ] }>
+                                { t('liveStreaming.invalidStreamKey') }
+                            </Text>
+                        }
+                    </View>
+                </View>
+                <View style = { styles.formButtonsWrapper as ViewStyle }>
+                    <Button
+                        accessibilityLabel = 'liveStreaming.streamIdHelp'
+                        labelKey = 'liveStreaming.streamIdHelp'
+                        labelStyle = { styles.buttonLabelStyle }
+                        onClick = { this._onOpenHelp }
+                        type = { BUTTON_TYPES.TERTIARY } />
+                    <Button
+                        accessibilityLabel = 'liveStreaming.youtubeTerms'
+                        labelKey = 'liveStreaming.youtubeTerms'
+                        labelStyle = { styles.buttonLabelStyle }
+                        onClick = { this._onOpenYoutubeTerms }
+                        type = { BUTTON_TYPES.TERTIARY } />
+                    <Button
+                        accessibilityLabel = 'liveStreaming.googlePrivacyPolicy'
+                        labelKey = 'liveStreaming.googlePrivacyPolicy'
+                        labelStyle = { styles.buttonLabelStyle }
+                        onClick = { this._onOpenGooglePrivacyPolicy }
+                        type = { BUTTON_TYPES.TERTIARY } />
+                </View>
+            </>
+        );
+    }
+
+    /**
+     * Opens the Google Privacy Policy web page.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenGooglePrivacyPolicy() {
+        const url = this.props._liveStreaming.dataPrivacyURL;
+
+        if (typeof url === 'string') {
+            Linking.openURL(url);
+        }
+    }
+
+    /**
+     * Opens the information link on how to manually locate a YouTube broadcast
+     * stream key.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenHelp() {
+        const url = this.props._liveStreaming.helpURL;
+
+        if (typeof url === 'string') {
+            Linking.openURL(url);
+        }
+    }
+
+    /**
+     * Opens the YouTube terms and conditions web page.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenYoutubeTerms() {
+        const url = this.props._liveStreaming.termsURL;
+
+        if (typeof url === 'string') {
+            Linking.openURL(url);
+        }
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code StreamKeyForm} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *    _liveStreaming: LiveStreamingProps
+ * }}
+ */
+function _mapStateToProps(state: IReduxState) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _liveStreaming: getLiveStreaming(state)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(StreamKeyForm));

react/features/recording/components/LiveStream/native/StreamKeyPicker.tsx

@@ -0,0 +1,168 @@
+import React, { Component } from 'react';
+import { WithTranslation } from 'react-i18next';
+import {
+    Linking,
+    Text,
+    TouchableHighlight,
+    TouchableOpacity,
+    View,
+    ViewStyle
+} from 'react-native';
+import { connect } from 'react-redux';
+
+import { _abstractMapStateToProps } from '../../../../base/dialog/functions';
+import { translate } from '../../../../base/i18n/functions';
+import { YOUTUBE_LIVE_DASHBOARD_URL } from '../constants';
+
+import styles, { ACTIVE_OPACITY, TOUCHABLE_UNDERLAY } from './styles';
+
+interface IProps extends WithTranslation {
+
+    /**
+     * Style of the dialogs feature.
+     */
+    _dialogStyles: any;
+
+    /**
+     * The list of broadcasts the user can pick from.
+     */
+    broadcasts?: Array<{ key: string; title: string; }>;
+
+    /**
+     * Callback to be invoked when the user picked a broadcast. To be invoked
+     * with a single key (string).
+     */
+    onChange: Function;
+}
+
+interface IState {
+
+    /**
+    * The key of the currently selected stream.
+    */
+    streamKey?: string | null;
+}
+
+/**
+ * Class to implement a stream key picker (dropdown) component to allow the user
+ * to choose from the available Google Broadcasts/Streams.
+ *
+ * NOTE: This component is currently only used on mobile, but it is advised at
+ * a later point to unify mobile and web logic for this functionality. But it's
+ * out of the scope for now of the mobile live streaming functionality.
+ */
+class StreamKeyPicker extends Component<IProps, IState> {
+
+    /**
+     * Instantiates a new instance of StreamKeyPicker.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this.state = {
+            streamKey: null
+        };
+
+        this._onOpenYoutubeDashboard = this._onOpenYoutubeDashboard.bind(this);
+        this._onStreamPick = this._onStreamPick.bind(this);
+    }
+
+    /**
+     * Renders the component.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { _dialogStyles, broadcasts } = this.props;
+
+        if (!broadcasts) {
+            return null;
+        }
+
+        if (!broadcasts.length) {
+            return (
+                <View style = { styles.formWrapper as ViewStyle }>
+                    <TouchableOpacity
+                        onPress = { this._onOpenYoutubeDashboard }>
+                        <Text
+                            style = { [
+                                _dialogStyles.text,
+                                styles.warningText
+                            ] }>
+                            { this.props.t(
+                                'liveStreaming.getStreamKeyManually') }
+                        </Text>
+                    </TouchableOpacity>
+                </View>
+            );
+        }
+
+        return (
+            <View style = { styles.formWrapper as ViewStyle }>
+                <View style = { styles.streamKeyPickerCta as ViewStyle }>
+                    <Text
+                        style = { [
+                            _dialogStyles.text,
+                            styles.text
+                        ] }>
+                        { this.props.t('liveStreaming.choose') }
+                    </Text>
+                </View>
+                <View style = { styles.streamKeyPickerWrapper as ViewStyle } >
+                    { broadcasts.map((broadcast, index) =>
+                        (<TouchableHighlight
+                            activeOpacity = { ACTIVE_OPACITY }
+                            key = { index }
+                            onPress = { this._onStreamPick(broadcast.key) }
+                            style = { [
+                                styles.streamKeyPickerItem,
+                                this.state.streamKey === broadcast.key
+                                    ? styles.streamKeyPickerItemHighlight : null
+                            ] as ViewStyle[] }
+                            underlayColor = { TOUCHABLE_UNDERLAY }>
+                            <Text
+                                style = { [
+                                    _dialogStyles.text,
+                                    styles.text
+                                ] }>
+                                { broadcast.title }
+                            </Text>
+                        </TouchableHighlight>))
+                    }
+                </View>
+            </View>
+        );
+    }
+
+    /**
+     * Opens the link which should display the YouTube broadcast live stream
+     * key.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onOpenYoutubeDashboard() {
+        Linking.openURL(YOUTUBE_LIVE_DASHBOARD_URL);
+    }
+
+    /**
+     * Callback to be invoked when the user picks a stream from the list.
+     *
+     * @private
+     * @param {string} streamKey - The key of the stream selected.
+     * @returns {Function}
+     */
+    _onStreamPick(streamKey: string) {
+        return () => {
+            this.setState({
+                streamKey
+            });
+            this.props.onChange(streamKey);
+        };
+    }
+}
+
+export default translate(
+    connect(_abstractMapStateToProps)(StreamKeyPicker));

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

@@ -0,0 +1,146 @@
+import { createStyleSheet } from '../../../../base/styles/functions.native';
+import BaseTheme from '../../../../base/ui/components/BaseTheme.native';
+
+/**
+ * Opacity of the TouchableHighlight.
+ */
+export const ACTIVE_OPACITY = 0.3;
+
+/**
+ * Underlay of the TouchableHighlight.
+ */
+export const TOUCHABLE_UNDERLAY = BaseTheme.palette.ui06;
+
+/**
+ * The styles of the React {@code Components} of LiveStream.
+ */
+export default createStyleSheet({
+
+    /**
+     * Generic component to wrap form sections into achieving a unified look.
+     */
+    formWrapper: {
+        alignItems: 'stretch',
+        flexDirection: 'column',
+        paddingHorizontal: BaseTheme.spacing[2]
+    },
+
+    formValidationItem: {
+        alignSelf: 'flex-start',
+        flexDirection: 'row',
+        height: BaseTheme.spacing[4],
+        marginTop: BaseTheme.spacing[2]
+    },
+
+    formButtonsWrapper: {
+        alignSelf: 'center',
+        display: 'flex',
+        maxWidth: 200
+    },
+
+    buttonLabelStyle: {
+        color: BaseTheme.palette.link01
+    },
+
+    /**
+     * Explaining text on the top of the sign in form.
+     */
+    helpText: {
+        marginBottom: BaseTheme.spacing[2]
+    },
+
+    /**
+     * Container for the live stream screen.
+     */
+    startLiveStreamContainer: {
+        backgroundColor: BaseTheme.palette.ui01,
+        display: 'flex',
+        flex: 1,
+        flexDirection: 'column',
+        justifyContent: 'center',
+        paddingHorizontal: BaseTheme.spacing[2],
+        paddingVertical: BaseTheme.spacing[3]
+    },
+
+    /**
+     * Helper link text.
+     */
+    streamKeyHelp: {
+        alignSelf: 'flex-end'
+    },
+
+    /**
+     * Input field to manually enter stream key.
+     */
+    streamKeyInput: {
+        alignSelf: 'stretch',
+        color: BaseTheme.palette.text01,
+        textAlign: 'left'
+    },
+
+    streamKeyContainer: {
+        marginTop: BaseTheme.spacing[3]
+    },
+
+    /**
+     * Custom component to pick a broadcast from the list fetched from Google.
+     */
+    streamKeyPicker: {
+        alignSelf: 'stretch',
+        flex: 1,
+        height: 40,
+        marginHorizontal: BaseTheme.spacing[1],
+        width: 300
+    },
+
+    /**
+     * CTA (label) of the picker.
+     */
+    streamKeyPickerCta: {
+        marginBottom: BaseTheme.spacing[2]
+    },
+
+    /**
+     * Style of a single item in the list.
+     */
+    streamKeyPickerItem: {
+        padding: BaseTheme.spacing[1]
+    },
+
+    /**
+     * Additional style for the selected item.
+     */
+    streamKeyPickerItemHighlight: {
+        backgroundColor: BaseTheme.palette.ui04
+    },
+
+    /**
+     * Overall wrapper for the picker.
+     */
+    streamKeyPickerWrapper: {
+        borderColor: BaseTheme.palette.ui07,
+        borderRadius: BaseTheme.shape.borderRadius,
+        borderWidth: 1,
+        flexDirection: 'column'
+    },
+
+    /**
+     * Terms and Conditions texts.
+     */
+    tcText: {
+        textAlign: 'right'
+    },
+
+    text: {
+        color: BaseTheme.palette.text01,
+        fontSize: 14,
+        textAlign: 'left'
+    },
+
+    /**
+     * A different colored text to indicate information needing attention.
+     */
+    warningText: {
+        color: BaseTheme.palette.warning02
+    }
+});

react/features/recording/components/LiveStream/web/LiveStreamButton.ts

@@ -0,0 +1,65 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { openDialog } from '../../../../base/dialog/actions';
+import { translate } from '../../../../base/i18n/functions';
+import AbstractLiveStreamButton, {
+    IProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractLiveStreamButton';
+
+import StartLiveStreamDialog from './StartLiveStreamDialog';
+import StopLiveStreamDialog from './StopLiveStreamDialog';
+
+
+/**
+ * Button for opening the live stream settings dialog.
+ */
+class LiveStreamButton extends AbstractLiveStreamButton<IProps> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _onHandleClick() {
+        const { _isLiveStreamRunning, dispatch } = this.props;
+
+        dispatch(openDialog(
+            _isLiveStreamRunning ? StopLiveStreamDialog : StartLiveStreamDialog
+        ));
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code LiveStreamButton} component.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The own props of the Component.
+ * @private
+ * @returns {{
+ *     _conference: Object,
+ *     _isLiveStreamRunning: boolean,
+ *     _disabled: boolean,
+ *     visible: boolean
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const abstractProps = _abstractMapStateToProps(state, ownProps);
+    const { toolbarButtons } = state['features/toolbox'];
+    let { visible } = ownProps;
+
+    if (typeof visible === 'undefined') {
+        visible = Boolean(toolbarButtons?.includes('livestreaming') && abstractProps.visible);
+    }
+
+    return {
+        ...abstractProps,
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(LiveStreamButton));

react/features/recording/components/LiveStream/web/StartLiveStreamDialog.tsx

@@ -0,0 +1,361 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { translate } from '../../../../base/i18n/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import Spinner from '../../../../base/ui/components/web/Spinner';
+import {
+    loadGoogleAPI,
+    requestAvailableYouTubeBroadcasts,
+    requestLiveStreamsForYouTubeBroadcast,
+    showAccountSelection,
+    signIn,
+    updateProfile
+} from '../../../../google-api/actions';
+import GoogleSignInButton from '../../../../google-api/components/GoogleSignInButton.web';
+import { GOOGLE_API_STATES } from '../../../../google-api/constants';
+import AbstractStartLiveStreamDialog, {
+    IProps as AbstractProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractStartLiveStreamDialog';
+
+import StreamKeyForm from './StreamKeyForm';
+import StreamKeyPicker from './StreamKeyPicker';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * The ID for the Google client application used for making stream key
+     * related requests.
+     */
+    _googleApiApplicationClientID?: string;
+}
+
+/**
+ * A React Component for requesting a YouTube stream key to use for live
+ * streaming of the current conference.
+ *
+ * @augments Component
+ */
+class StartLiveStreamDialog
+    extends AbstractStartLiveStreamDialog<IProps> {
+
+    /**
+     * Initializes a new {@code StartLiveStreamDialog} instance.
+     *
+     * @param {IProps} props - The React {@code Component} props to initialize
+     * the new {@code StartLiveStreamDialog} instance with.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onGetYouTubeBroadcasts = this._onGetYouTubeBroadcasts.bind(this);
+        this._onInitializeGoogleApi = this._onInitializeGoogleApi.bind(this);
+        this._onGoogleSignIn = this._onGoogleSignIn.bind(this);
+        this._onRequestGoogleSignIn = this._onRequestGoogleSignIn.bind(this);
+        this._onYouTubeBroadcastIDSelected
+            = this._onYouTubeBroadcastIDSelected.bind(this);
+    }
+
+    /**
+     * Implements {@link Component#componentDidMount()}. Invoked immediately
+     * after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        super.componentDidMount();
+
+        if (this.props._googleApiApplicationClientID) {
+            this._onInitializeGoogleApi();
+        }
+    }
+
+    /**
+     * Implements {@code Component}'s render.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const { _googleApiApplicationClientID } = this.props;
+
+        return (
+            <Dialog
+                ok = {{ translationKey: 'dialog.startLiveStreaming' }}
+                onCancel = { this._onCancel }
+                onSubmit = { this._onSubmit }
+                titleKey = 'liveStreaming.start'>
+                <div className = 'live-stream-dialog'>
+                    { _googleApiApplicationClientID
+                        ? this._renderYouTubePanel() : null }
+                    <StreamKeyForm
+                        onChange = { this._onStreamKeyChange }
+                        value = {
+                            this.state.streamKey || this.props._streamKey || ''
+                        } />
+                </div>
+            </Dialog>
+        );
+    }
+
+    /**
+     * Loads the Google web client application used for fetching stream keys.
+     * If the user is already logged in, then a request for available YouTube
+     * broadcasts is also made.
+     *
+     * @private
+     * @returns {void}
+     */
+    _onInitializeGoogleApi() {
+        this.props.dispatch(loadGoogleAPI())
+        .catch((response: any) => this._parseErrorFromResponse(response));
+    }
+
+    /**
+     * Automatically selects the input field's value after starting to edit the
+     * display name.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidUpdate(previousProps: IProps) {
+        if (previousProps._googleAPIState === GOOGLE_API_STATES.LOADED
+            && this.props._googleAPIState === GOOGLE_API_STATES.SIGNED_IN) {
+            this._onGetYouTubeBroadcasts();
+        }
+    }
+
+    /**
+     * Asks the user to sign in, if not already signed in, and then requests a
+     * list of the user's YouTube broadcasts.
+     *
+     * @private
+     * @returns {void}
+     */
+    override _onGetYouTubeBroadcasts() {
+        this.props.dispatch(updateProfile())
+            .catch((response: any) => this._parseErrorFromResponse(response));
+
+        this.props.dispatch(requestAvailableYouTubeBroadcasts())
+            .then((broadcasts: { boundStreamID: string; }[]) => {
+                this._setStateIfMounted({
+                    broadcasts
+                });
+
+                if (broadcasts.length === 1) {
+                    const broadcast = broadcasts[0];
+
+                    this._onYouTubeBroadcastIDSelected(broadcast.boundStreamID);
+                }
+            })
+            .catch((response: any) => this._parseErrorFromResponse(response));
+    }
+
+    /**
+     * Forces the Google web client application to prompt for a sign in, such as
+     * when changing account, and will then fetch available YouTube broadcasts.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _onGoogleSignIn() {
+        this.props.dispatch(signIn())
+            .catch((response: any) => this._parseErrorFromResponse(response));
+    }
+
+    /**
+     * Forces the Google web client application to prompt for a sign in, such as
+     * when changing account, and will then fetch available YouTube broadcasts.
+     *
+     * @private
+     * @returns {Promise}
+     */
+    _onRequestGoogleSignIn() {
+        // when there is an error we show the google sign-in button.
+        // once we click it we want to clear the error from the state
+        this.props.dispatch(showAccountSelection())
+            .then(() =>
+                this._setStateIfMounted({
+                    broadcasts: undefined,
+                    errorType: undefined
+                }))
+            .then(() => this._onGetYouTubeBroadcasts());
+    }
+
+    /**
+     * Fetches the stream key for a YouTube broadcast and updates the internal
+     * state to display the associated stream key as being entered.
+     *
+     * @param {string} boundStreamID - The bound stream ID associated with the
+     * broadcast from which to get the stream key.
+     * @private
+     * @returns {Promise}
+     */
+    _onYouTubeBroadcastIDSelected(boundStreamID: string) {
+        this.props.dispatch(
+            requestLiveStreamsForYouTubeBroadcast(boundStreamID))
+            .then(({ streamKey, selectedBoundStreamID }: { selectedBoundStreamID: string; streamKey: string; }) =>
+                this._setStateIfMounted({
+                    streamKey,
+                    selectedBoundStreamID
+                }));
+
+    }
+
+    /**
+     * Only show an error if an external request was made with the Google api.
+     * Do not error if the login in canceled.
+     * And searches in a Google API error response for the error type.
+     *
+     * @param {Object} response - The Google API response that may contain an
+     * error.
+     * @private
+     * @returns {string|null}
+     */
+    _parseErrorFromResponse(response: any) {
+
+        if (!response?.result) {
+            return;
+        }
+
+        const result = response.result;
+        const error = result.error;
+        const errors = error?.errors;
+        const firstError = errors?.[0];
+
+        this._setStateIfMounted({
+            errorType: firstError?.reason || null
+        });
+    }
+
+    /**
+     * Renders a React Element for authenticating with the Google web client.
+     *
+     * @private
+     * @returns {ReactElement}
+     */
+    _renderYouTubePanel() {
+        const {
+            t,
+            _googleProfileEmail
+        } = this.props;
+        const {
+            broadcasts,
+            selectedBoundStreamID
+        } = this.state;
+
+        let googleContent, helpText;
+
+        switch (this.props._googleAPIState) {
+        case GOOGLE_API_STATES.LOADED:
+            googleContent
+                = <GoogleSignInButton onClick = { this._onGoogleSignIn } />;
+            helpText = t('liveStreaming.signInCTA');
+
+            break;
+
+        case GOOGLE_API_STATES.SIGNED_IN:
+            if (broadcasts) {
+                googleContent = (
+                    <StreamKeyPicker
+                        broadcasts = { broadcasts }
+                        onBroadcastSelected
+                            = { this._onYouTubeBroadcastIDSelected }
+                        selectedBoundStreamID = { selectedBoundStreamID } />
+                );
+            } else {
+                googleContent
+                    = <Spinner />
+                ;
+            }
+
+            /**
+             * FIXME: Ideally this help text would be one translation string
+             * that also accepts the anchor. This can be done using the Trans
+             * component of react-i18next but I couldn't get it working...
+             */
+            helpText = (
+                <div>
+                    { `${t('liveStreaming.chooseCTA',
+                        { email: _googleProfileEmail })} ` }
+                    <a onClick = { this._onRequestGoogleSignIn }>
+                        { t('liveStreaming.changeSignIn') }
+                    </a>
+                </div>
+            );
+
+            break;
+
+        case GOOGLE_API_STATES.NEEDS_LOADING:
+        default:
+            googleContent
+                = <Spinner />
+            ;
+
+            break;
+        }
+
+        if (this.state.errorType !== undefined) {
+            googleContent = (
+                <GoogleSignInButton
+                    onClick = { this._onRequestGoogleSignIn } />
+            );
+            helpText = this._getGoogleErrorMessageToDisplay();
+        }
+
+        return (
+            <div className = 'google-panel'>
+                <div className = 'live-stream-cta'>
+                    { helpText }
+                </div>
+                <div className = 'google-api'>
+                    { googleContent }
+                </div>
+            </div>
+        );
+    }
+
+    /**
+     * Returns the error message to display for the current error state.
+     *
+     * @private
+     * @returns {string} The error message to display.
+     */
+    _getGoogleErrorMessageToDisplay() {
+        let text;
+
+        switch (this.state.errorType) {
+        case 'liveStreamingNotEnabled':
+            text = this.props.t(
+                'liveStreaming.errorLiveStreamNotEnabled',
+                { email: this.props._googleProfileEmail });
+            break;
+        default:
+            text = this.props.t('liveStreaming.errorAPI');
+            break;
+        }
+
+        return <div className = 'google-error'>{ text }</div>;
+    }
+}
+
+/**
+ * Maps part of the Redux state to the component's props.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {{
+ *     _googleApiApplicationClientID: string
+ * }}
+*/
+function _mapStateToProps(state: IReduxState) {
+    return {
+        ..._abstractMapStateToProps(state),
+        _googleApiApplicationClientID:
+        state['features/base/config'].googleApiApplicationClientID
+    };
+}
+
+export default translate(connect(_mapStateToProps)(StartLiveStreamDialog));

react/features/recording/components/LiveStream/web/StopLiveStreamDialog.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import AbstractStopLiveStreamDialog, {
+    _mapStateToProps
+} from '../AbstractStopLiveStreamDialog';
+
+/**
+ * A React Component for confirming the participant wishes to stop the currently
+ * active live stream of the conference.
+ *
+ * @augments Component
+ */
+class StopLiveStreamDialog extends AbstractStopLiveStreamDialog {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        return (
+            <Dialog
+                ok = {{ translationKey: 'dialog.stopLiveStreaming' }}
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.liveStreaming'>
+                { this.props.t('dialog.stopStreamingWarning') }
+            </Dialog>
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StopLiveStreamDialog));

react/features/recording/components/LiveStream/web/StreamKeyForm.tsx

@@ -0,0 +1,112 @@
+import { Theme } from '@mui/material';
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
+
+import { translate } from '../../../../base/i18n/functions';
+import Input from '../../../../base/ui/components/web/Input';
+import AbstractStreamKeyForm, {
+    IProps as AbstractProps,
+    _mapStateToProps
+} from '../AbstractStreamKeyForm';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
+
+}
+
+const styles = (theme: Theme) => {
+    return {
+        helperLink: {
+            cursor: 'pointer',
+            color: theme.palette.link01,
+            transition: 'color .2s ease',
+            ...theme.typography.labelBold,
+            marginLeft: 'auto',
+            marginTop: theme.spacing(1),
+
+            '&:hover': {
+                textDecoration: 'underline',
+                color: theme.palette.link01Hover
+            },
+
+            '&:active': {
+                color: theme.palette.link01Active
+            }
+        }
+    };
+};
+
+/**
+ * A React Component for entering a key for starting a YouTube live stream.
+ *
+ * @augments Component
+ */
+class StreamKeyForm extends AbstractStreamKeyForm<IProps> {
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { t, value } = this.props;
+        const classes = withStyles.getClasses(this.props);
+
+        return (
+            <div className = 'stream-key-form'>
+                <Input
+                    autoFocus = { true }
+                    id = 'streamkey-input'
+                    label = { t('dialog.streamKey') }
+                    name = 'streamId'
+                    onChange = { this._onInputChange }
+                    placeholder = { t('liveStreaming.enterStreamKey') }
+                    type = 'text'
+                    value = { value } />
+                <div className = 'form-footer'>
+                    <div className = 'help-container'>
+                        {
+                            this.state.showValidationError
+                                ? <span className = 'warning-text'>
+                                    { t('liveStreaming.invalidStreamKey') }
+                                </span>
+                                : null
+                        }
+                        { this.props._liveStreaming.helpURL
+                            ? <a
+                                className = { classes.helperLink }
+                                href = { this.props._liveStreaming.helpURL }
+                                rel = 'noopener noreferrer'
+                                target = '_blank'>
+                                { t('liveStreaming.streamIdHelp') }
+                            </a>
+                            : null
+                        }
+                    </div>
+                    <a
+                        className = { classes.helperLink }
+                        href = { this.props._liveStreaming.termsURL }
+                        rel = 'noopener noreferrer'
+                        target = '_blank'>
+                        { t('liveStreaming.youtubeTerms') }
+                    </a>
+                    <a
+                        className = { classes.helperLink }
+                        href = { this.props._liveStreaming.dataPrivacyURL }
+                        rel = 'noopener noreferrer'
+                        target = '_blank'>
+                        { t('liveStreaming.googlePrivacyPolicy') }
+                    </a>
+                </div>
+            </div>
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(withStyles(StreamKeyForm, styles)));

react/features/recording/components/LiveStream/web/StreamKeyPicker.tsx

@@ -0,0 +1,126 @@
+import React, { PureComponent } from 'react';
+import { WithTranslation } from 'react-i18next';
+
+import { translate } from '../../../../base/i18n/functions';
+import Select from '../../../../base/ui/components/web/Select';
+import { YOUTUBE_LIVE_DASHBOARD_URL } from '../constants';
+
+/**
+ * The type of the React {@code Component} props of {@link StreamKeyPicker}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * Broadcasts available for selection. Each broadcast item should be an
+     * object with a title for display in the dropdown and a boundStreamID to
+     * return in the {@link onBroadcastSelected} callback.
+     */
+    broadcasts: Array<{
+        boundStreamID: string;
+        title: string;
+    }>;
+
+    /**
+     * Callback invoked when an item in the dropdown is selected. The selected
+     * broadcast's boundStreamID will be passed back.
+     */
+    onBroadcastSelected: Function;
+
+    /**
+     * The boundStreamID of the broadcast that should display as selected in the
+     * dropdown.
+     */
+    selectedBoundStreamID?: string;
+}
+
+/**
+ * A dropdown to select a YouTube broadcast.
+ *
+ * @augments Component
+ */
+class StreamKeyPicker extends PureComponent<IProps> {
+    /**
+     * Default values for {@code StreamKeyForm} component's properties.
+     *
+     * @static
+     */
+    static defaultProps = {
+        broadcasts: []
+    };
+
+    /**
+     * The initial state of a {@code StreamKeyForm} instance.
+     */
+    override state = {
+        isDropdownOpen: false
+    };
+
+    /**
+     * Initializes a new {@code StreamKeyPicker} instance.
+     *
+     * @param {IProps} props - The React {@code Component} props to initialize
+     * the new {@code StreamKeyPicker} instance with.
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        // Bind event handlers so they are only bound once per instance.
+        this._onSelect = this._onSelect.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    override render() {
+        const { broadcasts, selectedBoundStreamID, t } = this.props;
+
+        if (!broadcasts.length) {
+            return (
+                <a
+                    className = 'warning-text'
+                    href = { YOUTUBE_LIVE_DASHBOARD_URL }
+                    rel = 'noopener noreferrer'
+                    target = '_blank'>
+                    { t('liveStreaming.getStreamKeyManually') }
+                </a>
+            );
+        }
+
+        const dropdownItems
+            = broadcasts.map(broadcast => {
+                return {
+                    value: broadcast.boundStreamID,
+                    label: broadcast.title
+                };
+            });
+
+        return (
+            <div className = 'broadcast-dropdown dropdown-menu'>
+                <Select
+                    id = 'streamkeypicker-select'
+                    label = { t('liveStreaming.choose') }
+                    onChange = { this._onSelect }
+                    options = { dropdownItems }
+                    value = { selectedBoundStreamID ?? '' } />
+            </div>
+        );
+    }
+
+    /**
+     * Callback invoked when an item has been clicked in the dropdown menu.
+     *
+     * @param {Object} e - The key event to handle.
+     *
+     * @returns {void}
+     */
+    _onSelect(e: React.ChangeEvent<HTMLSelectElement>) {
+        const streamId = e.target.value;
+
+        this.props.onBroadcastSelected(streamId);
+    }
+}
+
+export default translate(StreamKeyPicker);

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 { StartRecordingDialog } 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(StartRecordingDialog));
+                    }
+                } ],
+                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,138 @@
+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 { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import AbstractButton, { IProps as AbstractButtonProps } from '../../../base/toolbox/components/AbstractButton';
+import { maybeShowPremiumFeatureDialog } from '../../../jaas/actions';
+import { canStopRecording, getRecordButtonProps } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractRecordButton}.
+ */
+export interface IProps extends AbstractButtonProps {
+
+    /**
+     * 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 = 'dialog.startRecording';
+    override toggledAccessibilityLabel = 'dialog.stopRecording';
+    override icon = IconRecord;
+    override label = 'dialog.startRecording';
+    override toggledLabel = 'dialog.stopRecording';
+    override toggledIcon = IconStop;
+
+    /**
+     * 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);
+
+    return {
+        _disabled,
+        _isRecordingRunning: canStopRecording(state),
+        _tooltip,
+        visible
+    };
+}

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

@@ -0,0 +1,484 @@
+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 { updateDropboxToken } from '../../../dropbox/actions';
+import { getDropboxData, getNewAccessToken, isEnabled as isDropboxEnabled } from '../../../dropbox/functions.any';
+import { showErrorNotification } from '../../../notifications/actions';
+import { setRequestingSubtitles } from '../../../subtitles/actions.any';
+import { setSelectedRecordingService, startLocalVideoRecording } from '../../actions';
+import { RECORDING_METADATA_ID, RECORDING_TYPES } from '../../constants';
+import { isRecordingSharingEnabled, shouldAutoTranscribeOnRecord, supportsLocalRecording } from '../../functions';
+
+export interface IProps extends WithTranslation {
+
+    /**
+     * The app key for the dropbox authentication.
+     */
+    _appKey: string;
+
+    /**
+     * Requests transcribing when recording is turned on.
+     */
+    _autoTranscribeOnRecord: boolean;
+
+    /**
+     * The {@code JitsiConference} for the current conference.
+     */
+    _conference?: IJitsiConference;
+
+    /**
+     * Whether subtitles should be displayed or not.
+     */
+    _displaySubtitles?: boolean;
+
+    /**
+     * 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 or not local recording is enabled.
+     */
+    _localRecordingEnabled: boolean;
+
+    /**
+     * The dropbox refresh token.
+     */
+    _rToken: string;
+
+    /**
+     * Whether the record audio / video option is enabled by default.
+     */
+    _recordAudioAndVideo: 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;
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    navigation: any;
+}
+
+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 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;
+
+    /**
+     * True if the user requested the service to record audio and video.
+     */
+    shouldRecordAudioAndVideo: boolean;
+
+    /**
+     * True if the user requested the service to record transcription.
+     */
+    shouldRecordTranscription: 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 start dialog.
+ */
+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._onSubmit = this._onSubmit.bind(this);
+        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._onTranscriptionChange = this._onTranscriptionChange.bind(this);
+        this._onRecordAudioAndVideoChange = this._onRecordAudioAndVideoChange.bind(this);
+
+        let selectedRecordingService = '';
+
+        // TODO: Potentially check if we need to handle changes of
+        // _fileRecordingsServiceEnabled and _areIntegrationsEnabled()
+        if (this.props._fileRecordingsServiceEnabled
+                || !this._areIntegrationsEnabled()) {
+            selectedRecordingService = RECORDING_TYPES.JITSI_REC_SERVICE;
+        } else if (this._areIntegrationsEnabled()) {
+            if (props._localRecordingEnabled && supportsLocalRecording()) {
+                selectedRecordingService = RECORDING_TYPES.LOCAL;
+            } else {
+                selectedRecordingService = RECORDING_TYPES.DROPBOX;
+            }
+        }
+
+        this.state = {
+            isTokenValid: false,
+            isValidating: false,
+            userName: undefined,
+            sharingEnabled: true,
+            shouldRecordAudioAndVideo: this.props._recordAudioAndVideo,
+            shouldRecordTranscription: this.props._autoTranscribeOnRecord,
+            spaceLeft: undefined,
+            selectedRecordingService,
+            localRecordingOnlySelf: false
+        };
+    }
+
+    /**
+     * 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();
+        }
+    }
+
+    /**
+     * Returns true if the integrations with third party services are enabled
+     * and false otherwise.
+     *
+     * @returns {boolean} - True if the integrations with third party services
+     * are enabled and false otherwise.
+     */
+    _areIntegrationsEnabled() {
+        return this.props._isDropboxEnabled;
+    }
+
+    /**
+     * 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 switch change.
+     *
+     * @param {boolean} value - The new value.
+     * @returns {void}
+     */
+    _onTranscriptionChange(value: boolean) {
+        this.setState({
+            shouldRecordTranscription: value
+        });
+    }
+
+    /**
+     * Handles audio and video switch change.
+     *
+     * @param {boolean} value - The new value.
+     * @returns {void}
+     */
+    _onRecordAudioAndVideoChange(value: boolean) {
+        this.setState({
+            shouldRecordAudioAndVideo: value
+        });
+    }
+
+    /**
+     * 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
+                    });
+                }
+            });
+        }
+    }
+
+    /**
+     * Starts a file recording session.
+     *
+     * @private
+     * @returns {boolean} - True (to note that the modal should be closed).
+     */
+    _onSubmit() {
+        const {
+            _appKey,
+            _conference,
+            _displaySubtitles,
+            _isDropboxEnabled,
+            _rToken,
+            _subtitlesLanguage,
+            _token,
+            dispatch
+        } = this.props;
+        let appData;
+        const attributes: {
+            type?: string;
+        } = {};
+
+        if (this.state.shouldRecordAudioAndVideo) {
+            switch (this.state.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;
+                }
+                break;
+            }
+            case RECORDING_TYPES.JITSI_REC_SERVICE: {
+                appData = JSON.stringify({
+                    'file_recording_metadata': {
+                        'share': this.state.sharingEnabled
+                    }
+                });
+                attributes.type = RECORDING_TYPES.JITSI_REC_SERVICE;
+                break;
+            }
+            case RECORDING_TYPES.LOCAL: {
+                dispatch(startLocalVideoRecording(this.state.localRecordingOnlySelf));
+
+                return true;
+            }
+            }
+
+            sendAnalytics(
+                createRecordingDialogEvent('start', 'confirm.button', attributes)
+            );
+
+            this._toggleScreenshotCapture();
+            _conference?.startRecording({
+                mode: JitsiRecordingConstants.mode.FILE,
+                appData
+            });
+        }
+
+        if (this.state.selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE
+                && this.state.shouldRecordTranscription) {
+            dispatch(setRequestingSubtitles(true, _displaySubtitles, _subtitlesLanguage, true));
+        }
+
+        _conference?.getMetadataHandler().setMetadata(RECORDING_METADATA_ID, {
+            isTranscribingEnabled: this.state.shouldRecordTranscription
+        });
+
+        return true;
+    }
+
+    /**
+     * Toggles screenshot capture feature.
+     *
+     * @returns {void}
+     */
+    _toggleScreenshotCapture() {
+        // To be implemented by subclass.
+    }
+
+    /**
+     * 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'];
+
+    return {
+        _appKey: dropbox.appKey ?? '',
+        _autoTranscribeOnRecord: shouldAutoTranscribeOnRecord(state),
+        _conference: state['features/base/conference'].conference,
+        _displaySubtitles,
+        _fileRecordingsServiceEnabled: recordingService?.enabled ?? false,
+        _fileRecordingsServiceSharingEnabled: isRecordingSharingEnabled(state),
+        _isDropboxEnabled: isDropboxEnabled(state),
+        _localRecordingEnabled: !localRecording?.disable,
+        _rToken: state['features/dropbox'].rToken ?? '',
+        _recordAudioAndVideo: recordings?.recordAudioAndVideo ?? true,
+        _subtitlesLanguage,
+        _tokenExpireDate: state['features/dropbox'].expireDate,
+        _token: state['features/dropbox'].token ?? ''
+    };
+}
+
+export default AbstractStartRecordingDialog;

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

@@ -0,0 +1,432 @@
+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 { authorizeDropbox, updateDropboxToken } from '../../../dropbox/actions';
+import { isVpaasMeeting } from '../../../jaas/functions';
+import { canAddTranscriber } from '../../../transcribing/functions';
+import { RECORDING_TYPES } from '../../constants';
+import { supportsLocalRecording } from '../../functions';
+
+/**
+ * The type of the React {@code Component} props of
+ * {@link AbstractStartRecordingDialogContent}.
+ */
+export interface IProps extends WithTranslation {
+
+    /**
+     * Whether the local participant can start transcribing.
+     */
+    _canStartTranscribing: boolean;
+
+    /**
+     * Style of the dialogs feature.
+     */
+    _dialogStyles: any;
+
+    /**
+     * Whether to hide the storage warning or not.
+     */
+    _hideStorageWarning: 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 self local recording is enabled or not.
+     */
+    _localRecordingSelfEnabled: boolean;
+
+    /**
+     * Whether to render recording.
+     */
+    _renderRecording: boolean;
+
+    /**
+     * The color-schemed stylesheet of this component.
+     */
+    _styles: any;
+
+    /**
+     * 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;
+
+    /**
+     * The function will be called when there are changes related to the
+     * switches.
+     */
+    onChange: Function;
+
+    /**
+     * Callback to change the local recording only self setting.
+     */
+    onLocalRecordingSelfChange?: () => void;
+
+    /**
+     * Callback to change the audio and video recording setting.
+     */
+    onRecordAudioAndVideoChange: Function;
+
+    /**
+     * Callback to be invoked on sharing setting change.
+     */
+    onSharingSettingChanged: () => void;
+
+    /**
+     * Callback to change the transcription recording setting.
+     */
+    onTranscriptionChange: Function;
+
+    /**
+     * The currently selected recording service of type: RECORDING_TYPES.
+     */
+    selectedRecordingService: string | null;
+
+    /**
+     * Boolean to set file recording sharing on or off.
+     */
+    sharingSetting: boolean;
+
+    /**
+     * Whether to show the audio and video related content.
+     */
+    shouldRecordAudioAndVideo: boolean;
+
+    /**
+     * Whether to show the transcription related content.
+     */
+    shouldRecordTranscription: 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;
+}
+
+export interface IState {
+
+    /**
+     * Whether to show the advanced options or not.
+     */
+    showAdvancedOptions: boolean;
+}
+
+/**
+ * React Component for getting confirmation to start a recording session.
+ *
+ * @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._onDropboxSwitchChange = this._onDropboxSwitchChange.bind(this);
+        this._onRecordingServiceSwitchChange = this._onRecordingServiceSwitchChange.bind(this);
+        this._onLocalRecordingSwitchChange = this._onLocalRecordingSwitchChange.bind(this);
+        this._onTranscriptionSwitchChange = this._onTranscriptionSwitchChange.bind(this);
+        this._onRecordAudioAndVideoSwitchChange = this._onRecordAudioAndVideoSwitchChange.bind(this);
+        this._onToggleShowOptions = this._onToggleShowOptions.bind(this);
+
+        this.state = {
+            showAdvancedOptions: true
+        };
+    }
+
+    /**
+     * Implements the Component's componentDidMount method.
+     *
+     * @inheritdoc
+     */
+    override componentDidMount() {
+        if (!this._shouldRenderNoIntegrationsContent()
+            && !this._shouldRenderIntegrationsContent()
+            && !this._shouldRenderFileSharingContent()) {
+            this._onLocalRecordingSwitchChange();
+        }
+    }
+
+    /**
+     * Implements {@code Component#componentDidUpdate}.
+     *
+     * @inheritdoc
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        // Auto sign-out when the use chooses another recording service.
+        if (prevProps.selectedRecordingService === RECORDING_TYPES.DROPBOX
+                && this.props.selectedRecordingService !== RECORDING_TYPES.DROPBOX && this.props.isTokenValid) {
+            this._onSignOut();
+        }
+    }
+
+    /**
+     * Returns whether the advanced options should be rendered.
+     *
+     * @returns {boolean}
+     */
+    _onToggleShowOptions() {
+        this.setState({ showAdvancedOptions: !this.state.showAdvancedOptions });
+    }
+
+    /**
+     * 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 save transcription content should be rendered or not.
+     *
+     * @returns {boolean}
+     */
+    _canStartTranscribing() {
+        return this.props._canStartTranscribing;
+    }
+
+    /**
+     * Whether the no integrations content should be rendered or not.
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderNoIntegrationsContent() {
+        // show the non integrations part only if fileRecordingsServiceEnabled
+        // is enabled
+        if (!this.props.fileRecordingsServiceEnabled) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Whether the integrations content should be rendered or not.
+     *
+     * @returns {boolean}
+     */
+    _shouldRenderIntegrationsContent() {
+        if (!this.props.integrationsEnabled) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Handler for transcription switch change.
+     *
+     * @param {boolean} value - The new value.
+     * @returns {void}
+     */
+    _onTranscriptionSwitchChange(value: boolean | undefined) {
+        this.props.onTranscriptionChange(value);
+    }
+
+    /**
+     * Handler for audio and video switch change.
+     *
+     * @param {boolean} value - The new value.
+     * @returns {void}
+     */
+    _onRecordAudioAndVideoSwitchChange(value: boolean | undefined) {
+        this.props.onRecordAudioAndVideoChange(value);
+    }
+
+    /**
+     * Handler for onValueChange events from the Switch component.
+     *
+     * @returns {void}
+     */
+    _onRecordingServiceSwitchChange() {
+        const {
+            onChange,
+            selectedRecordingService
+        } = this.props;
+
+        // act like group, cannot toggle off
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return;
+        }
+
+        onChange(RECORDING_TYPES.JITSI_REC_SERVICE);
+    }
+
+    /**
+     * Handler for onValueChange events from the Switch component.
+     *
+     * @returns {void}
+     */
+    _onDropboxSwitchChange() {
+        const {
+            isTokenValid,
+            onChange,
+            selectedRecordingService
+        } = this.props;
+
+        // act like group, cannot toggle off
+        if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return;
+        }
+
+        onChange(RECORDING_TYPES.DROPBOX);
+
+        if (!isTokenValid) {
+            this._onSignIn();
+        }
+    }
+
+    /**
+     * Handler for onValueChange events from the Switch component.
+     *
+     * @returns {void}
+     */
+    _onLocalRecordingSwitchChange() {
+        const {
+            _localRecordingAvailable,
+            onChange,
+            selectedRecordingService
+        } = this.props;
+
+        if (!_localRecordingAvailable) {
+            return;
+        }
+
+        // act like group, cannot toggle off
+        if (selectedRecordingService
+            === RECORDING_TYPES.LOCAL) {
+            return;
+        }
+
+        onChange(RECORDING_TYPES.LOCAL);
+    }
+
+    /**
+     * 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();
+
+    return {
+        ..._abstractMapStateToProps(state),
+        isVpaas: isVpaasMeeting(state),
+        _canStartTranscribing: canAddTranscriber(state),
+        _hideStorageWarning: Boolean(recordingService?.hideStorageWarning),
+        _renderRecording: isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false),
+        _localRecordingAvailable,
+        _localRecordingEnabled: !localRecording?.disable,
+        _localRecordingSelfEnabled: !localRecording?.disableSelfRecording,
+        _localRecordingNoNotification: !localRecording?.notifyAllParticipants,
+        _styles: ColorSchemeRegistry.get(state, 'StartRecordingDialogContent')
+    };
+}
+
+export default AbstractStartRecordingDialogContent;

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

@@ -0,0 +1,152 @@
+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 { 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;
+
+    /**
+     * The redux dispatch function.
+     */
+    dispatch: IStore['dispatch'];
+
+    /**
+     * The user trying to stop the video while local recording is running.
+     */
+    localRecordingVideoStop?: boolean;
+}
+
+/**
+ * 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,
+            dispatch,
+            localRecordingVideoStop
+        } = this.props;
+
+        if (_localRecording) {
+            dispatch(stopLocalVideoRecording());
+            if (localRecordingVideoStop) {
+                dispatch(setVideoMuted(true));
+            }
+        } else if (_fileRecordingSession) {
+            _conference?.stopRecording(_fileRecordingSession.id);
+            this._toggleScreenshotCapture();
+        }
+
+        // TODO: this should be an action in transcribing. -saghul
+        this.props.dispatch(setRequestingSubtitles(Boolean(_displaySubtitles), _displaySubtitles, _subtitlesLanguage));
+
+        this.props._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
+    };
+}

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,377 @@
+// @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);
+            videoTrack && localTracks.push(videoTrack);
+            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];
+            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
+        });
+
+        this.recorder.addEventListener('dataavailable', async e => {
+            if (this.recorder && e.data && e.data.size > 0) {
+                let data = e.data;
+
+                if (!this.firstChunk) {
+                    this.firstChunk = data = await fixDuration(data, 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());
+
+            // The stop event is emitted when the recorder is done, and _after_ the last buffered
+            // data has been handed over to the dataavailable event.
+            this.recorder = undefined;
+            this.audioContext = undefined;
+            this.audioDestination = undefined;
+            this.startTime = undefined;
+
+            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 StartRecordingDialog } from './native/StartRecordingDialog';
+export { default as RecordingConsentDialog } from './native/RecordingConsentDialog';

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

@@ -0,0 +1,2 @@
+export { default as StartRecordingDialog } from './web/StartRecordingDialog';
+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,68 @@
+import { Platform } from 'react-native';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { openDialog } from '../../../../base/dialog/actions';
+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';
+
+import StopRecordingDialog from './StopRecordingDialog';
+
+type Props = IProps & AbstractProps;
+
+/**
+ * Button for opening a screen where a recording session can be started.
+ */
+class RecordButton extends AbstractRecordButton<Props> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _onHandleClick() {
+        const { _isRecordingRunning, dispatch } = this.props;
+
+        if (_isRecordingRunning) {
+            dispatch(openDialog(StopRecordingDialog));
+        } else {
+            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,64 @@
+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 styles from '../styles.native';
+
+/**
+ * Component that renders the dialog for explicit consent for recordings.
+ *
+ * @returns {JSX.Element}
+ */
+export default function RecordingConsentDialog() {
+    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));
+        dispatch(setAudioMuted(false, true));
+        dispatch(setVideoMuted(false, VIDEO_MUTISM_AUTHORITY.USER, true));
+
+        return true;
+    }, []);
+
+    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.recordingInProgressDescriptionFirstHalf')}
+                {consentLearnMoreLink && (
+                    <Link
+                        style = { styles.learnMoreLink }
+                        url = { consentLearnMoreLink }>
+                        {`(${t('dialog.learnMore')})`}
+                    </Link>
+                )}
+                {t('dialog.recordingInProgressDescriptionSecondHalf')}
+            </Dialog.Description>
+        </ConfirmDialog>
+    );
+}

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

@@ -0,0 +1,170 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../../base/i18n/functions';
+import JitsiScreen from '../../../../base/modal/components/JitsiScreen';
+import HeaderNavigationButton
+    from '../../../../mobile/navigation/components/HeaderNavigationButton';
+import { goBack } from
+    '../../../../mobile/navigation/components/conference/ConferenceNavigationContainerRef';
+import { RECORDING_TYPES } from '../../../constants';
+import AbstractStartRecordingDialog, {
+    IProps,
+    mapStateToProps
+} from '../AbstractStartRecordingDialog';
+import styles from '../styles.native';
+
+import StartRecordingDialogContent from './StartRecordingDialogContent';
+
+
+/**
+ * React Component for getting confirmation to start a file recording session in
+ * progress.
+ *
+ * @augments Component
+ */
+class StartRecordingDialog extends AbstractStartRecordingDialog {
+
+    /**
+     * Constructor of the component.
+     *
+     * @inheritdoc
+     */
+    constructor(props: IProps) {
+        super(props);
+
+        this._onStartPress = this._onStartPress.bind(this);
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidMount()}. Invoked
+     * immediately after this component is mounted.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidMount() {
+        super.componentDidMount();
+
+        const { navigation, t } = this.props;
+
+        navigation.setOptions({
+            headerRight: () => (
+                <HeaderNavigationButton
+                    disabled = { this.isStartRecordingDisabled() }
+                    label = { t('dialog.start') }
+                    onPress = { this._onStartPress }
+                    twoActions = { true } />
+            )
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#componentDidUpdate()}. Invoked
+     * immediately after this component is updated.
+     *
+     * @inheritdoc
+     * @returns {void}
+     */
+    override componentDidUpdate(prevProps: IProps) {
+        super.componentDidUpdate(prevProps);
+
+        const { navigation, t } = this.props;
+
+        navigation.setOptions({
+            // eslint-disable-next-line react/no-multi-comp
+            headerRight: () => (
+                <HeaderNavigationButton
+                    disabled = { this.isStartRecordingDisabled() }
+                    label = { t('dialog.start') }
+                    onPress = { this._onStartPress }
+                    twoActions = { true } />
+            )
+        });
+    }
+
+    /**
+     * Starts recording session and goes back to the previous screen.
+     *
+     * @returns {void}
+     */
+    _onStartPress() {
+        this._onSubmit() && goBack();
+    }
+
+    /**
+     * Disables start recording button.
+     *
+     * @returns {boolean}
+     */
+    isStartRecordingDisabled() {
+        const {
+            isTokenValid,
+            selectedRecordingService,
+            shouldRecordAudioAndVideo,
+            shouldRecordTranscription
+        } = this.state;
+
+        if (!shouldRecordAudioAndVideo && !shouldRecordTranscription) {
+            return true;
+        }
+
+        // Start button is disabled if recording service is only shown;
+        // When validating dropbox token, if that is not enabled, we either always
+        // show the start button or, if just dropbox is enabled, start button
+        // is available when there is token.
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return false;
+        } else if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return !isTokenValid;
+        }
+
+        return true;
+
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const {
+            isTokenValid,
+            isValidating,
+            selectedRecordingService,
+            sharingEnabled,
+            shouldRecordAudioAndVideo,
+            shouldRecordTranscription,
+            spaceLeft,
+            userName
+        } = this.state;
+        const {
+            _fileRecordingsServiceEnabled,
+            _fileRecordingsServiceSharingEnabled
+        } = this.props;
+
+        return (
+            <JitsiScreen style = { styles.startRecodingContainer }>
+                <StartRecordingDialogContent
+                    fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
+                    fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }
+                    integrationsEnabled = { this._areIntegrationsEnabled() }
+                    isTokenValid = { isTokenValid }
+                    isValidating = { isValidating }
+                    onChange = { this._onSelectedRecordingServiceChanged }
+                    onRecordAudioAndVideoChange = { this._onRecordAudioAndVideoChange }
+                    onSharingSettingChanged = { this._onSharingSettingChanged }
+                    onTranscriptionChange = { this._onTranscriptionChange }
+                    selectedRecordingService = { selectedRecordingService }
+                    sharingSetting = { sharingEnabled }
+                    shouldRecordAudioAndVideo = { shouldRecordAudioAndVideo }
+                    shouldRecordTranscription = { shouldRecordTranscription }
+                    spaceLeft = { spaceLeft }
+                    userName = { userName } />
+            </JitsiScreen>
+        );
+    }
+}
+
+export default translate(connect(mapStateToProps)(StartRecordingDialog));

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

@@ -0,0 +1,383 @@
+import React from 'react';
+import { Image, 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 { RECORDING_TYPES } from '../../../constants';
+import { getRecordingDurationEstimation } from '../../../functions';
+import AbstractStartRecordingDialogContent, { mapStateToProps } from '../AbstractStartRecordingDialogContent';
+import {
+    DROPBOX_LOGO,
+    ICON_CLOUD,
+    ICON_INFO,
+    ICON_USERS
+} from '../styles.native';
+
+
+/**
+ * The start recording dialog content for the mobile application.
+ */
+class StartRecordingDialogContent extends AbstractStartRecordingDialogContent {
+    /**
+     * Renders the component.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    override render() {
+        const { _styles: styles } = this.props;
+
+        return (
+            <View style = { styles.container }>
+                { this._renderNoIntegrationsContent() }
+                { this._renderFileSharingContent() }
+                { this._renderUploadToTheCloudInfo() }
+                { this._renderIntegrationsContent() }
+                { this._renderAdvancedOptions() }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the save transcription switch.
+     *
+     * @returns {React$Component}
+     */
+    _renderAdvancedOptions() {
+        const { selectedRecordingService } = this.props;
+
+        if (selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE || !this._canStartTranscribing()) {
+            return null;
+        }
+
+        const { showAdvancedOptions } = this.state;
+        const {
+            _dialogStyles,
+            _styles: styles,
+            shouldRecordAudioAndVideo,
+            shouldRecordTranscription,
+            t
+        } = this.props;
+
+        return (
+            <>
+                <View
+                    style = { styles.header }>
+                    <Text
+                        style = {{
+                            ..._dialogStyles.text,
+                            ...styles.title
+                        }}>
+                        { t('recording.showAdvancedOptions') }
+                    </Text>
+                    <Icon
+                        ariaPressed = { showAdvancedOptions }
+                        onClick = { this._onToggleShowOptions }
+                        role = 'button'
+                        size = { 24 }
+                        src = { showAdvancedOptions ? IconArrowDown : IconArrowRight } />
+                </View>
+                {showAdvancedOptions && (
+                    <>
+                        <View
+                            key = 'transcriptionSetting'
+                            style = { styles.header }>
+                            <Text
+                                style = {{
+                                    ..._dialogStyles.text,
+                                    ...styles.title
+                                }}>
+                                { t('recording.recordTranscription') }
+                            </Text>
+                            <Switch
+                                checked = { shouldRecordTranscription }
+                                onChange = { this._onTranscriptionSwitchChange }
+                                style = { styles.switch } />
+                        </View>
+                        <View
+                            key = 'audioVideoSetting'
+                            style = { styles.header }>
+                            <Text
+                                style = {{
+                                    ..._dialogStyles.text,
+                                    ...styles.title
+                                }}>
+                                { t('recording.recordAudioAndVideo') }
+                            </Text>
+                            <Switch
+                                checked = { shouldRecordAudioAndVideo }
+                                onChange = { this._onRecordAudioAndVideoSwitchChange }
+                                style = { styles.switch } />
+                        </View>
+                    </>
+                )}
+            </>
+        );
+    }
+
+    /**
+     * Renders the content in case no integrations were enabled.
+     *
+     * @returns {React$Component}
+     */
+    _renderNoIntegrationsContent() {
+        const {
+            _dialogStyles,
+            _styles: styles,
+            integrationsEnabled,
+            isValidating,
+            selectedRecordingService,
+            shouldRecordAudioAndVideo,
+            t
+        } = this.props;
+
+        if (!this._shouldRenderNoIntegrationsContent()) {
+            return null;
+        }
+
+        const switchContent
+            = integrationsEnabled
+                ? (
+                    <Switch
+                        checked = { selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE }
+                        disabled = { isValidating || !shouldRecordAudioAndVideo }
+                        onChange = { this._onRecordingServiceSwitchChange }
+                        style = { styles.switch } />
+                ) : null;
+
+        return (
+            <View
+                key = 'noIntegrationSetting'
+                style = { styles.header }>
+                <Image
+                    source = { ICON_CLOUD }
+                    style = { styles.recordingIcon } />
+                <Text
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.title
+                    }}>
+                    { t('recording.serviceDescription') }
+                </Text>
+                { switchContent }
+            </View>
+        );
+    }
+
+    /**
+     * Renders the file recording service sharing options, if enabled.
+     *
+     * @returns {React$Component}
+     */
+    _renderFileSharingContent() {
+        if (!this._shouldRenderFileSharingContent()) {
+            return null;
+        }
+
+        const {
+            _dialogStyles,
+            _styles: styles,
+            isValidating,
+            onSharingSettingChanged,
+            sharingSetting,
+            shouldRecordAudioAndVideo,
+            t
+        } = this.props;
+
+        return (
+            <View
+                key = 'fileSharingSetting'
+                style = { styles.header }>
+                <Image
+                    source = { ICON_USERS }
+                    style = { styles.recordingIcon } />
+                <Text
+                    style = {{
+                        ..._dialogStyles.text,
+                        ...styles.title
+                    }}>
+                    { t('recording.fileSharingdescription') }
+                </Text>
+                <Switch
+                    checked = { sharingSetting }
+                    disabled = { isValidating || !shouldRecordAudioAndVideo }
+                    onChange = { onSharingSettingChanged }
+                    style = { styles.switch } />
+            </View>
+        );
+    }
+
+    /**
+     * Renders the info in case recording is uploaded to the cloud.
+     *
+     * @returns {React$Component}
+     */
+    _renderUploadToTheCloudInfo() {
+        const {
+            _dialogStyles,
+            _hideStorageWarning,
+            _styles: styles,
+            isVpaas,
+            selectedRecordingService,
+            t
+        } = this.props;
+
+        if (!(isVpaas && selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) || _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 a spinner component.
+     *
+     * @returns {React$Component}
+     */
+    _renderSpinner() {
+        return (
+            <LoadingIndicator
+                size = 'small' />
+        );
+    }
+
+    /**
+     * Renders the screen with the account information of a logged in user.
+     *
+     * @returns {React$Component}
+     */
+    _renderSignOut() {
+        const { _styles: styles, spaceLeft, t, userName } = this.props;
+        const duration = getRecordingDurationEstimation(spaceLeft);
+
+        return (
+            <View
+                style = { styles.loggedIn }>
+                <Text
+                    style = { [
+                        styles.text,
+                        styles.recordingText
+                    ] }>
+                    { t('recording.loggedIn', { userName }) }
+                </Text>
+                <Text
+                    style = { [
+                        styles.text,
+                        styles.recordingText
+                    ] }>
+                    {
+                        t('recording.availableSpace', {
+                            spaceLeft,
+                            duration
+                        })
+                    }
+                </Text>
+            </View>
+        );
+    }
+
+    /**
+     * Renders the content in case integrations were enabled.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    _renderIntegrationsContent() {
+        if (!this._shouldRenderIntegrationsContent()) {
+            return null;
+        }
+
+        const {
+            _dialogStyles,
+            _styles: styles,
+            fileRecordingsServiceEnabled,
+            isTokenValid,
+            isValidating,
+            selectedRecordingService,
+            shouldRecordAudioAndVideo,
+            t
+        } = this.props;
+
+        let content = null;
+        let switchContent = null;
+
+        if (isValidating) {
+            content = this._renderSpinner();
+            switchContent = <View />;
+        } else if (isTokenValid) {
+            content = this._renderSignOut();
+            switchContent = (
+                <Button
+                    accessibilityLabel = 'recording.signOut'
+                    labelKey = 'recording.signOut'
+                    onClick = { this._onSignOut }
+                    type = { BUTTON_TYPES.SECONDARY } />
+            );
+
+        } else {
+            switchContent = (
+                <Button
+                    accessibilityLabel = 'recording.signIn'
+                    labelKey = 'recording.signIn'
+                    onClick = { this._onSignIn }
+                    type = { BUTTON_TYPES.PRIMARY } />
+            );
+        }
+
+        if (fileRecordingsServiceEnabled) {
+            switchContent = (
+                <Switch
+                    checked = { selectedRecordingService === RECORDING_TYPES.DROPBOX }
+                    disabled = { isValidating || !shouldRecordAudioAndVideo }
+                    onChange = { this._onDropboxSwitchChange }
+                    style = { styles.switch } />
+            );
+        }
+
+        return (
+            <View>
+                <View
+                    style = { styles.headerIntegrations }>
+                    <Image
+                        source = { DROPBOX_LOGO }
+                        style = { styles.recordingIcon } />
+                    <Text
+                        style = {{
+                            ..._dialogStyles.text,
+                            ...styles.title
+                        }}>
+                        { t('recording.authDropboxText') }
+                    </Text>
+                    { switchContent }
+                </View>
+                <View>
+                    { content }
+                </View>
+            </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,167 @@
+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 DROPBOX_LOGO = require('../../../../../images/dropboxLogo_square.png');
+export const ICON_CLOUD = require('../../../../../images/icon-cloud.png');
+export const ICON_INFO = require('../../../../../images/icon-info.png');
+export const ICON_USERS = require('../../../../../images/icon-users.png');
+export const LOCAL_RECORDING = require('../../../../../images/downloadLocalRecording.png');
+export const TRACK_COLOR = BaseTheme.palette.ui07;
+/* 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]
+    },
+
+    /**
+     * Label for the start recording button.
+     */
+    startRecordingLabel: {
+        color: BaseTheme.palette.text01,
+        marginRight: 12
+    },
+    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'
+    },
+
+    controlDisabled: {
+        opacity: 0.5
+    },
+
+    header: {
+        ...header,
+        marginHorizontal: BaseTheme.spacing[3]
+    },
+
+    headerIntegrations: {
+        ...header,
+        paddingHorizontal: BaseTheme.spacing[3]
+    },
+
+    headerInfo: {
+        ...header,
+        backgroundColor: BaseTheme.palette.warning02,
+        marginBottom: BaseTheme.spacing[4],
+        paddingHorizontal: BaseTheme.spacing[3]
+    },
+
+    loggedIn: {
+        paddingHorizontal: _PADDING
+    },
+
+    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,16 @@
+// XXX CSS is used on Web, JavaScript styles are use only for mobile. Export an
+// (empty) object so that styles[*] statements on Web don't trigger errors.
+
+export default {};
+
+export const DROPBOX_LOGO = 'images/dropboxLogo_square.png';
+
+export const LOCAL_RECORDING = 'images/downloadLocalRecording.png';
+
+export const ICON_CLOUD = 'images/icon-cloud.png';
+
+export const ICON_INFO = 'images/icon-info.png';
+
+export const ICON_USERS = 'images/icon-users.png';
+
+export const ICON_OPTIONS = 'images/icon-info.png';

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 StartRecordingDialog from '../../Recording/web/StartRecordingDialog';
+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.text02
+        },
+        regular: {
+            background: theme.palette.ui10
+        },
+        highlightNotification: {
+            backgroundColor: theme.palette.ui10,
+            borderRadius: '6px',
+            boxShadow: '0px 6px 20px rgba(0, 0, 0, 0.25)',
+            boxSizing: 'border-box' as const,
+            color: theme.palette.uiBackground,
+            fontSize: '0.875rem',
+            fontWeight: 400,
+            left: '4px',
+            padding: '16px',
+            position: 'absolute' as const,
+            top: '32px',
+            width: 320
+        },
+        highlightNotificationButton: {
+            color: theme.palette.action01,
+            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(StartRecordingDialog));
+        }
+    }
+
+    /**
+    * 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.text03 : BaseTheme.palette.field01 }
+                        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,60 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { openDialog } from '../../../../base/dialog/actions';
+import { translate } from '../../../../base/i18n/functions';
+import AbstractRecordButton, {
+    IProps,
+    _mapStateToProps as _abstractMapStateToProps
+} from '../AbstractRecordButton';
+
+import StartRecordingDialog from './StartRecordingDialog';
+import StopRecordingDialog from './StopRecordingDialog';
+
+
+/**
+ * Button for opening a dialog where a recording session can be started.
+ */
+class RecordingButton extends AbstractRecordButton<IProps> {
+
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    override _onHandleClick() {
+        const { _isRecordingRunning, dispatch } = this.props;
+
+        dispatch(openDialog(
+            _isRecordingRunning ? StopRecordingDialog : StartRecordingDialog
+        ));
+    }
+}
+
+/**
+ * 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,
+        visible
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecordingButton));

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

@@ -0,0 +1,58 @@
+import React, { useCallback, useEffect } from 'react';
+import { useTranslation } from 'react-i18next';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+import { translateToHTML } from '../../../../base/i18n/functions';
+import Dialog from '../../../../base/ui/components/web/Dialog';
+import { grantRecordingConsent, grantRecordingConsentAndUnmute } from '../../../actions.web';
+
+
+/**
+ * Component that renders the dialog for explicit consent for recordings.
+ *
+ * @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 ?? {};
+    const learnMore = consentLearnMoreLink
+        ? ` (<a href="${consentLearnMoreLink}" target="_blank" rel="noopener noreferrer">${t('dialog.learnMore')}</a>)`
+        : '';
+
+    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'>
+            { translateToHTML(t, 'dialog.recordingInProgressDescription', { learnMore }) }
+        </Dialog>
+    );
+}

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

@@ -0,0 +1,137 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../../app/types';
+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 { RECORDING_TYPES } from '../../../constants';
+import AbstractStartRecordingDialog, {
+    mapStateToProps as abstractMapStateToProps
+} from '../AbstractStartRecordingDialog';
+
+import StartRecordingDialogContent from './StartRecordingDialogContent';
+
+
+/**
+ * React Component for getting confirmation to start a file recording session in
+ * progress.
+ *
+ * @augments Component
+ */
+class StartRecordingDialog extends AbstractStartRecordingDialog {
+
+    /**
+     * Disables start recording button.
+     *
+     * @returns {boolean}
+     */
+    isStartRecordingDisabled() {
+        const {
+            isTokenValid,
+            selectedRecordingService,
+            shouldRecordAudioAndVideo,
+            shouldRecordTranscription
+        } = this.state;
+
+        if (!shouldRecordAudioAndVideo && !shouldRecordTranscription) {
+            return true;
+        }
+
+        // Start button is disabled if recording service is only shown;
+        // When validating dropbox token, if that is not enabled, we either always
+        // show the start button or, if just dropbox is enabled, start button
+        // is available when there is token.
+        if (selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) {
+            return false;
+        } else if (selectedRecordingService === RECORDING_TYPES.DROPBOX) {
+            return !isTokenValid;
+        } else if (selectedRecordingService === RECORDING_TYPES.LOCAL) {
+            return false;
+        }
+
+        return true;
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     */
+    override render() {
+        const {
+            isTokenValid,
+            isValidating,
+            localRecordingOnlySelf,
+            selectedRecordingService,
+            sharingEnabled,
+            shouldRecordAudioAndVideo,
+            shouldRecordTranscription,
+            spaceLeft,
+            userName
+        } = this.state;
+        const {
+            _fileRecordingsServiceEnabled,
+            _fileRecordingsServiceSharingEnabled
+        } = this.props;
+
+        return (
+            <Dialog
+                ok = {{
+                    translationKey: 'dialog.startRecording',
+                    disabled: this.isStartRecordingDisabled()
+                }}
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.startRecording'>
+                <StartRecordingDialogContent
+                    fileRecordingsServiceEnabled = { _fileRecordingsServiceEnabled }
+                    fileRecordingsServiceSharingEnabled = { _fileRecordingsServiceSharingEnabled }
+                    integrationsEnabled = { this._areIntegrationsEnabled() }
+                    isTokenValid = { isTokenValid }
+                    isValidating = { isValidating }
+                    localRecordingOnlySelf = { localRecordingOnlySelf }
+                    onChange = { this._onSelectedRecordingServiceChanged }
+                    onLocalRecordingSelfChange = { this._onLocalRecordingSelfChange }
+                    onRecordAudioAndVideoChange = { this._onRecordAudioAndVideoChange }
+                    onSharingSettingChanged = { this._onSharingSettingChanged }
+                    onTranscriptionChange = { this._onTranscriptionChange }
+                    selectedRecordingService = { selectedRecordingService }
+                    sharingSetting = { sharingEnabled }
+                    shouldRecordAudioAndVideo = { shouldRecordAudioAndVideo }
+                    shouldRecordTranscription = { shouldRecordTranscription }
+                    spaceLeft = { spaceLeft }
+                    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)(StartRecordingDialog));

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

@@ -0,0 +1,486 @@
+import React from 'react';
+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 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 {
+    DROPBOX_LOGO,
+    ICON_CLOUD,
+    ICON_INFO,
+    ICON_USERS,
+    LOCAL_RECORDING
+} from '../styles.web';
+
+const EMPTY_FUNCTION = () => {
+    // empty
+};
+
+/**
+ * The start recording dialog content for the mobile application.
+ */
+class StartRecordingDialogContent extends AbstractStartRecordingDialogContent {
+    /**
+     * Renders the component.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    override render() {
+        const _renderRecording = this.props._renderRecording;
+
+        return (
+            <Container className = 'recording-dialog'>
+                { _renderRecording && (
+                    <>
+                        { this._renderNoIntegrationsContent() }
+                        { this._renderFileSharingContent() }
+                        { this._renderUploadToTheCloudInfo() }
+                        { this._renderIntegrationsContent() }
+                    </>
+                )}
+                { this._renderLocalRecordingContent() }
+                { _renderRecording && <> { this._renderAdvancedOptions() } </> }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the switch for saving the transcription.
+     *
+     * @returns {React$Component}
+     */
+    _renderAdvancedOptions() {
+        const { selectedRecordingService } = this.props;
+
+        if (selectedRecordingService !== RECORDING_TYPES.JITSI_REC_SERVICE || !this._canStartTranscribing()) {
+            return null;
+        }
+
+        const { showAdvancedOptions } = this.state;
+        const { shouldRecordAudioAndVideo, shouldRecordTranscription, t } = this.props;
+
+        return (
+            <>
+                <div className = 'recording-header-line' />
+                <div
+                    className = 'recording-header'
+                    onClick = { this._onToggleShowOptions }>
+                    <label className = 'recording-title-no-space'>
+                        {t('recording.showAdvancedOptions')}
+                    </label>
+                    <Icon
+                        ariaPressed = { showAdvancedOptions }
+                        onClick = { this._onToggleShowOptions }
+                        role = 'button'
+                        size = { 24 }
+                        src = { showAdvancedOptions ? IconArrowDown : IconArrowRight } />
+                </div>
+                {showAdvancedOptions && (
+                    <>
+                        <div className = 'recording-header space-top'>
+                            <label
+                                className = 'recording-title'
+                                htmlFor = 'recording-switch-transcription'>
+                                { t('recording.recordTranscription') }
+                            </label>
+                            <Switch
+                                checked = { shouldRecordTranscription }
+                                className = 'recording-switch'
+                                id = 'recording-switch-transcription'
+                                onChange = { this._onTranscriptionSwitchChange } />
+                        </div>
+                        <div className = 'recording-header space-top'>
+                            <label
+                                className = 'recording-title'
+                                htmlFor = 'recording-switch-transcription'>
+                                { t('recording.recordAudioAndVideo') }
+                            </label>
+                            <Switch
+                                checked = { shouldRecordAudioAndVideo }
+                                className = 'recording-switch'
+                                id = 'recording-switch-transcription'
+                                onChange = { this._onRecordAudioAndVideoSwitchChange } />
+                        </div>
+                    </>
+                )}
+            </>
+        );
+    }
+
+    /**
+     * Renders the content in case no integrations were enabled.
+     *
+     * @returns {React$Component}
+     */
+    _renderNoIntegrationsContent() {
+        if (!this._shouldRenderNoIntegrationsContent()) {
+            return null;
+        }
+
+        const {
+            _localRecordingAvailable,
+            integrationsEnabled,
+            isValidating,
+            isVpaas,
+            selectedRecordingService,
+            t
+        } = this.props;
+
+        const switchContent
+            = integrationsEnabled || _localRecordingAvailable
+                ? (
+                    <Switch
+                        checked = { selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE }
+                        className = 'recording-switch'
+                        disabled = { isValidating || !this.props.shouldRecordAudioAndVideo }
+                        id = 'recording-switch-jitsi'
+                        onChange = { this._onRecordingServiceSwitchChange } />
+                ) : null;
+
+        const label = isVpaas ? t('recording.serviceDescriptionCloud') : t('recording.serviceDescription');
+        const jitsiContentRecordingIconContainer
+            = integrationsEnabled || _localRecordingAvailable
+                ? 'jitsi-content-recording-icon-container-with-switch'
+                : 'jitsi-content-recording-icon-container-without-switch';
+        const contentRecordingClass = isVpaas
+            ? 'cloud-content-recording-icon-container'
+            : jitsiContentRecordingIconContainer;
+        const jitsiRecordingHeaderClass = !isVpaas && 'jitsi-recording-header';
+
+        return (
+            <Container
+                className = { `recording-header ${jitsiRecordingHeaderClass}` }
+                key = 'noIntegrationSetting'>
+                <Container className = { contentRecordingClass }>
+                    <Image
+                        alt = ''
+                        className = 'content-recording-icon'
+                        src = { ICON_CLOUD } />
+                </Container>
+                <label
+                    className = 'recording-title'
+                    htmlFor = 'recording-switch-jitsi'>
+                    { label }
+                </label>
+                { switchContent }
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the file recording service sharing options, if enabled.
+     *
+     * @returns {React$Component}
+     */
+    _renderFileSharingContent() {
+        if (!this._shouldRenderFileSharingContent()) {
+            return null;
+        }
+
+        const {
+            isValidating,
+            onSharingSettingChanged,
+            sharingSetting,
+            t
+        } = this.props;
+
+        return (
+            <Container
+                className = 'recording-header'
+                key = 'fileSharingSetting'>
+                <Container className = 'recording-icon-container file-sharing-icon-container'>
+                    <Image
+                        alt = ''
+                        className = 'recording-file-sharing-icon'
+                        src = { ICON_USERS } />
+                </Container>
+                <label
+                    className = 'recording-title'
+                    htmlFor = 'recording-switch-share'>
+                    { t('recording.fileSharingdescription') }
+                </label>
+                <Switch
+                    checked = { sharingSetting }
+                    className = 'recording-switch'
+                    disabled = { isValidating || !this.props.shouldRecordAudioAndVideo }
+                    id = 'recording-switch-share'
+                    onChange = { onSharingSettingChanged } />
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the info in case recording is uploaded to the cloud.
+     *
+     * @returns {React$Component}
+     */
+    _renderUploadToTheCloudInfo() {
+        const {
+            _hideStorageWarning,
+            isVpaas,
+            selectedRecordingService,
+            t
+        } = this.props;
+
+        if (!(isVpaas && selectedRecordingService === RECORDING_TYPES.JITSI_REC_SERVICE) || _hideStorageWarning) {
+            return null;
+        }
+
+        return (
+            <Container
+                className = 'recording-info'
+                key = 'cloudUploadInfo'>
+                <Image
+                    alt = ''
+                    className = 'recording-info-icon'
+                    src = { ICON_INFO } />
+                <Text className = 'recording-info-title'>
+                    { t('recording.serviceDescriptionCloudInfo') }
+                </Text>
+            </Container>
+        );
+    }
+
+    /**
+     * Renders a spinner component.
+     *
+     * @returns {React$Component}
+     */
+    _renderSpinner() {
+        return (
+            <LoadingIndicator size = 'small' />
+        );
+    }
+
+    /**
+     * Renders the screen with the account information of a logged in user.
+     *
+     * @returns {React$Component}
+     */
+    _renderSignOut() {
+        const {
+            spaceLeft,
+            t,
+            userName
+        } = this.props;
+        const duration = getRecordingDurationEstimation(spaceLeft);
+
+        return (
+            <Container>
+                <Container className = 'logged-in-panel'>
+                    <Container>
+                        <Text>
+                            { t('recording.loggedIn', { userName }) }
+                        </Text>
+                    </Container>
+                    <Container>
+                        <Text>
+                            {
+                                t('recording.availableSpace', {
+                                    spaceLeft,
+                                    duration
+                                })
+                            }
+                        </Text>
+                    </Container>
+                </Container>
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the content in case integrations were enabled.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    _renderIntegrationsContent() {
+        if (!this._shouldRenderIntegrationsContent()) {
+            return null;
+        }
+
+        const {
+            _localRecordingAvailable,
+            fileRecordingsServiceEnabled,
+            isTokenValid,
+            isValidating,
+            selectedRecordingService,
+            t
+        } = this.props;
+        let content = null;
+        let switchContent = null;
+        let labelContent = (
+            <Text className = 'recording-title'>
+                { t('recording.authDropboxText') }
+            </Text>
+        );
+
+        if (isValidating) {
+            content = this._renderSpinner();
+            switchContent = <Container className = 'recording-switch' />;
+        } else if (isTokenValid) {
+            content = this._renderSignOut();
+            switchContent = (
+                <Container className = 'recording-switch'>
+                    <Button
+                        accessibilityLabel = { t('recording.signOut') }
+                        labelKey = 'recording.signOut'
+                        onClick = { this._onSignOut }
+                        type = { BUTTON_TYPES.SECONDARY } />
+                </Container>
+            );
+
+        } else {
+            switchContent = (
+                <Container className = 'recording-switch'>
+                    <Button
+                        accessibilityLabel = { t('recording.signIn') }
+                        labelKey = 'recording.signIn'
+                        onClick = { this._onSignIn }
+                        type = { BUTTON_TYPES.PRIMARY } />
+                </Container>
+            );
+        }
+
+        if (fileRecordingsServiceEnabled || _localRecordingAvailable) {
+            switchContent = (
+                <Switch
+                    checked = { selectedRecordingService
+                        === RECORDING_TYPES.DROPBOX }
+                    className = 'recording-switch'
+                    disabled = { isValidating || !this.props.shouldRecordAudioAndVideo }
+                    id = 'recording-switch-integration'
+                    onChange = { this._onDropboxSwitchChange } />
+            );
+            labelContent = (
+                <label
+                    className = 'recording-title'
+                    htmlFor = 'recording-switch-integration'>
+                    { t('recording.authDropboxText') }
+                </label>
+            );
+        }
+
+        return (
+            <Container>
+                <Container
+                    className = { `recording-header ${this._shouldRenderNoIntegrationsContent()
+                        ? 'recording-header-line' : ''}` }>
+                    <Container
+                        className = 'recording-icon-container'>
+                        <Image
+                            alt = ''
+                            className = 'recording-icon'
+                            src = { DROPBOX_LOGO } />
+                    </Container>
+                    { labelContent }
+                    { switchContent }
+                </Container>
+                <Container className = 'authorization-panel'>
+                    { content }
+                </Container>
+            </Container>
+        );
+    }
+
+    /**
+     * Renders the content for local recordings.
+     *
+     * @protected
+     * @returns {React$Component}
+     */
+    _renderLocalRecordingContent() {
+        const {
+            _localRecordingAvailable,
+            _localRecordingNoNotification,
+            _localRecordingSelfEnabled,
+            isValidating,
+            localRecordingOnlySelf,
+            onLocalRecordingSelfChange,
+            t,
+            selectedRecordingService
+        } = this.props;
+
+        if (!_localRecordingAvailable) {
+            return null;
+        }
+
+        return (
+            <>
+                <Container>
+                    <Container
+                        className = 'recording-header recording-header-line'>
+                        <Container
+                            className = 'recording-icon-container'>
+                            <Image
+                                alt = ''
+                                className = 'recording-icon'
+                                src = { LOCAL_RECORDING } />
+                        </Container>
+                        <label
+                            className = 'recording-title'
+                            htmlFor = 'recording-switch-local'>
+                            { t('recording.saveLocalRecording') }
+                        </label>
+                        <Switch
+                            checked = { selectedRecordingService
+                                === RECORDING_TYPES.LOCAL }
+                            className = 'recording-switch'
+                            disabled = { isValidating || !this.props.shouldRecordAudioAndVideo }
+                            id = 'recording-switch-local'
+                            onChange = { this._onLocalRecordingSwitchChange } />
+                    </Container>
+                </Container>
+                {selectedRecordingService === RECORDING_TYPES.LOCAL && (
+                    <>
+                        {_localRecordingSelfEnabled && (
+                            <Container>
+                                <Container className = 'recording-header space-top'>
+                                    <Container className = 'recording-icon-container file-sharing-icon-container'>
+                                        <Image
+                                            alt = ''
+                                            className = 'recording-file-sharing-icon'
+                                            src = { ICON_USERS } />
+                                    </Container>
+                                    <label
+                                        className = 'recording-title'
+                                        htmlFor = 'recording-switch-myself'>
+                                        {t('recording.onlyRecordSelf')}
+                                    </label>
+                                    <Switch
+                                        checked = { Boolean(localRecordingOnlySelf) }
+                                        className = 'recording-switch'
+                                        disabled = { isValidating || !this.props.shouldRecordAudioAndVideo }
+                                        id = 'recording-switch-myself'
+                                        onChange = { onLocalRecordingSelfChange ?? EMPTY_FUNCTION } />
+                                </Container>
+                            </Container>
+                        )}
+                        <Text className = 'local-recording-warning text'>
+                            {t('recording.localRecordingWarning')}
+                        </Text>
+                        {_localRecordingNoNotification && !localRecordingOnlySelf
+                            && <Text className = 'local-recording-warning notification'>
+                                {t('recording.localRecordingNoNotificationWarning')}
+                            </Text>
+                        }
+                    </>
+                )}
+            </>
+
+        );
+    }
+}
+
+export default translate(connect(mapStateToProps)(StartRecordingDialogContent));

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

@@ -0,0 +1,48 @@
+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 { t, localRecordingVideoStop } = this.props;
+
+        return (
+            <Dialog
+                ok = {{ translationKey: 'dialog.confirm' }}
+                onSubmit = { this._onSubmit }
+                titleKey = 'dialog.recording'>
+                {t(localRecordingVideoStop ? 'recording.localRecordingVideoStop' : 'dialog.stopRecordingWarning') }
+            </Dialog>
+        );
+    }
+
+    /**
+     * Toggles screenshot capture.
+     *
+     * @returns {void}
+     */
+    override _toggleScreenshotCapture() {
+        this.props.dispatch(toggleScreenshotCaptureSummary(false));
+    }
+}
+
+export default translate(connect(_mapStateToProps)(StopRecordingDialog));

react/features/recording/components/native/RecordingExpandedLabel.ts

@@ -0,0 +1,103 @@
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate } from '../../../base/i18n/functions';
+import ExpandedLabel, { IProps as AbstractProps } from '../../../base/label/components/native/ExpandedLabel';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { isRecorderTranscriptionsRunning } from '../../../transcribing/functions';
+import { getSessionStatusToShow } from '../../functions';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * Whether this meeting is being transcribed.
+     */
+    _isTranscribing: boolean;
+
+    /**
+     * The status of the highermost priority session.
+     */
+    _status?: string;
+
+    /**
+     * The recording mode this indicator should display.
+     */
+    mode: string;
+
+    /**
+     * Function to be used to translate i18n labels.
+     */
+    t: Function;
+}
+
+/**
+ * A react {@code Component} that implements an expanded label as tooltip-like
+ * component to explain the meaning of the {@code RecordingLabel}.
+ */
+class RecordingExpandedLabel extends ExpandedLabel<IProps> {
+
+    /**
+     * Returns the label specific text of this {@code ExpandedLabel}.
+     *
+     * @returns {string}
+     */
+    _getLabel() {
+        const { _status, mode, t } = this.props;
+        let postfix = 'expandedOn', prefix = 'recording'; // Default values.
+
+        switch (mode) {
+        case JitsiRecordingConstants.mode.STREAM:
+            prefix = 'liveStreaming';
+            break;
+        case JitsiRecordingConstants.mode.FILE:
+            prefix = 'recording';
+            break;
+        }
+
+        switch (_status) {
+        case JitsiRecordingConstants.status.OFF:
+            postfix = 'expandedOff';
+            break;
+        case JitsiRecordingConstants.status.PENDING:
+            postfix = 'expandedPending';
+            break;
+        case JitsiRecordingConstants.status.ON:
+            postfix = 'expandedOn';
+            break;
+        }
+
+        let content = t(`${prefix}.${postfix}`);
+
+        if (this.props._isTranscribing) {
+            if (_status === JitsiRecordingConstants.status.ON) {
+                content += ` ${t('transcribing.labelTooltipExtra')}`;
+            } else {
+                content = t('transcribing.labelTooltip');
+            }
+        }
+
+        return content;
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code RecordingExpandedLabel}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {IProps} ownProps - The component's own props.
+ * @private
+ * @returns {{
+ *     _status: ?string
+ * }}
+ */
+function _mapStateToProps(state: IReduxState, ownProps: any) {
+    const { mode } = ownProps;
+
+    return {
+        _isTranscribing: isRecorderTranscriptionsRunning(state),
+        _status: getSessionStatusToShow(state, mode)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecordingExpandedLabel));

react/features/recording/components/native/RecordingLabel.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../base/i18n/functions';
+import { IconRecord, IconSites } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/native/Label';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import { StyleType } from '../../../base/styles/functions.any';
+import AbstractRecordingLabel, {
+    _mapStateToProps
+} from '../AbstractRecordingLabel';
+
+import styles from './styles';
+
+/**
+ * Implements a React {@link Component} which displays the current state of
+ * conference recording.
+ *
+ * @augments {Component}
+ */
+class RecordingLabel extends AbstractRecordingLabel {
+
+    /**
+     * Renders the platform specific label component.
+     *
+     * @inheritdoc
+     */
+    _renderLabel() {
+        let status: 'on' | 'in_progress' | 'off' = 'on';
+        const isRecording = this.props.mode === JitsiRecordingConstants.mode.FILE;
+        const icon = isRecording ? IconRecord : IconSites;
+
+        switch (this.props._status) {
+        case JitsiRecordingConstants.status.PENDING:
+            status = 'in_progress';
+            break;
+        case JitsiRecordingConstants.status.OFF:
+            status = 'off';
+            break;
+        }
+
+        return (
+            <Label
+                icon = { icon }
+                status = { status }
+                style = { styles.indicatorStyle as StyleType } />
+        );
+    }
+}
+
+export default translate(connect(_mapStateToProps)(RecordingLabel));

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

@@ -0,0 +1,18 @@
+import { createStyleSheet } from '../../../base/styles/functions.native';
+import BaseTheme from '../../../base/ui/components/BaseTheme';
+
+/**
+ * The styles of the React {@code Components} of the feature recording.
+ */
+export default createStyleSheet({
+
+    /**
+     * Style for the recording indicator.
+     */
+    indicatorStyle: {
+        marginRight: 4,
+        marginLeft: 0,
+        marginBottom: 0,
+        backgroundColor: BaseTheme.palette.iconError
+    }
+});

react/features/recording/components/web/RecordingLabel.tsx

@@ -0,0 +1,85 @@
+import { Theme } from '@mui/material';
+import React from 'react';
+import { connect } from 'react-redux';
+import { withStyles } from 'tss-react/mui';
+
+import { translate } from '../../../base/i18n/functions';
+import { IconRecord, IconSites } from '../../../base/icons/svg';
+import Label from '../../../base/label/components/web/Label';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import Tooltip from '../../../base/tooltip/components/Tooltip';
+import AbstractRecordingLabel, {
+    IProps as AbstractProps,
+    _mapStateToProps
+} from '../AbstractRecordingLabel';
+
+interface IProps extends AbstractProps {
+
+    /**
+     * An object containing the CSS classes.
+     */
+    classes?: Partial<Record<keyof ReturnType<typeof styles>, string>>;
+
+}
+
+/**
+ * Creates the styles for the component.
+ *
+ * @param {Object} theme - The current UI theme.
+ *
+ * @returns {Object}
+ */
+const styles = (theme: Theme) => {
+    return {
+        record: {
+            background: theme.palette.actionDanger
+        }
+    };
+};
+
+/**
+ * Implements a React {@link Component} which displays the current state of
+ * conference recording.
+ *
+ * @augments {Component}
+ */
+class RecordingLabel extends AbstractRecordingLabel<IProps> {
+    /**
+     * Renders the platform specific label component.
+     *
+     * @inheritdoc
+     */
+    override _renderLabel() {
+        const { _isTranscribing, _status, mode, t } = this.props;
+        const classes = withStyles.getClasses(this.props);
+        const isRecording = mode === JitsiRecordingConstants.mode.FILE;
+        const icon = isRecording ? IconRecord : IconSites;
+        let content;
+
+        if (_status === JitsiRecordingConstants.status.ON) {
+            content = t(isRecording ? 'videoStatus.recording' : 'videoStatus.streaming');
+
+            if (_isTranscribing) {
+                content += ` ${t('transcribing.labelTooltipExtra')}`;
+            }
+        } else if (mode === JitsiRecordingConstants.mode.STREAM) {
+            return null;
+        } else if (_isTranscribing) {
+            content = t('transcribing.labelTooltip');
+        } else {
+            return null;
+        }
+
+        return (
+            <Tooltip
+                content = { content }
+                position = { 'bottom' }>
+                <Label
+                    className = { classes.record }
+                    icon = { icon } />
+            </Tooltip>
+        );
+    }
+}
+
+export default withStyles(translate(connect(_mapStateToProps)(RecordingLabel)), styles);

react/features/recording/components/web/RecordingLimitNotificationDescription.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { WithTranslation } from 'react-i18next';
+import { connect } from 'react-redux';
+
+import { IReduxState } from '../../../app/types';
+import { translate, translateToHTML } from '../../../base/i18n/functions';
+
+/**
+ * The type of the React {@code Component} props of {@link RecordingLimitNotificationDescription}.
+ */
+interface IProps extends WithTranslation {
+
+    /**
+     * The name of the app with unlimited recordings.
+     */
+    _appName?: string;
+
+    /**
+     * The URL to the app with unlimited recordings.
+     */
+    _appURL?: string;
+
+    /**
+     * The limit of time in minutes for the recording.
+     */
+    _limit?: number;
+
+    /**
+     * True if the notification is related to the livestreaming and false if not.
+     */
+    isLiveStreaming: Boolean;
+}
+
+/**
+ * A component that renders the description of the notification for the recording initiator.
+ *
+ * @param {IProps} props - The props of the component.
+ * @returns {Component}
+ */
+function RecordingLimitNotificationDescription(props: IProps) {
+    const { _limit, _appName, _appURL, isLiveStreaming, t } = props;
+
+    return (
+        <span>
+            {
+                translateToHTML(
+                    t,
+                    `${isLiveStreaming ? 'liveStreaming' : 'recording'}.limitNotificationDescriptionWeb`, {
+                        limit: _limit,
+                        app: _appName,
+                        url: _appURL
+                    })
+            }
+        </span>
+    );
+}
+
+
+/**
+ * Maps part of the Redux state to the props of this component.
+ *
+ * @param {Object} state - The Redux state.
+ * @returns {IProps}
+ */
+function _mapStateToProps(state: IReduxState) {
+    const { recordingLimit = {} } = state['features/base/config'];
+    const { limit: _limit, appName: _appName, appURL: _appURL } = recordingLimit;
+
+    return {
+        _limit,
+        _appName,
+        _appURL
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecordingLimitNotificationDescription));

react/features/recording/constants.ts

@@ -0,0 +1,64 @@
+import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
+
+
+/**
+ * The identifier of the sound to be played when a live streaming session is stopped.
+ *
+ * @type {string}
+ */
+export const LIVE_STREAMING_OFF_SOUND_ID = 'LIVE_STREAMING_OFF_SOUND';
+
+/**
+ * The identifier of the sound to be played when a live streaming session is started.
+ *
+ * @type {string}
+ */
+export const LIVE_STREAMING_ON_SOUND_ID = 'LIVE_STREAMING_ON_SOUND';
+
+/**
+ * The identifier of the prompt to start recording notification.
+ *
+ * @type {string}
+ */
+export const PROMPT_RECORDING_NOTIFICATION_ID = 'PROMPT_RECORDING_NOTIFICATION_ID';
+
+/**
+ * The identifier of the sound to be played when a recording session is stopped.
+ *
+ * @type {string}
+ */
+export const RECORDING_OFF_SOUND_ID = 'RECORDING_OFF_SOUND';
+
+/**
+ * The identifier of the sound to be played when a recording session is started.
+ *
+ * @type {string}
+ */
+export const RECORDING_ON_SOUND_ID = 'RECORDING_ON_SOUND';
+
+/**
+ * Expected supported recording types.
+ *
+ * @enum {string}
+ */
+export const RECORDING_TYPES = {
+    JITSI_REC_SERVICE: 'recording-service',
+    DROPBOX: 'dropbox',
+    LOCAL: 'local'
+};
+
+/**
+ * An array defining the priorities of the recording (or live streaming)
+ * statuses, where the index of the array is the priority itself.
+ *
+ * @type {Array<string>}
+ */
+export const RECORDING_STATUS_PRIORITIES = [
+    JitsiRecordingConstants.status.OFF,
+    JitsiRecordingConstants.status.PENDING,
+    JitsiRecordingConstants.status.ON
+];
+
+export const START_RECORDING_NOTIFICATION_ID = 'START_RECORDING_NOTIFICATION_ID';
+
+export const RECORDING_METADATA_ID = 'recording';

react/features/recording/functions.ts

@@ -0,0 +1,485 @@
+import i18next from 'i18next';
+
+import { IReduxState, IStore } from '../app/types';
+import { MEET_FEATURES } from '../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../base/jwt/functions';
+import { JitsiRecordingConstants } from '../base/lib-jitsi-meet';
+import { getSoundFileSrc } from '../base/media/functions';
+import { getLocalParticipant, getRemoteParticipants } from '../base/participants/functions';
+import { registerSound, unregisterSound } from '../base/sounds/actions';
+import { isEmbedded } from '../base/util/embedUtils';
+import { isSpotTV } from '../base/util/spot';
+import { isInBreakoutRoom as isInBreakoutRoomF } from '../breakout-rooms/functions';
+import { isEnabled as isDropboxEnabled } from '../dropbox/functions';
+import { extractFqnFromPath } from '../dynamic-branding/functions.any';
+import { canAddTranscriber, isRecorderTranscriptionsRunning } from '../transcribing/functions';
+
+import LocalRecordingManager from './components/Recording/LocalRecordingManager';
+import {
+    LIVE_STREAMING_OFF_SOUND_ID,
+    LIVE_STREAMING_ON_SOUND_ID,
+    RECORDING_OFF_SOUND_ID,
+    RECORDING_ON_SOUND_ID,
+    RECORDING_STATUS_PRIORITIES,
+    RECORDING_TYPES
+} from './constants';
+import logger from './logger';
+import {
+    LIVE_STREAMING_OFF_SOUND_FILE,
+    LIVE_STREAMING_ON_SOUND_FILE,
+    RECORDING_OFF_SOUND_FILE,
+    RECORDING_ON_SOUND_FILE
+} from './sounds';
+
+/**
+ * Searches in the passed in redux state for an active recording session of the
+ * passed in mode.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @param {string} mode - Find an active recording session of the given mode.
+ * @returns {Object|undefined}
+ */
+export function getActiveSession(state: IReduxState, mode: string) {
+    const { sessionDatas } = state['features/recording'];
+    const { status: statusConstants } = JitsiRecordingConstants;
+
+    return sessionDatas.find(sessionData => sessionData.mode === mode
+        && (sessionData.status === statusConstants.ON
+            || sessionData.status === statusConstants.PENDING));
+}
+
+/**
+ * Returns an estimated recording duration based on the size of the video file
+ * in MB. The estimate is calculated under the assumption that 1 min of recorded
+ * video needs 10MB of storage on average.
+ *
+ * @param {number} size - The size in MB of the recorded video.
+ * @returns {number} - The estimated duration in minutes.
+ */
+export function getRecordingDurationEstimation(size?: number | null) {
+    return Math.floor((size || 0) / 10);
+}
+
+/**
+ * Searches in the passed in redux state for a recording session that matches
+ * the passed in recording session ID.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @param {string} id - The ID of the recording session to find.
+ * @returns {Object|undefined}
+ */
+export function getSessionById(state: IReduxState, id: string) {
+    return state['features/recording'].sessionDatas.find(
+        sessionData => sessionData.id === id);
+}
+
+/**
+ * Fetches the recording link from the server.
+ *
+ * @param {string} url - The base url.
+ * @param {string} recordingSessionId - The ID of the recording session to find.
+ * @param {string} region - The meeting region.
+ * @param {string} tenant - The meeting tenant.
+ * @returns {Promise<any>}
+ */
+export async function getRecordingLink(url: string, recordingSessionId: string, region: string, tenant: string) {
+    const fullUrl = `${url}?recordingSessionId=${recordingSessionId}&region=${region}&tenant=${tenant}`;
+    const res = await fetch(fullUrl, {
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    });
+    const json = await res.json();
+
+    return res.ok ? json : Promise.reject(json);
+}
+
+/**
+ * Selector used for determining if recording is saved on dropbox.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {string}
+ */
+export function isSavingRecordingOnDropbox(state: IReduxState) {
+    return isDropboxEnabled(state)
+        && state['features/recording'].selectedRecordingService === RECORDING_TYPES.DROPBOX;
+}
+
+/**
+ * Selector used for determining disable state for the meeting highlight button.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {string}
+ */
+export function isHighlightMeetingMomentDisabled(state: IReduxState) {
+    return state['features/recording'].disableHighlightMeetingMoment;
+}
+
+/**
+ * Returns the recording session status that is to be shown in a label. E.g. If
+ * there is a session with the status OFF and one with PENDING, then the PENDING
+ * one will be shown, because that is likely more important for the user to see.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @param {string} mode - The recording mode to get status for.
+ * @returns {string|undefined}
+ */
+export function getSessionStatusToShow(state: IReduxState, mode: string): string | undefined {
+    const recordingSessions = state['features/recording'].sessionDatas;
+    let status;
+
+    if (Array.isArray(recordingSessions)) {
+        for (const session of recordingSessions) {
+            if (session.mode === mode
+                    && (!status
+                        || (RECORDING_STATUS_PRIORITIES.indexOf(session.status)
+                            > RECORDING_STATUS_PRIORITIES.indexOf(status)))) {
+                status = session.status;
+            }
+        }
+    }
+    if (!status && mode === JitsiRecordingConstants.mode.FILE
+            && (LocalRecordingManager.isRecordingLocally() || isRemoteParticipantRecordingLocally(state))) {
+        status = JitsiRecordingConstants.status.ON;
+    }
+
+    return status;
+}
+
+/**
+ * Check if local recording is supported.
+ *
+ * @returns {boolean} - Whether local recording is supported or not.
+ */
+export function supportsLocalRecording() {
+    return LocalRecordingManager.isSupported() && !isEmbedded();
+}
+
+/**
+ * Returns true if there is a cloud recording running.
+ *
+ * @param {IReduxState} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function isCloudRecordingRunning(state: IReduxState) {
+    return Boolean(getActiveSession(state, JitsiRecordingConstants.mode.FILE));
+}
+
+/**
+ * Returns true if there is a live streaming running.
+ *
+ * @param {IReduxState} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function isLiveStreamingRunning(state: IReduxState) {
+    return Boolean(getActiveSession(state, JitsiRecordingConstants.mode.STREAM));
+}
+
+/**
+ * Returns true if there is a recording session running.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function isRecordingRunning(state: IReduxState) {
+    return (
+        isCloudRecordingRunning(state)
+        || LocalRecordingManager.isRecordingLocally()
+    );
+}
+
+/**
+ * Returns true if the participant can stop recording.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function canStopRecording(state: IReduxState) {
+    if (LocalRecordingManager.isRecordingLocally()) {
+        return true;
+    }
+
+    if (isCloudRecordingRunning(state) || isRecorderTranscriptionsRunning(state)) {
+        return isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false);
+    }
+
+    return false;
+}
+
+/**
+ * Returns whether the transcription should start automatically when recording starts.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function shouldAutoTranscribeOnRecord(state: IReduxState) {
+    const { transcription } = state['features/base/config'];
+
+    return (transcription?.autoTranscribeOnRecord ?? true) && canAddTranscriber(state);
+}
+
+/**
+ * Returns whether the recording should be shared.
+ *
+ * @param {Object} state - The redux state to search in.
+ * @returns {boolean}
+ */
+export function isRecordingSharingEnabled(state: IReduxState) {
+    const { recordingService } = state['features/base/config'];
+
+    return recordingService?.sharingEnabled ?? false;
+}
+
+/**
+ * Returns the recording button props.
+ *
+ * @param {Object} state - The redux state to search in.
+ *
+ * @returns {{
+ *    disabled: boolean,
+ *    tooltip: string,
+ *    visible: boolean
+ * }}
+ */
+export function getRecordButtonProps(state: IReduxState) {
+    let visible;
+
+    // a button can be disabled/enabled if enableFeaturesBasedOnToken
+    // is on or if the livestreaming is running.
+    let disabled = false;
+    let tooltip = '';
+
+    // If the containing component provides the visible prop, that is one
+    // above all, but if not, the button should be autonomus and decide on
+    // its own to be visible or not.
+    const {
+        recordingService,
+        localRecording
+    } = state['features/base/config'];
+    const localRecordingEnabled = !localRecording?.disable && supportsLocalRecording();
+
+    const dropboxEnabled = isDropboxEnabled(state);
+    const recordingEnabled = recordingService?.enabled || dropboxEnabled;
+
+    if (localRecordingEnabled) {
+        visible = true;
+    } else if (isJwtFeatureEnabled(state, MEET_FEATURES.RECORDING, false)) {
+        visible = recordingEnabled;
+    }
+
+    // disable the button if the livestreaming is running.
+    if (visible && isLiveStreamingRunning(state)) {
+        disabled = true;
+        tooltip = 'dialog.recordingDisabledBecauseOfActiveLiveStreamingTooltip';
+    }
+
+    // disable the button if we are in a breakout room.
+    if (isInBreakoutRoomF(state)) {
+        disabled = true;
+        visible = false;
+    }
+
+    return {
+        disabled,
+        tooltip,
+        visible
+    };
+}
+
+/**
+ * Returns the resource id.
+ *
+ * @param {Object | string} recorder - A participant or it's resource.
+ * @returns {string|undefined}
+ */
+export function getResourceId(recorder: string | { getId: Function; }) {
+    if (recorder) {
+        return typeof recorder === 'string'
+            ? recorder
+            : recorder.getId();
+    }
+}
+
+/**
+ * Sends a meeting highlight to backend.
+ *
+ * @param  {Object} state - Redux state.
+ * @returns {boolean} - True if sent, false otherwise.
+ */
+export async function sendMeetingHighlight(state: IReduxState) {
+    const { webhookProxyUrl: url } = state['features/base/config'];
+    const { conference } = state['features/base/conference'];
+    const { jwt } = state['features/base/jwt'];
+    const { connection } = state['features/base/connection'];
+    const jid = connection?.getJid();
+    const localParticipant = getLocalParticipant(state);
+
+    const headers = {
+        ...jwt ? { 'Authorization': `Bearer ${jwt}` } : {},
+        'Content-Type': 'application/json'
+    };
+
+    const reqBody = {
+        meetingFqn: extractFqnFromPath(state),
+        sessionId: conference?.getMeetingUniqueId(),
+        submitted: Date.now(),
+        participantId: localParticipant?.jwtId,
+        participantName: localParticipant?.name,
+        participantJid: jid
+    };
+
+    if (url) {
+        try {
+            const res = await fetch(`${url}/v2/highlights`, {
+                method: 'POST',
+                headers,
+                body: JSON.stringify(reqBody)
+            });
+
+            if (res.ok) {
+                return true;
+            }
+            logger.error('Status error:', res.status);
+        } catch (err) {
+            logger.error('Could not send request', err);
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Whether a remote participant is recording locally or not.
+ *
+ * @param {Object} state - Redux state.
+ * @returns {boolean}
+ */
+export function isRemoteParticipantRecordingLocally(state: IReduxState) {
+    const participants = getRemoteParticipants(state);
+
+    // eslint-disable-next-line prefer-const
+    for (let value of participants.values()) {
+        if (value.localRecording) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Unregisters the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @returns {void}
+ */
+export function unregisterRecordingAudioFiles(dispatch: IStore['dispatch']) {
+    dispatch(unregisterSound(LIVE_STREAMING_OFF_SOUND_FILE));
+    dispatch(unregisterSound(LIVE_STREAMING_ON_SOUND_FILE));
+    dispatch(unregisterSound(RECORDING_OFF_SOUND_FILE));
+    dispatch(unregisterSound(RECORDING_ON_SOUND_FILE));
+}
+
+/**
+ * Registers the audio files based on locale.
+ *
+ * @param {Dispatch<any>} dispatch - The redux dispatch function.
+ * @param {boolean|undefined} shouldUnregister - Whether the sounds should be unregistered.
+ * @returns {void}
+ */
+export function registerRecordingAudioFiles(dispatch: IStore['dispatch'], shouldUnregister?: boolean) {
+    const language = i18next.language;
+
+    if (shouldUnregister) {
+        unregisterRecordingAudioFiles(dispatch);
+    }
+
+    dispatch(registerSound(
+        LIVE_STREAMING_OFF_SOUND_ID,
+        getSoundFileSrc(LIVE_STREAMING_OFF_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        LIVE_STREAMING_ON_SOUND_ID,
+        getSoundFileSrc(LIVE_STREAMING_ON_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        RECORDING_OFF_SOUND_ID,
+        getSoundFileSrc(RECORDING_OFF_SOUND_FILE, language)));
+
+    dispatch(registerSound(
+        RECORDING_ON_SOUND_ID,
+        getSoundFileSrc(RECORDING_ON_SOUND_FILE, language)));
+}
+
+/**
+ * Returns true if the live-streaming button should be visible.
+ *
+ * @param {boolean} liveStreamingEnabled - True if the live-streaming is enabled.
+ * @param {boolean} liveStreamingAllowed - True if the live-streaming feature is enabled in JWT
+ *                                         or is a moderator if JWT is missing or features are missing in JWT.
+ * @param {boolean} isInBreakoutRoom - True if in breakout room.
+ * @returns {boolean}
+ */
+export function isLiveStreamingButtonVisible({
+    liveStreamingAllowed,
+    liveStreamingEnabled,
+    isInBreakoutRoom
+}: {
+    isInBreakoutRoom: boolean;
+    liveStreamingAllowed: boolean;
+    liveStreamingEnabled: boolean;
+}) {
+    return !isInBreakoutRoom && liveStreamingEnabled && liveStreamingAllowed;
+}
+
+/**
+ * Whether the RecordingConsentDialog should be displayed.
+ *
+ * @param {any} recorderSession - The recorder session.
+ * @param {IReduxState} state - The Redux state.
+ * @returns {boolean}
+ */
+export function shouldRequireRecordingConsent(recorderSession: any, state: IReduxState) {
+    const { requireRecordingConsent, skipRecordingConsentInMeeting }
+        = state['features/dynamic-branding'] || {};
+    const { conference } = state['features/base/conference'] || {};
+    const { requireConsent, skipConsentInMeeting } = state['features/base/config'].recordings || {};
+    const { iAmRecorder, testing: { showSpotConsentDialog = false } = {} } = state['features/base/config'];
+    const { consentRequested } = state['features/recording'];
+
+    if (iAmRecorder) {
+        return false;
+    }
+
+    // For Spot TV instances, check the showSpotConsentDialog config parameter
+    // If showSpotConsentDialog is false (or undefined, defaulting to false), don't show consent dialog
+    if (isSpotTV(state) && !showSpotConsentDialog) {
+        return false;
+    }
+
+    if (!requireConsent && !requireRecordingConsent) {
+        return false;
+    }
+
+    if (consentRequested.has(recorderSession.getID())) {
+        return false;
+    }
+
+    // If we join a meeting that has an ongoing recording `conference` will be undefined since
+    // we get the recording state through the initial presence which happens in between the
+    // WILL_JOIN and JOINED events.
+    if (conference && (skipConsentInMeeting || skipRecordingConsentInMeeting)) {
+        return false;
+    }
+
+    // lib-jitsi-meet may set a JitsiParticipant as the initiator of the recording session or the
+    // JID resource in case it cannot find it. We need to handle both cases.
+    const initiator = recorderSession.getInitiator();
+    const initiatorId = initiator?.getId?.() ?? initiator;
+
+    if (!initiatorId || recorderSession.getStatus() === JitsiRecordingConstants.status.OFF) {
+        return false;
+    }
+
+    return initiatorId !== getLocalParticipant(state)?.id;
+}

react/features/recording/hooks.web.ts

@@ -0,0 +1,61 @@
+import { useSelector } from 'react-redux';
+
+import { IReduxState } from '../app/types';
+import { MEET_FEATURES } from '../base/jwt/constants';
+import { isJwtFeatureEnabled } from '../base/jwt/functions';
+import { isInBreakoutRoom } from '../breakout-rooms/functions';
+
+import { getLiveStreaming } from './components/LiveStream/functions';
+import LiveStreamButton from './components/LiveStream/web/LiveStreamButton';
+import RecordButton from './components/Recording/web/RecordButton';
+import { getRecordButtonProps, isLiveStreamingButtonVisible } from './functions';
+
+
+const recording = {
+    key: 'recording',
+    Content: RecordButton,
+    group: 2
+};
+
+const livestreaming = {
+    key: 'livestreaming',
+    Content: LiveStreamButton,
+    group: 2
+};
+
+/**
+ * A hook that returns the recording button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useRecordingButton() {
+    const recordingProps = useSelector(getRecordButtonProps);
+    const toolbarButtons = useSelector((state: IReduxState) => state['features/toolbox'].toolbarButtons);
+
+    if (toolbarButtons?.includes('recording') && recordingProps.visible) {
+        return recording;
+    }
+
+}
+
+/**
+ * A hook that returns the livestreaming button if it is enabled and undefined otherwise.
+ *
+ *  @returns {Object | undefined}
+ */
+export function useLiveStreamingButton() {
+    const toolbarButtons = useSelector((state: IReduxState) => state['features/toolbox'].toolbarButtons);
+    const liveStreaming = useSelector(getLiveStreaming);
+    const liveStreamingAllowed = useSelector((state: IReduxState) =>
+        isJwtFeatureEnabled(state, MEET_FEATURES.LIVESTREAMING, false));
+    const _isInBreakoutRoom = useSelector(isInBreakoutRoom);
+
+    if (toolbarButtons?.includes('recording')
+            && isLiveStreamingButtonVisible({
+                liveStreamingAllowed,
+                liveStreamingEnabled: liveStreaming?.enabled,
+                isInBreakoutRoom: _isInBreakoutRoom
+            })) {
+        return livestreaming;
+    }
+}

react/features/recording/logger.ts

@@ -0,0 +1,3 @@
+import { getLogger } from '../base/logging/functions';
+
+export default getLogger('features/recording');

react/features/recording/middleware.ts

@@ -0,0 +1,432 @@
+import { batch } from 'react-redux';
+
+import { createRecordingEvent } from '../analytics/AnalyticsEvents';
+import { sendAnalytics } from '../analytics/functions';
+import { IStore } from '../app/types';
+import { APP_WILL_MOUNT, APP_WILL_UNMOUNT } from '../base/app/actionTypes';
+import { CONFERENCE_JOIN_IN_PROGRESS } from '../base/conference/actionTypes';
+import { getCurrentConference } from '../base/conference/functions';
+import { openDialog } from '../base/dialog/actions';
+import JitsiMeetJS, {
+    JitsiConferenceEvents,
+    JitsiRecordingConstants
+} from '../base/lib-jitsi-meet';
+import {
+    setAudioMuted,
+    setAudioUnmutePermissions,
+    setVideoMuted,
+    setVideoUnmutePermissions
+} from '../base/media/actions';
+import { MEDIA_TYPE } from '../base/media/constants';
+import { PARTICIPANT_UPDATED } from '../base/participants/actionTypes';
+import { updateLocalRecordingStatus } from '../base/participants/actions';
+import { PARTICIPANT_ROLE } from '../base/participants/constants';
+import { getLocalParticipant, getParticipantDisplayName } from '../base/participants/functions';
+import MiddlewareRegistry from '../base/redux/MiddlewareRegistry';
+import StateListenerRegistry from '../base/redux/StateListenerRegistry';
+import {
+    playSound,
+    stopSound
+} from '../base/sounds/actions';
+import { TRACK_ADDED } from '../base/tracks/actionTypes';
+import { hideNotification, showErrorNotification, showNotification } from '../notifications/actions';
+import { NOTIFICATION_TIMEOUT_TYPE } from '../notifications/constants';
+import { isRecorderTranscriptionsRunning } from '../transcribing/functions';
+
+import { RECORDING_SESSION_UPDATED, START_LOCAL_RECORDING, STOP_LOCAL_RECORDING } from './actionTypes';
+import {
+    clearRecordingSessions,
+    hidePendingRecordingNotification,
+    markConsentRequested,
+    showPendingRecordingNotification,
+    showRecordingError,
+    showRecordingLimitNotification,
+    showRecordingWarning,
+    showStartRecordingNotification,
+    showStartedRecordingNotification,
+    showStoppedRecordingNotification,
+    updateRecordingSessionData
+} from './actions';
+import { RecordingConsentDialog } from './components/Recording';
+import LocalRecordingManager from './components/Recording/LocalRecordingManager';
+import {
+    LIVE_STREAMING_OFF_SOUND_ID,
+    LIVE_STREAMING_ON_SOUND_ID,
+    RECORDING_OFF_SOUND_ID,
+    RECORDING_ON_SOUND_ID,
+    START_RECORDING_NOTIFICATION_ID
+} from './constants';
+import {
+    getResourceId,
+    getSessionById,
+    registerRecordingAudioFiles,
+    shouldRequireRecordingConsent,
+    unregisterRecordingAudioFiles
+} from './functions';
+import logger from './logger';
+
+/**
+ * StateListenerRegistry provides a reliable way to detect the leaving of a
+ * conference, where we need to clean up the recording sessions.
+ */
+StateListenerRegistry.register(
+    /* selector */ state => getCurrentConference(state),
+    /* listener */ (conference, { dispatch }) => {
+        if (!conference) {
+            dispatch(clearRecordingSessions());
+        }
+    }
+);
+
+/**
+ * The redux middleware to handle the recorder updates in a React way.
+ *
+ * @param {Store} store - The redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(({ dispatch, getState }) => next => action => {
+    let oldSessionData;
+
+    if (action.type === RECORDING_SESSION_UPDATED) {
+        oldSessionData
+            = getSessionById(getState(), action.sessionData.id);
+    }
+
+    const result = next(action);
+
+    switch (action.type) {
+    case APP_WILL_MOUNT:
+        registerRecordingAudioFiles(dispatch);
+
+        break;
+
+    case APP_WILL_UNMOUNT:
+        unregisterRecordingAudioFiles(dispatch);
+
+        break;
+
+    case CONFERENCE_JOIN_IN_PROGRESS: {
+        const { conference } = action;
+
+        conference.on(
+            JitsiConferenceEvents.RECORDER_STATE_CHANGED,
+            (recorderSession: any) => {
+                if (recorderSession) {
+                    recorderSession.getID() && dispatch(updateRecordingSessionData(recorderSession));
+                    if (recorderSession.getError()) {
+                        _showRecordingErrorNotification(recorderSession, dispatch, getState);
+                    } else {
+                        _showExplicitConsentDialog(recorderSession, dispatch, getState);
+                    }
+                }
+
+                return;
+            });
+
+        break;
+    }
+
+    case START_LOCAL_RECORDING: {
+        const { localRecording } = getState()['features/base/config'];
+        const { onlySelf } = action;
+
+        LocalRecordingManager.startLocalRecording({
+            dispatch,
+            getState
+        }, action.onlySelf)
+        .then(() => {
+            const props = {
+                descriptionKey: 'recording.on',
+                titleKey: 'dialog.recording'
+            };
+
+            if (localRecording?.notifyAllParticipants && !onlySelf) {
+                dispatch(playSound(RECORDING_ON_SOUND_ID));
+            }
+            dispatch(showNotification(props, NOTIFICATION_TIMEOUT_TYPE.MEDIUM));
+            dispatch(showNotification({
+                titleKey: 'recording.localRecordingStartWarningTitle',
+                descriptionKey: 'recording.localRecordingStartWarning'
+            }, NOTIFICATION_TIMEOUT_TYPE.STICKY));
+            dispatch(updateLocalRecordingStatus(true, onlySelf));
+            sendAnalytics(createRecordingEvent('started', `local${onlySelf ? '.self' : ''}`));
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyRecordingStatusChanged(
+                    true, 'local', undefined, isRecorderTranscriptionsRunning(getState()));
+            }
+        })
+        .catch(err => {
+            logger.error('Capture failed', err);
+
+            let descriptionKey = 'recording.error';
+
+            if (err.message === 'WrongSurfaceSelected') {
+                descriptionKey = 'recording.surfaceError';
+
+            } else if (err.message === 'NoLocalStreams') {
+                descriptionKey = 'recording.noStreams';
+            } else if (err.message === 'NoMicTrack') {
+                descriptionKey = 'recording.noMicPermission';
+            }
+            const props = {
+                descriptionKey,
+                titleKey: 'recording.failedToStart'
+            };
+
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyRecordingStatusChanged(
+                    false, 'local', err.message, isRecorderTranscriptionsRunning(getState()));
+            }
+
+            dispatch(showErrorNotification(props));
+        });
+        break;
+    }
+
+    case STOP_LOCAL_RECORDING: {
+        const { localRecording } = getState()['features/base/config'];
+
+        if (LocalRecordingManager.isRecordingLocally()) {
+            LocalRecordingManager.stopLocalRecording();
+            dispatch(updateLocalRecordingStatus(false));
+            if (localRecording?.notifyAllParticipants && !LocalRecordingManager.selfRecording) {
+                dispatch(playSound(RECORDING_OFF_SOUND_ID));
+            }
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyRecordingStatusChanged(
+                    false, 'local', undefined, isRecorderTranscriptionsRunning(getState()));
+            }
+        }
+        break;
+    }
+
+    case RECORDING_SESSION_UPDATED: {
+        const state = getState();
+
+        // When in recorder mode no notifications are shown
+        // or extra sounds are also not desired
+        // but we want to indicate those in case of sip gateway
+        const {
+            iAmRecorder,
+            iAmSipGateway,
+            recordingLimit
+        } = state['features/base/config'];
+
+        if (iAmRecorder && !iAmSipGateway) {
+            break;
+        }
+
+        const updatedSessionData
+            = getSessionById(state, action.sessionData.id);
+        const { initiator, mode = '', terminator } = updatedSessionData ?? {};
+        const { PENDING, OFF, ON } = JitsiRecordingConstants.status;
+        const isRecordingStarting = updatedSessionData?.status === PENDING && oldSessionData?.status !== PENDING;
+
+        if (isRecordingStarting || updatedSessionData?.status === ON) {
+            dispatch(hideNotification(START_RECORDING_NOTIFICATION_ID));
+        }
+
+        if (isRecordingStarting) {
+            dispatch(showPendingRecordingNotification(mode));
+            break;
+        }
+
+        dispatch(hidePendingRecordingNotification(mode));
+
+        if (updatedSessionData?.status === ON) {
+
+            // We receive 2 updates of the session status ON. The first one is from jibri when it joins.
+            // The second one is from jicofo which will deliver the initiator value. Since the start
+            // recording notification uses the initiator value we skip the jibri update and show the
+            // notification on the update from jicofo.
+            // FIXME: simplify checks when the backend start sending only one status ON update containing
+            // the initiator.
+            if (initiator && !oldSessionData?.initiator) {
+                if (typeof recordingLimit === 'object') {
+                    dispatch(showRecordingLimitNotification(mode));
+                } else {
+                    dispatch(showStartedRecordingNotification(mode, initiator, action.sessionData.id));
+                }
+            }
+
+            if (oldSessionData?.status !== ON) {
+                sendAnalytics(createRecordingEvent('start', mode));
+
+                let soundID;
+
+                if (mode === JitsiRecordingConstants.mode.FILE && !isRecorderTranscriptionsRunning(state)) {
+                    soundID = RECORDING_ON_SOUND_ID;
+                } else if (mode === JitsiRecordingConstants.mode.STREAM) {
+                    soundID = LIVE_STREAMING_ON_SOUND_ID;
+                }
+
+                if (soundID) {
+                    dispatch(playSound(soundID));
+                }
+
+                if (typeof APP !== 'undefined') {
+                    APP.API.notifyRecordingStatusChanged(
+                        true, mode, undefined, isRecorderTranscriptionsRunning(state));
+                }
+            }
+        } else if (updatedSessionData?.status === OFF && oldSessionData?.status !== OFF) {
+            if (terminator) {
+                dispatch(
+                    showStoppedRecordingNotification(
+                        mode, getParticipantDisplayName(state, getResourceId(terminator))));
+            }
+
+            let duration = 0, soundOff, soundOn;
+
+            if (oldSessionData?.timestamp) {
+                duration
+                    = (Date.now() / 1000) - oldSessionData.timestamp;
+            }
+            sendAnalytics(createRecordingEvent('stop', mode, duration));
+
+            if (mode === JitsiRecordingConstants.mode.FILE && !isRecorderTranscriptionsRunning(state)) {
+                soundOff = RECORDING_OFF_SOUND_ID;
+                soundOn = RECORDING_ON_SOUND_ID;
+            } else if (mode === JitsiRecordingConstants.mode.STREAM) {
+                soundOff = LIVE_STREAMING_OFF_SOUND_ID;
+                soundOn = LIVE_STREAMING_ON_SOUND_ID;
+            }
+
+            if (soundOff && soundOn) {
+                dispatch(stopSound(soundOn));
+                dispatch(playSound(soundOff));
+            }
+
+            if (typeof APP !== 'undefined') {
+                APP.API.notifyRecordingStatusChanged(
+                    false, mode, undefined, isRecorderTranscriptionsRunning(state));
+            }
+        }
+
+        break;
+    }
+    case TRACK_ADDED: {
+        const { track } = action;
+
+        if (LocalRecordingManager.isRecordingLocally()
+                && track.mediaType === MEDIA_TYPE.AUDIO && track.local) {
+            const audioTrack = track.jitsiTrack.track;
+
+            LocalRecordingManager.addAudioTrackToLocalRecording(audioTrack);
+        }
+        break;
+    }
+    case PARTICIPANT_UPDATED: {
+        const { id, role } = action.participant;
+        const state = getState();
+        const localParticipant = getLocalParticipant(state);
+
+        if (localParticipant?.id !== id) {
+            return next(action);
+        }
+
+        if (role === PARTICIPANT_ROLE.MODERATOR) {
+            dispatch(showStartRecordingNotification());
+        }
+
+        return next(action);
+    }
+    }
+
+    return result;
+});
+
+/**
+ * Shows a notification about an error in the recording session. A
+ * default notification will display if no error is specified in the passed
+ * in recording session.
+ *
+ * @private
+ * @param {Object} session - The recorder session model from the
+ * lib.
+ * @param {Dispatch} dispatch - The Redux Dispatch function.
+ * @param {Function} getState - The Redux getState function.
+ * @returns {void}
+ */
+function _showRecordingErrorNotification(session: any, dispatch: IStore['dispatch'], getState: IStore['getState']) {
+    const mode = session.getMode();
+    const error = session.getError();
+    const isStreamMode = mode === JitsiMeetJS.constants.recording.mode.STREAM;
+
+    switch (error) {
+    case JitsiMeetJS.constants.recording.error.SERVICE_UNAVAILABLE:
+        dispatch(showRecordingError({
+            descriptionKey: 'recording.unavailable',
+            descriptionArguments: {
+                serviceName: isStreamMode
+                    ? '$t(liveStreaming.serviceName)'
+                    : '$t(recording.serviceName)'
+            },
+            titleKey: isStreamMode
+                ? 'liveStreaming.unavailableTitle'
+                : 'recording.unavailableTitle'
+        }));
+        break;
+    case JitsiMeetJS.constants.recording.error.RESOURCE_CONSTRAINT:
+        dispatch(showRecordingError({
+            descriptionKey: isStreamMode
+                ? 'liveStreaming.busy'
+                : 'recording.busy',
+            titleKey: isStreamMode
+                ? 'liveStreaming.busyTitle'
+                : 'recording.busyTitle'
+        }));
+        break;
+    case JitsiMeetJS.constants.recording.error.UNEXPECTED_REQUEST:
+        dispatch(showRecordingWarning({
+            descriptionKey: isStreamMode
+                ? 'liveStreaming.sessionAlreadyActive'
+                : 'recording.sessionAlreadyActive',
+            titleKey: isStreamMode ? 'liveStreaming.inProgress' : 'recording.inProgress'
+        }));
+        break;
+    case JitsiMeetJS.constants.recording.error.POLICY_VIOLATION:
+        dispatch(showRecordingWarning({
+            descriptionKey: isStreamMode ? 'liveStreaming.policyError' : 'recording.policyError',
+            titleKey: isStreamMode ? 'liveStreaming.failedToStart' : 'recording.failedToStart'
+        }));
+        break;
+    default:
+        dispatch(showRecordingError({
+            descriptionKey: isStreamMode
+                ? 'liveStreaming.error'
+                : 'recording.error',
+            titleKey: isStreamMode
+                ? 'liveStreaming.failedToStart'
+                : 'recording.failedToStart'
+        }));
+        break;
+    }
+
+    if (typeof APP !== 'undefined') {
+        APP.API.notifyRecordingStatusChanged(false, mode, error, isRecorderTranscriptionsRunning(getState()));
+    }
+}
+
+/**
+ * Mutes audio and video and displays the RecordingConsentDialog when the conditions are met.
+ *
+ * @param {any} recorderSession - The recording session.
+ * @param {Function} dispatch - The Redux dispatch function.
+ * @param {Function} getState - The Redux getState function.
+ * @returns {void}
+ */
+function _showExplicitConsentDialog(recorderSession: any, dispatch: IStore['dispatch'], getState: IStore['getState']) {
+    if (!shouldRequireRecordingConsent(recorderSession, getState())) {
+        return;
+    }
+
+    batch(() => {
+        dispatch(markConsentRequested(recorderSession.getID()));
+        dispatch(setAudioUnmutePermissions(true, true));
+        dispatch(setVideoUnmutePermissions(true, true));
+        dispatch(setAudioMuted(true));
+        dispatch(setVideoMuted(true));
+        dispatch(openDialog(RecordingConsentDialog));
+    });
+}

react/features/recording/reducer.ts

@@ -0,0 +1,156 @@
+import ReducerRegistry from '../base/redux/ReducerRegistry';
+
+import {
+    CLEAR_RECORDING_SESSIONS,
+    MARK_CONSENT_REQUESTED,
+    RECORDING_SESSION_UPDATED,
+    SET_MEETING_HIGHLIGHT_BUTTON_STATE,
+    SET_PENDING_RECORDING_NOTIFICATION_UID,
+    SET_SELECTED_RECORDING_SERVICE,
+    SET_START_RECORDING_NOTIFICATION_SHOWN,
+    SET_STREAM_KEY
+} from './actionTypes';
+
+const DEFAULT_STATE = {
+    consentRequested: new Set(),
+    disableHighlightMeetingMoment: false,
+    pendingNotificationUids: {},
+    selectedRecordingService: '',
+    sessionDatas: []
+};
+
+export interface ISessionData {
+    error?: Error;
+    id?: string;
+    initiator?: { getId: Function; };
+    liveStreamViewURL?: string;
+    mode?: string;
+    status?: string;
+    terminator?: { getId: Function; };
+    timestamp?: number;
+}
+
+export interface IRecordingState {
+    consentRequested: Set<any>;
+    disableHighlightMeetingMoment: boolean;
+    pendingNotificationUids: {
+        [key: string]: string | undefined;
+    };
+    selectedRecordingService: string;
+    sessionDatas: Array<ISessionData>;
+    streamKey?: string;
+    wasStartRecordingSuggested?: boolean;
+}
+
+/**
+ * The name of the Redux store this feature stores its state in.
+ */
+const STORE_NAME = 'features/recording';
+
+/**
+ * Reduces the Redux actions of the feature features/recording.
+ */
+ReducerRegistry.register<IRecordingState>(STORE_NAME,
+    (state = DEFAULT_STATE, action): IRecordingState => {
+        switch (action.type) {
+
+        case CLEAR_RECORDING_SESSIONS:
+            return {
+                ...state,
+                sessionDatas: []
+            };
+
+        case MARK_CONSENT_REQUESTED:
+            return {
+                ...state,
+                consentRequested: new Set([
+                    ...state.consentRequested,
+                    action.sessionId
+                ])
+            };
+
+        case RECORDING_SESSION_UPDATED:
+            return {
+                ...state,
+                sessionDatas:
+                    _updateSessionDatas(state.sessionDatas, action.sessionData)
+            };
+
+        case SET_PENDING_RECORDING_NOTIFICATION_UID: {
+            const pendingNotificationUids = {
+                ...state.pendingNotificationUids
+            };
+
+            pendingNotificationUids[action.streamType] = action.uid;
+
+            return {
+                ...state,
+                pendingNotificationUids
+            };
+        }
+
+        case SET_SELECTED_RECORDING_SERVICE: {
+            return {
+                ...state,
+                selectedRecordingService: action.selectedRecordingService
+            };
+        }
+
+        case SET_STREAM_KEY:
+            return {
+                ...state,
+                streamKey: action.streamKey
+            };
+
+        case SET_MEETING_HIGHLIGHT_BUTTON_STATE:
+            return {
+                ...state,
+                disableHighlightMeetingMoment: action.disabled
+            };
+
+        case SET_START_RECORDING_NOTIFICATION_SHOWN:
+            return {
+                ...state,
+                wasStartRecordingSuggested: true
+            };
+
+        default:
+            return state;
+        }
+    });
+
+/**
+ * Updates the known information on recording sessions.
+ *
+ * @param {Array} sessionDatas - The current sessions in the redux store.
+ * @param {Object} newSessionData - The updated session data.
+ * @private
+ * @returns {Array} The session data with the updated session data added.
+ */
+function _updateSessionDatas(sessionDatas: ISessionData[], newSessionData: ISessionData) {
+    const hasExistingSessionData = sessionDatas.find(
+        sessionData => sessionData.id === newSessionData.id);
+    let newSessionDatas;
+
+    if (hasExistingSessionData) {
+        newSessionDatas = sessionDatas.map(sessionData => {
+            if (sessionData.id === newSessionData.id) {
+                return {
+                    ...newSessionData
+                };
+            }
+
+            // Nothing to update for this session data so pass it back in.
+            return sessionData;
+        });
+    } else {
+        // If the session data is not present, then there is nothing to update
+        // and instead it needs to be added to the known session data.
+        newSessionDatas = [
+            ...sessionDatas,
+            { ...newSessionData }
+        ];
+    }
+
+    return newSessionDatas;
+}

react/features/recording/sounds.ts

@@ -0,0 +1,27 @@
+/**
+ * The name of the bundled audio file which will be played for when live streaming is stopped.
+ *
+ * @type {string}
+ */
+export const LIVE_STREAMING_OFF_SOUND_FILE = 'liveStreamingOff.mp3';
+
+/**
+ * The name of the bundled audio file which will be played for when a live streaming is started.
+ *
+ * @type {string}
+ */
+export const LIVE_STREAMING_ON_SOUND_FILE = 'liveStreamingOn.mp3';
+
+/**
+ * The name of the bundled audio file which will be played for when a recording is stopped.
+ *
+ * @type {string}
+ */
+export const RECORDING_OFF_SOUND_FILE = 'recordingOff.mp3';
+
+/**
+ * The name of the bundled audio file which will be played for when a recording is started.
+ *
+ * @type {string}
+ */
+export const RECORDING_ON_SOUND_FILE = 'recordingOn.mp3';