@100mslive/roomkit-react 0.1.9 → 0.1.11-alpha.0

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.9",
+  "version": "0.1.11-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.18",
-    "@100mslive/hms-virtual-background": "1.11.18",
-    "@100mslive/react-icons": "0.8.18",
-    "@100mslive/react-sdk": "0.8.18",
+    "@100mslive/hls-player": "0.1.20-alpha.0",
+    "@100mslive/hms-virtual-background": "1.11.20-alpha.0",
+    "@100mslive/react-icons": "0.8.20-alpha.0",
+    "@100mslive/react-sdk": "0.8.20-alpha.0",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -114,5 +114,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "b78d4abbfb1bb119dcdd29613484f22fbae5b149"
+  "gitHead": "a9b4d6c1bca655825e8fd4a8b07753912e213626"
 }

package/src/Modal/Dialog.tsx

@@ -1,28 +1,20 @@
 import React, { ReactNode, useRef } from 'react';
 import { Root } from '@radix-ui/react-dialog';
 import { styled } from '@stitches/react';
-import { CSS } from '../Theme';
 import {
+  CustomDialogContent,
+  CustomDialogOverlay,
   DialogClose,
   DialogDefaultCloseIcon,
   DialogDescription,
   DialogTitle,
-  StyledDialogContent,
-  StyledDialogOverlay,
   StyledDialogPortal,
   StyledDialogTrigger,
 } from './DialogContent';
 import { useDialogContainerSelector } from '../hooks/useDialogContainerSelector';
 
 const StyledDialog = styled(Root, {});
