@100mslive/roomkit-react 0.3.18 → 0.3.19-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.18",
+  "version": "0.3.19-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -75,12 +75,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.18",
+    "@100mslive/hls-player": "0.3.19-alpha.1",
     "@100mslive/hms-noise-cancellation": "0.0.1",
-    "@100mslive/hms-virtual-background": "1.13.18",
-    "@100mslive/hms-whiteboard": "0.0.8",
-    "@100mslive/react-icons": "0.10.18",
-    "@100mslive/react-sdk": "0.10.18",
+    "@100mslive/hms-virtual-background": "1.13.19-alpha.1",
+    "@100mslive/hms-whiteboard": "0.0.9-alpha.1",
+    "@100mslive/react-icons": "0.10.19-alpha.1",
+    "@100mslive/react-sdk": "0.10.19-alpha.1",
     "@100mslive/types-prebuilt": "0.12.11",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -117,5 +117,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "66b20cd5cadc16107232710e32830df7a0685771"
+  "gitHead": "4e76816ac6791d45d6099d5ecf81b9b730bbb9db"
 }

package/src/Prebuilt/App.tsx

@@ -303,7 +303,11 @@ function AppRoutes({
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
         <KeyboardHandler />
-        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
+        <AuthToken
+          authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint}
+          defaultAuthToken={defaultAuthToken}
+          activeState={activeState}
+        />
         {roomLayout && activeState && <AppStates activeState={activeState} />}
       </>
     </AppStateContext.Provider>

package/src/Prebuilt/AppStateContext.tsx

@@ -1,7 +1,7 @@
 import React, { useContext, useEffect } from 'react';
 import { usePreviousDistinct } from 'react-use';
 import { match, P } from 'ts-pattern';
-import { HMSRoomState, selectRoomState, useHMSStore } from '@100mslive/react-sdk';
+import { HMSRoomState, selectRoomState, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { VBHandler } from './components/VirtualBackground/VBHandler';
 import { useRoomLayout, useSetOriginalLayout } from './provider/roomLayoutProvider';
 import { useRedirectToLeave } from './components/hooks/useRedirectToLeave';
@@ -9,6 +9,7 @@ import {
   useRoomLayoutLeaveScreen,
   useRoomLayoutPreviewScreen,
 } from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import { APP_DATA } from './common/constants';
 
 export enum PrebuiltStates {
   MEETING = 'meeting',
@@ -42,12 +43,14 @@ export const useAppStateManager = () => {
   const [activeState, setActiveState] = React.useState<PrebuiltStates | undefined>();
   const roomState = useHMSStore(selectRoomState);
   const prevRoomState = usePreviousDistinct(roomState);
+  const hmsActions = useHMSActions();
   const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
   const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
   const { redirectToLeave } = useRedirectToLeave();
 
   const rejoin = () => {
     setOriginalLayout?.();
+    hmsActions.setAppData(APP_DATA.authToken, '');
     setActiveState(isPreviewScreenEnabled ? PrebuiltStates.PREVIEW : PrebuiltStates.MEETING);
   };
 
@@ -81,7 +84,7 @@ export const useAppStateManager = () => {
       .otherwise(() => {
         // do nothing
       });
-  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave]);
+  }, [roomLayout, roomState, isLeaveScreenEnabled, isPreviewScreenEnabled, prevRoomState, redirectToLeave, hmsActions]);
 
   return { activeState, rejoin };
 };

package/src/Prebuilt/components/{AuthToken.jsx → AuthToken.tsx}

@@ -1,13 +1,17 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useSessionStorage } from 'react-use';
 import { match } from 'ts-pattern';
 import { v4 as uuid } from 'uuid';
-import { useHMSActions } from '@100mslive/react-sdk';
+import { HMSException, useHMSActions } from '@100mslive/react-sdk';
 import { Dialog } from '../../Modal';
 import { Text } from '../../Text';
 import { useHMSPrebuiltContext } from '../AppContext';
+import { PrebuiltStates } from '../AppStateContext';
+// @ts-ignore: No implicit Any
 import errorImage from '../images/transaction_error.svg';
+// @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from './AppData/useUISettings';
+// @ts-ignore: No implicit Any
 import { UserPreferencesKeys } from './hooks/useUserPreferences';
 import { APP_DATA } from '../common/constants';
 
