@100mslive/roomkit-react 0.1.8-alpha.0 → 0.1.8

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.1.8-alpha.0",
+  "version": "0.1.8",
   "author": "100ms",
   "license": "MIT",
   "files": [
@@ -76,10 +76,10 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.1.17-alpha.0",
-    "@100mslive/hms-virtual-background": "1.11.17-alpha.0",
-    "@100mslive/react-icons": "0.8.17-alpha.0",
-    "@100mslive/react-sdk": "0.8.17-alpha.0",
+    "@100mslive/hls-player": "0.1.17",
+    "@100mslive/hms-virtual-background": "1.11.17",
+    "@100mslive/react-icons": "0.8.17",
+    "@100mslive/react-sdk": "0.8.17",
     "@100mslive/types-prebuilt": "0.12.0",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
@@ -115,5 +115,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "d6e072de081b508a297ebc1684a33a8e9db048ef"
+  "gitHead": "966ed9ffac3d55586196ad0b738eb1977dfc2ff7"
 }

package/src/AudioLevel/AudioLevel.tsx

@@ -27,7 +27,7 @@ const barAnimation = keyframes({
   to: {
     maskSize: '4em .8em',
     '-webkit-mask-position-y': '.1em',
-    maskPosition: 'initial 0',
+    maskPosition: 'initial 0.1em',
   },
 });
 

package/src/Prebuilt/App.tsx

@@ -24,6 +24,7 @@ import { Init } from './components/init/Init';
 import { KeyboardHandler } from './components/Input/KeyboardInputManager';
 // @ts-ignore: No implicit Any
 import { Notifications } from './components/Notifications';
+import { HeadlessEndRoomListener } from './components/Notifications/HeadlessEndRoomListener';
 // @ts-ignore: No implicit Any
 import PostLeave from './components/PostLeave';
 // @ts-ignore: No implicit Any
