feat(transcription-label):Adding a transcription status label

css/_base.scss

@@ -26,6 +26,13 @@ p {
     margin: 0;
 }
 
+h4 {
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: -0.006em;
+    line-height: 16px;
+}
+
 body, input, textarea, keygen, select, button {
     font-family: $baseFontFamily !important;
 }

css/_vertical_filmstrip_overrides.scss

@@ -162,7 +162,7 @@
         transition: right 0.5s;
 
         &.with-filmstrip.with-remote-videos {
-            &#recordingLabel {
+            &#transcriptionLabel {
                 right: 200px;
             }
 

css/modals/video-quality/_video-quality.scss

@@ -127,6 +127,7 @@
     border-radius: 50%;
     position: absolute;
     box-sizing: border-box;
+    z-index: #{$tooltipsZ + 1};
 
     i {
         cursor: pointer;
@@ -145,13 +146,9 @@
     z-index: $tooltipsZ;
 }
 
-#videoResolutionLabel {
-    z-index: #{$tooltipsZ + 1};
-}
-
 .centeredVideoLabel {
     bottom: 45%;
-    border-radius: 2px;
+    border-radius: 3px;
     display: none;
     padding: 10px;
     transform: translate(-50%, 0);

react/features/large-video/components/LargeVideo.web.js

@@ -5,6 +5,7 @@ import React, { Component } from 'react';
 import { Watermarks } from '../../base/react';
 import { VideoQualityLabel } from '../../video-quality';
 import { RecordingLabel } from '../../recording';
+import { TranscriptionLabel } from '../../transcription';
 
 declare var interfaceConfig: Object;
 
@@ -70,6 +71,7 @@ export default class LargeVideo extends Component {
                 <span id = 'localConnectionMessage' />
                 { interfaceConfig.filmStripOnly ? null : <VideoQualityLabel /> }
                 <RecordingLabel />
+                <TranscriptionLabel />
             </div>
         );
     }

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

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 
+import JitsiMeetJS from '../../base/lib-jitsi-meet';
 import { translate } from '../../base/i18n';
 import { shouldRemoteVideosBeVisible } from '../../filmstrip';
 
