@100mslive/roomkit-react 0.3.11 → 0.3.12-alpha.1

package/src/Prebuilt/components/MoreSettings/CaptionContent.tsx

@@ -8,14 +8,17 @@ import { Text } from '../../../Text';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 // @ts-ignore: No implicit Any
-import { useSetIsCaptionEnabled } from '../AppData/useUISettings';
+import { useSetAppDataByKey, useSetIsCaptionEnabled } from '../AppData/useUISettings';
+import { CAPTION_TOAST } from '../../common/constants';
 
 export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit: () => void }) => {
   const DURATION = 2000;
   const actions = useHMSActions();
   const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
+  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
 
   const [isCaptionEnabled, setIsCaptionEnabled] = useSetIsCaptionEnabled();
+
   return (
     <>
       <Text
@@ -90,30 +93,33 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
                   await actions.stopTranscription({
                     mode: HMSTranscriptionMode.CAPTION,
                   });
-                  ToastManager.addToast({
+                  const id = ToastManager.replaceToast(toastId, {
                     title: `Disabling Closed Caption for everyone.`,
                     variant: 'standard',
                     duration: DURATION,
                     icon: <Loading color="currentColor" />,
                   });
+                  setToastId(id);
                   onExit();
                   return;
                 }
                 await actions.startTranscription({
                   mode: HMSTranscriptionMode.CAPTION,
                 });
-                ToastManager.addToast({
+                const id = ToastManager.replaceToast(toastId, {
                   title: `Enabling Closed Caption for everyone.`,
                   variant: 'standard',
                   duration: DURATION,
                   icon: <Loading color="currentColor" />,
                 });
+                setToastId(id);
               } catch (err) {
-                ToastManager.addToast({
+                const id = ToastManager.replaceToast(toastId, {
                   title: `Failed to ${isTranscriptionEnabled ? 'disabled' : 'enabled'} closed caption`,
                   variant: 'error',
                   icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
                 });
+                setToastId(id);
               }
               onExit();
             }}

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -6,9 +6,25 @@ import {
   HLSLiveStreamingScreen_Elements,
 } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
-import { selectAppData, selectLocalPeerID, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
-import { BrbIcon, CheckIcon, HamburgerMenuIcon, InfoIcon, PipIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Checkbox, Dropdown, Flex, Text, Tooltip } from '../../../..';
+import {
+  HMSTranscriptionMode,
+  selectAppData,
+  selectIsTranscriptionAllowedByMode,
+  selectIsTranscriptionEnabled,
+  selectLocalPeerID,
+  useHMSActions,
+  useHMSStore,
+} from '@100mslive/react-sdk';
+import {
+  BrbIcon,
+  CheckIcon,
+  HamburgerMenuIcon,
+  InfoIcon,
+  OpenCaptionIcon,
+  PipIcon,
+  SettingsIcon,
+} from '@100mslive/react-icons';
+import { Checkbox, Dropdown, Flex, Switch, Text, Tooltip } from '../../../..';
 import IconButton from '../../../IconButton';
 // @ts-ignore: No implicit any
 import { PIP } from '../../PIP';
@@ -61,6 +77,8 @@ export const DesktopOptions = ({
   const { isBRBOn, toggleBRB } = useMyMetadata();
   const isPipOn = PictureInPicture.isOn();
   const isBRBEnabled = !!elements?.brb;
+  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 
@@ -116,6 +134,25 @@ export const DesktopOptions = ({
               </Flex>
             </Dropdown.Item>
           ) : null}
+          {isTranscriptionAllowed ? (
+            <Dropdown.Item
+              data-testid="closed_caption_admin"
+              onClick={() => {
+                updateState(MODALS.CAPTION, true);
+              }}
+            >
+              <OpenCaptionIcon />
+              <Flex direction="column" css={{ flexGrow: '1' }}>
+                <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
+                  Closed Captions
+                </Text>
+                <Text variant="caption" css={{ ml: '$4', color: '$on_surface_medium' }}>
+                  {isTranscriptionEnabled ? 'Enabled' : 'Disabled'}
+                </Text>
+              </Flex>
+              <Switch id="closed_caption_start_stop" checked={isTranscriptionEnabled} disabled={false} />
+            </Dropdown.Item>
+          ) : null}
           {screenType !== 'hls_live_streaming' ? (
             <Dropdown.Item css={{ p: 0, '&:empty': { display: 'none' } }}>
               <PIP

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -3,8 +3,11 @@ import { useClickAway } from 'react-use';
 import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import { match } from 'ts-pattern';
 import {
+  HMSTranscriptionMode,
   selectIsConnectedToRoom,
   selectIsLocalVideoEnabled,
+  selectIsTranscriptionAllowedByMode,
+  selectIsTranscriptionEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -13,12 +16,14 @@ import {
 } from '@100mslive/react-sdk';
 import {
   BrbIcon,
+  ClosedCaptionIcon,
   CrossIcon,
   EmojiIcon,
   HamburgerMenuIcon,
   HandIcon,
   HandRaiseSlashedIcon,
   InfoIcon,
+  OpenCaptionIcon,
   PeopleIcon,
   QuizActiveIcon,
   QuizIcon,
@@ -50,7 +55,7 @@ import { useSheetToggle } from '../../AppData/useSheet';
 // @ts-ignore: No implicit any
 import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane';
 // @ts-ignore: No implicit Any
-import { useShowPolls } from '../../AppData/useUISettings';
+import { useSetIsCaptionEnabled, useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
 import { useMyMetadata } from '../../hooks/useMetadata';
@@ -104,7 +109,10 @@ export const MwebOptions = ({
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
   const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
   const { startRecording, isRecordingLoading } = useRecordingHandler();
+  const isTranscriptionAllowed = useHMSStore(selectIsTranscriptionAllowedByMode(HMSTranscriptionMode.CAPTION));
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
 
+  const [isCaptionEnabled] = useSetIsCaptionEnabled();
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
   const updateState = (modalName: string, value: boolean) => {
@@ -189,6 +197,17 @@ export const MwebOptions = ({
                 <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
               </ActionTile.Root>
             ) : null}
+            {isTranscriptionAllowed ? (
+              <ActionTile.Root
+                onClick={() => {
+                  setOpenOptionsSheet(false);
+                  updateState(MODALS.CAPTION, true);
+                }}
+              >
+                {isTranscriptionEnabled && isCaptionEnabled ? <ClosedCaptionIcon /> : <OpenCaptionIcon />}
+                <ActionTile.Title>Closed Caption</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
             {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {

package/src/Prebuilt/components/Notifications/Notifications.tsx

@@ -29,6 +29,7 @@ import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
+import { TranscriptionNotifications } from './TranscriptionNotifications';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { usePollViewToggle } from '../AppData/useSidepane';
@@ -200,6 +201,7 @@ export function Notifications() {
       <InitErrorModal />
       <ChatNotifications />
       <HandRaisedNotifications />
+      <TranscriptionNotifications />
     </>
   );
 }

package/src/Prebuilt/components/Notifications/TranscriptionNotifications.tsx

@@ -0,0 +1,58 @@
+import React, { useEffect } from 'react';
+import { match } from 'ts-pattern';
+import { HMSNotificationTypes, HMSTranscriptionState, useHMSNotifications } from '@100mslive/react-sdk';
+import { AlertTriangleIcon, ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+// @ts-ignore: No implicit Any
+import { useSetAppDataByKey } from '../AppData/useUISettings';
+import { CAPTION_TOAST } from '../../common/constants';
+
+export const TranscriptionNotifications = () => {
+  const notification = useHMSNotifications(HMSNotificationTypes.TRANSCRIPTION_STATE_UPDATED);
+  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
+
+  useEffect(() => {
+    if (!notification?.data) {
+      return;
+    }
+
+    console.debug(`[${notification.type}]`, notification);
+    const transcriptionStates = notification.data;
+    if (transcriptionStates.length > 0) {
+      let id = '';
+      match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error })
+        .when(
+          ({ error }) => !!error,
+          () => {
+            id = ToastManager.replaceToast(toastId, {
+              title: `Failed to enable Closed Caption`,
+              variant: 'error',
+              icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
+            });
+          },
+        )
+        .with({ state: HMSTranscriptionState.STARTED }, () => {
+          id = ToastManager.replaceToast(toastId, {
+            title: `Closed Captioning enabled for everyone`,
+            variant: 'standard',
+            duration: 2000,
+            icon: <OpenCaptionIcon style={{ marginRight: '0.5rem' }} />,
+          });
+        })
+        .with({ state: HMSTranscriptionState.STOPPED }, () => {
+          id = ToastManager.replaceToast(toastId, {
+            title: `Closed Captioning disabled for everyone`,
+            variant: 'standard',
+            duration: 2000,
+            icon: <ClosedCaptionIcon style={{ marginRight: '0.5rem' }} />,
+          });
+        })
+        .otherwise(() => null);
+      setToastId(id);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notification, setToastId]);
+
+  return null;
+};

package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -1,19 +1,15 @@
 import React, { useEffect, useMemo, useState } from 'react';
 import { GridVideoTileLayout } from '@100mslive/types-prebuilt/elements/video_tile_layout';
 import {
-  HMSTranscriptionInfo,
   selectLocalPeerID,
   selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
-  selectTranscriptionsState,
   selectWhiteboard,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { AlertTriangleIcon } from '@100mslive/react-icons';
 // @ts-ignore: No implicit Any
-import { ToastManager } from '../Toast/ToastManager';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
@@ -99,18 +95,6 @@ export const GridLayout = ({
     objectFit: video_object_fit,
   };
 
-  const transcriptionStates: HMSTranscriptionInfo[] | undefined = useHMSStore(selectTranscriptionsState);
-
-  useEffect(() => {
-    if (transcriptionStates && transcriptionStates.length > 0 && transcriptionStates[0].error) {
-      ToastManager.addToast({
-        title: `Failed to enable Closed Caption`,
-        variant: 'error',
-        icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
-      });
-    }
-  }, [transcriptionStates]);
-
   useEffect(() => {
     if (mainPage !== 0) {
       return;

package/src/Prebuilt/plugins/CaptionsViewer.tsx

@@ -1,6 +1,12 @@
 import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
-import { HMSTranscript, selectPeerNameByID, useHMSStore, useTranscript } from '@100mslive/react-sdk';
+import {
+  HMSTranscript,
+  selectIsTranscriptionEnabled,
+  selectPeerNameByID,
+  useHMSStore,
+  useTranscript,
+} from '@100mslive/react-sdk';
 import { Box, Flex } from '../../Layout';
 import { Text } from '../../Text';
 import { config } from '../../Theme';
@@ -170,6 +176,8 @@ export const CaptionsViewer = () => {
 
   const isCaptionEnabled = useIsCaptionEnabled();
 
+  const isTranscriptionEnabled = useHMSStore(selectIsTranscriptionEnabled);
+
   useEffect(() => {
     const timeInterval = setInterval(() => {
       if (!captionQueue) {
@@ -193,7 +201,7 @@ export const CaptionsViewer = () => {
     }
     return false;
   });
-  if (dataToShow.length <= 0 || screenType === 'hls_live_streaming' || !isCaptionEnabled) {
+  if (dataToShow.length <= 0 || screenType === 'hls_live_streaming' || !isCaptionEnabled || !isTranscriptionEnabled) {
     return null;
   }
   return (