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

package/dist/index.js

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

package/dist/meta.cjs.json

@@ -4778,7 +4778,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 332801,
+      "bytes": 333031,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -13369,7 +13369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/plugins/FlyingEmoji.jsx": {
-      "bytes": 3826,
+      "bytes": 4255,
       "imports": [
         {
           "path": "react",
@@ -13410,6 +13410,11 @@
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "format": "esm"
@@ -13943,7 +13948,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3329809
+      "bytes": 3330969
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -16937,7 +16942,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18307
+          "bytesInOutput": 18308
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -17105,7 +17110,7 @@
           "bytesInOutput": 983
         },
         "src/AudioLevel/AudioLevel.tsx": {
-          "bytesInOutput": 2808
+          "bytesInOutput": 2807
         },
         "src/AudioLevel/index.ts": {
           "bytesInOutput": 175
@@ -17216,7 +17221,7 @@
           "bytesInOutput": 3450
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224317
+          "bytesInOutput": 224308
         },
         "src/Prebuilt/provider/roomLayoutProvider/constants/index.ts": {
           "bytesInOutput": 1887
@@ -17633,7 +17638,7 @@
           "bytesInOutput": 1528
         },
         "src/Prebuilt/components/hooks/usePinnedMessages.ts": {
-          "bytesInOutput": 3165
+          "bytesInOutput": 3164
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 11568
@@ -17672,7 +17677,7 @@
           "bytesInOutput": 1403
         },
         "src/Prebuilt/components/Chat/StickIndicator.tsx": {
-          "bytesInOutput": 828
+          "bytesInOutput": 827
         },
         "src/Prebuilt/components/Chat/PinnedMessage.tsx": {
           "bytesInOutput": 6242
@@ -17735,7 +17740,7 @@
           "bytesInOutput": 3422
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 11956
+          "bytesInOutput": 11955
         },
         "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx": {
           "bytesInOutput": 2807
@@ -17750,13 +17755,13 @@
           "bytesInOutput": 5183
         },
         "src/Prebuilt/components/Pagination.tsx": {
-          "bytesInOutput": 2119
+          "bytesInOutput": 2118
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
           "bytesInOutput": 1620
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 4486
+          "bytesInOutput": 4481
         },
         "src/Prebuilt/components/VideoLayouts/EqualProminence.tsx": {
           "bytesInOutput": 2453
@@ -17789,7 +17794,7 @@
           "bytesInOutput": 3759
         },
         "src/Prebuilt/common/PeersSorter.ts": {
-          "bytesInOutput": 3605
+          "bytesInOutput": 3604
         },
         "src/Prebuilt/components/VideoLayouts/GridLayout.tsx": {
           "bytesInOutput": 5493
@@ -17915,7 +17920,7 @@
           "bytesInOutput": 1821
         },
         "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-          "bytesInOutput": 7703
+          "bytesInOutput": 7702
         },
         "src/Prebuilt/components/Toast/ToastBatcher.js": {
           "bytesInOutput": 2394
@@ -17972,7 +17977,7 @@
           "bytesInOutput": 772
         },
         "src/Prebuilt/plugins/FlyingEmoji.jsx": {
-          "bytesInOutput": 4336
+          "bytesInOutput": 4756
         },
         "src/Prebuilt/plugins/RemoteStopScreenshare.jsx": {
           "bytesInOutput": 827
@@ -17999,7 +18004,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1587273
+      "bytes": 1587673
     }
   }
 }

package/dist/meta.esbuild.json

@@ -4778,7 +4778,7 @@
       "format": "cjs"
     },
     "../hms-video-store/dist/index.js": {
-      "bytes": 332801,
+      "bytes": 333031,
       "imports": [
         {
           "path": "../../node_modules/reselect/es/index.js",
@@ -13369,7 +13369,7 @@
       "format": "esm"
     },
     "src/Prebuilt/plugins/FlyingEmoji.jsx": {
-      "bytes": 3826,
+      "bytes": 4255,
       "imports": [
         {
           "path": "react",
@@ -13410,6 +13410,11 @@
           "path": "<define:process.env>",
           "kind": "import-statement",
           "external": true
+        },
+        {
+          "path": "<runtime>",
+          "kind": "import-statement",
+          "external": true
         }
       ],
       "format": "esm"
@@ -13948,7 +13953,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-BKAJ6YG4.js",
+          "path": "dist/chunk-G5EI4B2P.js",
           "kind": "import-statement"
         }
       ],
@@ -14021,16 +14026,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-SZL2TSWE.js.map": {
+    "dist/HLSView-VU7EAULT.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 100708
     },
