@100mslive/roomkit-react 0.2.6-alpha.3 → 0.2.6-alpha.5

package/dist/index.js

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

package/dist/meta.cjs.json

@@ -2205,18 +2205,28 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5537,
+      "bytes": 5829,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Theme/index.tsx",
+          "kind": "import-statement",
+          "original": "../../../Theme"
+        },
         {
           "path": "src/Prebuilt/components/Settings/LayoutSettings.tsx",
           "kind": "import-statement",
@@ -5013,7 +5023,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 11911,
+      "bytes": 11876,
       "imports": [
         {
           "path": "react",
@@ -8771,7 +8781,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2675,
+      "bytes": 2687,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -9149,7 +9159,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 9972,
+      "bytes": 9985,
       "imports": [
         {
           "path": "react",
@@ -9934,7 +9944,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4462,
+      "bytes": 4479,
       "imports": [
         {
           "path": "react",
@@ -10731,7 +10741,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 18225,
+      "bytes": 18115,
       "imports": [
         {
           "path": "react",
@@ -12780,7 +12790,7 @@
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3167517
+      "bytes": 3167561
     },
     "dist/index.cjs.js": {
       "imports": [
@@ -13129,6 +13139,11 @@
           "kind": "require-call",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "require-call",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "require-call",
@@ -15484,7 +15499,7 @@
       "entryPoint": "src/index.ts",
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18180
+          "bytesInOutput": 18159
         },
         "src/Theme/base.config.ts": {
           "bytesInOutput": 6104
@@ -15778,7 +15793,7 @@
           "bytesInOutput": 2515
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 6173
+          "bytesInOutput": 6500
         },
         "src/Prebuilt/AppContext.tsx": {
           "bytesInOutput": 840
@@ -15994,7 +16009,7 @@
           "bytesInOutput": 938
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 12942
+          "bytesInOutput": 12309
         },
         "src/Prebuilt/components/MoreSettings/MoreSettings.tsx": {
           "bytesInOutput": 729
@@ -16228,7 +16243,7 @@
           "bytesInOutput": 1628
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 4186
+          "bytesInOutput": 4226
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 908
@@ -16252,7 +16267,7 @@
           "bytesInOutput": 3422
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 11789
+          "bytesInOutput": 11802
         },
         "src/Prebuilt/components/RoleChangeRequest/RequestPrompt.tsx": {
           "bytesInOutput": 2764
@@ -16297,7 +16312,7 @@
           "bytesInOutput": 1707
         },
         "src/Prebuilt/components/ScreenshareTile.tsx": {
-          "bytesInOutput": 5566
+          "bytesInOutput": 5583
         },
         "src/Prebuilt/components/VideoLayouts/ScreenshareLayout.tsx": {
           "bytesInOutput": 3419
@@ -16363,7 +16378,7 @@
           "bytesInOutput": 4598
         },
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 21767
+          "bytesInOutput": 21671
         },
         "src/Prebuilt/layouts/VideoStreamingSection.tsx": {
           "bytesInOutput": 4111
@@ -16492,7 +16507,7 @@
           "bytesInOutput": 2980
         }
       },
-      "bytes": 1489012
+      "bytes": 1488659
     }
   }
 }

package/dist/meta.esbuild.json

@@ -2205,18 +2205,28 @@
       "format": "esm"
     },
     "src/Prebuilt/components/AppData/AppData.tsx": {
-      "bytes": 5537,
+      "bytes": 5829,
       "imports": [
         {
           "path": "react",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "src/Theme/index.tsx",
+          "kind": "import-statement",
+          "original": "../../../Theme"
+        },
         {
           "path": "src/Prebuilt/components/Settings/LayoutSettings.tsx",
           "kind": "import-statement",
@@ -5013,7 +5023,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-      "bytes": 11911,
+      "bytes": 11876,
       "imports": [
         {
           "path": "react",
@@ -8771,7 +8781,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-      "bytes": 2675,
+      "bytes": 2687,
       "imports": [
         {
           "path": "@100mslive/hms-virtual-background",
@@ -9149,7 +9159,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-      "bytes": 9972,
+      "bytes": 9985,
       "imports": [
         {
           "path": "react",
@@ -9934,7 +9944,7 @@
       "format": "esm"
     },
     "src/Prebuilt/components/ScreenshareTile.tsx": {
-      "bytes": 4462,
+      "bytes": 4479,
       "imports": [
         {
           "path": "react",
@@ -10731,7 +10741,7 @@
       "format": "esm"
     },
     "src/Prebuilt/layouts/HLSView.jsx": {
-      "bytes": 18225,
+      "bytes": 18115,
       "imports": [
         {
           "path": "react",
@@ -12785,7 +12795,7 @@
     "dist/index.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZJU5GUBY.js",
+          "path": "dist/chunk-HWYKJQTV.js",
           "kind": "import-statement"
         }
       ],
@@ -12858,16 +12868,16 @@
       "inputs": {},
       "bytes": 1822
     },
-    "dist/HLSView-7QXLQ4KD.js.map": {
+    "dist/HLSView-EWCMUTSW.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 59786
+      "bytes": 59619
     },
-    "dist/HLSView-7QXLQ4KD.js": {
+    "dist/HLSView-EWCMUTSW.js": {
       "imports": [
         {
-          "path": "dist/chunk-ZJU5GUBY.js",
+          "path": "dist/chunk-HWYKJQTV.js",
           "kind": "import-statement"
         },
         {
@@ -12987,7 +12997,7 @@
       "entryPoint": "src/Prebuilt/layouts/HLSView.jsx",
       "inputs": {
         "src/Prebuilt/layouts/HLSView.jsx": {
-          "bytesInOutput": 17821
+          "bytesInOutput": 17725
         },
         "src/Prebuilt/components/HlsStatsOverlay.jsx": {
           "bytesInOutput": 3521
@@ -13029,15 +13039,15 @@
           "bytesInOutput": 3992
         }
       },
-      "bytes": 37440
+      "bytes": 37344
     },
-    "dist/chunk-ZJU5GUBY.js.map": {
+    "dist/chunk-HWYKJQTV.js.map": {
       "imports": [],
       "exports": [],
       "inputs": {},
-      "bytes": 3103545
+      "bytes": 3103727
     },
-    "dist/chunk-ZJU5GUBY.js": {
+    "dist/chunk-HWYKJQTV.js": {
       "imports": [
         {
           "path": "react",
@@ -13329,6 +13339,11 @@
           "kind": "import-statement",
           "external": true
         },
+        {
+          "path": "react-use",
+          "kind": "import-statement",
+          "external": true
+        },
         {
           "path": "@100mslive/react-sdk",
           "kind": "import-statement",
@@ -15285,7 +15300,7 @@
           "external": true
         },
         {
-          "path": "dist/HLSView-7QXLQ4KD.js",
+          "path": "dist/HLSView-EWCMUTSW.js",
           "kind": "dynamic-import"
         },
         {
@@ -15707,7 +15722,7 @@
       ],
       "inputs": {
         "<define:process.env>": {
-          "bytesInOutput": 18180
+          "bytesInOutput": 18159
         },
         "../../node_modules/lodash/lodash.js": {
           "bytesInOutput": 224267
@@ -15962,7 +15977,7 @@
           "bytesInOutput": 7656
         },
         "src/Prebuilt/components/AppData/AppData.tsx": {
-          "bytesInOutput": 5077
+          "bytesInOutput": 5312
         },
         "src/Prebuilt/components/Settings/LayoutSettings.tsx": {
           "bytesInOutput": 2705
@@ -16007,10 +16022,10 @@
           "bytesInOutput": 6071
         },
         "src/Prebuilt/components/Footer/Footer.tsx": {
-          "bytesInOutput": 3348
+          "bytesInOutput": 3350
         },
         "src/Prebuilt/components/AudioVideoToggle.jsx": {
-          "bytesInOutput": 5480
+          "bytesInOutput": 5497
         },
         "src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.jsx": {
           "bytesInOutput": 2866
@@ -16022,7 +16037,7 @@
           "bytesInOutput": 1028
         },
         "src/Prebuilt/components/EmojiReaction.jsx": {
-          "bytesInOutput": 2075
+          "bytesInOutput": 2089
         },
         "src/Prebuilt/components/Footer/EmojiCard.jsx": {
           "bytesInOutput": 972
@@ -16130,7 +16145,7 @@
           "bytesInOutput": 1948
         },
         "src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx": {
-          "bytesInOutput": 10584
+          "bytesInOutput": 10037
         },
         "src/Prebuilt/components/Header/StreamActions.tsx": {
           "bytesInOutput": 10019
@@ -16232,7 +16247,7 @@
           "bytesInOutput": 823
         },
         "src/Prebuilt/components/VirtualBackground/VBToggle.tsx": {
-          "bytesInOutput": 985
+          "bytesInOutput": 958
         },
         "src/Prebuilt/components/Footer/ChatToggle.tsx": {
           "bytesInOutput": 1404
@@ -16268,7 +16283,7 @@
           "bytesInOutput": 3077
         },
         "src/Prebuilt/components/Preview/PreviewJoin.tsx": {
-          "bytesInOutput": 9619
+          "bytesInOutput": 9632
         },
         "src/Prebuilt/layouts/SidePane.tsx": {
           "bytesInOutput": 4579
@@ -16436,7 +16451,7 @@
           "bytesInOutput": 1161
         },
         "src/Prebuilt/components/VirtualBackground/VBHandler.tsx": {
-          "bytesInOutput": 3387
+          "bytesInOutput": 3427
         },
         "src/Prebuilt/components/VirtualBackground/constants.ts": {
           "bytesInOutput": 714
@@ -16496,7 +16511,7 @@
           "bytesInOutput": 2664
         },
         "src/Prebuilt/components/ScreenshareTile.tsx": {
-          "bytesInOutput": 4430
+          "bytesInOutput": 4447
         },
         "src/Prebuilt/components/LayoutModeSelector.tsx": {
           "bytesInOutput": 3093
@@ -16634,7 +16649,7 @@
           "bytesInOutput": 651
         }
       },
-      "bytes": 1266496
+      "bytes": 1266239
     }
   }
 }

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.2.6-alpha.3",
+  "version": "0.2.6-alpha.5",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,10 +82,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.2.6-alpha.3",
-    "@100mslive/hms-virtual-background": "1.12.6-alpha.3",
-    "@100mslive/react-icons": "0.9.6-alpha.3",
-    "@100mslive/react-sdk": "0.9.6-alpha.3",
+    "@100mslive/hls-player": "0.2.6-alpha.5",
+    "@100mslive/hms-virtual-background": "1.12.6-alpha.5",
+    "@100mslive/react-icons": "0.9.6-alpha.5",
+    "@100mslive/react-sdk": "0.9.6-alpha.5",
     "@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": "e1e1ecc82a980ca298ecb36c81c35ab7500b06b4"
+  "gitHead": "dd470c3002085468208fabc315a48ce80321e4ed"
 }

package/src/Prebuilt/components/AppData/AppData.tsx

@@ -1,14 +1,17 @@
 import React, { useEffect } from 'react';
+import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
   selectHLSState,
   selectRoomState,
   selectRTMPState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
+import { config as cssConfig } from '../../../Theme';
 import { LayoutMode } from '../Settings/LayoutSettings';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 //@ts-ignore
@@ -73,6 +76,8 @@ export const AppData = React.memo(() => {
   const appData = useHMSStore(selectFullAppData);
   const { elements } = useRoomLayoutConferencingScreen();
   const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isMobile = useMedia(cssConfig.media.md);
+  const { isLocalVideoEnabled } = useAVToggle();
 
   useEffect(() => {
     hmsActions.initAppData({
@@ -114,9 +119,11 @@ export const AppData = React.memo(() => {
     });
     if (defaultMediaURL) {
       hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
-      toggleVB();
+      if (isLocalVideoEnabled && !isMobile) {
+        toggleVB();
+      }
     }
-  }, [hmsActions, elements?.virtual_background?.background_media, toggleVB]);
+  }, [hmsActions, elements?.virtual_background?.background_media, toggleVB, isLocalVideoEnabled, isMobile]);
 
   return <ResetStreamingStart />;
 });

package/src/Prebuilt/components/HMSVideo/VideoProgress.jsx

@@ -44,7 +44,7 @@ export const VideoProgress = ({ onValueChange, hlsPlayer }) => {
   return hlsPlayer.getVideoElement() ? (
     <Flex
       ref={progressRootRef}
-      css={{ cursor: 'pointer', h: '$4', alignSelf: 'stretch' }}
+      css={{ cursor: 'pointer', h: '$2', alignSelf: 'stretch' }}
       onClick={onProgressChangeHandler}
     >
       <Box

package/src/Prebuilt/components/Header/HeaderComponents.jsx

@@ -12,7 +12,7 @@ export const SpeakerTag = () => {
       <Flex
         align="center"
         justify="center"
-        css={{ flex: '1 1 0', color: '$on_primary_high', '@md': { display: 'none' } }}
+        css={{ flex: '1 1 0', color: '$on_surface_high', '@md': { display: 'none' } }}
       >
         <VerticalDivider css={{ ml: '$8' }} />
         <VolumeOneIcon />

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -22,7 +22,6 @@ import {
   QuizIcon,
   RecordIcon,
   SettingsIcon,
-  VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
 import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
@@ -91,10 +90,10 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { toggleAudio, toggleVideo, isLocalVideoEnabled } = useAVToggle();
+  const { toggleAudio, toggleVideo } = useAVToggle();
   const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
-  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  // const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -181,7 +180,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null}
 
-            {isLocalVideoEnabled && !!elements?.virtual_background ? (
+            {/* {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {
                   toggleVB();
@@ -191,7 +190,7 @@ export const MwebOptions = ({
                 <VirtualBackgroundIcon />
                 <ActionTile.Title>Virtual Background</ActionTile.Title>
               </ActionTile.Root>
-            ) : null}
+            ) : null} */}
 
             {elements?.emoji_reactions && (
               <ActionTile.Root

package/src/Prebuilt/components/Preview/PreviewJoin.tsx

@@ -267,7 +267,7 @@ export const PreviewControls = ({ hideSettings, vbEnabled }: { hideSettings: boo
     >
       <Flex css={{ gap: '$4' }}>
         <AudioVideoToggle />
-        {vbEnabled ? <VBToggle /> : null}
+        {vbEnabled && !isMobile ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

package/src/Prebuilt/components/ScreenshareTile.tsx

@@ -95,7 +95,7 @@ const Tile = ({ peerId, width = '100%', height = '100%' }: { peerId: string; wid
             {isFullscreen ? <ShrinkIcon /> : <ExpandIcon />}
           </StyledVideoTile.FullScreenButton>
         ) : null}
-        {!isMobile && isMouseHovered && (
+        {!isMobile && isMouseHovered && !isFullscreen && (
           <Box
             css={{
               position: 'absolute',

package/src/Prebuilt/components/VirtualBackground/VBHandler.tsx

@@ -70,9 +70,9 @@ export class VBPlugin {
     }
   };
 
-  setPreset = (preset: string) => {
+  setPreset = async (preset: string) => {
     if (this.effectsPlugin) {
-      this.effectsPlugin.setPreset(preset);
+      await this.effectsPlugin.setPreset(preset);
     }
   };
 

package/src/Prebuilt/layouts/HLSView.jsx

@@ -308,8 +308,7 @@ const HLSView = () => {
           align="center"
           justify="center"
           css={{
-            width:
-              videoRef.current && videoRef.current.clientWidth <= 720 ? `${videoRef.current.clientWidth}px` : '100%',
+            width: '100%',
             margin: '0 auto',
             height: '100%',
           }}