independently display subtitles based on participants choice

react/features/subtitles/actionTypes.js

  * }
  */
 export const UPDATE_TRANSCRIPT_MESSAGE = Symbol('UPDATE_TRANSCRIPT_MESSAGE');
+
+/**
+ * The type of (redux) action which indicates that the user pressed the
+ * ClosedCaption button, to either enable or disable subtitles based on the
+ * current state.
+ *
+ * {
+ *      type: TOGGLE_REQUESTING_SUBTITLES
+ * }
+ */
+export const TOGGLE_REQUESTING_SUBTITLES
+    = Symbol('TOGGLE_REQUESTING_SUBTITLES');

react/features/subtitles/actions.js

 import {
     ENDPOINT_MESSAGE_RECEIVED,
     REMOVE_TRANSCRIPT_MESSAGE,
+    TOGGLE_REQUESTING_SUBTITLES,
     UPDATE_TRANSCRIPT_MESSAGE
 } from './actionTypes';
 
         newTranscriptMessage
     };
 }
+
+/**
+ * Signals that the local user has toggled the ClosedCaption button.
+ *
+ * @returns {{
+ *      type: TOGGLE_REQUESTING_SUBTITLES
+ * }}
+ */
+export function toggleRequestingSubtitles() {
+    return {
+        type: TOGGLE_REQUESTING_SUBTITLES
+    };
+}

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

 
 import { ToolbarButton } from '../../toolbox/';
 
-import { dialTranscriber, stopTranscribing } from '../actions';
+import { toggleRequestingSubtitles } from '../actions';
 import { createToolbarEvent, sendAnalytics } from '../../analytics';
 
 
     dispatch: Function,
 
     /**
-     * Boolean value indicating current transcribing status
+     * Whether the local participant is currently requesting subtitles.
      */