-const CustomDialogContent = ({ children, props = {}, css = {} }: { children: ReactNode; props?: any; css?: CSS }) => (
-  <StyledDialogContent css={{ ...css, position: 'absolute' }} {...props}>
-    {children}
-  </StyledDialogContent>
-);
-const CustomDialogOverlay = ({ css = {} }: { css?: CSS }) => (
-  <StyledDialogOverlay css={{ ...css, position: 'absolute' }} />
-);
+
 const CustomDialogPortal = ({ children, container }: { children: ReactNode; container?: HTMLElement | null }) => {
   const dialogContainerSelector = useDialogContainerSelector();
   const containerRef = useRef<HTMLElement | null>(null);

package/src/Modal/DialogContent.tsx

@@ -17,19 +17,19 @@ export const StyledDialogTrigger = styled(DialogPrimitive.Trigger, {
   appearance: 'none !important', // Needed for safari it shows white overlay
 });
 
-export const StyledDialogOverlay = styled(DialogPrimitive.Overlay, {
+export const CustomDialogOverlay = styled(DialogPrimitive.Overlay, {
   backgroundColor: 'rgba(0, 0, 0, 0.5);',
-  position: 'fixed',
+  position: 'absolute',
   inset: 0,
 });
 
 export const StyledDialogPortal = styled(DialogPrimitive.Portal, {});
 
-export const StyledDialogContent = styled(DialogPrimitive.Content, {
+export const CustomDialogContent = styled(DialogPrimitive.Content, {
   color: '$on_surface_medium',
   backgroundColor: '$surface_default',
   borderRadius: '8px',
-  position: 'fixed',
+  position: 'absolute',
   top: '50%',
   left: '50%',
   border: '$space$px solid $border_bright',

package/src/Prebuilt/common/constants.js

@@ -46,6 +46,8 @@ export const APP_DATA = {
   activeScreensharePeerId: 'activeScreensharePeerId',
   disableNotifications: 'disableNotifications',
   pollState: 'pollState',
+  background: 'background',
+  backgroundType: 'backgroundType',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
@@ -61,6 +63,7 @@ export const SIDE_PANE_OPTIONS = {
   CHAT: 'Chat',
   STREAMING: 'STREAMING',
   POLLS: 'POLLS',
+  VB: 'VB',
 };
 
 export const POLL_STATE = {

package/src/Prebuilt/components/AppData/AppData.jsx

@@ -4,7 +4,6 @@ import {
   selectAvailableRoleNames,
   selectFullAppData,
   selectHLSState,
-  selectIsConnectedToRoom,
   selectLocalPeerRoleName,
   selectRolesMap,
   selectRoomState,
@@ -15,7 +14,7 @@ import {
 } from '@100mslive/react-sdk';
 import { normalizeAppPolicyConfig } from '../init/initUtils';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
-import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
+import { useIsSidepaneTypeOpen, useSidepaneToggle } from './useSidepane';
 import { useSetAppDataByKey } from './useUISettings';
 import {
   APP_DATA,
@@ -26,6 +25,7 @@ import {
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
+import { VB_EFFECT } from '../VirtualBackground/constants';
 
 export const getAppDetails = appDetails => {
   try {
@@ -67,6 +67,8 @@ const initialAppData = {
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
   [APP_DATA.disableNotifications]: false,
+  [APP_DATA.background]: VB_EFFECT.NONE,
+  [APP_DATA.backgroundType]: VB_EFFECT.NONE,
   [APP_DATA.pollState]: {
     [POLL_STATE.pollInView]: '',
     [POLL_STATE.view]: '',
@@ -75,21 +77,12 @@ const initialAppData = {
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const hmsActions = useHMSActions();
-  const isConnected = useHMSStore(selectIsConnectedToRoom);
-  const sidePane = useSidepaneState();
-  const resetSidePane = useSidepaneReset();
   const [preferences = {}] = useUserPreferences(UserPreferencesKeys.UI_SETTINGS);
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const appData = useHMSStore(selectFullAppData);
 
-  useEffect(() => {
-    if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
-      resetSidePane();
-    }
-  }, [isConnected, sidePane, resetSidePane]);
-
   useEffect(() => {
     hmsActions.initAppData({
       ...initialAppData,

package/src/Prebuilt/components/AppData/useSidepane.js

@@ -60,7 +60,7 @@ export const usePollViewToggle = () => {
 };
 
 /**
- * reset's the sidepane value
+ * resets the sidepane value
  */
 export const useSidepaneReset = () => {
   const hmsActions = useHMSActions();

package/src/Prebuilt/components/Connection/ConnectionIndicator.tsx

@@ -39,7 +39,7 @@ export const ConnectionIndicator = ({
   }
   if (downlinkQuality === 0) {
     return (
-      <Tooltip title={getTooltipText(downlinkQuality)}>
+      <Tooltip side="left" title={getTooltipText(downlinkQuality)}>
         <Wrapper isTile={isTile} css={{ color: '#ED4C5A' }} data-testid="tile_network">
           <PoorConnectivityIcon />
         </Wrapper>
@@ -48,7 +48,7 @@ export const ConnectionIndicator = ({
   }
   const size = isTile ? 12 : 16;
   return (
-    <Tooltip title={getTooltipText(downlinkQuality)}>
+    <Tooltip side="left" title={getTooltipText(downlinkQuality)}>
       <Wrapper isTile={isTile} data-testid="tile_network" css={{ backgroundColor: hideBg ? '' : '$surface_bright' }}>
         <svg
           width={size}

package/src/Prebuilt/components/Footer/Footer.tsx

@@ -1,4 +1,4 @@
-import React, { Suspense, useEffect } from 'react';
+import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import {
   ConferencingScreen,
@@ -21,6 +21,8 @@ import { RaiseHand } from '../RaiseHand';
 // @ts-ignore: No implicit Any
 import { ScreenshareToggle } from '../ScreenShareToggle';
 // @ts-ignore: No implicit Any
+import { VBToggle } from '../VirtualBackground/VBToggle';
+// @ts-ignore: No implicit Any
 import { ChatToggle } from './ChatToggle';
 // @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
@@ -31,8 +33,6 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 import { useShowPolls } from '../AppData/useUISettings';
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
-// @ts-ignore: No implicit Any
-const VirtualBackground = React.lazy(() => import('../../plugins/VirtualBackground/VirtualBackground'));
 
 export const Footer = ({
   screenType,
@@ -82,11 +82,7 @@ export const Footer = ({
       >
         {isMobile ? <LeaveRoom screenType={screenType} /> : null}
         <AudioVideoToggle />
-        {isMobile ? null : (
-          <Suspense fallback={<></>}>
-            <VirtualBackground />
-          </Suspense>
-        )}
+        {isMobile ? null : <VBToggle />}
       </AppFooter.Left>
       <AppFooter.Center
         css={{

package/src/Prebuilt/components/Footer/ParticipantList.jsx

@@ -1,4 +1,4 @@
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
   selectHandRaisedPeers,
@@ -96,11 +96,6 @@ export const ParticipantCount = () => {
   const peerCount = useHMSStore(selectPeerCount);
   const toggleSidepane = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const isParticipantsOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.PARTICIPANTS);
-  useEffect(() => {
-    if (isParticipantsOpen && peerCount === 0) {
-      toggleSidepane();
-    }
-  }, [isParticipantsOpen, peerCount, toggleSidepane]);
 
   if (peerCount === 0) {
     return null;

package/src/Prebuilt/components/Header/Header.tsx

@@ -7,7 +7,7 @@ import { Logo, SpeakerTag } from './HeaderComponents';
 // @ts-ignore: No implicit any
 import { LiveStatus, RecordingStatus, StreamActions } from './StreamActions';
 // @ts-ignore: No implicit any
-import { AudioOutputActions, CamaraFlipActions } from './common';
+import { AudioActions, CamaraFlipActions } from './common';
 
 export const Header = () => {
   const roomState = useHMSStore(selectRoomState);
@@ -40,7 +40,7 @@ export const Header = () => {
         {isMobile ? (
           <>
             <CamaraFlipActions />
-            <AudioOutputActions />
+            <AudioActions />
           </>
         ) : null}
       </Flex>

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

@@ -8,7 +8,14 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import { CameraFlipIcon, CheckIcon, CrossIcon, SpeakerIcon } from '@100mslive/react-icons';
+import {
+  BluetoothIcon,
+  CameraFlipIcon,
+  CheckIcon,
+  CrossIcon,
+  HeadphonesIcon,
+  SpeakerIcon,
+} from '@100mslive/react-icons';
 import { HorizontalDivider } from '../../../Divider';
 import { Label } from '../../../Label';
 import { Box, Flex } from '../../../Layout';
@@ -49,48 +56,64 @@ export const CamaraFlipActions = () => {
   );
 };
 
-export const AudioOutputActions = () => {
+// It will handle and show audio input devices in Mweb while audio output devices in desktop
+export const AudioActions = () => {
   const { allDevices, selectedDeviceIDs, updateDevice } = useDevices();
-  const { audioOutput } = allDevices;
+
   // don't show speaker selector where the API is not supported, and use
   // a generic word("Audio") for Mic. In some cases(Chrome Android for e.g.) this changes both mic and speaker keeping them in sync.
   const shouldShowAudioOutput = 'setSinkId' in HTMLMediaElement.prototype;
+  const { audioInput, audioOutput } = allDevices;
+  let availableAudioDevices = audioInput;
+  let selectedAudio = selectedDeviceIDs.audioInput;
+  if (shouldShowAudioOutput) {
+    availableAudioDevices = audioOutput;
+    selectedAudio = selectedDeviceIDs.audioOutput;
+  }
+  const hmsActions = useHMSActions();
+  const audioFiltered = availableAudioDevices?.find(item => !!item.label);
+  const currentSelection = availableAudioDevices?.find(item => item.deviceId === selectedAudio);
 
-  /**
-   * Chromium browsers return an audioOutput with empty label when no permissions are given
-   */
-  const audioOutputFiltered = audioOutput?.filter(item => !!item.label) ?? [];
-  if (!shouldShowAudioOutput || !audioOutputFiltered?.length > 0) {
+  if (!audioFiltered) {
     return null;
   }
+  let AudioIcon = <SpeakerIcon />;
+  if (currentSelection && currentSelection.label.toLowerCase().includes('bluetooth')) {
+    AudioIcon = <BluetoothIcon />;
+  } else if (currentSelection && currentSelection.label.toLowerCase().includes('wired')) {
+    AudioIcon = <HeadphonesIcon />;
+  }
   return (
-    <AudioOutputSelectionSheet
-      outputDevices={audioOutput}
-      outputSelected={selectedDeviceIDs.outputDevices}
+    <AudioSelectionSheet
+      audioDevices={availableAudioDevices}
+      audioSelected={selectedAudio}
       onChange={async deviceId => {
         try {
           await updateDevice({
             deviceId,
-            deviceType: DeviceType.audioOutput,
+            deviceType: shouldShowAudioOutput ? DeviceType.audioOutput : DeviceType.audioInput,
           });
         } catch (e) {
           ToastManager.addToast({
-            title: `Error while changing audio output ${e.message || ''}`,
+            title: `Error while changing audio device ${e.message || ''}`,
             variant: 'error',
           });
         }
       }}
     >
-      <Box>
-        <IconButton>
-          <SpeakerIcon />
-        </IconButton>
+      <Box
+        onClick={async () => {
+          // refresh device as `devicechange` listener won't work in mobile device
+          await hmsActions.refreshDevices();
+        }}
+      >
+        <IconButton>{AudioIcon} </IconButton>
       </Box>
-    </AudioOutputSelectionSheet>
+    </AudioSelectionSheet>
   );
 };
 
-const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, children }) => {
+const AudioSelectionSheet = ({ audioDevices, audioSelected, onChange, children }) => {
   return (
     <Sheet.Root>
       <Sheet.Trigger asChild>{children}</Sheet.Trigger>
@@ -98,7 +121,7 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch
         <Sheet.Title css={{ py: '$10', px: '$8', alignItems: 'center' }}>
           <Flex direction="row" justify="between" css={{ w: '100%' }}>
             <Text variant="h6" css={{ display: 'flex' }}>
-              Audio Output
+              Audio
             </Text>
             <Sheet.Close>
               <IconButton as="div" data-testid="dialog_cross_icon">
@@ -113,16 +136,16 @@ const AudioOutputSelectionSheet = ({ outputDevices, outputSelected, onChange, ch
           css={{
             px: '$8',
             maxHeight: '80vh',
-            overflowY: 'scroll',
+            overflowY: 'auto',
           }}
         >
-          {outputDevices.map(audioDevice => {
+          {audioDevices.map(audioDevice => {
             return (
               <SelectWithLabel
                 key={audioDevice.deviceId}
                 label={audioDevice.label}
                 id={audioDevice.deviceId}
-                checked={audioDevice.deviceId === outputSelected}
+                checked={audioDevice.deviceId === audioSelected}
                 onChange={() => onChange(audioDevice.deviceId)}
               />
             );

package/src/Prebuilt/components/Leave/DesktopLeaveRoom.tsx

@@ -20,9 +20,9 @@ export const DesktopLeaveRoom = ({
   screenType,
   endRoom,
 }: {
-  leaveRoom: (args: { endstream: boolean }) => void;
+  leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   screenType: keyof ConferencingScreen;
-  endRoom: () => void;
+  endRoom: () => Promise<void>;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -78,7 +78,7 @@ export const DesktopLeaveRoom = ({
                   color: '$on_surface_medium',
                   '&:hover': { bg: '$surface_default', color: '$on_surface_high' },
                 }}
-                onClick={() => leaveRoom({ endstream: false })}
+                onClick={async () => await leaveRoom()}
                 data-testid="just_leave_btn"
               >
                 <LeaveCard
@@ -89,7 +89,7 @@ export const DesktopLeaveRoom = ({
                   bg=""
                   titleColor="$on_surface_high"
                   icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-                  onClick={() => leaveRoom({ endstream: false })}
+                  onClick={async () => await leaveRoom()}
                   css={{ p: 0 }}
                 />
               </Dropdown.Item>
@@ -142,7 +142,7 @@ export const DesktopLeaveRoom = ({
           <Dialog.Content css={{ w: 'min(420px, 90%)', p: '$8', bg: '$surface_dim' }}>
             <EndSessionContent
               setShowEndStreamAlert={setShowEndStreamAlert}
-              leaveRoom={isStreamingOn ? leaveRoom : endRoom}
+              leaveRoom={isStreamingOn ? () => leaveRoom({ endStream: true }) : endRoom}
               isStreamingOn={isStreamingOn}
               isModal
             />

package/src/Prebuilt/components/Leave/EndSessionContent.tsx

@@ -11,7 +11,7 @@ export const EndSessionContent = ({
   isStreamingOn = false,
 }: {
   setShowEndStreamAlert: (value: boolean) => void;
-  leaveRoom: (args: { endstream: boolean }) => void;
+  leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   isModal?: boolean;
   isStreamingOn: boolean;
 }) => {
@@ -50,7 +50,7 @@ export const EndSessionContent = ({
           variant="danger"
           css={{ w: '100%' }}
           onClick={async () => {
-            await leaveRoom({ endstream: true });
+            await leaveRoom({ endStream: true });
             setShowEndStreamAlert(false);
           }}
           id="stopStream"

package/src/Prebuilt/components/Leave/LeaveRoom.tsx

@@ -46,15 +46,16 @@ export const LeaveRoom = ({ screenType }: { screenType: keyof ConferencingScreen
       ToastManager.addToast({ title: 'Error in stopping the stream', type: 'error' });
     }
   };
-  const endRoom = () => {
-    hmsActions.endRoom(false, 'End Room');
+
+  const endRoom = async () => {
+    await hmsActions.endRoom(false, 'End Room');
   };
 
-  const leaveRoom = async ({ endstream = false }) => {
-    if (endstream || (hlsState.running && peersWithStreamingRights.length === 1)) {
+  const leaveRoom = async (options: { endStream?: boolean } = { endStream: false }) => {
+    if (options.endStream || (hlsState.running && peersWithStreamingRights.length === 1)) {
       await stopStream();
     }
-    hmsActions.leave();
+    await hmsActions.leave();
   };
 
   if (!permissions || !isConnected) {

package/src/Prebuilt/components/Leave/LeaveSessionContent.tsx

@@ -10,7 +10,7 @@ export const LeaveSessionContent = ({
   isModal = false,
 }: {
   setShowLeaveRoomAlert: (value: boolean) => void;
-  leaveRoom: (args: { endstream: boolean }) => void;
+  leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   isModal?: boolean;
 }) => {
   return (
@@ -47,7 +47,7 @@ export const LeaveSessionContent = ({
         <Button
           variant="danger"
           css={{ w: '100%' }}
-          onClick={() => leaveRoom({ endstream: false })}
+          onClick={async () => await leaveRoom()}
           id="leaveRoom"
           data-testid="leave_room"
         >

package/src/Prebuilt/components/Leave/MwebLeaveRoom.tsx

@@ -19,9 +19,9 @@ export const MwebLeaveRoom = ({
   screenType,
   endRoom,
 }: {
-  leaveRoom: (args: { endstream: boolean }) => void;
+  leaveRoom: (options?: { endStream?: boolean }) => Promise<void>;
   screenType: keyof ConferencingScreen;
-  endRoom: () => void;
+  endRoom: () => Promise<void>;
 }) => {
   const [open, setOpen] = useState(false);
   const [showLeaveRoomAlert, setShowLeaveRoomAlert] = useState(false);
@@ -67,7 +67,7 @@ export const MwebLeaveRoom = ({
               bg="$surface_default"
               titleColor="$on_surface_high"
               icon={<ExitIcon height={24} width={24} style={{ transform: 'rotate(180deg)' }} />}
-              onClick={() => leaveRoom({ endstream: false })}
+              onClick={async () => await leaveRoom()}
               css={{ pt: 0, mt: '$10', color: '$on_surface_low', '&:hover': { color: '$on_surface_high' } }}
             />
 

package/src/Prebuilt/components/Notifications/HLSFailureModal.tsx

@@ -23,10 +23,7 @@ export function HLSFailureModal() {
       setHLSStarted(true);
       await hmsActions.startHLSStreaming({});
     } catch (error) {
-      if ((error as Error).message.includes('invalid input')) {
-        await startHLS();
-        return;
-      }
+      console.error(error);
       setHLSStarted(false);
     }
   }, [hmsActions, isHLSStarted, setHLSStarted, isRTMPRunning]);

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

@@ -27,11 +27,17 @@ const PreviewForm = ({
     e.preventDefault();
   };
   const isMobile = useMedia(cssConfig.media.md);
-  const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
+  const { isHLSRunning, isRTMPRunning, isHLSRecordingOn, isBrowserRecordingOn } = useRecordingStreaming();
+
   const layout = useRoomLayout();
   const { join_form: joinForm = {} } = layout?.screens?.preview?.default?.elements || {};
+
   const showGoLive =
-    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE && !isHLSRunning && !isRTMPRunning;
+    joinForm?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE &&
+    !isHLSRunning &&
+    !isRTMPRunning &&
+    !isHLSRecordingOn &&
+    !isBrowserRecordingOn;
 
   return (
     <Form