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

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.5",
+  "version": "0.1.6-alpha.0",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -75,11 +75,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.0",
+    "@100mslive/hms-virtual-background": "1.11.15-alpha.0",
+    "@100mslive/react-icons": "0.8.15-alpha.0",
+    "@100mslive/react-sdk": "0.8.15-alpha.0",
+    "@100mslive/types-prebuilt": "0.11.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -114,5 +114,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d93341f90d2fde19d31afc0e1982da0767bb079b"
+  "gitHead": "447c3c90520aec5943d996050e263de842a61be2"
 }

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

@@ -32,17 +32,18 @@ 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 {
+  useRoomLayoutLeaveScreen,
+  useRoomLayoutPreviewScreen,
+} from './provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { FeatureFlags } from './services/FeatureFlags';
 
@@ -62,6 +63,9 @@ export type HMSPrebuiltProps = {
   themes?: Theme[];
   options?: HMSPrebuiltOptions;
   screens?: Screens;
+  authToken?: string;
+  roomId?: string;
+  role?: string;
   onLeave?: () => void;
 };
 
@@ -86,6 +90,9 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
   (
     {
       roomCode = '',
+      authToken = '',
+      roomId = '',
+      role = '',
       logo,
       typography,
       themes,
@@ -108,6 +115,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 +160,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 +180,8 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
         <HMSPrebuiltContext.Provider
           value={{
             roomCode,
-            showPreview: true,
-            showLeave: true,
+            roomId,
+            role,
             onLeave,
             userName,
             userId,
@@ -185,7 +202,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'];
@@ -219,7 +237,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
                           '-webkit-text-size-adjust': '100%',
                         }}
                       >
-                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} />
+                        <AppRoutes authTokenByRoomCodeEndpoint={tokenByRoomCodeEndpoint} defaultAuthToken={authToken} />
                       </Box>
                     </HMSThemeProvider>
                   );
@@ -237,26 +255,15 @@ 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();
   return (
     <Routes>
-      {showPreview && (
+      {isPreviewScreenEnabled ? (
         <Route path="preview">
           <Route
             path=":roomId/:role"
@@ -275,7 +282,7 @@ const RouteList = () => {
             }
           />
         </Route>
-      )}
+      ) : null}
       <Route path="meeting">
         <Route
           path=":roomId/:role"
@@ -294,15 +301,15 @@ const RouteList = () => {
           }
         />
       </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,7 +342,14 @@ const Router = ({ children }: { children: ReactElement }) => {
   );
 };
 
