init

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));