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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.12-alpha.0",
+  "version": "0.3.12-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -74,12 +74,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.12-alpha.0",
+    "@100mslive/hls-player": "0.3.12-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.12-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.2-alpha.0",
-    "@100mslive/react-icons": "0.10.12-alpha.0",
-    "@100mslive/react-sdk": "0.10.12-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.12-alpha.2",
+    "@100mslive/hms-whiteboard": "0.0.2-alpha.2",
+    "@100mslive/react-icons": "0.10.12-alpha.2",
+    "@100mslive/react-sdk": "0.10.12-alpha.2",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "5e32c0c62aba5aa7786a01912511da6ac33461a2"
+  "gitHead": "661d33178068de7f764ef7b31119b04c12c22176"
 }

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

@@ -89,12 +89,11 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
             data-testid="popup_change_btn"
             onClick={async () => {
               try {
-                ToastManager.removeToast(toastId);
                 if (isTranscriptionEnabled) {
                   await actions.stopTranscription({
                     mode: HMSTranscriptionMode.CAPTION,
                   });
-                  const id = ToastManager.addToast({
+                  const id = ToastManager.replaceToast(toastId, {
                     title: `Disabling Closed Caption for everyone.`,
                     variant: 'standard',
                     duration: DURATION,
@@ -107,7 +106,7 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
                 await actions.startTranscription({
                   mode: HMSTranscriptionMode.CAPTION,
                 });
-                const id = ToastManager.addToast({
+                const id = ToastManager.replaceToast(toastId, {
                   title: `Enabling Closed Caption for everyone.`,
                   variant: 'standard',
                   duration: DURATION,
@@ -115,7 +114,7 @@ export const CaptionContent = ({ isMobile, onExit }: { isMobile: boolean; onExit
                 });
                 setToastId(id);
               } catch (err) {
-                const id = ToastManager.addToast({
+                const id = ToastManager.replaceToast(toastId, {
                   title: `Failed to ${isTranscriptionEnabled ? 'disabled' : 'enabled'} closed caption`,
                   variant: 'error',
                   icon: <AlertTriangleIcon style={{ marginRight: '0.5rem' }} />,

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

@@ -1,11 +1,9 @@
 /* eslint-disable no-case-declarations */
 import React, { useCallback, useEffect } from 'react';
-import { match } from 'ts-pattern';
 import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
-  HMSTranscriptionState,
   selectIsLocalScreenShared,
   selectLocalPeerID,
   selectPeerNameByID,
@@ -16,7 +14,7 @@ import {
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
-import { AlertTriangleIcon, ClosedCaptionIcon, GroupIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
 import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
@@ -31,12 +29,13 @@ 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';
 // @ts-ignore: No implicit Any
-import { useIsNotificationDisabled, useSetAppDataByKey, useSubscribedNotifications } from '../AppData/useUISettings';
-import { CAPTION_TOAST, ROLE_CHANGE_DECLINED } from '../../common/constants';
+import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 
 const pollToastKey: Record<string, string> = {};
 
@@ -53,7 +52,6 @@ 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({
@@ -181,44 +179,6 @@ 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;
     }
@@ -241,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;
+};