-    "dist/HLSView-SZL2TSWE.js": {
+    "dist/HLSView-VU7EAULT.js": {
       "imports": [
         {
-          "path": "dist/chunk-BKAJ6YG4.js",
+          "path": "dist/chunk-G5EI4B2P.js",
           "kind": "import-statement"
         },
         {
@@ -14266,13 +14271,13 @@
       },
       "bytes": 61939
     },
-    "dist/chunk-BKAJ6YG4.js.map": {
+    "dist/chunk-G5EI4B2P.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3225135
+      "bytes": 3226404
     },
-    "dist/chunk-BKAJ6YG4.js": {
+    "dist/chunk-G5EI4B2P.js": {
       "imports": [
         {
           "path": "react",
@@ -16705,7 +16710,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-SZL2TSWE.js",
+          "path": "dist/HLSView-VU7EAULT.js",
           "kind": "dynamic-import"
         },
         {
@@ -17186,10 +17191,10 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18307
+          "bytesInOutput": 18308
         },
         "../../node_modules/lodash/lodash.js": {
-          "bytesInOutput": 224310
+          "bytesInOutput": 224301
         },
         "../../node_modules/ua-parser-js/src/ua-parser.js": {
           "bytesInOutput": 42482
@@ -17369,7 +17374,7 @@
           "bytesInOutput": 755
         },
         "src/AudioLevel/AudioLevel.tsx": {
-          "bytesInOutput": 2196
+          "bytesInOutput": 2195
         },
         "src/AudioLevel/audio-level.png": {
           "bytesInOutput": 880
@@ -17768,7 +17773,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9772
+          "bytesInOutput": 9771
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 6436
@@ -17876,7 +17881,7 @@
           "bytesInOutput": 1210
         },
         "src/Prebuilt/components/hooks/usePinnedMessages.ts": {
-          "bytesInOutput": 2758
+          "bytesInOutput": 2757
         },
         "src/Prebuilt/components/Chat/EmptyChat.tsx": {
           "bytesInOutput": 1952
@@ -17912,7 +17917,7 @@
           "bytesInOutput": 1021
         },
         "src/Prebuilt/components/Chat/StickIndicator.tsx": {
-          "bytesInOutput": 543
+          "bytesInOutput": 542
         },
         "src/Prebuilt/components/Footer/PaginatedParticipants.tsx": {
           "bytesInOutput": 4205
@@ -17981,13 +17986,13 @@
           "bytesInOutput": 451
         },
         "src/Prebuilt/components/Pagination.tsx": {
-          "bytesInOutput": 1699
+          "bytesInOutput": 1698
         },
         "src/Prebuilt/components/VideoLayouts/Grid.tsx": {
           "bytesInOutput": 1204
         },
         "src/Prebuilt/components/hooks/useTileLayout.tsx": {
-          "bytesInOutput": 3835
+          "bytesInOutput": 3830
         },
         "src/Prebuilt/components/VideoLayouts/RoleProminence.tsx": {
           "bytesInOutput": 2183
@@ -18017,7 +18022,7 @@
           "bytesInOutput": 2887
         },
         "src/Prebuilt/common/PeersSorter.ts": {
-          "bytesInOutput": 3099
+          "bytesInOutput": 3098
         },
         "src/Prebuilt/layouts/EmbedView.jsx": {
           "bytesInOutput": 2787
@@ -18092,7 +18097,7 @@
           "bytesInOutput": 1983
         },
         "src/Prebuilt/components/Toast/ToastConfig.jsx": {
-          "bytesInOutput": 6413
+          "bytesInOutput": 6412
         },
         "src/Prebuilt/components/Notifications/InitErrorModal.tsx": {
           "bytesInOutput": 1596
@@ -18137,7 +18142,7 @@
           "bytesInOutput": 1623
         },
         "src/Prebuilt/plugins/FlyingEmoji.jsx": {
-          "bytesInOutput": 3918
+          "bytesInOutput": 4352
         },
         "src/Prebuilt/plugins/RemoteStopScreenshare.jsx": {
           "bytesInOutput": 605
@@ -18155,7 +18160,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1322555
+      "bytes": 1322969
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.9-alpha.0",
+  "version": "0.3.9-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,11 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.9-alpha.0",
+    "@100mslive/hls-player": "0.3.9-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.9-alpha.0",
-    "@100mslive/react-icons": "0.10.9-alpha.0",
-    "@100mslive/react-sdk": "0.10.9-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.9-alpha.1",
+    "@100mslive/react-icons": "0.10.9-alpha.1",
+    "@100mslive/react-sdk": "0.10.9-alpha.1",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "0e749918d6dddfed6208acd8e4dbfed267cc751e"
+  "gitHead": "1b8cdadaee116534032f5c9523f3128a2df52368"
 }

package/src/Prebuilt/plugins/FlyingEmoji.jsx

@@ -1,9 +1,11 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useMedia } from 'react-use';
 import {
+  selectIsLargeRoom,
   selectLocalPeerID,
   selectPeerNameByID,
   useCustomEvent,
+  useHMSActions,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
@@ -43,17 +45,23 @@ const getStartingPoints = isMobile => {
 export function FlyingEmoji() {
   const localPeerId = useHMSStore(selectLocalPeerID);
   const vanillaStore = useHMSVanillaStore();
+  const hmsActions = useHMSActions();
   const [emojis, setEmojis] = useState([]);
   const isMobile = useMedia(cssConfig.media.md);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
 
   const startingPoints = useMemo(() => getStartingPoints(isMobile), [isMobile]);
 
   const showFlyingEmoji = useCallback(
-    ({ emojiId, senderId }) => {
+    async ({ emojiId, senderId }) => {
       if (!emojiId || !senderId || document.hidden) {
         return;
       }
-      const senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
+      let senderPeerName = vanillaStore.getState(selectPeerNameByID(senderId));
+      if (!senderPeerName && isLargeRoom) {
+        const sender = await hmsActions.getPeer(senderId);
+        senderPeerName = sender?.name;
+      }
       const nameToShow = localPeerId === senderId ? 'You' : senderPeerName;
       const startingPoint = startingPoints[emojiCount % startingPoints.length];
       const id = emojiCount++;
@@ -71,7 +79,7 @@ export function FlyingEmoji() {
         ];
       });
     },
-    [localPeerId, vanillaStore, startingPoints],
+    [vanillaStore, isLargeRoom, localPeerId, startingPoints, hmsActions],
   );
 
   useCustomEvent({
@@ -118,24 +126,28 @@ export function FlyingEmoji() {
             <Box>
               <em-emoji id={emoji.emojiId} size="48px" set="apple"></em-emoji>
             </Box>
-            <Box
-              css={{
-                width: 'fit-content',
-                padding: '$2 $4',
-                background: '$surface_bright',
-                borderRadius: '$1',
-              }}
-            >
-              <Text
+            {emoji.senderName ? (
+              <Box
                 css={{
-                  fontSize: '$space$6',
-                  lineHeight: '$xs',
-                  color: '$on_surface_high',
+                  width: 'fit-content',
+                  padding: '$2 $4',
+                  background: '$surface_bright',
+                  borderRadius: '$1',
                 }}
               >
-                {emoji.senderName}
-              </Text>
-            </Box>
+                <Text
+                  css={{
+                    fontSize: '$space$6',
+                    lineHeight: '$xs',
+                    color: '$on_surface_high',
+                  }}
+                >
+                  {emoji.senderName}
+                </Text>
+              </Box>
+            ) : (
+              ''
+            )}
           </Flex>
         );
       })}