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

package/dist/index.js

@@ -62,7 +62,7 @@ import {
   theme,
   useBorderAudioLevel,
   useTheme
-} from "./chunk-FSSFZGW6.js";
+} from "./chunk-QW3HEGVV.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",
@@ -9924,7 +9929,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4446,
+      "bytes": 4462,
       "imports": [
         {
           "path": "react",
@@ -10015,7 +10020,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-      "bytes": 2843,
+      "bytes": 3065,
       "imports": [
         {
           "path": "react",
@@ -12770,7 +12775,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3164450
+      "bytes": 3165128
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15474,7 +15479,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18113
+          "bytesInOutput": 18093
         },
         "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
@@ -16287,10 +16292,10 @@
           "bytesInOutput": 1707
         },
         "src/Prebuilt/components/ScreenshareTile.tsx": {
-          "bytesInOutput": 5604
+          "bytesInOutput": 5566
         },
         "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-          "bytesInOutput": 3219
+          "bytesInOutput": 3419
         },
         "src/Prebuilt/common/PeersSorter.ts": {
           "bytesInOutput": 3604
@@ -16482,7 +16487,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1486503
+      "bytes": 1486850
     }
   }
 }

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",
@@ -9924,7 +9929,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4446,
+      "bytes": 4462,
       "imports": [
         {
           "path": "react",
@@ -10015,7 +10020,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-      "bytes": 2843,
+      "bytes": 3065,
       "imports": [
         {
           "path": "react",
@@ -12775,7 +12780,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-FSSFZGW6.js",
+          "path": "dist/chunk-QW3HEGVV.js",
           "kind": "import-statement"
         }
       ],
@@ -12848,16 +12853,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-SPGUNWZM.js.map": {
+    "dist/HLSView-B7YXFUDK.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-SPGUNWZM.js": {
+    "dist/HLSView-B7YXFUDK.js": {
       "imports": [
         {
-          "path": "dist/chunk-FSSFZGW6.js",
+          "path": "dist/chunk-QW3HEGVV.js",
           "kind": "import-statement"
         },
         {
@@ -13021,13 +13026,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-FSSFZGW6.js.map": {
+    "dist/chunk-QW3HEGVV.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3101252
+      "bytes": 3101962
     },
-    "dist/chunk-FSSFZGW6.js": {
+    "dist/chunk-QW3HEGVV.js": {
       "imports": [
         {
           "path": "react",
@@ -15275,7 +15280,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-SPGUNWZM.js",
+          "path": "dist/HLSView-B7YXFUDK.js",
           "kind": "dynamic-import"
         },
         {
@@ -15697,7 +15702,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18113
+          "bytesInOutput": 18093
         },
         "../../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
@@ -16483,10 +16488,10 @@
           "bytesInOutput": 961
         },
         "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-          "bytesInOutput": 2496
+          "bytesInOutput": 2664
         },
         "src/Prebuilt/components/ScreenshareTile.tsx": {
-          "bytesInOutput": 4434
+          "bytesInOutput": 4430
         },
         "src/Prebuilt/components/LayoutModeSelector.tsx": {
           "bytesInOutput": 3093
@@ -16624,7 +16629,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1264759
+      "bytes": 1265070
     }
   }
 }

package/package.json

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

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/ScreenshareTile.tsx

@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { useFullscreen } from 'react-use';
+import { useFullscreen, useMedia } from 'react-use';
 import screenfull from 'screenfull';
 import {
   selectLocalPeerID,
@@ -12,7 +12,7 @@ import { ExpandIcon, ShrinkIcon } from '@100mslive/react-icons';
 import TileMenu from './TileMenu/TileMenu';
 import { Box } from '../../Layout';
 import { VideoTileStats } from '../../Stats';
-import { useTheme } from '../../Theme';
+import { config as cssConfig, useTheme } from '../../Theme';
 import { Video } from '../../Video';
 import { StyledVideoTile } from '../../VideoTile';
 import { LayoutModeSelector } from './LayoutModeSelector';
@@ -39,6 +39,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
   const peer = useHMSStore(selectPeerByID(peerId));
   const isAudioOnly = useUISettings(UI_SETTINGS.isAudioOnly);
   const [isMouseHovered, setIsMouseHovered] = useState(false);
+  const isMobile = useMedia(cssConfig.media.md);
   const showStatsOnTiles = useUISettings(UI_SETTINGS.showStatsOnTiles);
   const fullscreenRef = useRef<HTMLDivElement | null>(null);
   // fullscreen is for desired state
@@ -94,7 +95,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
             {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
           </StyledVideoTile.FullScreenButton>
         ) : null}
-        {isMouseHovered && (
+        {!isMobile && isMouseHovered && (
           <Box
             css={{
               position: 'absolute',
@@ -111,13 +112,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
         )}
 
         {track ? (
-          <Video
-            screenShare={true}
-            mirror={peer.isLocal}
-            attach={!isAudioOnly}
-            trackId={track.id}
-            css={{ minHeight: 0 }}
-          />
+          <Video screenShare={true} mirror={false} attach={!isAudioOnly} trackId={track.id} css={{ minHeight: 0 }} />
         ) : null}
         <StyledVideoTile.Info css={labelStyles}>{label}</StyledVideoTile.Info>
         {isMouseHovered && !peer.isLocal ? (

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/ScreenshareLayout.tsx

@@ -35,10 +35,19 @@ export const ScreenshareLayout = ({ peers, onPageChange, onPageSize, edgeToEdge
   }, [activeSharePeer, peers, isMobile, layoutMode]);
 
   useEffect(() => {
-    if (layoutMode !== LayoutMode.SIDEBAR) {
-      setLayoutMode(LayoutMode.SIDEBAR);
+    if (isMobile) {
+      setLayoutMode(LayoutMode.GALLERY);
+      return;
     }
-  }, []); // eslint-disable-line react-hooks/exhaustive-deps
+    if (layoutMode === LayoutMode.SIDEBAR) {
+      return;
+    }
+    setLayoutMode(LayoutMode.SIDEBAR);
+    return () => {
+      // reset to gallery once screenshare is stopped
+      setLayoutMode(LayoutMode.GALLERY);
+    };
+  }, [isMobile]); // eslint-disable-line react-hooks/exhaustive-deps
   useEffect(() => {
     setActiveScreenSharePeer(isMobile ? '' : activeSharePeer?.id);
     return () => {

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',