@@ -68,6 +69,7 @@ export type HMSPrebuiltProps = {
   roomId?: string;
   role?: string;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export type HMSPrebuiltRefType = {
@@ -90,6 +92,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
       options: { userName = '', userId = '', endpoints } = {},
       screens,
       onLeave,
+      onJoin,
     },
     ref,
   ) => {
@@ -172,6 +175,7 @@ export const HMSPrebuilt = React.forwardRef<HMSPrebuiltRefType, HMSPrebuiltProps
             roomId,
             role,
             onLeave,
+            onJoin,
             userName,
             userId,
             endpoints: {
@@ -349,6 +353,7 @@ function AppRoutes({
         <BackSwipe />
         {!isNotificationsDisabled && <FlyingEmoji />}
         <RemoteStopScreenshare />
+        <HeadlessEndRoomListener />
         <KeyboardHandler />
         <AuthToken authTokenByRoomCodeEndpoint={authTokenByRoomCodeEndpoint} defaultAuthToken={defaultAuthToken} />
         {roomLayout && (

package/src/Prebuilt/AppContext.tsx

@@ -8,6 +8,7 @@ type HMSPrebuiltContextType = {
   userId?: string;
   endpoints?: Record<string, string>;
   onLeave?: () => void;
+  onJoin?: () => void;
 };
 
 export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
@@ -16,6 +17,7 @@ export const HMSPrebuiltContext = React.createContext<HMSPrebuiltContextType>({
   userId: '',
   endpoints: {},
   onLeave: undefined,
+  onJoin: undefined,
 });
 
 HMSPrebuiltContext.displayName = 'HMSPrebuiltContext';

package/src/Prebuilt/common/constants.js

@@ -44,7 +44,7 @@ export const APP_DATA = {
   pdfConfig: 'pdfConfig',
   minimiseInset: 'minimiseInset',
   activeScreensharePeerId: 'activeScreensharePeerId',
-  disableNotificiations: 'disableNotificiations',
+  disableNotifications: 'disableNotifications',
 };
 export const UI_SETTINGS = {
   isAudioOnly: 'isAudioOnly',

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

@@ -65,7 +65,7 @@ const initialAppData = {
   [APP_DATA.authToken]: '',
   [APP_DATA.minimiseInset]: false,
   [APP_DATA.activeScreensharePeerId]: '',
-  [APP_DATA.disableNotificiations]: false,
+  [APP_DATA.disableNotifications]: false,
 };
 
 export const AppData = React.memo(({ appDetails, tokenEndpoint }) => {

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

@@ -86,7 +86,7 @@ export const useSubscribedNotifications = notificationKey => {
 };
 
 export const useIsNotificationDisabled = () => {
-  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotificiations));
+  const notificationPreference = useHMSStore(selectAppDataByPath(APP_DATA.disableNotifications));
   return notificationPreference;
 };
 

package/src/Prebuilt/components/Chip.tsx

@@ -24,9 +24,13 @@ const Chip = ({
     return null;
   }
   return (
-    <Flex align="center" css={{ backgroundColor, p: '$4 $6', borderRadius: '$4', ...css }} onClick={() => onClick?.()}>
+    <Flex
+      align="center"
+      css={{ backgroundColor, p: '$4 $6', gap: '$2', borderRadius: '$4', ...css }}
+      onClick={() => onClick?.()}
+    >
       {icon}
-      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor, ml: '$2' }}>
+      <Text variant="sm" css={{ fontWeight: '$semiBold', color: textColor }}>
         {content}
       </Text>
     </Flex>

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

@@ -0,0 +1,94 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { useMeasure } from 'react-use';
+import { FixedSizeList } from 'react-window';
+import { selectIsConnectedToRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
+import { ChevronLeftIcon, CrossIcon } from '@100mslive/react-icons';
+import { Button } from '../../../Button';
+import { IconButton } from '../../../IconButton';
+import { Box, Flex } from '../../../Layout';
+import { Loading } from '../../../Loading';
+import { Text } from '../../../Text';
+// @ts-ignore: No implicit Any
+import { ParticipantSearch } from './ParticipantList';
+import { itemKey, ROW_HEIGHT, VirtualizedParticipantItem } from './RoleAccordion';
+// @ts-ignore: No implicit Any
+import { useSidepaneReset } from '../AppData/useSidepane';
+// @ts-ignore: No implicit Any
+import { getFormattedCount } from '../../common/utils';
+
+export const PaginatedParticipants = ({ roleName, onBack }: { roleName: string; onBack: () => void }) => {
+  const { peers, total, loadPeers, loadMorePeers } = usePaginatedParticipants({ role: roleName, limit: 20 });
+  const [search, setSearch] = useState<string>('');
+  const [isLoading, setIsLoading] = useState(false);
+  const filteredPeers = peers.filter(p => p.name?.toLowerCase().includes(search));
+  const isConnected = useHMSStore(selectIsConnectedToRoom);
+  const [ref, { width }] = useMeasure<HTMLDivElement>();
+  const containerRef = useRef<HTMLDivElement | null>(null);
+  const height = ROW_HEIGHT * peers.length;
+  const resetSidePane = useSidepaneReset();
+  const hasNext = total > peers.length;
+
+  useEffect(() => {
+    loadPeers();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
+  return (
+    <Flex ref={ref} direction="column" css={{ size: '100%', gap: '$4' }}>
+      <Flex align="center">
+        <Flex align="center" css={{ flex: '1 1 0', cursor: 'pointer' }} onClick={onBack}>
+          <ChevronLeftIcon />
+          <Text variant="lg" css={{ flex: '1 1 0' }}>
+            Participants
+          </Text>
+        </Flex>
+        <IconButton
+          onClick={e => {
+            e.stopPropagation();
+            resetSidePane();
+          }}
+          data-testid="close_sidepane"
+        >
+          <CrossIcon />
+        </IconButton>
+      </Flex>
+      <ParticipantSearch onSearch={(search: string) => setSearch(search)} placeholder={`Search for ${roleName}`} />
+      <Flex direction="column" css={{ border: '1px solid $border_default', borderRadius: '$1', flex: '1 1 0' }}>
+        <Flex align="center" css={{ height: ROW_HEIGHT, borderBottom: '1px solid $border_default', px: '$8' }}>
+          <Text css={{ fontSize: '$space$7' }}>
+            {roleName}({getFormattedCount(peers.length)}/{getFormattedCount(total)})
+          </Text>
+        </Flex>
+        <Box css={{ flex: '1 1 0', overflowY: 'auto', overflowX: 'hidden', mr: '-$10' }}>
+          <FixedSizeList
+            itemSize={ROW_HEIGHT}
+            itemData={{ peerList: filteredPeers, isConnected: isConnected === true }}
+            itemKey={itemKey}
+            itemCount={filteredPeers.length}
+            width={width}
+            height={height}
+            outerRef={containerRef}
+          >
+            {VirtualizedParticipantItem}
+          </FixedSizeList>
+          {hasNext ? (
+            <Flex justify="center" css={{ w: '100%' }}>
+              <Button
+                css={{ w: 'max-content', p: '$4' }}
+                onClick={() => {
+                  setIsLoading(true);
+                  loadMorePeers()
+                    .catch(console.error)
+                    .finally(() => setIsLoading(false));
+                }}
+                disabled={isLoading}
+              >
+                {isLoading ? <Loading size={16} /> : 'Load More'}
+              </Button>
+            </Flex>
+          ) : null}
+        </Box>
+      </Flex>
+    </Flex>
+  );
+};

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

@@ -3,6 +3,7 @@ import { useDebounce, useMedia } from 'react-use';
 import {
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
+  selectIsLargeRoom,
   selectIsPeerAudioEnabled,
   selectLocalPeerID,
   selectPeerCount,
@@ -20,7 +21,7 @@ import {
   SearchIcon,
   VerticalMenuIcon,
 } from '@100mslive/react-icons';
-import { Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
 import { ToastManager } from '../Toast/ToastManager';
@@ -31,9 +32,10 @@ import { useParticipants } from '../../common/hooks';
 import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ParticipantList = () => {
+export const ParticipantList = ({ offStageRoles = [], onActive }) => {
   const [filter, setFilter] = useState();
   const { participants, isConnected, peerCount } = useParticipants(filter);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const peersOrderedByRoles = {};
 
   const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
@@ -45,6 +47,15 @@ export const ParticipantList = () => {
     peersOrderedByRoles[participant.roleName].push(participant);
   });
 
+  // prefill off_stage roles of large rooms to load more peers
+  if (isLargeRoom) {
+    offStageRoles.forEach(role => {
+      if (!peersOrderedByRoles[role]) {
+        peersOrderedByRoles[role] = [];
+      }
+    });
+  }
+
   const onSearch = useCallback(value => {
     setFilter(filterValue => {
       if (!filterValue) {
@@ -72,6 +83,9 @@ export const ParticipantList = () => {
           handRaisedList={handRaisedPeers}
           isConnected={isConnected}
           filter={filter}
+          offStageRoles={offStageRoles}
+          isLargeRoom={isLargeRoom}
+          onActive={onActive}
         />
       </Flex>
     </Fragment>
@@ -114,7 +128,15 @@ export const ParticipantCount = () => {
   );
 };
 
-const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter, handRaisedList = [] }) => {
+const VirtualizedParticipants = ({
+  peersOrderedByRoles = {},
+  isConnected,
+  filter,
+  handRaisedList = [],
+  offStageRoles,
+  isLargeRoom,
+  onActive,
+}) => {
   return (
     <Flex
       direction="column"
@@ -127,24 +149,29 @@ const VirtualizedParticipants = ({ peersOrderedByRoles = {}, isConnected, filter
         flex: '1 1 0',
       }}
     >
-      {handRaisedList.length > 0 ? (
-        <RoleAccordion
-          peerList={handRaisedList}
-          roleName="Hand Raised"
-          filter={filter}
-          isConnected={isConnected}
-          isHandRaisedAccordion
-        />
-      ) : null}
-      {Object.keys(peersOrderedByRoles).map(role => (
-        <RoleAccordion
-          key={role}
-          peerList={peersOrderedByRoles[role]}
-          roleName={role}
-          isConnected={isConnected}
-          filter={filter}
-        />
-      ))}
+      <Accordion.Root type={isLargeRoom ? 'single' : 'multiple'} collapsible>
+        {handRaisedList.length > 0 ? (
+          <RoleAccordion
+            peerList={handRaisedList}
+            roleName="Hand Raised"
+            filter={filter}
+            isConnected={isConnected}
+            isHandRaisedAccordion
+            offStageRoles={offStageRoles}
+          />
+        ) : null}
+        {Object.keys(peersOrderedByRoles).map(role => (
+          <RoleAccordion
+            key={role}
+            peerList={peersOrderedByRoles[role]}
+            roleName={role}
+            isConnected={isConnected}
+            filter={filter}
+            offStageRoles={offStageRoles}
+            onActive={onActive}
+          />
+        ))}
+      </Accordion.Root>
     </Flex>
   );
 };
@@ -165,7 +192,10 @@ export const Participant = ({ peer, isConnected }) => {
       justify="between"
       data-testid={'participant_' + peer.name}
     >
-      <Text variant="sm" css={{ ...textEllipsis(150), fontWeight: '$semiBold', color: '$on_surface_high' }}>
+      <Text
+        variant="sm"
+        css={{ ...textEllipsis('100%'), flex: '1 1 0', mr: '$8', fontWeight: '$semiBold', color: '$on_surface_high' }}
+      >
         {peer.name} {localPeerId === peer.id ? '(You)' : ''}
       </Text>
       {isConnected ? (
@@ -338,7 +368,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <Input
         type="text"
         placeholder={placeholder || 'Search for participants'}
-        css={{ w: '100%', p: '$6', pl: '$16', mr: '$4', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
+        css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {
           event.stopPropagation();

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

@@ -1,30 +1,30 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { useEffect } from 'react';
 import { useMeasure } from 'react-use';
 import { FixedSizeList } from 'react-window';
-import { HMSPeer, HMSPeerListIterator, useHMSActions } from '@100mslive/react-sdk';
-import { AddCircleIcon } from '@100mslive/react-icons';
+import { HMSPeer, selectIsLargeRoom, useHMSStore, usePaginatedParticipants } from '@100mslive/react-sdk';
+import { ChevronRightIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
-import { Box, Flex } from '../../../Layout';
+import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-import Chip from '../Chip';
 // @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
 // @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 
-const ROW_HEIGHT = 50;
+export const ROW_HEIGHT = 50;
+const ITER_TIMER = 5000;
 
-interface ItemData {
+export interface ItemData {
   peerList: HMSPeer[];
   isConnected: boolean;
 }
 
-function itemKey(index: number, data: ItemData) {
+export function itemKey(index: number, data: ItemData) {
   return data.peerList[index].id;
 }
 
-const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
+export const VirtualizedParticipantItem = React.memo(({ index, data }: { index: number; data: ItemData }) => {
   return <Participant key={data.peerList[index].id} peer={data.peerList[index]} isConnected={data.isConnected} />;
 });
 
@@ -34,101 +34,103 @@ export const RoleAccordion = ({
   isConnected,
   filter,
   isHandRaisedAccordion = false,
+  offStageRoles,
+  onActive,
 }: ItemData & {
   roleName: string;
   isHandRaisedAccordion?: boolean;
   filter?: { search: string };
+  offStageRoles: string[];
+  onActive?: (role: string) => void;
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
-  const actions = useHMSActions();
   const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
-  const [hasNext, setHasNext] = useState(false);
-  const iteratorRef = useRef<HMSPeerListIterator | null>(null);
+  const isLargeRoom = useHMSStore(selectIsLargeRoom);
+  const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
+  const isOffStageRole = roleName && offStageRoles.includes(roleName);
 
-  const loadNext = useCallback(() => {
-    if (!roleName || roleName === 'Hand Raised') {
+  useEffect(() => {
+    if (!isOffStageRole || !isLargeRoom) {
       return;
     }
-    if (!iteratorRef.current) {
-      iteratorRef.current = actions.getPeerListIterator({ role: roleName });
-    }
-    iteratorRef.current
-      .next()
-      .catch(console.error)
-      .finally(() => {
-        setHasNext(iteratorRef.current ? iteratorRef.current.hasNext() : false);
-      });
-  }, [actions, roleName]);
-
-  useEffect(() => {
-    loadNext();
-  }, [loadNext]);
+    loadPeers();
+    const interval = setInterval(() => {
+      loadPeers();
+    }, ITER_TIMER);
+    return () => clearInterval(interval);
+  }, [isOffStageRole, isLargeRoom]); //eslint-disable-line
 
   if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
     return null;
   }
 
-  const height = ROW_HEIGHT * peerList.length;
+  const height = ROW_HEIGHT * (peers.length || peerList.length);
+  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
+  const hasNext = total > peersInAccordion.length;
+
+  if (peersInAccordion.length === 0) {
+    return null;
+  }
 
   return (
-    <Flex direction="column" css={{ '&:hover .role_actions': { visibility: 'visible' } }} ref={ref}>
-      <Accordion.Root
-        type="single"
-        collapsible
-        defaultValue={roleName}
-        css={{ borderRadius: '$1', border: '1px solid $border_bright' }}
+    <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
+      <Accordion.Header
+        iconStyles={{ c: '$on_surface_high' }}
+        css={{
+          textTransform: 'capitalize',
+          p: '$6 $8',
+          fontSize: '$sm',
+          fontWeight: '$semiBold',
+          c: '$on_surface_medium',
+          borderRadius: '$1',
+          border: '1px solid $border_default',
+          '&[data-state="open"]': {
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+          },
+        }}
       >
-        <Accordion.Item value={roleName}>
-          <Accordion.Header
-            iconStyles={{ c: '$on_surface_high' }}
+        <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
+          <Text
+            variant="sm"
+            css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
+          >
+            {roleName} {`(${getFormattedCount(isLargeRoom && isOffStageRole ? total : peerList.length)})`}
+          </Text>
+          <RoleOptions roleName={roleName} peerList={peersInAccordion} />
+        </Flex>
+      </Accordion.Header>
+      <Accordion.Content contentStyles={{ border: '1px solid $border_default', borderTop: 'none' }}>
+        <FixedSizeList
+          itemSize={ROW_HEIGHT}
+          itemData={{ peerList: peersInAccordion, isConnected }}
+          itemKey={itemKey}
+          itemCount={peersInAccordion.length}
+          width={width}
+          height={height}
+        >
+          {VirtualizedParticipantItem}
+        </FixedSizeList>
+        {offStageRoles?.includes(roleName) && hasNext ? (
+          <Flex
+            align="center"
+            justify="end"
             css={{
-              textTransform: 'capitalize',
-              p: '$6 $8',
-              fontSize: '$sm',
-              fontWeight: '$semiBold',
-              c: '$on_surface_medium',
+              gap: '$1',
+              cursor: 'pointer',
+              color: '$on_surface_high',
+              p: '$6',
+              borderTop: '1px solid $border_default',
             }}
+            onClick={() => onActive?.(roleName)}
           >
-            <Flex justify="between" css={{ flexGrow: 1, pr: '$6' }}>
-              <Text
-                variant="sm"
-                css={{ fontWeight: '$semiBold', textTransform: 'capitalize', color: '$on_surface_medium' }}
-              >
-                {roleName} {`(${getFormattedCount(peerList.length)})`}
-              </Text>
-              <RoleOptions roleName={roleName} peerList={peerList} />
-            </Flex>
-          </Accordion.Header>
-          <Accordion.Content>
-            <Box css={{ borderTop: '1px solid $border_default' }} />
-            <FixedSizeList
-              itemSize={ROW_HEIGHT}
-              itemData={{ peerList, isConnected }}
-              itemKey={itemKey}
-              itemCount={peerList.length}
-              width={width}
-              height={height}
-            >
-              {VirtualizedParticipantItem}
-            </FixedSizeList>
-            {hasNext ? (
-              <Chip
-                icon={<AddCircleIcon />}
-                content="Load More"
-                onClick={loadNext}
-                backgroundColor="$secondary_default"
-                css={{
-                  w: 'max-content',
-                  borderRadius: '$size$9',
-                  m: '$2 auto',
-                  p: '$4',
-                  cursor: 'pointer',
-                }}
-              />
-            ) : null}
-          </Accordion.Content>
-        </Accordion.Item>
-      </Accordion.Root>
-    </Flex>
+            <Text variant="sm" css={{ color: 'inherit' }}>
+              View All
+            </Text>
+            <ChevronRightIcon />
+          </Flex>
+        ) : null}
+      </Accordion.Content>
+    </Accordion.Item>
   );
 };

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

@@ -46,7 +46,7 @@ export const RoleOptions = ({ roleName, peerList }: { roleName: string; peerList
   const canRemoveRoleFromRoom =
     permissions?.removeOthers && (on_stage_role === roleName || off_stage_roles?.includes(roleName));
 
-  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom)) {
+  if (!(canMuteRole || canRemoveRoleFromStage || canRemoveRoleFromRoom) || peerList.length === 0) {
     return null;
   }
 

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

@@ -0,0 +1,23 @@
+import React, { useEffect } from 'react';
+import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+// @ts-ignore
+import { useIsNotificationDisabled } from '../AppData/useUISettings';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
+
+export function HeadlessEndRoomListener() {
+  const notification = useHMSNotifications();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  useEffect(() => {
+    if (!notification || !isNotificationDisabled) {
+      return;
+    }
+    if ([HMSNotificationTypes.ROOM_ENDED, HMSNotificationTypes.REMOVED_FROM_ROOM].includes(notification.type)) {
+      redirectToLeave(1000);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [notification]);
+
+  return <></>;
+}

package/src/Prebuilt/components/Notifications/Notifications.jsx

@@ -104,7 +104,7 @@ export function Notifications() {
               close: false,
             });
           }
-          // goto leave for terminal if any action is not performed within 2secs
+          // goto leave for terminal if any action is not performed within 1s
           // if network is still unavailable going to preview will throw an error
           redirectToLeave(1000);
           return;

package/src/Prebuilt/components/PrebuiltTileElements.tsx

@@ -0,0 +1,5 @@
+import { styled } from '../../Theme';
+import { StyledVideoTile } from '../../VideoTile';
+
+export const PrebuiltAudioIndicator = styled(StyledVideoTile.AudioIndicator, { height: '$12', width: '$12' });
+export const PrebuiltAttributeBox = styled(StyledVideoTile.AttributeBox, { height: '$12', width: '$12' });