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

package/dist/meta.esbuild.json

@@ -3879,7 +3879,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/CaptionContent.tsx": {
-      "bytes": 5156,
+      "bytes": 5144,
       "imports": [
         {
           "path": "react",
@@ -4640,7 +4640,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 338171,
+      "bytes": 338124,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -10454,7 +10454,7 @@
       ],
       "format": "esm"
     },
-    "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1ded163/tldraw.css": {
+    "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fdeb3/tldraw.css": {
       "bytes": 80111,
       "imports": [
         {
@@ -10504,7 +10504,7 @@
         }
       ]
     },
-    "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1deca50/index.css": {
+    "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fddc1/index.css": {
       "bytes": 597,
       "imports": [
         {
@@ -10513,7 +10513,7 @@
           "external": true
         },
         {
-          "path": "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1ded163/tldraw.css",
+          "path": "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fdeb3/tldraw.css",
           "kind": "import-rule",
           "original": "@tldraw/tldraw/tldraw.css"
         }
@@ -10588,7 +10588,7 @@
           "original": "../../common/constants"
         },
         {
-          "path": "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1deca50/index.css",
+          "path": "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fddc1/index.css",
           "kind": "import-statement",
           "original": "@100mslive/hms-whiteboard/index.css"
         },
@@ -12754,8 +12754,8 @@
       ],
       "format": "esm"
     },
-    "src/Prebuilt/components/Notifications/Notifications.tsx": {
-      "bytes": 9725,
+    "src/Prebuilt/components/Notifications/TranscriptionNotifications.tsx": {
+      "bytes": 2246,
       "imports": [
         {
           "path": "react",
@@ -12777,6 +12777,47 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Prebuilt/components/Toast/ToastManager.js",
+          "kind": "import-statement",
+          "original": "../Toast/ToastManager"
+        },
+        {
+          "path": "src/Prebuilt/components/AppData/useUISettings.js",
+          "kind": "import-statement",
+          "original": "../AppData/useUISettings"
+        },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../common/constants"
+        },
+        {
+          "path": "<define:process.env>",
+          "kind": "import-statement",
+          "external": true
+        }
+      ],
+      "format": "esm"
+    },
+    "src/Prebuilt/components/Notifications/Notifications.tsx": {
+      "bytes": 8003,
+      "imports": [
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "src/index.ts",
           "kind": "import-statement",
@@ -12842,6 +12883,11 @@
           "kind": "import-statement",
           "original": "./TrackUnmuteModal"
         },
+        {
+          "path": "src/Prebuilt/components/Notifications/TranscriptionNotifications.tsx",
+          "kind": "import-statement",
+          "original": "./TranscriptionNotifications"
+        },
         {
           "path": "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts",
           "kind": "import-statement",
@@ -13671,7 +13717,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-D5F44IP2.js",
+          "path": "dist/chunk-ZPUJUJBA.js",
           "kind": "import-statement"
         }
       ],
@@ -13745,16 +13791,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-2BPYWKSN.js.map": {
+    "dist/HLSView-EHEKBMBJ.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 99904
     },
-    "dist/HLSView-2BPYWKSN.js": {
+    "dist/HLSView-EHEKBMBJ.js": {
       "imports": [
         {
-          "path": "dist/chunk-D5F44IP2.js",
+          "path": "dist/chunk-ZPUJUJBA.js",
           "kind": "import-statement"
         },
         {
@@ -13932,7 +13978,7 @@
         "default"
       ],
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
-      "cssBundle": "dist/HLSView-OAQTW322.css",
+      "cssBundle": "dist/HLSView-BJWPNE7P.css",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
           "bytesInOutput": 25793
@@ -13991,13 +14037,13 @@
       },
       "bytes": 58515
     },
-    "dist/chunk-D5F44IP2.js.map": {
+    "dist/chunk-ZPUJUJBA.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3261159
+      "bytes": 3262044
     },
-    "dist/chunk-D5F44IP2.js": {
+    "dist/chunk-ZPUJUJBA.js": {
       "imports": [
         {
           "path": "react",
@@ -16470,7 +16516,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-2BPYWKSN.js",
+          "path": "dist/HLSView-EHEKBMBJ.js",
           "kind": "dynamic-import"
         },
         {
@@ -16623,11 +16669,6 @@
           "kind": "import-statement",
           "external": true
         },
-        {
-          "path": "ts-pattern",
-          "kind": "import-statement",
-          "external": true
-        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -16783,6 +16824,26 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "ts-pattern",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-sdk",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "@100mslive/react-icons",
+          "kind": "import-statement",
+          "external": true
+        },
+        {
+          "path": "react",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "react-use",
           "kind": "import-statement",
@@ -16953,7 +17014,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 17885
+          "bytesInOutput": 17904
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224310
@@ -17376,7 +17437,7 @@
           "bytesInOutput": 989
         },
         "src/Prebuilt/components/MoreSettings/CaptionContent.tsx": {
-          "bytesInOutput": 5013
+          "bytesInOutput": 5003
         },
         "src/Prebuilt/components/MoreSettings/FullScreenItem.tsx": {
           "bytesInOutput": 628
@@ -17795,7 +17856,7 @@
         "src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx": {
           "bytesInOutput": 2656
         },
-        "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1deca50/index.css": {
+        "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fddc1/index.css": {
           "bytesInOutput": 0
         },
         "src/Prebuilt/common/PeersSorter.ts": {
@@ -17856,7 +17917,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 9069
+          "bytesInOutput": 7252
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17900,6 +17961,9 @@
         "src/Prebuilt/components/Notifications/TrackUnmuteModal.tsx": {
           "bytesInOutput": 1651
         },
+        "src/Prebuilt/components/Notifications/TranscriptionNotifications.tsx": {
+          "bytesInOutput": 2152
+        },
         "src/Prebuilt/components/Preview/PreviewScreen.tsx": {
           "bytesInOutput": 1173
         },
@@ -17934,7 +17998,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1305955
+      "bytes": 1306372
     },
     "dist/index.css.map": {
       "imports": [],
@@ -17996,22 +18060,22 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1ded163/tldraw.css": {
+        "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fdeb3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1deca50/index.css": {
+        "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fddc1/index.css": {
           "bytesInOutput": 401
         }
       },
       "bytes": 75901
     },
-    "dist/HLSView-OAQTW322.css.map": {
+    "dist/HLSView-BJWPNE7P.css.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 122402
     },
-    "dist/HLSView-OAQTW322.css": {
+    "dist/HLSView-BJWPNE7P.css": {
       "imports": [
         {
           "path": "https://fonts.googleapis.com/css2?family=Inter:wght@400;500&display=swap",
@@ -18065,10 +18129,10 @@
         }
       ],
       "inputs": {
-        "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1ded163/tldraw.css": {
+        "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fdeb3/tldraw.css": {
           "bytesInOutput": 75223
         },
-        "../../../../../../../tmp/tmp-2737-MgFOw37oAaow/18fbf1deca50/index.css": {
+        "../../../../../../../tmp/tmp-2856-GnTENBz90iJn/18fc335fddc1/index.css": {
           "bytesInOutput": 401
         }
       },

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.12-alpha.0",
+  "version": "0.3.12-alpha.1",
   "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.1",
     "@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.1",
+    "@100mslive/hms-whiteboard": "0.0.2-alpha.1",
+    "@100mslive/react-icons": "0.10.12-alpha.1",
+    "@100mslive/react-sdk": "0.10.12-alpha.1",
     "@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": "d1da18b74e26ac0defecd1509864a9d8dd8c258e"
 }

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;
+};