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

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-FSSFZGW6.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",
@@ -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",
@@ -12770,7 +12775,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3164450
+      "bytes": 3164784
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15474,7 +15479,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18113
+          "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
@@ -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
@@ -16482,7 +16487,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1486503
+      "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",
@@ -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",
@@ -12775,7 +12780,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FSSFZGW6.js",
+          "path": "dist/chunk-JSWIHHXP.js",
           "kind": "import-statement"
         }
       ],
@@ -12848,16 +12853,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-SPGUNWZM.js.map": {
+    "dist/HLSView-XSS3JNNS.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-SPGUNWZM.js": {
+    "dist/HLSView-XSS3JNNS.js": {
       "imports": [
         {
-          "path": "dist/chunk-FSSFZGW6.js",
+          "path": "dist/chunk-JSWIHHXP.js",
           "kind": "import-statement"
         },
         {
@@ -13021,13 +13026,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-FSSFZGW6.js.map": {
+    "dist/chunk-JSWIHHXP.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3101252
+      "bytes": 3101582
     },
-    "dist/chunk-FSSFZGW6.js": {
+    "dist/chunk-JSWIHHXP.js": {
       "imports": [
         {
           "path": "react",
@@ -15275,7 +15280,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-SPGUNWZM.js",
+          "path": "dist/HLSView-XSS3JNNS.js",
           "kind": "dynamic-import"
         },
         {
@@ -15697,7 +15702,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18113
+          "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
@@ -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
@@ -16624,7 +16629,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1264759
+      "bytes": 1264916
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.4-alpha.1",
+  "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.1",
-    "@100mslive/hms-virtual-background": "1.12.4-alpha.1",
-    "@100mslive/react-icons": "0.9.4-alpha.1",
-    "@100mslive/react-sdk": "0.9.4-alpha.1",
+    "@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": "ae40b4fdc16f86138cb26086f63e4555cc439bba"
+  "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/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/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',