@100mslive/roomkit-react 0.1.5 → 0.1.6-alpha.1

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.1",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -62,6 +62,7 @@
     "@types/lodash.merge": "^4.6.6",
     "@types/mdx": "2.0.2",
     "@types/react": "^18.1.0",
+    "@types/react-window": "^1.8.5",
     "babel-loader": "^8.2.5",
     "babel-plugin-react-require": "3.1.3",
     "react": "^18.1.0",
@@ -75,11 +76,11 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.14",
-    "@100mslive/hms-virtual-background": "1.11.14",
-    "@100mslive/react-icons": "0.8.14",
-    "@100mslive/react-sdk": "0.8.14",
-    "@100mslive/types-prebuilt": "0.10.0",
+    "@100mslive/hls-player": "0.1.15-alpha.1",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.1",
+    "@100mslive/react-icons": "0.8.15-alpha.1",
+    "@100mslive/react-sdk": "0.8.15-alpha.1",
+    "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -114,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d93341f90d2fde19d31afc0e1982da0767bb079b"
+  "gitHead": "d3f042d48bb30f16c6c63f2a75c406611c0f2831"
 }

package/src/Button/Button.tsx

@@ -151,8 +151,8 @@ const StyledButton = styled('button', {
         '$alert_error_bright',
         '$alert_error_dim',
         '$alert_error_dim',
-        '$on_surface_high',
-        '$on_surface_low',
+        '$alert_error_brighter',
+        '$on_primary_low',
       ),
       primary: getButtonVariants(
         '$primary_default',

package/src/Prebuilt/App.tsx

@@ -13,8 +13,6 @@ import {
 // @ts-ignore: No implicit Any
 import { AppData } from './components/AppData/AppData';
 // @ts-ignore: No implicit Any
-import { BeamSpeakerLabelsLogging } from './components/AudioLevel/BeamSpeakerLabelsLogging';
-// @ts-ignore: No implicit Any
 import AuthToken from './components/AuthToken';
 // @ts-ignore: No implicit Any
 import { ErrorBoundary } from './components/ErrorBoundary';
@@ -32,17 +30,21 @@ import PostLeave from './components/PostLeave';
 import PreviewContainer from './components/Preview/PreviewContainer';
 // @ts-ignore: No implicit Any
 import { ToastContainer } from './components/Toast/ToastContainer';
-import { RoomLayoutContext, RoomLayoutProvider } from './provider/roomLayoutProvider';
+import { RoomLayoutContext, RoomLayoutProvider, useRoomLayout } from './provider/roomLayoutProvider';
 import { Box } from '../Layout';
 import { globalStyles, HMSThemeProvider } from '../Theme';
-// @ts-ignore: No implicit Any
 import { HMSPrebuiltContext, useHMSPrebuiltContext } from './AppContext';
 // @ts-ignore: No implicit Any
 import { FlyingEmoji } from './plugins/FlyingEmoji';
 // @ts-ignore: No implicit Any
 import { RemoteStopScreenshare } from './plugins/RemoteStopScreenshare';
 // @ts-ignore: No implicit Any
-import { getRoutePrefix } from './common/utils';
+import { useIsNotificationDisabled } from './components/AppData/useUISettings';
+import { useAutoStartStreaming } from './components/hooks/useAutoStartStreaming';
+import {
+  useRoomLayoutLeaveScreen,
+  useRoomLayoutPreviewScreen,
+} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
 
@@ -62,6 +64,9 @@ export type HMSPrebuiltProps = {
   themes?: Theme[];
   options?: HMSPrebuiltOptions;
   screens?: Screens;
+  authToken?: string;
+  roomId?: string;
+  role?: string;
   onLeave?: () => void;
 };
 
@@ -72,20 +77,13 @@ export type HMSPrebuiltRefType = {
   hmsNotifications: IHMSNotifications;
 };
 
-// TODO: remove now that there are options to change to portrait
-const getAspectRatio = ({ width, height }: { width: number; height: number }) => {
-  const host = process.env.REACT_APP_HOST_NAME || '';
-  const portraitDomains = (process.env.REACT_APP_PORTRAIT_MODE_DOMAINS || '').split(',');
-  if (portraitDomains.includes(host) && width > height) {
-    return { width: height, height: width };
-  }
-  return { width, height };
-};
-
 export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps>(
   (
     {
       roomCode = '',
+      authToken = '',
+      roomId = '',
+      role = '',
       logo,
       typography,
       themes,
@@ -95,9 +93,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
     },
     ref,
   ) => {
-    const aspectRatio = '1-1';
     const metadata = '';
-    const { 0: width, 1: height } = aspectRatio.split('-').map(el => parseInt(el));
     const reactiveStore = useRef<HMSPrebuiltRefType>();
 
     const [hydrated, setHydrated] = React.useState(false);
@@ -108,6 +104,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       const hmsActions = hms.getActions();
       const hmsNotifications = hms.getNotifications();
       const hmsStats = hms.getStats();
+      hms.triggerOnSubscribe();
 
       reactiveStore.current = {
         hmsActions,
@@ -152,6 +149,15 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       screens,
     };
 
+    if (!roomCode && !(authToken && roomId && role)) {
+      console.error(`
+          HMSPrebuilt can be initialised by providing: 
+          either just "roomCode" or "authToken" and "roomId" and "role".
+          Please check if you are providing the above values for initialising prebuilt.
+        `);
+      throw Error('Incorrect initializing params for HMSPrebuilt component');
+    }
+
     if (!hydrated) {
       return null;
     }
@@ -163,8 +169,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         <HMSPrebuiltContext.Provider
           value={{
             roomCode,
-            showPreview: true,
-            showLeave: true,
+            roomId,
+            role,
             onLeave,
             userName,
             userId,
@@ -185,7 +191,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
           >
             <RoomLayoutProvider roomLayoutEndpoint={roomLayoutEndpoint} overrideLayout={overrideLayout}>
               <RoomLayoutContext.Consumer>
-                {layout => {
+                {data => {
+                  const layout = data?.layout;
                   const theme: Theme = layout?.themes?.[0] || ({} as Theme);
                   const { typography } = layout || {};
                   let fontFamily = ['sans-serif'];
@@ -199,7 +206,6 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                       // no updates to the themes are fired if the name is same.
                       // TODO: cache the theme and do deep check to trigger name change in the theme
                       themeType={`${theme.name}-${Date.now()}`}
-                      aspectRatio={getAspectRatio({ width, height })}
                       theme={{
                         //@ts-ignore: Prebuilt theme to match stiches theme
                         colors: theme.palette,
@@ -219,7 +225,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                           '-webkit-text-size-adjust': '100%',
                         }}
                       >
-                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />
+                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} defaultAuthToken={authToken} />
                       </Box>
                     </HMSThemeProvider>
                   );
@@ -237,31 +243,21 @@ HMSPrebuilt.displayName = 'HMSPrebuilt';
 
 const Redirector = ({ showPreview }: { showPreview: boolean }) => {
   const { roomId, role } = useParams();
-
-  if (!roomId && !role) {
-    return <Navigate to="/" />;
-  }
-  if (!roomId) {
-    return <Navigate to="/" />;
-  }
-  if (['streaming', 'preview', 'meeting', 'leave'].includes(roomId) && !role) {
-    return <Navigate to="/" />;
-  }
-
-  return <Navigate to={`${getRoutePrefix()}/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
+  return <Navigate to={`/${showPreview ? 'preview' : 'meeting'}/${roomId}/${role || ''}`} />;
 };
 
 const RouteList = () => {
-  const { showPreview, showLeave } = useHMSPrebuiltContext();
-
+  const { isPreviewScreenEnabled } = useRoomLayoutPreviewScreen();
+  const { isLeaveScreenEnabled } = useRoomLayoutLeaveScreen();
+  useAutoStartStreaming();
   return (
     <Routes>
-      {showPreview && (
+      {isPreviewScreenEnabled ? (
         <Route path="preview">
           <Route
             path=":roomId/:role"
             element={
-              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
+              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
@@ -269,18 +265,18 @@ const RouteList = () => {
           <Route
             path=":roomId"
             element={
-              <Suspense fallback={<FullPageProgress loadingText="Loading preview..." />}>
+              <Suspense fallback={<FullPageProgress text="Loading preview..." />}>
                 <PreviewContainer />
               </Suspense>
             }
           />
         </Route>
-      )}
+      ) : null}
       <Route path="meeting">
         <Route
           path=":roomId/:role"
           element={
-            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
+            <Suspense fallback={<FullPageProgress text="Joining..." />}>
               <Conference />
             </Suspense>
           }
@@ -288,21 +284,21 @@ const RouteList = () => {
         <Route
           path=":roomId"
           element={
-            <Suspense fallback={<FullPageProgress loadingText="Joining..." />}>
+            <Suspense fallback={<FullPageProgress text="Joining..." />}>
               <Conference />
             </Suspense>
           }
         />
       </Route>
-      {showLeave && (
+      {isLeaveScreenEnabled ? (
         <Route path="leave">
           <Route path=":roomId/:role" element={<PostLeave />} />
           <Route path=":roomId" element={<PostLeave />} />
         </Route>
-      )}
+      ) : null}
 
-      <Route path="/:roomId/:role" element={<Redirector showPreview={showPreview} />} />
-      <Route path="/:roomId/" element={<Redirector showPreview={showPreview} />} />
+      <Route path="/:roomId/:role" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
+      <Route path="/:roomId/" element={<Redirector showPreview={isPreviewScreenEnabled} />} />
     </Routes>
   );
 };
@@ -335,21 +331,30 @@ const Router = ({ children }: { children: ReactElement }) => {
   );
 };
 
-function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoint: string }) {
+function AppRoutes({
+  authTokenByRoomCodeEndpoint,
+  defaultAuthToken,
+}: {
+  authTokenByRoomCodeEndpoint: string;
+  defaultAuthToken?: string;
+}) {
+  const roomLayout = useRoomLayout();
+  const isNotificationsDisabled = useIsNotificationDisabled();
   return (
     <Router>
       <>
         <ToastContainer />
         <Notifications />
         <BackSwipe />
-        <FlyingEmoji />
+        {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
         <KeyboardHandler />
-        <BeamSpeakerLabelsLogging />
-        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} />
-        <Routes>
-          <Route path="/*" element={<RouteList />} />
-        </Routes>
+        <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
+        {roomLayout && (
+          <Routes>
+            <Route path="/*" element={<RouteList />} />
+          </Routes>
+        )}
       </>
     </Router>
   );

package/src/Prebuilt/{AppContext.jsx → AppContext.tsx}

@@ -1,8 +1,16 @@
 import React, { useContext } from 'react';
 
-export const HMSPrebuiltContext = React.createContext({
-  showPreview: true,
-  showLeave: true,
+type HMSPrebuiltContextType = {
+  roomCode: string;
+  roomId?: string;
+  role?: string;
+  userName?: string;
+  userId?: string;
+  endpoints?: Record<string, string>;
+  onLeave?: () => void;
+};
+
+export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   roomCode: '',
   userName: '',
   userId: '',

package/src/Prebuilt/IconButton.jsx

@@ -5,14 +5,25 @@ const IconButton = styled(BaseIconButton, {
   width: '$14',
   height: '$14',
   border: '1px solid $border_bright',
+  bg: '$background_dim',
   r: '$1',
   variants: {
     active: {
+      true: {
+        color: '$on_surface_high',
+        backgroundColor: '$transparent',
+      },
       false: {
         border: '1px solid transparent',
         color: '$on_primary_high',
       },
     },
+    disabled: {
+      true: {
+        backgroundColor: '$surface_brighter',
+        color: '$on_surface_low',
+      },
+    },
   },
 });
 

package/src/Prebuilt/Prebuilt.stories.tsx

@@ -9,6 +9,7 @@ export default {
     roomCode: { control: { type: 'text' }, defaultValue: '' },
     logo: { control: { type: 'object' }, defaultValue: null },
     typography: { control: { type: 'object' }, defaultValue: 'Roboto' },
+    options: { control: { type: 'object' }, defaultValue: {} },
   },
 } as Meta<typeof HMSPrebuilt>;
 

package/src/Prebuilt/common/{PeersSorter.js → PeersSorter.ts}

@@ -1,17 +1,22 @@
-import { selectDominantSpeaker } from '@100mslive/hms-video-store';
+import { HMSPeer, HMSPeerID, IStoreReadOnly, selectDominantSpeaker } from '@100mslive/react-sdk';
 
 class PeersSorter {
-  listeners = new Set();
-  storeUnsubscribe;
+  storeUnsubscribe: undefined | (() => void) = undefined;
+  store: IStoreReadOnly<any>;
+  peers: Map<string, HMSPeer>;
+  lruPeers: Set<HMSPeerID>;
+  tilesPerPage!: number;
+  speaker?: HMSPeer;
+  listeners: Set<(peers: HMSPeer[]) => void> = new Set();
 
-  constructor(store) {
+  constructor(store: IStoreReadOnly<any>) {
     this.store = store;
     this.peers = new Map();
     this.lruPeers = new Set();
     this.speaker = undefined;
   }
 
-  setPeersAndTilesPerPage = ({ peers, tilesPerPage }) => {
+  setPeersAndTilesPerPage = ({ peers, tilesPerPage }: { peers: HMSPeer[]; tilesPerPage: number }) => {
     this.tilesPerPage = tilesPerPage;
     const peerIds = new Set(peers.map(peer => peer.id));
     // remove existing peers which are no longer provided
@@ -33,7 +38,7 @@ class PeersSorter {
     this.moveSpeakerToFront(this.speaker);
   };
 
-  onUpdate = cb => {
+  onUpdate = (cb: (peers: HMSPeer[]) => void) => {
     this.listeners.add(cb);
   };
 
@@ -43,7 +48,7 @@ class PeersSorter {
     this.storeUnsubscribe?.();
   };
 
-  moveSpeakerToFront = speaker => {
+  moveSpeakerToFront = (speaker?: HMSPeer) => {
     if (!speaker) {
       this.updateListeners();
       return;
@@ -54,15 +59,15 @@ class PeersSorter {
     }
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
-    let lruPeerArray = Array.from(this.lruPeers);
-    while (lruPeerArray.length >= this.tilesPerPage) {
+    const lruPeerArray = Array.from(this.lruPeers);
+    while (lruPeerArray.length >= this.tilesPerPage && lruPeerArray.length) {
       lruPeerArray.pop();
     }
     this.lruPeers = new Set([speaker.id, ...lruPeerArray]);
     this.updateListeners();
   };
 
-  onDominantSpeakerChange = speaker => {
+  onDominantSpeakerChange = (speaker: HMSPeer | null) => {
     if (speaker && speaker.id !== this?.speaker?.id) {
       this.speaker = speaker;
       this.moveSpeakerToFront(speaker);
@@ -70,7 +75,7 @@ class PeersSorter {
   };
 
   updateListeners = () => {
-    const orderedPeers = [];
+    const orderedPeers: HMSPeer[] = [];
     this.lruPeers.forEach(key => {
       const peer = this.peers.get(key);
       if (peer) {

package/src/Prebuilt/common/constants.js

@@ -1,102 +1,11 @@
 import { parsedUserAgent } from '@100mslive/react-sdk';
 
-export const defaultAudioList = [
-  {
-    name: 'Audio1',
-    id: 'audio1',
-    metadata: {
-      description: 'Artist1',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio1.mp3',
-    type: 'audio',
-  },
-  {
-    name: 'Audio2',
-    id: 'audio2',
-    metadata: {
-      description: 'Artist2',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio2.mp3',
-    type: 'audio',
-  },
-  {
-    name: 'Audio3',
-    id: 'audio3',
-    metadata: {
-      description: 'Artist3',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio3.mp3',
-    type: 'audio',
-  },
-  {
-    name: 'Audio4',
-    id: 'audio4',
-    metadata: {
-      description: 'Artist4',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio4.mp3',
-    type: 'audio',
-  },
-  {
-    name: 'Audio5',
-    id: 'audio5',
-    metadata: {
-      description: 'Artist5',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio5.mp3',
-    type: 'audio',
-  },
-  {
-    name: 'Audio6',
-    id: 'audio6',
-    metadata: {
-      description: 'Artist6',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/audio6.mp3',
-    type: 'audio',
-  },
-];
-
-export const defaultVideoList = [
-  {
-    name: 'Video1',
-    id: 'video1',
-    metadata: {
-      description: 'Artist1',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video1.mp4',
-    type: 'video',
-  },
-  {
-    name: 'Video2',
-    id: 'video2',
-    metadata: {
-      description: 'Artist2',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video2.mp4',
-    type: 'video',
-  },
-  {
-    name: 'Video3',
-    id: 'video3',
-    metadata: {
-      description: 'Artist2',
-    },
-    url: 'https://bc-public-static-assets.s3.ap-south-1.amazonaws.com/webapp/playlist/video3.mp4',
-    type: 'video',
-  },
-];
-
-export const DEFAULT_HLS_ROLE_KEY = 'HLS_VIEWER_ROLE';
-export const DEFAULT_HLS_VIEWER_ROLE = 'hls-viewer';
 export const DEFAULT_WAITING_VIEWER_ROLE = 'waiting-room';
 export const QUERY_PARAM_SKIP_PREVIEW = 'skip_preview';
 export const QUERY_PARAM_SKIP_PREVIEW_HEADFUL = 'skip_preview_headful';
 export const QUERY_PARAM_NAME = 'name';
 export const QUERY_PARAM_VIEW_MODE = 'ui_mode';
-export const QUERY_PARAM_AUTH_TOKEN = 'auth_token';
 export const QUERY_PARAM_PREVIEW_AS_ROLE = 'preview_as_role';
-export const UI_MODE_ACTIVE_SPEAKER = 'activespeaker';
 export const UI_MODE_GRID = 'grid';
 export const MAX_TOASTS = 5;
 export const RTMP_RECORD_RESOLUTION_MIN = 480;
@@ -120,7 +29,6 @@ export const APP_DATA = {
   appConfig: 'appConfig',
   sidePane: 'sidePane',
   hlsStats: 'hlsStats',
-  hlsViewerRole: 'hlsViewerRole',
   waitingViewerRole: 'waitingViewerRole',
   subscribedNotifications: 'subscribedNotifications',
   logo: 'logo',
@@ -135,10 +43,11 @@ export const APP_DATA = {
   authToken: 'authToken',
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
+  activeScreensharePeerId: 'activeScreensharePeerId',
+  disableNotificiations: 'disableNotificiations',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
-  isHeadless: 'isHeadless',
   maxTileCount: 'maxTileCount',
   uiViewMode: 'uiViewMode',
   showStatsOnTiles: 'showStatsOnTiles',
@@ -150,8 +59,6 @@ export const SIDE_PANE_OPTIONS = {
   PARTICIPANTS: 'Participants',
   CHAT: 'Chat',
   STREAMING: 'STREAMING',
-  TILES: 'TILES',
-  SCREEN_TILES: 'SCREEN_TILES',
 };
 
 export const SUBSCRIBED_NOTIFICATIONS = {
@@ -180,27 +87,10 @@ export const isIPadOS = false;
 // navigator?.maxTouchPoints > 2 &&
 // navigator?.userAgent?.match(/Mac/);
 
-export const FEATURE_LIST = {
-  AUDIO_ONLY_SCREENSHARE: 'audioscreenshare',
-  AUDIO_PLAYLIST: 'audioplaylist',
-  VIDEO_PLAYLIST: 'videoplaylist',
-  EMOJI_REACTION: 'emojireaction',
-  AUDIO_PLUGINS: 'audioplugins',
-  VIDEO_PLUGINS: 'videoplugins',
-  WHITEBOARD: 'whiteboard',
-  CHANGE_NAME: 'changename',
-  FULLSCREEN: 'fullscreen',
-  PICTURE_IN_PICTURE: 'pip',
-  STARTS_FOR_NERDS: 'statsfornerds',
-  EMBED_URL: 'embedurl',
-  BRB: 'brb',
-  HAND_RAISE: 'handraise',
-  CHAT: 'chat',
-  PIN_TILE: 'pintile',
-};
-
 export const SESSION_STORE_KEY = {
   TRANSCRIPTION_STATE: 'transcriptionState',
   PINNED_MESSAGE: 'pinnedMessage',
   SPOTLIGHT: 'spotlight',
 };
+
+export const ROLE_CHANGE_DECLINED = 'role_change_declined';

package/src/Prebuilt/common/hooks.js

@@ -1,7 +1,16 @@
 // @ts-check
 import { useEffect, useRef, useState } from 'react';
 import { JoinForm_JoinBtnType } from '@100mslive/types-prebuilt/elements/join_form';
-import { selectAvailableRoleNames, selectIsConnectedToRoom, selectPeerCount, useHMSStore } from '@100mslive/react-sdk';
+import {
+  selectAvailableRoleNames,
+  selectIsConnectedToRoom,
+  selectPeerCount,
+  selectPeerMetadata,
+  selectPeers,
+  selectRemotePeers,
+  useHMSStore,
+  useHMSVanillaStore,
+} from '@100mslive/react-sdk';
 import { useRoomLayout } from '../provider/roomLayoutProvider';
 import { isInternalRole } from './utils';
 
@@ -53,3 +62,27 @@ export const useShowStreamingUI = () => {
   const { join_form } = layout?.screens?.preview?.default?.elements || {};
   return join_form?.join_btn_type === JoinForm_JoinBtnType.JOIN_BTN_TYPE_JOIN_AND_GO_LIVE;
 };
+
+// The search results should not have role name matches
+export const useParticipants = params => {
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const peerCount = useHMSStore(selectPeerCount);
+  const availableRoles = useHMSStore(selectAvailableRoleNames);
+  let participantList = useHMSStore(isConnected ? selectPeers : selectRemotePeers);
+  const rolesWithParticipants = Array.from(new Set(participantList.map(peer => peer.roleName)));
+  const vanillaStore = useHMSVanillaStore();
+  if (params?.metadata?.isHandRaised) {
+    participantList = participantList.filter(peer => {
+      return vanillaStore.getState(selectPeerMetadata(peer.id)).isHandRaised;
+    });
+  }
+  if (params?.role && availableRoles.includes(params.role)) {
+    participantList = participantList.filter(peer => peer.roleName === params.role);
+  }
+  if (params?.search) {
+    const search = params.search;
+    // Removed peer.roleName?.toLowerCase().includes(search)
+    participantList = participantList.filter(peer => peer.name.toLowerCase().includes(search));
+  }
+  return { participants: participantList, isConnected, peerCount, rolesWithParticipants };
+};

package/src/Prebuilt/common/utils.js

@@ -40,7 +40,7 @@ export const arrayIntersection = (a, b) => {
 
 export const getMetadata = metadataString => {
   try {
-    return metadataString === '' ? {} : JSON.parse(metadataString);
+    return !metadataString ? {} : JSON.parse(metadataString);
   } catch (error) {
     return {};
   }
@@ -56,14 +56,6 @@ export const isScreenshareSupported = () => {
   return typeof navigator.mediaDevices.getDisplayMedia !== 'undefined';
 };
 
-export const getRoutePrefix = () => {
-  return window.location.pathname.startsWith('/streaming') ? '/streaming' : '';
-};
-
-export const isStreamingKit = () => {
-  return window.location.pathname.startsWith('/streaming');
-};
-
 export const isInternalRole = role => role && role.startsWith('__internal');
 
 export const metadataPayloadParser = payload => {