@@ -45,6 +46,11 @@ class RecordingLabel extends Component {
          */
         _remoteVideosVisible: React.PropTypes.bool,
 
+        /**
+         * Indicates if the transcription label is currently visible.
+         */
+        _transcriptionLabelVisible: React.PropTypes.bool,
+
         /**
          * Invoked to obtain translated string.
          */
@@ -110,10 +116,26 @@ class RecordingLabel extends Component {
                 ? 'with-remote-videos' : 'without-remote-videos'
         ].join(' ');
 
+        let rightIndent = {};
+
+        if (this.props._filmstripVisible
+            && this.props._remoteVideosVisible) {
+            rightIndent
+                = this.props._transcriptionLabelVisible ? '243px' : '200px';
+        } else {
+            rightIndent
+                = this.props._transcriptionLabelVisible ? '123px' : '80px';
+        }
+
+        const inlineStyle = {
+            right: rightIndent
+        };
+
         return (
             <span
                 className = { rootClassName }
-                id = 'recordingLabel'>
+                id = 'recordingLabel'
+                style = { inlineStyle }>
                 <span id = 'recordingLabelText'>
                     { this.props.t(key) }
                 </span>
@@ -143,6 +165,7 @@ class RecordingLabel extends Component {
 function _mapStateToProps(state) {
     const { visible } = state['features/filmstrip'];
     const { labelDisplayConfiguration } = state['features/recording'];
+    const { transcriptionState } = state['features/transcription'];
 
     return {
         /**
@@ -165,7 +188,10 @@ function _mapStateToProps(state) {
          *
          * @type {boolean}
          */
-        _remoteVideosVisible: shouldRemoteVideosBeVisible(state)
+        _remoteVideosVisible: shouldRemoteVideosBeVisible(state),
+
+        _transcriptionLabelVisible: transcriptionState
+            === JitsiMeetJS.constants.transcriptionStatus.ON
     };
 }
 

react/features/transcription/actionTypes.js

@@ -0,0 +1,12 @@
+/**
+ * The type of Redux action which updates the current known state of the
+ * transcription feature.
+ *
+ * {
+ *     type: TRANSCRIPTION_STATE_UPDATED,
+ *     recordingState: string
+ * }
+ * @public
+ */
+export const TRANSCRIPTION_STATE_UPDATED
+    = Symbol('TRANSCRIPTION_STATE_UPDATED');

react/features/transcription/actions.js

@@ -0,0 +1,22 @@
+import JitsiMeetJS from '../base/lib-jitsi-meet';
+
+import { TRANSCRIPTION_STATE_UPDATED } from './actionTypes';
+
+/**
+ * Updates the Redux state for the transcription feature.
+ *
+ * @param {Object} transcriptionState - The new state to merge with the existing
+ * state in Redux.
+ * @returns {{
+ *     type: TRANSCRIPTION_STATE_UPDATED,
+ *     recordingState: string
+ * }}
+ */
+export function updateTranscriptionState(transcriptionState
+     = JitsiMeetJS.constants.transcriptionStatus.OFF) {
+
+    return {
+        type: TRANSCRIPTION_STATE_UPDATED,
+        transcriptionState
+    };
+}

react/features/transcription/components/TranscriptionLabel.native.js

@@ -0,0 +1,3 @@
+/**
+ * Created by ystamcheva on 12/9/17.
+ */

react/features/transcription/components/TranscriptionLabel.web.js

@@ -0,0 +1,145 @@
+import JitsiMeetJS from '../../base/lib-jitsi-meet';
+
+import React, { Component } from 'react';
+import { connect } from 'react-redux';
+
+import { shouldRemoteVideosBeVisible } from '../../filmstrip';
+
+/**
+ * React {@code Component} responsible for displaying a label that indicates
+ * the transcription current state.
+ */
+export class TranscriptionLabel extends Component {
+    /**
+     * {@code VideoQualityLabel}'s property types.
+     *
+     * @static
+     */
+    static propTypes = {
+        /**
+         * Whether or not the filmstrip is currently set to be displayed.
+         */
+        _filmstripVisible: React.PropTypes.bool,
+
+        /**
+         * Whether or not remote videos within the filmstrip are currently
+         * visible. Depending on the visibility state, coupled with filmstrip
+         * visibility, CSS classes will be set to allow for adjusting of
+         * {@code TranscriptionLabel} positioning.
+         */
+        _remoteVideosVisible: React.PropTypes.bool,
+
+        /**
+         * The current state of the transcription.
+         */
+        _transcriptionState: React.PropTypes.string
+    };
+
+    /**
+     * Initializes a new {@code TranscriptionLabel} instance.
+     *
+     * @param {Object} props - The read-only properties with which the new
+     * instance is to be initialized.
+     */
+    constructor(props) {
+        super(props);
+
+        this.state = {
+            /**
+             * Whether or not the filmstrip was not visible but has transitioned
+             * in the latest component update to visible. This boolean is used
+             * to set a class for position animations.
+             *
+             * @type {boolean}
+             */
+            filmstripBecomingVisible: false
+        };
+    }
+
+    /**
+     * Updates the state for whether or not the filmstrip is being toggled to
+     * display after having being hidden.
+     *
+     * @inheritdoc
+     * @param {Object} nextProps - The read-only props which this Component will
+     * receive.
+     * @returns {void}
+     */
+    componentWillReceiveProps(nextProps) {
+        this.setState({
+            filmstripBecomingVisible: nextProps._filmstripVisible
+            && !this.props._filmstripVisible
+        });
+    }
+
+    /**
+     * Implements React's {@link Component#render()}.
+     *
+     * @inheritdoc
+     * @returns {ReactElement}
+     */
+    render() {
+        const isVisible = this.props._transcriptionState
+            === JitsiMeetJS.constants.transcriptionStatus.ON;
+
+        const rootClassName = [
+            'video-state-indicator moveToCorner',
+            isVisible ? 'show-inline' : '',
+            this.state.filmstripBecomingVisible ? 'opening' : '',
+            this.props._filmstripVisible
+                ? 'with-filmstrip' : 'without-filmstrip',
+            this.props._remoteVideosVisible
+                ? 'with-remote-videos' : 'without-remote-videos'
+        ].join(' ');
+
+        return (
+            isVisible
+                ? <span
+                    className = { rootClassName }
+                    id = 'transcriptionLabel'>
+                    <span className = 'icon-edit' />
+                </span>
+                : null
+        );
+    }
+}
+
+/**
+ * Maps (parts of) the Redux state to the associated
+ * {@code TranscriptionLabel}'s props.
+ *
+ * @param {Object} state - The Redux state.
+ * @private
+ * @returns {{
+ *     _filmstripVisible: boolean,
+ *     _remoteVideosVisible: boolean,
+ *     _transcriptionState: string
+ * }}
+ */
+function _mapStateToProps(state) {
+    const { visible } = state['features/filmstrip'];
+    const { transcriptionState } = state['features/transcription'];
+
+    return {
+        /**
+         * Whether or not the filmstrip is currently set to be displayed.
+         *
+         * @type {boolean}
+         */
+        _filmstripVisible: visible,
+
+        /**
+         * Whether or not remote videos are displayed in the filmstrip.
+         *
+         * @type {boolean}
+         */
+        _remoteVideosVisible: shouldRemoteVideosBeVisible(state),
+
+        /**
+         * The current state of the transcription.
+         */
+        _transcriptionState: transcriptionState
+    };
+}
+
+export default connect(_mapStateToProps)(TranscriptionLabel);

react/features/transcription/components/index.js

@@ -0,0 +1 @@
+export { default as TranscriptionLabel } from './TranscriptionLabel';

react/features/transcription/index.js

@@ -0,0 +1,5 @@
+export * from './actions';
+export * from './components';
+
+import './middleware';
+import './reducer';

react/features/transcription/middleware.js

@@ -0,0 +1,40 @@
+import { JitsiConferenceEvents } from '../base/lib-jitsi-meet';
+
+import {
+    CONFERENCE_FAILED,
+    CONFERENCE_JOINED,
+    CONFERENCE_LEFT
+} from '../base/conference';
+import { MiddlewareRegistry } from '../base/redux';
+
+import { updateTranscriptionState } from './actions';
+
+/**
+ * Middleware that captures conference actions and adds a listener to
+ * transcription status events.
+ *
+ * @param {Store} store - Redux store.
+ * @returns {Function}
+ */
+MiddlewareRegistry.register(store => next => action => {
+    const result = next(action);
+
+    switch (action.type) {
+    case CONFERENCE_JOINED: {
+        const { conference } = action;
+
+        conference && conference.on(
+            JitsiConferenceEvents.TRANSCRIPTION_STATUS_CHANGED,
+            (...args) => store.dispatch(updateTranscriptionState(...args)));
+
+        break;
+    }
+
+    case CONFERENCE_FAILED:
+    case CONFERENCE_LEFT:
+        // REMOVE THE LISTENER?
+        break;
+    }
+
+    return result;
+});

react/features/transcription/reducer.js

@@ -0,0 +1,18 @@
+import { ReducerRegistry } from '../base/redux';
+import { TRANSCRIPTION_STATE_UPDATED } from './actionTypes';
+
+/**
+ * Reduces the Redux actions of the feature features/transcription.
+ */
+ReducerRegistry.register('features/transcription', (state = {}, action) => {
+    switch (action.type) {
+    case TRANSCRIPTION_STATE_UPDATED:
+        return {
+            ...state,
+            transcriptionState: action.transcriptionState
+        };
+
+    default:
+        return state;
+    }
+});

react/features/video-quality/components/VideoQualityDialog.web.js

@@ -119,9 +119,9 @@ class VideoQualityDialog extends Component {
 
         return (
             <div className = 'video-quality-dialog'>
-                <h3 className = 'video-quality-dialog-title'>
+                <h4 className = 'video-quality-dialog-title'>
                     { t('videoStatus.callQuality') }
-                </h3>
+                </h4>
                 <div className = { showP2PWarning ? '' : 'hide-warning' }>
                     { this._renderP2PMessage() }
                 </div>