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

package/dist/index.js

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

package/dist/meta.cjs.json

@@ -9929,7 +9929,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4446,
+      "bytes": 4462,
       "imports": [
         {
           "path": "react",
@@ -10020,7 +10020,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-      "bytes": 2843,
+      "bytes": 3065,
       "imports": [
         {
           "path": "react",
@@ -12775,7 +12775,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3164784
+      "bytes": 3165128
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -15479,7 +15479,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18103
+          "bytesInOutput": 18093
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -16292,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
@@ -16487,7 +16487,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1486698
+      "bytes": 1486850
     }
   }
 }

package/dist/meta.esbuild.json

@@ -9929,7 +9929,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4446,
+      "bytes": 4462,
       "imports": [
         {
           "path": "react",
@@ -10020,7 +10020,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
-      "bytes": 2843,
+      "bytes": 3065,
       "imports": [
         {
           "path": "react",
@@ -12780,7 +12780,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-JSWIHHXP.js",
+          "path": "dist/chunk-QW3HEGVV.js",
           "kind": "import-statement"
         }
       ],
@@ -12853,16 +12853,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-XSS3JNNS.js.map": {
+    "dist/HLSView-B7YXFUDK.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
       "bytes": 58854
     },
-    "dist/HLSView-XSS3JNNS.js": {
+    "dist/HLSView-B7YXFUDK.js": {
       "imports": [
         {
-          "path": "dist/chunk-JSWIHHXP.js",
+          "path": "dist/chunk-QW3HEGVV.js",
           "kind": "import-statement"
         },
         {
@@ -13026,13 +13026,13 @@
       },
       "bytes": 36972
     },
-    "dist/chunk-JSWIHHXP.js.map": {
+    "dist/chunk-QW3HEGVV.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3101582
+      "bytes": 3101962
     },
-    "dist/chunk-JSWIHHXP.js": {
+    "dist/chunk-QW3HEGVV.js": {
       "imports": [
         {
           "path": "react",
@@ -15280,7 +15280,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-XSS3JNNS.js",
+          "path": "dist/HLSView-B7YXFUDK.js",
           "kind": "dynamic-import"
         },
         {
@@ -15702,7 +15702,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18103
+          "bytesInOutput": 18093
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224267
@@ -16488,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
@@ -16629,7 +16629,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1264916
+      "bytes": 1265070
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.4-alpha.2",
+  "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.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/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": "828a285832ea0ad08e7df58763efe8c645e0569c"
+  "gitHead": "364fdcc42d01ca9cd41dde9915a0a9ef132a35d7"
 }

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/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 () => {