feat(external-api): add toggle subtitles command (#10070)

* feat(external-api): add toggle subtitles command

* feat(external-api): add set subtitles command

modules/API/API.js

@@ -87,6 +87,7 @@ import { toggleScreenshotCaptureSummary } from '../../react/features/screenshot-
 import { isScreenshotCaptureEnabled } from '../../react/features/screenshot-capture/functions';
 import { playSharedVideo, stopSharedVideo } from '../../react/features/shared-video/actions.any';
 import { extractYoutubeIdOrURL } from '../../react/features/shared-video/functions';
+import { toggleRequestingSubtitles, setRequestingSubtitles } from '../../react/features/subtitles/actions';
 import { toggleTileView, setTileView } from '../../react/features/video-layout';
 import { muteAllParticipants } from '../../react/features/video-menu/actions';
 import { setVideoQuality } from '../../react/features/video-quality';
@@ -371,6 +372,12 @@ function initCommands() {
             sendAnalytics(createApiEvent('screen.sharing.toggled'));
             toggleScreenSharing(options.enable);
         },
+        'toggle-subtitles': () => {
+            APP.store.dispatch(toggleRequestingSubtitles());
+        },
+        'set-subtitles': enabled => {
+            APP.store.dispatch(setRequestingSubtitles(enabled));
+        },
         'toggle-tile-view': () => {
             sendAnalytics(createApiEvent('tile-view.toggled'));
 

modules/API/external/external_api.js

@@ -59,6 +59,7 @@ const commands = {
     setLargeVideoParticipant: 'set-large-video-participant',
     setMediaEncryptionKey: 'set-media-encryption-key',
     setParticipantVolume: 'set-participant-volume',
+    setSubtitles: 'set-subtitles',
     setTileView: 'set-tile-view',
     setVideoQuality: 'set-video-quality',
     startRecording: 'start-recording',
@@ -79,6 +80,7 @@ const commands = {
     toggleRaiseHand: 'toggle-raise-hand',
     toggleShareAudio: 'toggle-share-audio',
     toggleShareScreen: 'toggle-share-screen',
+    toggleSubtitles: 'toggle-subtitles',
     toggleTileView: 'toggle-tile-view',
     toggleVirtualBackgroundDialog: 'toggle-virtual-background',
     toggleVideo: 'toggle-video'

react/features/subtitles/actionTypes.ts

@@ -45,3 +45,15 @@ export const UPDATE_TRANSCRIPT_MESSAGE = 'UPDATE_TRANSCRIPT_MESSAGE';
  */
 export const TOGGLE_REQUESTING_SUBTITLES
     = 'TOGGLE_REQUESTING_SUBTITLES';
+
+/**
+ * The type of (redux) action which indicates if the user set the state of
+ * the subtitles to enabled or disabled.
+ *
+ * {
+ *      type: SET_REQUESTING_SUBTITLES
+ *      enabled: boolean
+ * }
+ */
+export const SET_REQUESTING_SUBTITLES
+    = 'SET_REQUESTING_SUBTITLES';

react/features/subtitles/actions.js

@@ -4,6 +4,7 @@ import {
     ENDPOINT_MESSAGE_RECEIVED,
     REMOVE_TRANSCRIPT_MESSAGE,
     TOGGLE_REQUESTING_SUBTITLES,
+    SET_REQUESTING_SUBTITLES,
     UPDATE_TRANSCRIPT_MESSAGE
 } from './actionTypes';
 
@@ -75,3 +76,19 @@ export function toggleRequestingSubtitles() {
         type: TOGGLE_REQUESTING_SUBTITLES
     };
 }
+
+/**
+ * Signals that the local user has enabled or disabled the subtitles.
+ *
+ * @param {boolean} enabled - The new state of the subtitles.
+ * @returns {{
+ *    type: SET_REQUESTING_SUBTITLES,
+ *    enabled: boolean
+ * }}
+ */
+export function setRequestingSubtitles(enabled: boolean) {
+    return {
+        type: SET_REQUESTING_SUBTITLES,
+        enabled
+    };
+}

react/features/subtitles/middleware.js

@@ -4,7 +4,8 @@ import { MiddlewareRegistry } from '../base/redux';
 
 import {
     ENDPOINT_MESSAGE_RECEIVED,
-    TOGGLE_REQUESTING_SUBTITLES
+    TOGGLE_REQUESTING_SUBTITLES,
+    SET_REQUESTING_SUBTITLES
 } from './actionTypes';
 import {
     removeTranscriptMessage,
@@ -56,6 +57,9 @@ MiddlewareRegistry.register(store => next => action => {
     case TOGGLE_REQUESTING_SUBTITLES:
         _requestingSubtitlesToggled(store);
         break;
+    case SET_REQUESTING_SUBTITLES:
+        _requestingSubtitlesSet(store, action.enabled);
+        break;
     }
 
     return next(action);
@@ -177,6 +181,24 @@ function _requestingSubtitlesToggled({ getState }) {
         !_requestingSubtitles);
 }
 
+/**
+ * Set 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.
+ * @param {boolean} enabled - The new state of the subtitles.
+ * @private
+ * @returns {void}
+ */
+function _requestingSubtitlesSet({ getState }, enabled: boolean) {
+    const state = getState();
+    const { conference } = state['features/base/conference'];
+
+    conference.setLocalParticipantProperty(
+        P_NAME_REQUESTING_TRANSCRIPTION,
+        enabled);
+}
+
 /**
  * Set a timeout on a TranscriptMessage object so it clears itself when it's not
  * updated.

react/features/subtitles/reducer.js

@@ -2,7 +2,7 @@ import { ReducerRegistry } from '../base/redux';
 
 import {
     REMOVE_TRANSCRIPT_MESSAGE, TOGGLE_REQUESTING_SUBTITLES,
-    UPDATE_TRANSCRIPT_MESSAGE
+    SET_REQUESTING_SUBTITLES, UPDATE_TRANSCRIPT_MESSAGE
 } from './actionTypes';
 
 /**
@@ -30,6 +30,11 @@ ReducerRegistry.register('features/subtitles', (
             ...state,
             _requestingSubtitles: !state._requestingSubtitles
         };
+    case SET_REQUESTING_SUBTITLES:
+        return {
+            ...state,
+            _requestingSubtitles: action.enabled
+        };
     }
 
     return state;