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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.7-alpha.0",
+  "version": "0.3.7-alpha.2",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.7-alpha.0",
+    "@100mslive/hls-player": "0.3.7-alpha.2",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.7-alpha.0",
-    "@100mslive/hms-whiteboard": "0.0.0-alpha.0",
-    "@100mslive/react-icons": "0.10.7-alpha.0",
-    "@100mslive/react-sdk": "0.10.7-alpha.0",
+    "@100mslive/hms-virtual-background": "1.13.7-alpha.2",
+    "@100mslive/react-icons": "0.10.7-alpha.2",
+    "@100mslive/react-sdk": "0.10.7-alpha.2",
     "@100mslive/types-prebuilt": "0.12.8",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -123,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "693e5ec49cf164ad114b33863d6808321f081aaa"
+  "gitHead": "d1abe3be1c61075152b1aca862f5b1fd10aa4a1b"
 }

package/src/Prebuilt/common/constants.ts

@@ -117,7 +117,6 @@ export enum SESSION_STORE_KEY {
   CHAT_PEER_BLACKLIST = 'chatPeerBlacklist',
   CHAT_MESSAGE_BLACKLIST = 'chatMessageBlacklist',
   CHAT_STATE = 'chatState',
-  SHARED_LEADERBOARDS = 'sharedLeaderboards',
 }
 
 export enum INTERACTION_TYPE {

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

@@ -1,5 +1,4 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import { useMedia } from 'react-use';
 import {
   HMSRoomState,
   selectFullAppData,
@@ -11,7 +10,6 @@ import {
   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
@@ -77,7 +75,6 @@ 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();
   const sidepaneOpenedRef = useRef(false);
 
@@ -123,12 +120,12 @@ export const AppData = React.memo(() => {
   }, [preferences.subscribedNotifications, hmsActions]);
 
   useEffect(() => {
-    if (defaultMediaURL && !sidepaneOpenedRef.current && !isMobile && isLocalVideoEnabled) {
+    if (defaultMediaURL && !sidepaneOpenedRef.current && isLocalVideoEnabled) {
       hmsActions.setAppData(APP_DATA.background, defaultMediaURL);
       sidepaneOpenedRef.current = true;
       toggleVB();
     }
-  }, [hmsActions, toggleVB, isLocalVideoEnabled, isMobile, defaultMediaURL]);
+  }, [hmsActions, toggleVB, isLocalVideoEnabled, defaultMediaURL]);
 
   return <ResetStreamingStart />;
 });

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

@@ -4,6 +4,7 @@ import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100msli
 import { match } from 'ts-pattern';
 import {
   selectIsConnectedToRoom,
+  selectIsLocalVideoEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
@@ -23,6 +24,7 @@ import {
   QuizIcon,
   RecordIcon,
   SettingsIcon,
+  VirtualBackgroundIcon,
 } from '@100mslive/react-icons';
 import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
@@ -98,6 +100,8 @@ export const MwebOptions = ({
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
   const isMobileHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
+  const toggleVB = useSidepaneToggle(SIDE_PANE_OPTIONS.VB);
+  const isLocalVideoEnabled = useHMSStore(selectIsLocalVideoEnabled);
 
   useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
@@ -184,7 +188,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             ) : null}
 
-            {/* {isLocalVideoEnabled && !!elements?.virtual_background ? (
+            {isLocalVideoEnabled && !!elements?.virtual_background ? (
               <ActionTile.Root
                 onClick={() => {
                   toggleVB();
@@ -194,7 +198,7 @@ export const MwebOptions = ({
                 <VirtualBackgroundIcon />
                 <ActionTile.Title>Virtual Background</ActionTile.Title>
               </ActionTile.Root>
-            ) : null} */}
+            ) : null}
 
             {elements?.emoji_reactions && !(isLandscapeHLSStream || isMobileHLSStream) && (
               <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 && !isMobile ? <VBToggle /> : null}
+        {vbEnabled ? <VBToggle /> : null}
       </Flex>
       {!hideSettings ? <PreviewSettings /> : null}
     </Flex>

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

@@ -1,6 +1,5 @@
 import React, { useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
-import { Whiteboard } from '@100mslive/hms-whiteboard';
 import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
@@ -12,12 +11,10 @@ import { ProminenceLayout } from './ProminenceLayout';
 // @ts-ignore: No implicit Any
 import { useSetUiSettings } from '../AppData/useUISettings';
 import { UI_SETTINGS } from '../../common/constants';
-// eslint-disable-next-line import/no-unresolved
-import '@100mslive/hms-whiteboard/index.css';
 
 const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
-  const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
+  const { iframeRef } = useWhiteboard(isMobile);
 
   return (
     <Box
@@ -31,9 +28,18 @@ const WhiteboardEmbed = () => {
         },
       }}
     >
-      <Box css={{ size: '100%' }}>
-        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
-      </Box>
+      <iframe
+        title="Whiteboard View"
+        ref={iframeRef}
+        style={{
+          width: '100%',
+          height: '100%',
+          border: 0,
+          borderRadius: '0.75rem',
+        }}
+        allow="autoplay; clipboard-write;"
+        referrerPolicy="no-referrer"
+      />
     </Box>
   );
 };

package/src/Prebuilt/layouts/SidePane.tsx

@@ -80,6 +80,12 @@ const Wrapper = styled('div', {
     hideControls: {
       true: {},
     },
+    virtualBackground: {
+      true: {
+        maxHeight: '100%',
+        background: '$surface_dim',
+      },
+    },
   },
   compoundVariants: [
     {
@@ -157,6 +163,7 @@ const SidePane = ({
     hideControls,
     overlayChat: !!elements?.chat?.is_overlay,
     roomDescription: isMobile && sidepane === SIDE_PANE_OPTIONS.ROOM_DETAILS,
+    virtualBackground: sidepane === SIDE_PANE_OPTIONS.VB,
   };
 
   const SidepaneComponent = match(sidepane)