feat(captions): no longer writes in the pad

This feature was too coupled to the old closed captions' pads.
(e.g. the old closed captions feature should be enabled for this
 to work properly)
Some things were hardcoded and others didn't make sense from the
user experience perspective.
Reverts #876d8aa.
Partially reverts #802964f, removes changes to make closed captions'
pads compatible with live-transcription but keeps provider settings.

bigbluebutton-html5/imports/api/audio-captions/server/handlers/transcriptUpdated.js

@@ -1,26 +1,14 @@
 import setTranscript from '/imports/api/audio-captions/server/modifiers/setTranscript';
-import updatePad from '/imports/api/pads/server/methods/updatePad';
-import Users from '/imports/api/users';
 
 export default function transcriptUpdated({ header, body }) {
   const {
     meetingId,
-    userId,
   } = header;
 
   const {
     transcriptId,
     transcript,
-    locale,
-    result,
   } = body;
 
-  if (result) {
-    const user = Users.findOne({ userId }, { fields: { name: 1 } });
-    const datetime = new Date(Date.now());
-    const userSpoke = `\n ${user.name} (${datetime.getHours()}:${datetime.getMinutes()}): ${transcript}`;
-    updatePad(meetingId, userId, 'en', userSpoke);
-  }
-
   setTranscript(meetingId, transcriptId, transcript);
 }

bigbluebutton-html5/imports/ui/components/actions-bar/component.jsx

@@ -1,4 +1,5 @@
 import React, { PureComponent } from 'react';
+import CaptionsButtonContainer from '/imports/ui/components/captions/button/container';
 import withShortcutHelper from '/imports/ui/components/shortcut-help/service';
 import deviceInfo from '/imports/utils/deviceInfo';
 import Styled from './styles';
@@ -67,6 +68,11 @@ class ActionsBar extends PureComponent {
             showPushLayout,
           }}
           />