-    _transcribing: boolean,
-
-    /**
-     * Boolean value indicating current dialing status
-     */
-    _dialing: boolean
+    _requestingSubtitles: Boolean
 };
 
 /**
      * @returns {ReactElement}
      */
     render() {
-        const { _dialing, _transcribing, t } = this.props;
-        const iconClass = `icon-closed_caption ${_dialing || _transcribing
+        const { _requestingSubtitles, t } = this.props;
+        const iconClass = `icon-closed_caption ${_requestingSubtitles
             ? 'toggled' : ''}`;
 
         return (
      * @returns {void}
      */
     _onToggleButton() {
-        const { _transcribing, _dialing, dispatch } = this.props;
+        const { _requestingSubtitles, dispatch } = this.props;
 
-        sendAnalytics(createToolbarEvent(
-            'transcribing.ccButton',
+        sendAnalytics(createToolbarEvent('transcribing.ccButton',
             {
-                'is_transcribing': Boolean(_transcribing),
-                'is_dialing': Boolean(_dialing)
+                'requesting_subtitles': Boolean(_requestingSubtitles)
             }));
 
-        if (_dialing) {
-            return;
-        }
-
-        if (_transcribing) {
-            dispatch(stopTranscribing());
-        } else {
-            dispatch(dialTranscriber());
-        }
+        dispatch(toggleRequestingSubtitles());
     }
 
 }
  * }}
  */
 function _mapStateToProps(state) {
-    const { isTranscribing, isDialing } = state['features/transcribing'];
+    const { _requestingSubtitles } = state['features/subtitles'];
 
     return {
-        _transcribing: isTranscribing,
-        _dialing: isDialing
+        _requestingSubtitles
     };
 }
 

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

     /**
      * Map of transcriptMessageID's with corresponding transcriptMessage.
      */
-    _transcriptMessages: Map<string, Object>
+    _transcriptMessages: Map<string, Object>,
+
+    /**
+     * Whether local participant is requesting to see subtitles
+     */
+    _requestingSubtitles: Boolean
 };
 
 /**
      * @returns {ReactElement}
      */
     render() {
+        if (!this.props._requestingSubtitles
+             || !this.props._transcriptMessages) {
+            return null;
+        }
+
         const paragraphs = [];
 
         for (const [ transcriptMessageID, transcriptMessage ]
  * }}
  */
 function _mapStateToProps(state) {
+    const {
+        _transcriptMessages,
+        _requestingSubtitles
+    } = state['features/subtitles'];
+
     return {
-        _transcriptMessages: state['features/subtitles'].transcriptMessages
+        _transcriptMessages,
+        _requestingSubtitles
     };
 }
 export default connect(_mapStateToProps)(TranscriptionSubtitles);

react/features/subtitles/components/index.js

 export { default as TranscriptionSubtitles } from './TranscriptionSubtitles';
+export { default as ClosedCaptionButton } from './ClosedCaptionButton';

react/features/subtitles/middleware.js

 
 import { MiddlewareRegistry } from '../base/redux';
 
-import { ENDPOINT_MESSAGE_RECEIVED } from './actionTypes';
+import {
+    ENDPOINT_MESSAGE_RECEIVED,
+    TOGGLE_REQUESTING_SUBTITLES
+} from './actionTypes';
 import {
     removeTranscriptMessage,
     updateTranscriptMessage
  */
 const P_NAME_TRANSLATION_LANGUAGE = 'translation_language';
 
+/**
+ * The local participant property which is used to set whether the local
+ * participant wants to have a transcriber in the room.
+ */
+const P_NAME_REQUESTING_TRANSCRIPTION = 'requestingTranscription';
+
 /**
 * Time after which the rendered subtitles will be removed.
 */
  * @returns {Function}
  */
 MiddlewareRegistry.register(store => next => action => {
-
     switch (action.type) {
     case ENDPOINT_MESSAGE_RECEIVED:
         return _endpointMessageReceived(store, next, action);
+    case TOGGLE_REQUESTING_SUBTITLES:
+        _requestingSubtitlesToggled(store);
+        break;
     }
 
     return next(action);
 });
 
+/**
+ * Toggle the local property 'requestingTranscription'. This will cause Jicofo
+ * and Jigasi to decide whether the transcriber needs to be in the room.
+ *
+ * @param {Store} store - The redux store.
+ * @private
+ * @returns {void}
+ */
+function _requestingSubtitlesToggled({ getState }) {
+    const { _requestingSubtitles } = getState()['features/subtitles'];
+    const { conference } = getState()['features/base/conference'];
+
+    conference.setLocalParticipantProperty(P_NAME_REQUESTING_TRANSCRIPTION,
+        !_requestingSubtitles);
+}
+
 /**
  * Notifies the feature transcription that the action
  * {@code ENDPOINT_MESSAGE_RECEIVED} is being dispatched within a specific redux
             // message ID or adds a new transcript message if it does not
             // exist in the map.
             const newTranscriptMessage
-                = { ...getState()['features/subtitles'].transcriptMessages
+                = { ...getState()['features/subtitles']._transcriptMessages
                     .get(transcriptMessageID) || { participantName } };
 
             setClearerOnTranscriptMessage(dispatch,
             if (!isInterim) {
 
                 newTranscriptMessage.final = text;
+
                 dispatch(updateTranscriptMessage(transcriptMessageID,
                     newTranscriptMessage));
             } else if (stability > 0.85) {
 
                 newTranscriptMessage.stable = text;
                 newTranscriptMessage.unstable = undefined;
+
                 dispatch(updateTranscriptMessage(transcriptMessageID,
                     newTranscriptMessage));
             } else {

react/features/subtitles/reducer.js

 import { ReducerRegistry } from '../base/redux';
 
 import {
-    REMOVE_TRANSCRIPT_MESSAGE,
+    REMOVE_TRANSCRIPT_MESSAGE, TOGGLE_REQUESTING_SUBTITLES,
     UPDATE_TRANSCRIPT_MESSAGE
 } from './actionTypes';
 
  * Default State for 'features/transcription' feature
  */
 const defaultState = {
-    transcriptMessages: new Map()
+    _transcriptMessages: new Map(),
+    _requestingSubtitles: false
 };
 
 /**
     switch (action.type) {
     case REMOVE_TRANSCRIPT_MESSAGE:
         return _removeTranscriptMessage(state, action);
-
     case UPDATE_TRANSCRIPT_MESSAGE:
         return _updateTranscriptMessage(state, action);
+
+    case TOGGLE_REQUESTING_SUBTITLES:
+        return {
+            ...state,
+            _requestingSubtitles: !state._requestingSubtitles
+        };
     }
 
     return state;
 
     return {
         ...state,
-        transcriptMessages: newTranscriptMessages
+        _transcriptMessages: newTranscriptMessages
     };
 }
 
 
     return {
         ...state,
-        transcriptMessages: newTranscriptMessages
+        _transcriptMessages: newTranscriptMessages
     };
 }

react/features/toolbox/components/web/Toolbox.js

 import {
     getLocalParticipant,
     getParticipants,
-    participantUpdated,
-    isLocalParticipantModerator
+    participantUpdated
 } from '../../../base/participants';
 import { getLocalVideoTrack, toggleScreensharing } from '../../../base/tracks';
 import { ChatCounter } from '../../../chat';
 import VideoMuteButton from '../VideoMuteButton';
 import {
     ClosedCaptionButton
-} from '../../../transcribing';
+} from '../../../subtitles';
 
 /**
  * The type of the React {@code Component} props of {@link Toolbox}.
         callStatsID,
         iAmRecorder
     } = state['features/base/config'];
-    let {
+    const {
         transcribingEnabled
     } = state['features/base/config'];
     const sharedVideoStatus = state['features/shared-video'].status;
 
     let desktopSharingDisabledTooltipKey;
 
-    transcribingEnabled
-        = isLocalParticipantModerator(state) && transcribingEnabled;
-
     if (state['features/base/config'].enableFeaturesBasedOnToken) {
         // we enable desktop sharing if any participant already have this
         // feature enabled

react/features/transcribing/components/index.js

 export { default as TranscribingLabel } from './TranscribingLabel';
-export { default as ClosedCaptionButton } from './ClosedCaptionButton';