feat(transcriptions): add ClosedCaptionButton.native

lang/main.json

@@ -483,7 +483,9 @@
         "failedToStart": "Transcribing failed to start",
         "tr": "TR",
         "labelToolTip": "The meeting is being transcribed",
-        "ccButtonTooltip": "Start / Stop showing subtitles"
+        "ccButtonTooltip": "Start / Stop showing subtitles",
+        "start": "Start showing subtitles",
+        "stop": "Stop showing subtitles"
     },
     "liveStreaming":
     {

react/features/subtitles/components/AbstractClosedCaptionButton.js

@@ -0,0 +1,88 @@
+// @flow
+
+import { createToolbarEvent, sendAnalytics } from '../../analytics';
+import { AbstractButton, type AbstractButtonProps } from '../../base/toolbox';
+
+import { toggleRequestingSubtitles } from '../actions';
+
+export type AbstractProps = AbstractButtonProps & {
+
+    /**
+     * Invoked to obtain translated strings.
+     */
+    t: Function,
+
+    /**
+     * Invoked to Dispatch an Action to the redux store.
+     */
+    dispatch: Function,
+
+    /**
+     * Whether the local participant is currently requesting subtitles.
+     */
+    _requestingSubtitles: Boolean
+};
+
+/**
+ * The button component which starts/stops the transcription.
+ */
+export class AbstractClosedCaptionButton
+    extends AbstractButton<AbstractProps, *> {
+    /**
+     * Handles clicking / pressing the button.
+     *
+     * @override
+     * @protected
+     * @returns {void}
+     */
+    _handleClick() {
+        const { _requestingSubtitles, dispatch } = this.props;
+
+        sendAnalytics(createToolbarEvent('transcribing.ccButton',
+            {
+                'requesting_subtitles': Boolean(_requestingSubtitles)
+            }));
+
+        dispatch(toggleRequestingSubtitles());
+    }
+
+    /**
+     * Indicates whether this button is disabled or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isDisabled() {
+        return false;
+    }
+
+    /**
+     * Indicates whether this button is in toggled state or not.
+     *
+     * @override
+     * @protected
+     * @returns {boolean}
+     */
+    _isToggled() {
+        return this.props._requestingSubtitles;
+    }
+}
+
+/**
+ * Maps (parts of) the redux state to the associated props for the
+ * {@code AbstractClosedCaptionButton} component.
+ *
+ * @param {Object} state - The redux state.
+ * @private
+ * @returns {{
+ *     __requestingSubtitles: boolean
+ * }}
+ */
+export function _abstractMapStateToProps(state: Object) {
+    const { _requestingSubtitles } = state['features/subtitles'];
+
+    return {
+        _requestingSubtitles
+    };
+}

react/features/subtitles/components/ClosedCaptionButton.native.js

@@ -0,0 +1,26 @@
+// @flow
+
+import { connect } from 'react-redux';
+
+import { translate } from '../../base/i18n';
+
+import {
+    AbstractClosedCaptionButton,
+    _abstractMapStateToProps
+} from './AbstractClosedCaptionButton';
+
+/**
+ * A button which starts/stops the transcriptions.
+ */
+class ClosedCaptionButton
+    extends AbstractClosedCaptionButton {
+
+    accessibilityLabel = 'toolbar.accessibilityLabel.cc';
+    iconName = 'closed_caption';
+    label = 'transcribing.start';
+    toggledIconName = 'closed_caption';
+    toggledLabel = 'transcribing.stop';
+}
+
+export default translate(connect(_abstractMapStateToProps)(
+    ClosedCaptionButton));

react/features/subtitles/components/ClosedCaptionButton.web.js

@@ -1,115 +1,25 @@
 // @flow
 
-import React, { Component } from 'react';
 import { connect } from 'react-redux';
+
 import { translate } from '../../base/i18n/index';
 
-import { ToolbarButton } from '../../toolbox/';
-
-import { toggleRequestingSubtitles } from '../actions';
-import { createToolbarEvent, sendAnalytics } from '../../analytics';
-
+import {
+    AbstractClosedCaptionButton,
+    _abstractMapStateToProps
+} from './AbstractClosedCaptionButton';
 
 /**
- * The type of the React {@code Component} props of {@link TranscribingLabel}.
+ * A button which starts/stops the transcriptions.
  */
-type Props = {
-
-    /**
-     * Invoked to obtain translated strings.
-     */
-    t: Function,
-
-    /**
-     * Invoked to Dispatch an Action to the redux store.
-     */
-    dispatch: Function,
-
-    /**
-     * Whether the local participant is currently requesting subtitles.
-     */
-    _requestingSubtitles: Boolean
-};
-
-/**
- * React Component for displaying a label when a transcriber is in the
- * conference.
- *
- * @extends Component
- */
-class ClosedCaptionButton extends Component<Props> {
-
-    /**
-     * Initializes a new {@code ClosedCaptionButton} instance.
-     *
-     * @param {Props} props - The read-only properties with which the new
-     * instance is to be initialized.
-     */
-    constructor(props: Props) {
-        super(props);
-
-        // Bind event handler so it is only bound once for every instance.
-        this._onToggleButton = this._onToggleButton.bind(this);
-    }
-
-    /**
-     * Implements React's {@link Component#render()}.
-     *
-     * @inheritdoc
-     * @returns {ReactElement}
-     */
-    render() {
-        const { _requestingSubtitles, t } = this.props;
-        const iconClass = `icon-closed_caption ${_requestingSubtitles
-            ? 'toggled' : ''}`;
-
-        return (
-            <ToolbarButton
-                accessibilityLabel
-                    = { t('toolbar.accessibilityLabel.cc') }
-                iconName = { iconClass }
-                onClick = { this._onToggleButton }
-                tooltip = { t('transcribing.ccButtonTooltip') } />
-        );
-    }
-
-    _onToggleButton: () => void;
-
-    /**
-     * Dispatch actions for starting or stopping transcription, based on
-     * current state.
-     *
-     * @private
-     * @returns {void}
-     */
-    _onToggleButton() {
-        const { _requestingSubtitles, dispatch } = this.props;
-
-        sendAnalytics(createToolbarEvent('transcribing.ccButton',
-            {
-                'requesting_subtitles': Boolean(_requestingSubtitles)
-            }));
-
-        dispatch(toggleRequestingSubtitles());
-    }
+class ClosedCaptionButton
+    extends AbstractClosedCaptionButton {
 
+    accessibilityLabel = 'toolbar.accessibilityLabel.cc';
+    iconName = 'icon-closed_caption';
+    toggledIconName = 'icon-closed_caption toggled';
+    tooltip = 'transcribing.ccButtonTooltip';
 }
 
-/**
- * Maps (parts of) the Redux state to the associated props for the
- * {@code ClosedCaptionButton} component.
- *
- * @param {Object} state - The Redux state.
- * @private
- * @returns {{
- * }}
- */
-function _mapStateToProps(state) {
-    const { _requestingSubtitles } = state['features/subtitles'];
-
-    return {
-        _requestingSubtitles
-    };
-}
-
-export default translate(connect(_mapStateToProps)(ClosedCaptionButton));
+export default translate(connect(_abstractMapStateToProps)(
+    ClosedCaptionButton));

react/features/toolbox/components/native/OverflowMenu.js

@@ -8,6 +8,7 @@ import { AudioRouteButton } from '../../../mobile/audio-mode';
 import { PictureInPictureButton } from '../../../mobile/picture-in-picture';
 import { LiveStreamButton, RecordButton } from '../../../recording';
 import { RoomLockButton } from '../../../room-lock';
+import { ClosedCaptionButton } from '../../../subtitles';
 
 import AudioOnlyButton from './AudioOnlyButton';
 import { overflowMenuItemStyles } from './styles';
@@ -69,6 +70,7 @@ class OverflowMenu extends Component<Props> {
                 <ToggleCameraButton { ...buttonProps } />
                 <AudioOnlyButton { ...buttonProps } />
                 <RoomLockButton { ...buttonProps } />
+                <ClosedCaptionButton { ...buttonProps } />
                 <RecordButton { ...buttonProps } />
                 <LiveStreamButton { ...buttonProps } />
                 <PictureInPictureButton { ...buttonProps } />