@100mslive/roomkit-react 0.2.7-alpha.2 → 0.2.7-alpha.3

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-GEXL6KL2.js";
+} from "./chunk-AGREPSFA.js";
 export {
   Accordion,
   AudioLevel,

package/dist/meta.cjs.json

@@ -1961,7 +1961,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/useUISettings.js": {
-      "bytes": 6035,
+      "bytes": 6029,
       "imports": [
         {
           "path": "react",
@@ -2814,7 +2814,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 9809,
+      "bytes": 9962,
       "imports": [
         {
           "path": "react",
@@ -4615,7 +4615,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 323418,
+      "bytes": 323575,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5598,7 +5598,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenShareToggle.jsx": {
-      "bytes": 1625,
+      "bytes": 1754,
       "imports": [
         {
           "path": "react",
@@ -5654,6 +5654,11 @@
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "format": "esm"
@@ -11981,7 +11986,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx": {
-      "bytes": 1590,
+      "bytes": 1606,
       "imports": [
         {
           "path": "react",
@@ -12008,6 +12013,11 @@
           "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",
@@ -12257,7 +12267,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/Notifications.tsx": {
-      "bytes": 7380,
+      "bytes": 7891,
       "imports": [
         {
           "path": "react",
@@ -13183,7 +13193,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3215096
+      "bytes": 3216780
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15977,7 +15987,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18235
+          "bytesInOutput": 18236
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -16244,7 +16254,7 @@
           "bytesInOutput": 1087
         },
         "src/Prebuilt/components/AppData/useUISettings.js": {
-          "bytesInOutput": 6930
+          "bytesInOutput": 6924
         },
         "src/Prebuilt/components/Settings/common.ts": {
           "bytesInOutput": 445
@@ -16265,7 +16275,7 @@
           "bytesInOutput": 1552
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3810
+          "bytesInOutput": 3813
         },
         "src/Prebuilt/provider/roomLayoutProvider/hooks/useRoomLayoutScreen.ts": {
           "bytesInOutput": 3003
@@ -16319,7 +16329,7 @@
           "bytesInOutput": 1359
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 12380
+          "bytesInOutput": 12588
         },
         "src/Prebuilt/components/Footer/EmojiCard.jsx": {
           "bytesInOutput": 1315
@@ -16406,7 +16416,7 @@
           "bytesInOutput": 8159
         },
         "../../node_modules/reselect/es/index.js": {
-          "bytesInOutput": 2639
+          "bytesInOutput": 2641
         },
         "../../node_modules/ua-parser-js/src/main/ua-parser.mjs": {
           "bytesInOutput": 48479
@@ -16418,7 +16428,7 @@
           "bytesInOutput": 6459
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6258
+          "bytesInOutput": 6261
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1396
@@ -16427,7 +16437,7 @@
           "bytesInOutput": 22882
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getusermedia.js": {
-          "bytesInOutput": 2292
+          "bytesInOutput": 2295
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getdisplaymedia.js": {
           "bytesInOutput": 984
@@ -16529,7 +16539,7 @@
           "bytesInOutput": 7928
         },
         "src/Prebuilt/components/ScreenShareToggle.jsx": {
-          "bytesInOutput": 2025
+          "bytesInOutput": 2190
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
           "bytesInOutput": 1350
@@ -16574,7 +16584,7 @@
           "bytesInOutput": 1170
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 9656
+          "bytesInOutput": 9660
         },
         "src/Prebuilt/components/Polls/CreateQuestions/DeleteQuestionModal.tsx": {
           "bytesInOutput": 2802
@@ -16844,7 +16854,7 @@
           "bytesInOutput": 860
         },
         "src/Prebuilt/components/HMSVideo/HMSVIdeoUtils.js": {
-          "bytesInOutput": 848
+          "bytesInOutput": 850
         },
         "src/Prebuilt/components/HMSVideo/VideoProgress.jsx": {
           "bytesInOutput": 3186
@@ -16931,7 +16941,7 @@
           "bytesInOutput": 2151
         },
         "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx": {
-          "bytesInOutput": 1690
+          "bytesInOutput": 1691
         },
         "src/Prebuilt/components/Notifications/InitErrorModal.tsx": {
           "bytesInOutput": 1964
@@ -16961,7 +16971,7 @@
           "bytesInOutput": 2281
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 8278
+          "bytesInOutput": 8886
         },
         "src/Prebuilt/components/Notifications/index.tsx": {
           "bytesInOutput": 173
@@ -17009,7 +17019,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1514875
+      "bytes": 1515879
     }
   }
 }

package/dist/meta.esbuild.json

@@ -1961,7 +1961,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/useUISettings.js": {
-      "bytes": 6035,
+      "bytes": 6029,
       "imports": [
         {
           "path": "react",
@@ -2814,7 +2814,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AudioVideoToggle.tsx": {
-      "bytes": 9809,
+      "bytes": 9962,
       "imports": [
         {
           "path": "react",
@@ -4615,7 +4615,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 323418,
+      "bytes": 323575,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -5598,7 +5598,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenShareToggle.jsx": {
-      "bytes": 1625,
+      "bytes": 1754,
       "imports": [
         {
           "path": "react",
@@ -5654,6 +5654,11 @@
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "format": "esm"
@@ -11981,7 +11986,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx": {
-      "bytes": 1590,
+      "bytes": 1606,
       "imports": [
         {
           "path": "react",
@@ -12008,6 +12013,11 @@
           "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",
@@ -12257,7 +12267,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Notifications/Notifications.tsx": {
-      "bytes": 7380,
+      "bytes": 7891,
       "imports": [
         {
           "path": "react",
@@ -13188,7 +13198,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-GEXL6KL2.js",
+          "path": "dist/chunk-AGREPSFA.js",
           "kind": "import-statement"
         }
       ],
@@ -13261,16 +13271,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-DQJBCEW4.js.map": {
+    "dist/HLSView-NDCESLVD.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-DQJBCEW4.js": {
+    "dist/HLSView-NDCESLVD.js": {
       "imports": [
         {
-          "path": "dist/chunk-GEXL6KL2.js",
+          "path": "dist/chunk-AGREPSFA.js",
           "kind": "import-statement"
         },
         {
@@ -13434,13 +13444,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-GEXL6KL2.js.map": {
+    "dist/chunk-AGREPSFA.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3151413
+      "bytes": 3153242
     },
-    "dist/chunk-GEXL6KL2.js": {
+    "dist/chunk-AGREPSFA.js": {
       "imports": [
         {
           "path": "react",
@@ -15743,7 +15753,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-DQJBCEW4.js",
+          "path": "dist/HLSView-NDCESLVD.js",
           "kind": "dynamic-import"
         },
         {
@@ -16200,7 +16210,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18235
+          "bytesInOutput": 18236
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224276
@@ -16461,7 +16471,7 @@
           "bytesInOutput": 973
         },
         "src/Prebuilt/components/AppData/useUISettings.js": {
-          "bytesInOutput": 5286
+          "bytesInOutput": 5280
         },
         "src/Prebuilt/components/hooks/useUserPreferences.jsx": {
           "bytesInOutput": 748
@@ -16482,7 +16492,7 @@
           "bytesInOutput": 1486
         },
         "src/Prebuilt/common/utils.js": {
-          "bytesInOutput": 3207
+          "bytesInOutput": 3210
         },
         "src/Prebuilt/components/AppData/useSidepane.js": {
           "bytesInOutput": 1934
@@ -16503,7 +16513,7 @@
           "bytesInOutput": 3350
         },
         "src/Prebuilt/components/AudioVideoToggle.tsx": {
-          "bytesInOutput": 10115
+          "bytesInOutput": 10265
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx": {
           "bytesInOutput": 3065
@@ -16635,7 +16645,7 @@
           "bytesInOutput": 48907
         },
         "../../node_modules/reselect/es/index.js": {
-          "bytesInOutput": 2537
+          "bytesInOutput": 2539
         },
         "../../node_modules/ua-parser-js/src/main/ua-parser.mjs": {
           "bytesInOutput": 42640
@@ -16653,7 +16663,7 @@
           "bytesInOutput": 22678
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getusermedia.js": {
-          "bytesInOutput": 6092
+          "bytesInOutput": 6095
         },
         "../../node_modules/webrtc-adapter/src/js/chrome/getdisplaymedia.js": {
           "bytesInOutput": 1256
@@ -16662,7 +16672,7 @@
           "bytesInOutput": 9143
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getusermedia.js": {
-          "bytesInOutput": 2137
+          "bytesInOutput": 2140
         },
         "../../node_modules/webrtc-adapter/src/js/firefox/getdisplaymedia.js": {
           "bytesInOutput": 842
@@ -16701,7 +16711,7 @@
           "bytesInOutput": 589
         },
         "src/Prebuilt/components/ScreenShareToggle.jsx": {
-          "bytesInOutput": 1464
+          "bytesInOutput": 1619
         },
         "src/Prebuilt/components/pdfAnnotator/shareScreenOptions.jsx": {
           "bytesInOutput": 7126
@@ -16776,7 +16786,7 @@
           "bytesInOutput": 735
         },
         "src/Prebuilt/components/Polls/CreatePollQuiz/PollsQuizMenu.tsx": {
-          "bytesInOutput": 7983
+          "bytesInOutput": 7987
         },
         "src/Prebuilt/components/Streaming/Common.jsx": {
           "bytesInOutput": 2247
@@ -17073,7 +17083,7 @@
           "bytesInOutput": 27
         },
         "src/Prebuilt/components/Notifications/Notifications.tsx": {
-          "bytesInOutput": 7339
+          "bytesInOutput": 7971
         },
         "src/Prebuilt/components/Notifications/AutoplayBlockedModal.tsx": {
           "bytesInOutput": 1053
@@ -17082,7 +17092,7 @@
           "bytesInOutput": 1350
         },
         "src/Prebuilt/components/Notifications/HandRaisedNotifications.tsx": {
-          "bytesInOutput": 1434
+          "bytesInOutput": 1413
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 1768
@@ -17151,7 +17161,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1282345
+      "bytes": 1283281
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.7-alpha.2",
+  "version": "0.2.7-alpha.3",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.7-alpha.2",
+    "@100mslive/hls-player": "0.2.7-alpha.3",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.12.7-alpha.2",
-    "@100mslive/react-icons": "0.9.7-alpha.2",
-    "@100mslive/react-sdk": "0.9.7-alpha.2",
+    "@100mslive/hms-virtual-background": "1.12.7-alpha.3",
+    "@100mslive/react-icons": "0.9.7-alpha.3",
+    "@100mslive/react-sdk": "0.9.7-alpha.3",
     "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -121,5 +121,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "4098033b045e93a14929ec5f7480ca9463bbf59b"
+  "gitHead": "696d255e5bbde485a185ef420c2f00fefdb85426"
 }

package/src/Prebuilt/components/AppData/useUISettings.js

@@ -90,7 +90,7 @@ export const usePinnedTrack = () => {
 
 export const useSubscribedNotifications = notificationKey => {
   const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.subscribedNotifications, notificationKey));
-  return notificationPreference || {};
+  return notificationPreference;
 };
 
 export const useIsNotificationDisabled = () => {

package/src/Prebuilt/components/AudioVideoToggle.tsx

@@ -6,6 +6,7 @@ import {
   selectIsLocalAudioPluginPresent,
   selectLocalAudioTrackID,
   selectLocalVideoTrackID,
+  selectRoom,
   selectRoomState,
   selectVideoTrackByID,
   useAVToggle,
@@ -99,6 +100,7 @@ const NoiseCancellation = () => {
   const [active, setActive] = useState(isPluginAdded);
   const [inProgress, setInProgress] = useState(false);
   const actions = useHMSActions();
+  const room = useHMSStore(selectRoom);
 
   useEffect(() => {
     (async () => {
@@ -113,37 +115,40 @@ const NoiseCancellation = () => {
     })();
   }, [actions, active, isPluginAdded]);
 
-  if (!plugin.isSupported() || !localPeerAudioTrackID) {
+  if (!plugin.isSupported() || !room.isNoiseCancellationEnabled || !localPeerAudioTrackID) {
     return null;
   }
 
   return (
-    <Dropdown.Item
-      css={{
-        p: '$4 $8',
-        h: '$15',
-        fontSize: '$xs',
-        justifyContent: 'space-between',
-      }}
-      onClick={e => {
-        e.preventDefault();
-        setActive(value => !value);
-      }}
-    >
-      <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
-        <AudioLevelIcon />
-        Reduce Noise
-      </Text>
-      <Switch
-        id="noise_cancellation"
-        checked={active}
-        disabled={inProgress}
-        onClick={e => e.stopPropagation()}
-        onCheckedChange={value => {
-          setActive(value);
+    <>
+      <Dropdown.Item
+        css={{
+          p: '$4 $8',
+          h: '$15',
+          fontSize: '$xs',
+          justifyContent: 'space-between',
         }}
-      />
-    </Dropdown.Item>
+        onClick={e => {
+          e.preventDefault();
+          setActive(value => !value);
+        }}
+      >
+        <Text css={{ display: 'flex', alignItems: 'center', gap: '$2', fontSize: '$xs', '& svg': { size: '$8' } }}>
+          <AudioLevelIcon />
+          Reduce Noise
+        </Text>
+        <Switch
+          id="noise_cancellation"
+          checked={active}
+          disabled={inProgress}
+          onClick={e => e.stopPropagation()}
+          onCheckedChange={value => {
+            setActive(value);
+          }}
+        />
+      </Dropdown.Item>
+      <Dropdown.ItemSeparator css={{ mx: 0 }} />
+    </>
   );
 };
 
@@ -252,7 +257,6 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           )}
           <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <NoiseCancellation />
-          <Dropdown.ItemSeparator css={{ mx: 0 }} />
           <AudioSettings onClick={() => setShowSettings(true)} />
         </IconButtonWithOptions>
       ) : null}

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

@@ -13,13 +13,14 @@ import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useSubscribedNotifications } from '../AppData/useUISettings';
+import { SUBSCRIBED_NOTIFICATIONS } from '../../common/constants';
 
 export const HandRaisedNotifications = () => {
   const notification = useHMSNotifications(HMSNotificationTypes.HAND_RAISE_CHANGED);
   const roomState = useHMSStore(selectRoomState);
   const vanillaStore = useHMSVanillaStore();
   const { on_stage_exp } = useRoomLayoutConferencingScreen().elements || {};
-  const subscribedNotifications = useSubscribedNotifications();
+  const isSubscribing = !!useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.METADATA_UPDATED);
 
   useEffect(() => {
     if (!notification?.data) {
@@ -27,12 +28,7 @@ export const HandRaisedNotifications = () => {
     }
 
     // Don't show toast message in case of local peer.
-    if (
-      roomState !== HMSRoomState.Connected ||
-      notification.data.isLocal ||
-      !on_stage_exp ||
-      !subscribedNotifications.METADATA_UPDATED
-    ) {
+    if (roomState !== HMSRoomState.Connected || notification.data.isLocal || !on_stage_exp || !isSubscribing) {
       return;
     }
     const hasPeerHandRaised = vanillaStore.getState(selectHasPeerHandRaised(notification.data.id));
@@ -40,7 +36,7 @@ export const HandRaisedNotifications = () => {
       ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
       console.debug('Metadata updated', notification.data);
     }
-  }, [notification, on_stage_exp, roomState, subscribedNotifications.METADATA_UPDATED, vanillaStore]);
+  }, [isSubscribing, notification, on_stage_exp, roomState, vanillaStore]);
 
   return null;
 };

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

@@ -4,9 +4,11 @@ import {
   HMSNotificationTypes,
   HMSRoleChangeRequest,
   HMSRoomState,
+  selectIsLocalScreenShared,
   selectLocalPeerID,
   selectPeerNameByID,
   selectRoomState,
+  useAwayNotifications,
   useCustomEvent,
   useHMSNotifications,
   useHMSStore,
@@ -14,7 +16,7 @@ import {
 } from '@100mslive/react-sdk';
 import { GroupIcon } from '@100mslive/react-icons';
 import { Box, Button } from '../../..';
-import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
+import { useRoomLayout, useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 // @ts-ignore: No implicit Any
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
@@ -39,13 +41,16 @@ const pollToastKey: Record<string, string> = {};
 export function Notifications() {
   const localPeerID = useHMSStore(selectLocalPeerID);
   const notification = useHMSNotifications();
-  const subscribedNotifications = useSubscribedNotifications();
+  const subscribedNotifications = useSubscribedNotifications() || {};
   const roomState = useHMSStore(selectRoomState);
   const updateRoomLayoutForRole = useUpdateRoomLayout();
   const isNotificationDisabled = useIsNotificationDisabled();
   const screenProps = useRoomLayoutConferencingScreen();
   const vanillaStore = useHMSVanillaStore();
   const togglePollView = usePollViewToggle();
+  const { showNotification } = useAwayNotifications();
+  const amIScreenSharing = useHMSStore(selectIsLocalScreenShared);
+  const logoURL = useRoomLayout()?.logo?.url;
 
   const handleRoleChangeDenied = useCallback((request: HMSRoleChangeRequest & { peerName: string }) => {
     ToastManager.addToast({
@@ -165,6 +170,14 @@ export function Notifications() {
           delete pollToastKey[notification?.data.id];
         }
         break;
+      case HMSNotificationTypes.NEW_MESSAGE:
+        if (amIScreenSharing) {
+          showNotification(`New message from ${notification.data.senderName}`, {
+            body: notification.data.message,
+            icon: logoURL,
+          });
+        }
+        break;
       default:
         break;
     }