+          { isCaptionsAvailable
+            ? (
+              <CaptionsButtonContainer {...{ intl }} />
+            )
+            : null }
           { !deviceInfo.isMobile
             ? (
               <AudioCaptionsButtonContainer />

bigbluebutton-html5/imports/ui/components/audio/captions/button/component.jsx

@@ -3,11 +3,9 @@ import PropTypes from 'prop-types';
 import { defineMessages, injectIntl } from 'react-intl';
 import Service from '/imports/ui/components/audio/captions/service';
 import SpeechService from '/imports/ui/components/audio/captions/speech/service';
-import ServiceOldCaptions from '/imports/ui/components/captions/service';
 import ButtonEmoji from '/imports/ui/components/common/button/button-emoji/ButtonEmoji';
 import BBBMenu from '/imports/ui/components/common/menu/component';
 import Styled from './styles';
-import OldCaptionsService from '/imports/ui/components/captions/service';
 
 const intlMessages = defineMessages({
   start: {
@@ -90,16 +88,7 @@ const CaptionsButton = ({
   availableVoices,
   isSupported,
   isVoiceUser,
-  mountModal,
 }) => {
-  const usePrevious = (value) => {
-    const ref = useRef();
-    useEffect(() => {
-      ref.current = value;
-    });
-    return ref.current;
-  }
-
   const isTranscriptionDisabled = () => (
     currentSpeechLocale === DISABLED
   );
@@ -115,12 +104,7 @@ const CaptionsButton = ({
     if (!isTranscriptionDisabled()) selectedLocale.current = getSelectedLocaleValue;
   }, [currentSpeechLocale]);
 
-  const prevEnabled = usePrevious(enabled);
-
     if (!enabled) return null;
-  if (!prevEnabled && enabled) {
-    OldCaptionsService.createCaptions('en');
-  }
 
   const shouldRenderChevron = isSupported && isVoiceUser;
 

bigbluebutton-html5/imports/ui/components/audio/captions/button/container.jsx

@@ -8,7 +8,7 @@ import AudioService from '/imports/ui/components/audio/service';
 
 const Container = (props) => <Button {...props} />;
 
-export default withModalMounter(withTracker(() => {
+export default withTracker(() => {
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
   const availableVoices = SpeechService.getSpeechVoices();
   const currentSpeechLocale = SpeechService.getSpeechLocale();
@@ -23,4 +23,4 @@ export default withModalMounter(withTracker(() => {
     isSupported,
     isVoiceUser,
   };
-})(Container));
+})(Container);

bigbluebutton-html5/imports/ui/components/captions/container.jsx

@@ -11,6 +11,20 @@ const Container = (props) => {
   const { isResizing } = cameraDock;
   const layoutContextDispatch = layoutDispatch();
 
+  const { amIModerator } = props;
+
+  if (!amIModerator) {
+    layoutContextDispatch({
+      type: ACTIONS.SET_SIDEBAR_CONTENT_IS_OPEN,
+      value: false,
+    });
+    layoutContextDispatch({
+      type: ACTIONS.SET_SIDEBAR_CONTENT_PANEL,
+      value: PANELS.NONE,
+    });
+    return null;
+  }
+
   return <Captions {...{ layoutContextDispatch, isResizing, ...props }} />;
 };
 

bigbluebutton-html5/imports/ui/components/captions/writer-menu/container.jsx

@@ -6,7 +6,6 @@ import WriterMenu from './component';
 import { layoutDispatch } from '../../layout/context';
 import Auth from '/imports/ui/services/auth';
 import { UsersContext } from '/imports/ui/components/components-data/users-context/context';
-import SpeechService from '/imports/ui/components/audio/captions/speech/service';
 
 const ROLE_MODERATOR = Meteor.settings.public.user.role_moderator;
 
@@ -16,11 +15,12 @@ const WriterMenuContainer = (props) => {
   const usingUsersContext = useContext(UsersContext);
   const { users } = usingUsersContext;
   const currentUser = users[Auth.meetingID][Auth.userID];
+  const amIModerator = currentUser.role === ROLE_MODERATOR;
 
-  return <WriterMenu {...{ layoutContextDispatch, ...props }} />;
+  return amIModerator && <WriterMenu {...{ layoutContextDispatch, ...props }} />;
 };
 
 export default withModalMounter(withTracker(({ mountModal }) => ({
   closeModal: () => mountModal(null),
-  availableLocales: SpeechService.getSpeechVoices(),
+  availableLocales: Service.getAvailableLocales(),
 }))(WriterMenuContainer));

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/component.jsx

@@ -33,7 +33,7 @@ class UserContent extends PureComponent {
     return (
       <Styled.Content data-test="userListContent">
         {isChatEnabled() ? <UserMessagesContainer /> : null}
-        <UserCaptionsContainer />
+        {currentUser.role === ROLE_MODERATOR ? <UserCaptionsContainer /> : null}
         <UserNotesContainer />
         {showWaitingRoom && currentUser.role === ROLE_MODERATOR
           ? (

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx

@@ -145,6 +145,7 @@ class UserOptions extends PureComponent {
     this.captionsId = _.uniqueId('list-item-');
 
     this.handleCreateBreakoutRoomClick = this.handleCreateBreakoutRoomClick.bind(this);
+    this.handleCaptionsClick = this.handleCaptionsClick.bind(this);
     this.onCreateBreakouts = this.onCreateBreakouts.bind(this);
     this.onInvitationUsers = this.onInvitationUsers.bind(this);
     this.renderMenuItems = this.renderMenuItems.bind(this);
@@ -195,6 +196,11 @@ class UserOptions extends PureComponent {
     );
   }
 
+  handleCaptionsClick() {
+    const { mountModal } = this.props;
+    mountModal(<CaptionsWriterMenu />);
+  }
+
   renderMenuItems() {
     const {
       intl,
@@ -295,6 +301,17 @@ class UserOptions extends PureComponent {
         });
       }
 
+      if (amIModerator && CaptionsService.isCaptionsEnabled()) {
+        this.menuItems.push({
+          icon: 'closed_caption',
+          label: intl.formatMessage(intlMessages.captionsLabel),
+          description: intl.formatMessage(intlMessages.captionsDesc),
+          key: this.captionsId,
+          onClick: this.handleCaptionsClick,
+          dataTest: 'writeClosedCaptions',
+        });
+      }
+
       if (amIModerator) {
         if (isLearningDashboardEnabled()) {
           this.menuItems.push({