-function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoint: string }) {
+function AppRoutes({
+  authTokenByRoomCodeEndpoint,
+  defaultAuthToken,
+}: {
+  authTokenByRoomCodeEndpoint: string;
+  defaultAuthToken?: string;
+}) {
+  const roomLayout = useRoomLayout();
   return (
     <Router>
       <>
@@ -346,10 +360,12 @@ function AppRoutes({ authTokenByRoomCodeEndpoint }: { authTokenByRoomCodeEndpoin
         <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?: object;
+  onLeave?: () => void;
+};
+
+export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   roomCode: '',
   userName: '',
   userId: '',

package/src/Prebuilt/IconButton.jsx

@@ -5,6 +5,7 @@ const IconButton = styled(BaseIconButton, {
   width: '$14',
   height: '$14',
   border: '1px solid $border_bright',
+  bg: '$background_dim',
   r: '$1',
   variants: {
     active: {

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,7 +59,7 @@ class PeersSorter {
     }
     // delete to insert at beginning
     this.lruPeers.delete(speaker.id);
-    let lruPeerArray = Array.from(this.lruPeers);
+    const lruPeerArray = Array.from(this.lruPeers);
     while (lruPeerArray.length >= this.tilesPerPage) {
       lruPeerArray.pop();
     }
@@ -62,7 +67,7 @@ class PeersSorter {
     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;
@@ -135,6 +44,7 @@ export const APP_DATA = {
   authToken: 'authToken',
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
+  activeScreensharePeerId: 'activeScreensharePeerId',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',
@@ -150,8 +60,6 @@ export const SIDE_PANE_OPTIONS = {
   PARTICIPANTS: 'Participants',
   CHAT: 'Chat',
   STREAMING: 'STREAMING',
-  TILES: 'TILES',
-  SCREEN_TILES: 'SCREEN_TILES',
 };
 
 export const SUBSCRIBED_NOTIFICATIONS = {
@@ -180,27 +88,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

@@ -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 => {

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

@@ -1,5 +1,4 @@
 import React, { useEffect } from 'react';
-import { useSearchParam } from 'react-use';
 import {
   HMSRoomState,
   selectAvailableRoleNames,
@@ -17,16 +16,11 @@ import { normalizeAppPolicyConfig } from '../init/initUtils';
 import { UserPreferencesKeys, useUserPreferences } from '../hooks/useUserPreferences';
 import { useIsSidepaneTypeOpen, useSidepaneReset, useSidepaneState, useSidepaneToggle } from './useSidepane';
 import { useSetAppDataByKey } from './useUISettings';
-import { getMetadata } from '../../common/utils';
 import {
   APP_DATA,
   CHAT_SELECTOR,
-  DEFAULT_HLS_ROLE_KEY,
-  DEFAULT_HLS_VIEWER_ROLE,
   DEFAULT_WAITING_VIEWER_ROLE,
-  QUERY_PARAM_VIEW_MODE,
   SIDE_PANE_OPTIONS,
-  UI_MODE_ACTIVE_SPEAKER,
   UI_MODE_GRID,
   UI_SETTINGS,
 } from '../../common/constants';
@@ -66,11 +60,11 @@ const initialAppData = {
   [APP_DATA.hlsStarted]: false,
   [APP_DATA.rtmpStarted]: false,
   [APP_DATA.recordingStarted]: false,
-  [APP_DATA.hlsViewerRole]: DEFAULT_HLS_VIEWER_ROLE,
   [APP_DATA.waitingViewerRole]: DEFAULT_WAITING_VIEWER_ROLE,
   [APP_DATA.dropdownList]: [],
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
+  [APP_DATA.activeScreensharePeerId]: '',
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
@@ -82,7 +76,6 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
   const roleNames = useHMSStore(selectAvailableRoleNames);
   const rolesMap = useHMSStore(selectRolesMap);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
-  const isDefaultModeActiveSpeaker = useSearchParam(QUERY_PARAM_VIEW_MODE) === UI_MODE_ACTIVE_SPEAKER;
 
   useEffect(() => {
     if (!isConnected && sidePane && sidePane !== SIDE_PANE_OPTIONS.PARTICIPANTS) {
@@ -103,17 +96,14 @@ export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {
     const uiSettings = preferences || {};
     const updatedSettings = {
       ...uiSettings,
-      [UI_SETTINGS.uiViewMode]: isDefaultModeActiveSpeaker
-        ? UI_MODE_ACTIVE_SPEAKER
-        : uiSettings.uiViewMode || UI_MODE_GRID,
+      [UI_SETTINGS.uiViewMode]: uiSettings.uiViewMode || UI_MODE_GRID,
     };
     hmsActions.setAppData(APP_DATA.uiSettings, updatedSettings, true);
-  }, [preferences, isDefaultModeActiveSpeaker, hmsActions]);
+  }, [preferences, hmsActions]);
 
   useEffect(() => {
     const appData = {
       [APP_DATA.tokenEndpoint]: tokenEndpoint,
-      [APP_DATA.hlsViewerRole]: getMetadata(appDetails)[DEFAULT_HLS_ROLE_KEY] || DEFAULT_HLS_VIEWER_ROLE,
       [APP_DATA.appConfig]: getAppDetails(appDetails),
     };
     for (const key in appData) {

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

@@ -51,10 +51,6 @@ export const useIsHeadless = () => {
   return isHeadless;
 };
 
-export const useHLSViewerRole = () => {
-  return useHMSStore(selectAppData(APP_DATA.hlsViewerRole));
-};
-
 export const useWaitingViewerRole = () => {
   return useHMSStore(selectAppData(APP_DATA.waitingViewerRole));
 };

package/src/Prebuilt/components/AudioVideoToggle.jsx

@@ -67,6 +67,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
   const videoTrackId = useHMSStore(selectLocalVideoTrackID);
   const localVideoTrack = useHMSStore(selectVideoTrackByID(videoTrackId));
   const roomState = useHMSStore(selectRoomState);
+  const isAudioPermitted = toggleAudio && audioInput?.length > 0;
+  const isVideoPermitted = toggleVideo && videoInput?.length > 0;
 
   return (
     <Fragment>
@@ -90,6 +92,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
         ) : (
           <IconButtonWithOptions
             options={formattedAudioInputList}
+            disabled={!isAudioPermitted}
+            onDisabledClick={toggleAudio}
             tooltipMessage={`Turn ${isLocalAudioEnabled ? 'off' : 'on'} audio (${isMacOS ? '⌘' : 'ctrl'} + d)`}
             icon={
               !isLocalAudioEnabled ? (
@@ -124,6 +128,8 @@ export const AudioVideoToggle = ({ hideOptions = false }) => {
           </Tooltip>
         ) : (
           <IconButtonWithOptions
+            disabled={!isVideoPermitted}
+            onDisabledClick={toggleVideo}
             options={formattedVideoInputList}
             tooltipMessage={`Turn ${isLocalVideoEnabled ? 'off' : 'on'} video (${isMacOS ? '⌘' : 'ctrl'} + e)`}
             icon={