[2.6.5] translation on client side

bigbluebutton-html5/imports/api/users-persistent-data/server/modifiers/addUserPersistentData.js

@@ -8,6 +8,7 @@ export default async function addUserPersistentData(user) {
     sortName: String,
     color: String,
     speechLocale: String,
+    translationLocale: String,
     mobile: Boolean,
     breakoutProps: Object,
     inactivityCheck: Boolean,

bigbluebutton-html5/imports/api/users/server/methods.js

@@ -2,6 +2,7 @@ import { Meteor } from 'meteor/meteor';
 import validateAuthToken from './methods/validateAuthToken';
 import setEmojiStatus from './methods/setEmojiStatus';
 import setSpeechLocale from './methods/setSpeechLocale';
+import setTranslationLocale from './methods/setTranslationLocale';
 import setMobileUser from './methods/setMobileUser';
 import assignPresenter from './methods/assignPresenter';
 import changeRole from './methods/changeRole';
@@ -17,6 +18,7 @@ import setExitReason from './methods/setExitReason';
 Meteor.methods({
   setEmojiStatus,
   setSpeechLocale,
+  setTranslationLocale,
   setMobileUser,
   assignPresenter,
   changeRole,

bigbluebutton-html5/imports/api/users/server/methods/setTranslationLocale.js

@@ -0,0 +1,22 @@
+import { check } from 'meteor/check';
+import Logger from '/imports/startup/server/logger';
+import updateTranslationLocale from '../modifiers/updateTranslationLocale';
+import { extractCredentials } from '/imports/api/common/server/helpers';
+
+const LANGUAGES = Meteor.settings.public.app.audioCaptions.language.available;
+
+export default function setTranslationLocale(locale) {
+  try {
+    const { meetingId, requesterUserId } = extractCredentials(this.userId);
+
+    check(meetingId, String);
+    check(requesterUserId, String);
+    check(locale, String);
+
+    if (LANGUAGES.includes(locale) || locale === '') {
+      updateTranslationLocale(meetingId, requesterUserId, locale);
+    }
+  } catch (err) {
+    Logger.error(`Exception while invoking method setTranslationLocale ${err.stack}`);
+  }
+}

bigbluebutton-html5/imports/api/users/server/modifiers/addUser.js

@@ -44,6 +44,7 @@ export default async function addUser(meetingId, userData) {
     meetingId,
     sortName: lowercaseTrim(user.name),
     speechLocale: '',
+    translationLocale: '',
     mobile: false,
     breakoutProps: {
       isBreakoutUser: Meeting.meetingProp.isBreakout,

bigbluebutton-html5/imports/api/users/server/modifiers/updateTranslationLocale.js

@@ -0,0 +1,25 @@
+import Logger from '/imports/startup/server/logger';
+import Users from '/imports/api/users';
+
+export default function updateTranslationLocale(meetingId, userId, locale) {
+  const selector = {
+    meetingId,
+    userId,
+  };
+
+  const modifier = {
+    $set: {
+      translationLocale: locale,
+    },
+  };
+
+  try {
+    const numberAffected = Users.update(selector, modifier);
+
+    if (numberAffected) {
+      Logger.info(`Updated translation locale=${locale} userId=${userId} meetingId=${meetingId}`);
+    }
+  } catch (err) {
+    Logger.error(`Updating translation locale: ${err}`);
+  }
+}

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

@@ -74,11 +74,7 @@ class ActionsBar extends PureComponent {
               <CaptionsButtonContainer {...{ intl }} />
             )
             : null}
-          { !deviceInfo.isMobile
-            ? (
-              <AudioCaptionsButtonContainer />
-            )
-            : null }
+          <AudioCaptionsButtonContainer />
         </Styled.Left>
         <Styled.Center>
           <AudioControlsContainer />

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

@@ -24,12 +24,22 @@ const intlMessages = defineMessages({
     id: 'app.audio.captions.button.transcription',
     description: 'Audio speech transcription label',
   },
+  translation: {
+    id: 'app.audio.captions.button.translation',
+    description: 'Audio speech translation label',
+  },
   transcriptionOn: {
     id: 'app.switch.onLabel',
   },
   transcriptionOff: {
     id: 'app.switch.offLabel',
   },
+  translationOn: {
+    id: 'app.switch.onLabel',
+  },
+  translationOff: {
+    id: 'app.switch.offLabel',
+  },
   language: {
     id: 'app.audio.captions.button.language',
     description: 'Audio speech recognition language label',
@@ -85,24 +95,39 @@ const CaptionsButton = ({
   isRTL,
   enabled,
   currentSpeechLocale,
+  currentTranslationLocale,
   availableVoices,
+  availableTranslations,
   isSupported,
   isVoiceUser,
 }) => {
   const isTranscriptionDisabled = () => (
     currentSpeechLocale === DISABLED
   );
+  const isTranslationDisabled = () => (
+    currentTranslationLocale === DISABLED
+  );
+
+  const isTranslationActivated = () => (
+    Meteor.settings.public.captions.enableAutomaticTranslation
+  );
 
   const fallbackLocale = availableVoices.includes(navigator.language)
     ? navigator.language : DEFAULT_LOCALE;
 
   const getSelectedLocaleValue = (isTranscriptionDisabled() ? fallbackLocale : currentSpeechLocale);
+  const getSelectedTranslationLocaleValue = (isTranslationDisabled() ? fallbackLocale : currentTranslationLocale);
 
   const selectedLocale = useRef(getSelectedLocaleValue);
+  const selectedTranslationLocale = useRef(getSelectedTranslationLocaleValue);
 
   useEffect(() => {
     if (!isTranscriptionDisabled()) selectedLocale.current = getSelectedLocaleValue;
   }, [currentSpeechLocale]);
+
+  useEffect(() => {
+    if (!isTranslationDisabled()) selectedTranslationLocale.current = getSelectedTranslationLocaleValue;
+  }, [currentTranslationLocale]);
 
   if (!enabled) return null;
 
@@ -115,49 +140,88 @@ const CaptionsButton = ({
         label: intl.formatMessage(intlMessages[availableVoice]),
         key: availableVoice,
         iconRight: selectedLocale.current === availableVoice ? 'check' : null,
-        customStyles: (selectedLocale.current === availableVoice) && Styled.SelectedLabel,
+        customStyles: (selectedLocale.current === availableVoice) ? Styled.SelectedLabel : Styled.NormalLabel,
         disabled: isTranscriptionDisabled(),
-        dividerTop: availableVoice === availableVoices[0],
         onClick: () => {
           selectedLocale.current = availableVoice;
           SpeechService.setSpeechLocale(selectedLocale.current);
         },
       }
     ))
   );
+
+  const getAvailableTranslationLocales = () => (
+    availableTranslations.map((availableTranslation) => (
+      {
+        icon: '',
+        label: intl.formatMessage(intlMessages[availableTranslation]),
+        key: availableTranslation,
+        iconRight: selectedTranslationLocale.current === availableTranslation ? 'check' : null,
+        customStyles: (selectedTranslationLocale.current === availableTranslation) ? Styled.SelectedLabel : Styled.NormalLabel,
+        disabled: isTranscriptionDisabled() || isTranslationDisabled(),
+        onClick: () => {
+          selectedTranslationLocale.current = availableTranslation;
+          SpeechService.setTranslationLocale(selectedTranslationLocale.current);
+        },
+      }
+    ))
+  );
 
   const toggleTranscription = () => {
     SpeechService.setSpeechLocale(isTranscriptionDisabled() ? selectedLocale.current : DISABLED);
   };
 
-  const getAvailableLocalesList = () => (
-    [{
-      key: 'availableLocalesList',
-      label: intl.formatMessage(intlMessages.language),
-      customStyles: Styled.TitleLabel,
-      disabled: true,
-      dividerTop: false,
-    },
-    ...getAvailableLocales(),
-    {
-      key: 'divider',
-      label: intl.formatMessage(intlMessages.transcription),
-      customStyles: Styled.TitleLabel,
-      disabled: true,
-    }, {
-      key: 'transcriptionStatus',
-      label: intl.formatMessage(
-        isTranscriptionDisabled()
-          ? intlMessages.transcriptionOn
-          : intlMessages.transcriptionOff,
-      ),
-      customStyles: isTranscriptionDisabled()
-        ? Styled.EnableTrascription : Styled.DisableTrascription,
-      disabled: false,
-      dividerTop: true,
-      onClick: toggleTranscription,
-    }]
-  );
+  const toggleTranslation = () => {
+    SpeechService.setTranslationLocale(isTranslationDisabled() ? selectedTranslationLocale.current : DISABLED);
+  };
+
+  const getAvailableLocalesList = () => {
+    let items = [{
+        key: 'divider',
+        label: intl.formatMessage(intlMessages.transcription),
+        customStyles: Styled.TitleLabel,
+        disabled: true,
+      },
+      ...getAvailableLocales(),
+      {
+        key: 'transcriptionStatus',
+        label: intl.formatMessage(
+          isTranscriptionDisabled()
+            ? intlMessages.transcriptionOn
+            : intlMessages.transcriptionOff,
+        ),
+        customStyles: isTranscriptionDisabled()
+          ? Styled.EnableTrascription : Styled.DisableTrascription,
+        disabled: false,
+        onClick: toggleTranscription,
+      }];
+
+    if (isTranslationActivated()) {
+      items = items.concat([
+        {
+          key: 'divider',
+          label: intl.formatMessage(intlMessages.translation),
+          customStyles: Styled.TitleLabel,
+          disabled: true,
+          dividerTop: true,
+        },
+        ...getAvailableTranslationLocales(),
+        {
+          key: 'translationStatus',
+          label: intl.formatMessage(
+            isTranslationDisabled()
+              ? intlMessages.translationOn
+              : intlMessages.translationOff,
+          ),
+          customStyles: isTranslationDisabled()
+            ? Styled.EnableTraslation : Styled.DisableTraslation,
+          disabled: isTranscriptionDisabled(),
+          onClick: toggleTranslation,
+        }
+      ]);
+    }
+    return items;
+  };
 
   const onToggleClick = (e) => {
     e.stopPropagation();
@@ -219,6 +283,7 @@ CaptionsButton.propTypes = {
   isRTL: PropTypes.bool.isRequired,
   enabled: PropTypes.bool.isRequired,
   currentSpeechLocale: PropTypes.string.isRequired,
+  currentTranslationLocale: PropTypes.string.isRequired,
   availableVoices: PropTypes.arrayOf(PropTypes.string).isRequired,
   isSupported: PropTypes.bool.isRequired,
   isVoiceUser: PropTypes.bool.isRequired,

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

@@ -10,15 +10,19 @@ const Container = (props) => <Button {...props} />;
 export default withTracker(() => {
   const isRTL = document.documentElement.getAttribute('dir') === 'rtl';
   const availableVoices = SpeechService.getSpeechVoices();
+  const availableTranslations = SpeechService.getTranslations();
   const currentSpeechLocale = SpeechService.getSpeechLocale();
+  const currentTranslationLocale = SpeechService.getTranslationLocale();
   const isSupported = availableVoices.length > 0;
   const isVoiceUser = AudioService.isVoiceUser();
   return {
     isRTL,
     enabled: Service.hasAudioCaptions(),
     active: Service.getAudioCaptions(),
     currentSpeechLocale,
+    currentTranslationLocale,
     availableVoices,
+    availableTranslations,
     isSupported,
     isVoiceUser,
   };

bigbluebutton-html5/imports/ui/components/audio/captions/button/styles.js

@@ -32,30 +32,57 @@ const TranscriptionToggle = styled(Toggle)`
   padding-left: 1em;
 `;
 
+const TranslationToggle = styled(Toggle)`
+  display: flex;
+  justify-content: flex-start;
+  padding-left: 1em;
+`;
+
 const TitleLabel = {
   fontWeight: 'bold',
   opacity: 1,
 };
 
 const EnableTrascription = {
   color: colorSuccess,
+  textIndent: '1em',
 };
 
 const DisableTrascription = {
   color: colorDangerDark,
+  textIndent: '1em',
+};
+
+const EnableTraslation = {
+  color: colorSuccess,
+  textIndent: '1em',
+};
+
+const DisableTraslation = {
+  color: colorDangerDark,
+  textIndent: '1em',
+};
+
+const NormalLabel = {
+  textIndent: '1em',
 };
 
 const SelectedLabel = {
   color: colorPrimary,
   backgroundColor: colorOffWhite,
+  textIndent: '1em',
 };
 
 export default {
   ClosedCaptionToggleButton,
   SpanButtonWrapper,
   TranscriptionToggle,
+  TranslationToggle,
   TitleLabel,
   EnableTrascription,
   DisableTrascription,
+  EnableTraslation,
+  DisableTraslation,
+  NormalLabel,
   SelectedLabel,
 };