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

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

@@ -1,9 +1,11 @@
 /* eslint-disable no-case-declarations */
 import React, { useCallback, useEffect } from 'react';
+import { match } from 'ts-pattern';
 import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
+  HMSTranscriptionState,
   selectIsLocalScreenShared,
   selectLocalPeerID,
   selectPeerNameByID,
@@ -14,7 +16,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { GroupIcon } from '@100mslive/react-icons';
+import { AlertTriangleIcon, ClosedCaptionIcon, GroupIcon, OpenCaptionIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
 import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
@@ -33,8 +35,8 @@ import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvid
 // @ts-ignore: No implicit Any
 import { usePollViewToggle } from '../AppData/useSidepane';
 // @ts-ignore: No implicit Any
-import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
-import { ROLE_CHANGE_DECLINED } from '../../common/constants';
+import { useIsNotificationDisabled, useSetAppDataByKey, useSubscribedNotifications } from '../AppData/useUISettings';
+import { CAPTION_TOAST, ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
 
@@ -51,6 +53,7 @@ export function Notifications() {
   const { showNotification } = useAwayNotifications();
   const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
   const logoURL = useRoomLayout()?.logo?.url;
+  const [toastId, setToastId] = useSetAppDataByKey(CAPTION_TOAST.captionToast);
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -178,6 +181,44 @@ export function Notifications() {
           });
         }
         break;
+      case HMSNotificationTypes.TRANSCRIPTION_STATE_UPDATED:
+        const transcriptionStates = notification.data;
+        if (transcriptionStates && transcriptionStates.length > 0) {
+          let id = '';
+          match({ state: transcriptionStates[0].state, error: transcriptionStates[0].error })
+            .when(
+              ({ error }) => !!error,
+              () => {
+                ToastManager.removeToast(toastId);
+                id = ToastManager.addToast({
+                  title: `Failed to enable Closed Caption`,
+                  variant: 'error',
+                  icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,
+                });
+              },
+            )
+            .with({ state: HMSTranscriptionState.STARTED }, () => {
+              ToastManager.removeToast(toastId);
+              id = ToastManager.addToast({
+                title: `Closed Captioning enabled for everyone`,
+                variant: 'standard',
+                duration: 2000,
+                icon: <OpenCaptionIcon style={{ marginRight: '0.5rem' }} />,
+              });
+            })
+            .with({ state: HMSTranscriptionState.STOPPED }, () => {
+              ToastManager.removeToast(toastId);
+              id = ToastManager.addToast({
+                title: `Closed Captioning disabled for everyone`,
+                variant: 'standard',
+                duration: 2000,
+                icon: <ClosedCaptionIcon style={{ marginRight: '0.5rem' }} />,
+              });
+            })
+            .otherwise(() => null);
+          setToastId(id);
+        }
+        break;
       default:
         break;
     }

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 (