init

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