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

package/dist/index.js

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

package/dist/meta.cjs.json

@@ -3855,7 +3855,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/hooks/useFullscreen.js": {
-      "bytes": 1131,
+      "bytes": 1246,
       "imports": [
         {
           "path": "react",
@@ -3872,6 +3872,11 @@
           "kind": "import-statement",
           "original": "../Toast/ToastManager"
         },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../common/constants"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -5619,7 +5624,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/connectionQualityUtils.js": {
-      "bytes": 1222,
+      "bytes": 1146,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -5630,7 +5635,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-      "bytes": 3584,
+      "bytes": 3582,
       "imports": [
         {
           "path": "react",
@@ -7387,7 +7392,7 @@
       "imports": []
     },
     "src/Prebuilt/components/Chat/EmptyChat.tsx": {
-      "bytes": 1769,
+      "bytes": 1781,
       "imports": [
         {
           "path": "react",
@@ -8257,7 +8262,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/SidePaneTabs.tsx": {
-      "bytes": 7873,
+      "bytes": 7970,
       "imports": [
         {
           "path": "react",
@@ -8879,7 +8884,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 4995,
+      "bytes": 5020,
       "imports": [
         {
           "path": "react",
@@ -9623,7 +9628,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-      "bytes": 2457,
+      "bytes": 2449,
       "imports": [
         {
           "path": "react",
@@ -9669,7 +9674,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/SecondaryTiles.tsx": {
-      "bytes": 2609,
+      "bytes": 2773,
       "imports": [
         {
           "path": "react",
@@ -12770,7 +12775,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3164317
+      "bytes": 3164784
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15474,7 +15479,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18111
+          "bytesInOutput": 18103
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -15879,7 +15884,7 @@
           "bytesInOutput": 6192
         },
         "src/Prebuilt/components/hooks/useFullscreen.js": {
-          "bytesInOutput": 1667
+          "bytesInOutput": 1737
         },
         "src/Prebuilt/components/MoreSettings/FullScreenItem.jsx": {
           "bytesInOutput": 1014
@@ -16029,10 +16034,10 @@
           "bytesInOutput": 1939
         },
         "src/Prebuilt/components/Connection/connectionQualityUtils.js": {
-          "bytesInOutput": 1059
+          "bytesInOutput": 974
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-          "bytesInOutput": 4492
+          "bytesInOutput": 4490
         },
         "src/Prebuilt/components/RemoveParticipant.tsx": {
           "bytesInOutput": 1694
@@ -16146,13 +16151,13 @@
           "bytesInOutput": 2366
         },
         "src/Prebuilt/components/Chat/EmptyChat.tsx": {
-          "bytesInOutput": 2200
+          "bytesInOutput": 2211
         },
         "src/Prebuilt/components/hooks/usePinnedBy.tsx": {
           "bytesInOutput": 920
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 17144
+          "bytesInOutput": 17105
         },
         "src/Prebuilt/components/Chat/ChatSelector.tsx": {
           "bytesInOutput": 8560
@@ -16191,7 +16196,7 @@
           "bytesInOutput": 3060
         },
         "src/Prebuilt/components/SidePaneTabs.tsx": {
-          "bytesInOutput": 8908
+          "bytesInOutput": 9046
         },
         "src/Prebuilt/components/Connection/TileConnection.tsx": {
           "bytesInOutput": 2685
@@ -16227,7 +16232,7 @@
           "bytesInOutput": 8224
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 5619
+          "bytesInOutput": 5644
         },
         "src/Prebuilt/components/Chip.tsx": {
           "bytesInOutput": 1118
@@ -16269,10 +16274,10 @@
           "bytesInOutput": 2453
         },
         "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-          "bytesInOutput": 2961
+          "bytesInOutput": 2953
         },
         "src/Prebuilt/components/SecondaryTiles.tsx": {
-          "bytesInOutput": 2991
+          "bytesInOutput": 3143
         },
         "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx": {
           "bytesInOutput": 1302
@@ -16482,7 +16487,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1486444
+      "bytes": 1486698
     }
   }
 }

package/dist/meta.esbuild.json

@@ -3855,7 +3855,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/hooks/useFullscreen.js": {
-      "bytes": 1131,
+      "bytes": 1246,
       "imports": [
         {
           "path": "react",
@@ -3872,6 +3872,11 @@
           "kind": "import-statement",
           "original": "../Toast/ToastManager"
         },
+        {
+          "path": "src/Prebuilt/common/constants.ts",
+          "kind": "import-statement",
+          "original": "../../common/constants"
+        },
         {
           "path": "<define:process.env>",
           "kind": "import-statement",
@@ -5619,7 +5624,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/connectionQualityUtils.js": {
-      "bytes": 1222,
+      "bytes": 1146,
       "imports": [
         {
           "path": "<define:process.env>",
@@ -5630,7 +5635,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-      "bytes": 3584,
+      "bytes": 3582,
       "imports": [
         {
           "path": "react",
@@ -7387,7 +7392,7 @@
       "imports": []
     },
     "src/Prebuilt/components/Chat/EmptyChat.tsx": {
-      "bytes": 1769,
+      "bytes": 1781,
       "imports": [
         {
           "path": "react",
@@ -8257,7 +8262,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/SidePaneTabs.tsx": {
-      "bytes": 7873,
+      "bytes": 7970,
       "imports": [
         {
           "path": "react",
@@ -8879,7 +8884,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/SidePane.tsx": {
-      "bytes": 4995,
+      "bytes": 5020,
       "imports": [
         {
           "path": "react",
@@ -9623,7 +9628,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-      "bytes": 2457,
+      "bytes": 2449,
       "imports": [
         {
           "path": "react",
@@ -9669,7 +9674,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/SecondaryTiles.tsx": {
-      "bytes": 2609,
+      "bytes": 2773,
       "imports": [
         {
           "path": "react",
@@ -12775,7 +12780,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-OGCNZHHH.js",
+          "path": "dist/chunk-JSWIHHXP.js",
           "kind": "import-statement"
         }
       ],
@@ -12848,16 +12853,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-5I6UAYPZ.js.map": {
+    "dist/HLSView-XSS3JNNS.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-5I6UAYPZ.js": {
+    "dist/HLSView-XSS3JNNS.js": {
       "imports": [
         {
-          "path": "dist/chunk-OGCNZHHH.js",
+          "path": "dist/chunk-JSWIHHXP.js",
           "kind": "import-statement"
         },
         {
@@ -13021,13 +13026,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-OGCNZHHH.js.map": {
+    "dist/chunk-JSWIHHXP.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3101121
+      "bytes": 3101582
     },
-    "dist/chunk-OGCNZHHH.js": {
+    "dist/chunk-JSWIHHXP.js": {
       "imports": [
         {
           "path": "react",
@@ -15275,7 +15280,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-5I6UAYPZ.js",
+          "path": "dist/HLSView-XSS3JNNS.js",
           "kind": "dynamic-import"
         },
         {
@@ -15697,7 +15702,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18111
+          "bytesInOutput": 18103
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224267
@@ -16108,7 +16113,7 @@
           "bytesInOutput": 628
         },
         "src/Prebuilt/components/hooks/useFullscreen.js": {
-          "bytesInOutput": 1172
+          "bytesInOutput": 1220
         },
         "src/Prebuilt/components/MoreSettings/MuteAllModal.jsx": {
           "bytesInOutput": 2173
@@ -16231,10 +16236,10 @@
           "bytesInOutput": 11538
         },
         "src/Prebuilt/components/Connection/ConnectionIndicator.tsx": {
-          "bytesInOutput": 3751
+          "bytesInOutput": 3749
         },
         "src/Prebuilt/components/Connection/connectionQualityUtils.js": {
-          "bytesInOutput": 777
+          "bytesInOutput": 700
         },
         "src/Prebuilt/components/RemoveParticipant.tsx": {
           "bytesInOutput": 1290
@@ -16261,7 +16266,7 @@
           "bytesInOutput": 9632
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
-          "bytesInOutput": 4602
+          "bytesInOutput": 4627
         },
         "src/Prebuilt/components/Polls/Polls.tsx": {
           "bytesInOutput": 735
@@ -16336,13 +16341,13 @@
           "bytesInOutput": 1727
         },
         "src/Prebuilt/components/SidePaneTabs.tsx": {
-          "bytesInOutput": 7277
+          "bytesInOutput": 7387
         },
         "src/Prebuilt/components/Chat/Chat.tsx": {
           "bytesInOutput": 3444
         },
         "src/Prebuilt/components/Chat/ChatBody.tsx": {
-          "bytesInOutput": 14381
+          "bytesInOutput": 14354
         },
         "src/Prebuilt/components/Chat/ChatActions.tsx": {
           "bytesInOutput": 9785
@@ -16357,7 +16362,7 @@
           "bytesInOutput": 2757
         },
         "src/Prebuilt/components/Chat/EmptyChat.tsx": {
-          "bytesInOutput": 1642
+          "bytesInOutput": 1653
         },
         "src/Prebuilt/images/empty-chat.svg": {
           "bytesInOutput": 2261
@@ -16474,10 +16479,10 @@
           "bytesInOutput": 1972
         },
         "src/Prebuilt/components/SecondaryTiles.tsx": {
-          "bytesInOutput": 2366
+          "bytesInOutput": 2494
         },
         "src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx": {
-          "bytesInOutput": 2288
+          "bytesInOutput": 2280
         },
         "src/Prebuilt/components/hooks/useRoleProminencePeers.tsx": {
           "bytesInOutput": 961
@@ -16624,7 +16629,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1264716
+      "bytes": 1264916
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.4-alpha.0",
+  "version": "0.2.4-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.4-alpha.0",
-    "@100mslive/hms-virtual-background": "1.12.4-alpha.0",
-    "@100mslive/react-icons": "0.9.4-alpha.0",
-    "@100mslive/react-sdk": "0.9.4-alpha.0",
+    "@100mslive/hls-player": "0.2.4-alpha.2",
+    "@100mslive/hms-virtual-background": "1.12.4-alpha.2",
+    "@100mslive/react-icons": "0.9.4-alpha.2",
+    "@100mslive/react-sdk": "0.9.4-alpha.2",
     "@100mslive/types-prebuilt": "0.12.6",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -120,5 +120,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "fd3b1d5dbaa21c6789e6a8ce192a20f6ae416ee5"
+  "gitHead": "828a285832ea0ad08e7df58763efe8c645e0569c"
 }

package/src/Prebuilt/components/Chat/ChatBody.tsx

@@ -426,11 +426,11 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
 
-    if (filteredMessages.length === 0) {
-      return <EmptyChat />;
-    }
-
-    return <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />;
+    return filteredMessages.length === 0 ? (
+      <EmptyChat />
+    ) : (
+      <VirtualizedChatMessages messages={filteredMessages} ref={listRef} scrollToBottom={scrollToBottom} />
+    );
   },
 );
 

package/src/Prebuilt/components/Chat/EmptyChat.tsx

@@ -33,7 +33,8 @@ export const EmptyChat = () => {
       justify="center"
     >
       <Box>
-        <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '0 auto' }} />
+        <img src={emptyChat} alt="Empty Chat" height={132} width={185} style={{ margin: '8px auto 4px auto' }} />
+
         <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
           {canSendMessages ? 'Start a conversation' : 'No messages yet'}
         </Text>

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -33,7 +33,7 @@ export const ConnectionIndicator = ({
 }) => {
   const downlinkQuality = useHMSStore(selectConnectionQualityByPeerID(peerId))?.downlinkQuality;
   const { theme } = useTheme();
-  const defaultColor = theme.colors.surface_brighter;
+  const defaultColor = theme.colors.on_surface_low;
   if (downlinkQuality === -1 || downlinkQuality === undefined) {
     return null;
   }

package/src/Prebuilt/components/Connection/connectionQualityUtils.js

@@ -30,10 +30,8 @@ export const getColor = (position, connectionScore, defaultColor, theme) => {
   }
   if (connectionScore >= 4) {
     return theme.colors.alert_success;
-  } else if (connectionScore >= 3) {
-    return theme.colors.alert_warning;
   } else if (connectionScore >= 1) {
-    return theme.colors.alert_default;
+    return theme.colors.alert_warning;
   }
   return defaultColor;
 };

package/src/Prebuilt/components/SecondaryTiles.tsx

@@ -21,12 +21,18 @@ export const SecondaryTiles = ({ peers, onPageChange, onPageSize, edgeToEdge, ha
     peers:
       spotlightPeerId || pinnedPeer
         ? [...peers].sort((p1, p2) => {
-            const peerIdList = [activeScreensharePeerId, pinnedPeer, spotlightPeerId];
+            if (activeScreensharePeerId === p1.id) {
+              return -1;
+            }
+            if (activeScreensharePeerId === p2.id) {
+              return 1;
+            }
+            const peerIdList = [pinnedPeer, spotlightPeerId];
             // put active screenshare peer, pinned peer, spotlight peer at first
-            if (peerIdList.includes(p1)) {
+            if (peerIdList.includes(p1.id)) {
               return -1;
             }
-            if (peerIdList.includes(p2)) {
+            if (peerIdList.includes(p2.id)) {
               return 1;
             }
             return 0;

package/src/Prebuilt/components/SidePaneTabs.tsx

@@ -194,7 +194,10 @@ export const SidePaneTabs = React.memo<{
               <Tabs.Content value={SIDE_PANE_OPTIONS.PARTICIPANTS} css={{ p: 0 }}>
                 <ParticipantList offStageRoles={off_stage_roles} onActive={setActiveRole} />
               </Tabs.Content>
-              <Tabs.Content value={SIDE_PANE_OPTIONS.CHAT} css={{ p: 0 }}>
+              <Tabs.Content
+                value={SIDE_PANE_OPTIONS.CHAT}
+                css={{ p: 0, overflowY: 'auto', '@md': { overflowY: 'unset' } }}
+              >
                 <Chat />
               </Tabs.Content>
             </Tabs.Root>

package/src/Prebuilt/components/VideoLayouts/ProminenceLayout.tsx

@@ -68,7 +68,7 @@ const SecondarySection = ({
             rootCSS={{
               padding: 0,
               maxWidth: 240,
-              maxHeight: '100%',
+              h: '100%',
               aspectRatio: 16 / 9,
               '@md': { aspectRatio: 1 },
             }}

package/src/Prebuilt/components/hooks/useFullscreen.js

@@ -1,6 +1,7 @@
 import { useCallback, useEffect, useState } from 'react';
 import screenfull from 'screenfull';
 import { ToastManager } from '../Toast/ToastManager';
+import { DEFAULT_PORTAL_CONTAINER } from '../../common/constants';
 
 export const useFullscreen = () => {
   const [isFullScreenEnabled, setIsFullScreenEnabled] = useState(screenfull.isFullscreen);
@@ -14,7 +15,7 @@ export const useFullscreen = () => {
       if (isFullScreenEnabled) {
         await screenfull.exit();
       } else {
-        await screenfull.request();
+        await screenfull.request(document.querySelector(DEFAULT_PORTAL_CONTAINER));
       }
     } catch (err) {
       ToastManager.addToast({ title: err.message });

package/src/Prebuilt/layouts/SidePane.tsx

@@ -121,7 +121,7 @@ const SidePane = ({
             },
             '@md': {
               p: '$6 $8',
-              h: 'auto',
+              h: mwebStreamingChat ? 'auto' : '',
               pb: mwebStreamingChat ? '$20' : '$12',
               borderTopLeftRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',
               borderTopRightRadius: sidepane === SIDE_PANE_OPTIONS.POLLS ? '$2' : '0',