Rearrange recording feature files

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

@@ -0,0 +1,108 @@
+// @flow
+
+import { connect } from 'react-redux';
+
+import { translate } from '../../../base/i18n';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+import {
+    ExpandedLabel,
+    type Props as AbstractProps
+} from '../../../base/label';
+
+import { getSessionStatusToShow } from '../../functions';
+
+import { LIVE_LABEL_COLOR, REC_LABEL_COLOR } from './styles';
+
+type Props = AbstractProps & {
+
+    /**
+     * 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<Props> {
+    /**
+     * Returns the color this expanded label should be rendered with.
+     *
+     * @returns {string}
+     */
+    _getColor() {
+        switch (this.props.mode) {
+        case JitsiRecordingConstants.mode.STREAM:
+            return LIVE_LABEL_COLOR;
+        case JitsiRecordingConstants.mode.FILE:
+            return REC_LABEL_COLOR;
+        default:
+            return null;
+        }
+    }
+
+    /**
+     * Returns the label specific text of this {@code ExpandedLabel}.
+     *
+     * @returns {string}
+     */
+    _getLabel() {
+        const { _status, mode, t } = this.props;
+        let postfix = 'recording', prefix = 'expandedOn'; // 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;
+        }
+
+        return t(`${prefix}.${postfix}`);
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code RecordingExpandedLabel}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @param {Props} ownProps - The component's own props.
+ * @private
+ * @returns {{
+ *     _status: ?string
+ * }}
+ */
+function _mapStateToProps(state: Object, ownProps: Props) {
+    const { mode } = ownProps;
+
+    return {
+        _status: getSessionStatusToShow(state, mode)
+    };
+}
+
+export default translate(connect(_mapStateToProps)(RecordingExpandedLabel));

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

@@ -0,0 +1,66 @@
+// @flow
+
+import React from 'react';
+import { connect } from 'react-redux';
+
+import { translate } from '../../../base/i18n';
+import { CircularLabel } from '../../../base/label';
+import { JitsiRecordingConstants } from '../../../base/lib-jitsi-meet';
+
+import AbstractRecordingLabel, {
+    _mapStateToProps
+} from '../AbstractRecordingLabel';
+
+import styles from './styles';
+
+/**
+ * Implements a React {@link Component} which displays the current state of
+ * conference recording.
+ *
+ * @extends {Component}
+ */
+class RecordingLabel extends AbstractRecordingLabel {
+
+    /**
+     * Renders the platform specific label component.
+     *
+     * @inheritdoc
+     */
+    _renderLabel() {
+        let indicatorStyle;
+
+        switch (this.props.mode) {
+        case JitsiRecordingConstants.mode.STREAM:
+            indicatorStyle = styles.indicatorLive;
+            break;
+        case JitsiRecordingConstants.mode.FILE:
+            indicatorStyle = styles.indicatorRecording;
+            break;
+        default:
+            // Invalid mode is passed to the component.
+            return null;
+        }
+
+        let status = 'on';
+
+        switch (this.props._status) {
+        case JitsiRecordingConstants.status.PENDING:
+            status = 'in_progress';
+            break;
+        case JitsiRecordingConstants.status.OFF:
+            status = 'off';
+            break;
+        }
+
+        return (
+            <CircularLabel
+                label = { this.props.t(this._getLabelKey()) }
+                status = { status }
+                style = { indicatorStyle } />
+        );
+    }
+
+    _getLabelKey: () => ?string
+}
+
+export default translate(connect(_mapStateToProps)(RecordingLabel));

react/features/recording/components/native/index.js

@@ -0,0 +1,4 @@
+// @flow
+
+export { default as RecordingExpandedLabel } from './RecordingExpandedLabel';
+export { default as RecordingLabel } from './RecordingLabel';

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

@@ -0,0 +1,26 @@
+// @flow
+
+import { ColorPalette, createStyleSheet } from '../../../base/styles';
+
+export const LIVE_LABEL_COLOR = ColorPalette.blue;
+export const REC_LABEL_COLOR = ColorPalette.red;
+
+/**
+ * The styles of the React {@code Components} of the feature recording.
+ */
+export default createStyleSheet({
+
+    /**
+     * Style for the recording indicator.
+     */
+    indicatorLive: {
+        backgroundColor: LIVE_LABEL_COLOR
+    },
+
+    /**
+     * Style for the recording indicator.
+     */
+    indicatorRecording: {
+        backgroundColor: REC_LABEL_COLOR
+    }
+});