@@ -20,13 +24,18 @@ import { APP_DATA } from '../common/constants';
  * auth_token=123 => uses the passed in token to join instead of fetching from token endpoint
  * ui_mode=activespeaker => lands in active speaker mode after joining the room
  */
-const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken }) => {
+const AuthToken = React.memo<{
+  authTokenByRoomCodeEndpoint: string;
+  defaultAuthToken?: string;
+  activeState?: PrebuiltStates;
+}>(({ authTokenByRoomCodeEndpoint, defaultAuthToken, activeState }) => {
   const hmsActions = useHMSActions();
   const { roomCode, userId } = useHMSPrebuiltContext();
   const [error, setError] = useState({ title: '', body: '' });
-  let authToken = defaultAuthToken;
-  const [, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
-  const [savedUserId, setSavedUserId] = useSessionStorage(UserPreferencesKeys.USER_ID);
+  const authToken = defaultAuthToken;
+  const [tokenInAppData, setAuthTokenInAppData] = useSetAppDataByKey(APP_DATA.authToken);
+  const [savedUserId, setSavedUserId] = useSessionStorage<string>(UserPreferencesKeys.USER_ID);
+  const progressRef = useRef<boolean | null>(null);
 
   useEffect(() => {
     if (authToken) {
@@ -34,19 +43,29 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
       return;
     }
 
-    if (!roomCode) {
+    if (tokenInAppData || progressRef.current || activeState === PrebuiltStates.LEAVE) {
       return;
     }
 
-    if (!savedUserId && !userId) {
-      setSavedUserId(uuid());
+    if (!roomCode) {
+      console.error('room code not provided');
       return;
     }
 
+    let userIdForAuthToken = userId || savedUserId;
+    if (!userIdForAuthToken) {
+      userIdForAuthToken = uuid();
+      setSavedUserId(userIdForAuthToken);
+    }
+
+    progressRef.current = true;
     hmsActions
-      .getAuthTokenByRoomCode({ roomCode, userId: userId || savedUserId }, { endpoint: authTokenByRoomCodeEndpoint })
+      .getAuthTokenByRoomCode({ roomCode, userId: userIdForAuthToken }, { endpoint: authTokenByRoomCodeEndpoint })
       .then(token => setAuthTokenInAppData(token))
-      .catch(error => setError(convertError(error)));
+      .catch(error => setError(convertError(error)))
+      .finally(() => {
+        progressRef.current = false;
+      });
   }, [
     hmsActions,
     authToken,
@@ -55,7 +74,9 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
     roomCode,
     userId,
     savedUserId,
+    tokenInAppData,
     setSavedUserId,
+    activeState,
   ]);
 
   if (error.title) {
@@ -83,7 +104,7 @@ const AuthToken = React.memo(({ authTokenByRoomCodeEndpoint, defaultAuthToken })
   return null;
 });
 
-const convertError = error => {
+const convertError = (error: HMSException) => {
   console.error('[error]', { error });
   console.warn(
     'If you think this is a mistake on our side, please reach out to us over Discord:',
@@ -104,6 +125,7 @@ const convertError = error => {
       body: `Endpoint is not reachable. ${error.description}.`,
     }))
     .otherwise(() =>
+      // @ts-ignore
       match(error.response?.status)
         .with(404, () => ({
           title: 'Room does not exist',

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

@@ -17,13 +17,35 @@ import { Box, Button, config as cssConfig, Flex, HorizontalDivider, Loading, Pop
 import { Sheet } from '../../../Sheet';
 // @ts-ignore
 import { ToastManager } from '../Toast/ToastManager';
-// @ts-ignore
-import { AdditionalRoomState, getRecordingText } from './AdditionalRoomState';
 import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 import { useRecordingHandler } from '../../common/hooks';
 // @ts-ignore
 import { formatTime } from '../../common/utils';
 
+export const getRecordingText = (
+  {
+    isBrowserRecordingOn,
+    isServerRecordingOn,
+    isHLSRecordingOn,
+  }: { isBrowserRecordingOn: boolean; isServerRecordingOn: boolean; isHLSRecordingOn: boolean },
+  delimiter = ', ',
+) => {
+  if (!isBrowserRecordingOn && !isServerRecordingOn && !isHLSRecordingOn) {
+    return '';
+  }
+  const title: string[] = [];
+  if (isBrowserRecordingOn) {
+    title.push('Browser');
+  }
+  if (isServerRecordingOn) {
+    title.push('Server');
+  }
+  if (isHLSRecordingOn) {
+    title.push('HLS');
+  }
+  return title.join(delimiter);
+};
+
 export const LiveStatus = () => {
   const { isHLSRunning, isRTMPRunning } = useRecordingStreaming();
   const hlsState = useHMSStore(selectHLSState);
@@ -219,7 +241,6 @@ export const StreamActions = () => {
 
   return (
     <Flex align="center" css={{ gap: '$4' }}>
-      <AdditionalRoomState />
       {!isMobile && (
         <Flex align="center" css={{ gap: '$4' }}>
           <RecordingPauseStatus />

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

@@ -89,7 +89,8 @@ export const DesktopOptions = ({
   const { isSupported, pipWindow, requestPipWindow } = usePIPChat();
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
-  const showPipChatOption = !!elements?.chat && isSupported;
+  // Hide if pip chat is already open
+  const showPipChatOption = !!elements?.chat && isSupported && !pipWindow;
 
   useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
 

package/src/Prebuilt/components/PIP/PIPChat.tsx

@@ -102,9 +102,21 @@ export const PIPChat = () => {
         )}
         {filteredMessages.length === 0 ? (
           <div
-            style={{ display: 'flex', height: '100%', width: '100%', alignItems: 'center', justifyContent: 'center' }}
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              height: '100%',
+              width: '100%',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
           >
-            <Text>No messages here yet</Text>
+            <Text variant="h5" css={{ mt: '$8', c: '$on_surface_high' }}>
+              {canSendChatMessages ? 'Start a conversation' : 'No messages yet'}
+            </Text>
+            <Text variant="sm" style={{ maxWidth: '80%', textAlign: 'center', marginTop: '4px' }}>
+              There are no messages here yet. Start a conversation by sending a message.
+            </Text>
           </div>
         ) : (
           filteredMessages.map(message => (

package/src/Prebuilt/components/PIP/PIPChatOption.tsx

@@ -9,7 +9,7 @@ export const PIPChatOption = ({ openChat, showPIPChat }: { openChat: () => void;
   }
   return (
     <Dropdown.Item onClick={openChat} data-testid="pip_chat_btn">
-      <ExternalLinkIcon height={18} width={18} style={{ padding: '0 $2' }} />
+      <ExternalLinkIcon />
       <Text variant="sm" css={{ ml: '$4', color: '$on_surface_high' }}>
         Pop out Chat
       </Text>

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

@@ -1,15 +1,19 @@
-import React from 'react';
+import React, { useEffect } from 'react';
+import { HMSVirtualBackgroundTypes } from '@100mslive/hms-virtual-background';
 import {
   selectAppData,
   selectIsEffectsEnabled,
   selectIsLocalVideoEnabled,
   selectIsVBEnabled,
+  useAVToggle,
+  useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
 import { VirtualBackgroundIcon } from '@100mslive/react-icons';
 import { Loading } from '../../../Loading';
 import { Tooltip } from '../../../Tooltip';
 import IconButton from '../../IconButton';
+import { VBHandler } from './VBHandler';
 // @ts-ignore
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { APP_DATA, isSafari, SIDE_PANE_OPTIONS } from '../../common/constants';
@@ -21,6 +25,15 @@ export const VBToggle = () => {
   const isVBEnabled = useHMSStore(selectIsVBEnabled);
   const isEffectsEnabled = useHMSStore(selectIsEffectsEnabled);
   const loadingEffects = useHMSStore(selectAppData(APP_DATA.loadingEffects));
+  const hmsActions = useHMSActions();
+  const { toggleVideo } = useAVToggle();
+
+  useEffect(() => {
+    if (!toggleVideo) {
+      VBHandler?.reset();
+      hmsActions.setAppData(APP_DATA.background, HMSVirtualBackgroundTypes.NONE);
+    }
+  }, [hmsActions, toggleVideo]);
 
   if (!isVideoOn || (!isEffectsEnabled && isSafari) || !isVBEnabled) {
     return null;