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

package/src/Prebuilt/components/MoreSettings/SplitComponents/{MwebOptions.jsx → MwebOptions.tsx}

@@ -1,31 +1,55 @@
-import React, { Suspense, useRef, useState } from 'react';
+import React, { useRef, useState } from 'react';
 import { useClickAway } from 'react-use';
+import { ConferencingScreen, DefaultConferencingScreen_Elements } from '@100mslive/types-prebuilt';
 import {
   selectIsConnectedToRoom,
-  selectIsLocalVideoEnabled,
   selectPeerCount,
   selectPermissions,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
 } from '@100mslive/react-sdk';
-import { CrossIcon, DragHandleIcon, EmojiIcon, PeopleIcon, RecordIcon, SettingsIcon } from '@100mslive/react-icons';
-import { Box, Loading, Tooltip } from '../../../../';
+import {
+  BrbIcon,
+  CrossIcon,
+  DragHandleIcon,
+  EmojiIcon,
+  HandIcon,
+  HandRaiseSlashedIcon,
+  PeopleIcon,
+  RecordIcon,
+  SettingsIcon,
+} from '@100mslive/react-icons';
+import { Box, Loading, Tooltip } from '../../../..';
 import { Sheet } from '../../../../Sheet';
+// @ts-ignore: No implicit any
 import IconButton from '../../../IconButton';
-import { EmojiCard } from '../../Footer/EmojiCard';
+// @ts-ignore: No implicit any
+import { EmojiReaction } from '../../EmojiReaction';
+// @ts-ignore: No implicit any
 import { StopRecordingInSheet } from '../../Header/StreamActions';
+// @ts-ignore: No implicit any
 import SettingsModal from '../../Settings/SettingsModal';
+// @ts-ignore: No implicit any
 import { ToastManager } from '../../Toast/ToastManager';
-import { ActionTile } from '.././ActionTile';
-import { ChangeNameModal } from '.././ChangeNameModal';
-import { MuteAllModal } from '.././MuteAllModal';
+// @ts-ignore: No implicit any
+import { ActionTile } from '../ActionTile';
+// @ts-ignore: No implicit any
+import { ChangeNameModal } from '../ChangeNameModal';
+// @ts-ignore: No implicit any
+import { MuteAllModal } from '../MuteAllModal';
+// @ts-ignore: No implicit any
 import { useSidepaneToggle } from '../../AppData/useSidepane';
+// @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
+import { useMyMetadata } from '../../hooks/useMetadata';
+// @ts-ignore: No implicit any
 import { getFormattedCount } from '../../../common/utils';
+// @ts-ignore: No implicit any
 import { SIDE_PANE_OPTIONS } from '../../../common/constants';
 
-const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
+// const VirtualBackground = React.lazy(() => import('../../../plugins/VirtualBackground/VirtualBackground'));
 
 const MODALS = {
   CHANGE_NAME: 'changeName',
@@ -39,14 +63,18 @@ const MODALS = {
   EMBED_URL: 'embedUrl',
 };
 
-export const MwebOptions = () => {
+export const MwebOptions = ({
+  elements,
+  screenType,
+}: {
+  elements: DefaultConferencingScreen_Elements;
+  screenType: keyof ConferencingScreen;
+}) => {
   const hmsActions = useHMSActions();
   const permissions = useHMSStore(selectPermissions);
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const { isBrowserRecordingOn, isStreamingOn, isHLSRunning } = useRecordingStreaming();
-
   const [openModals, setOpenModals] = useState(new Set());
-
   const [openOptionsSheet, setOpenOptionsSheet] = useState(false);
   const [openSettingsSheet, setOpenSettingsSheet] = useState(false);
   const [showEmojiCard, setShowEmojiCard] = useState(false);
@@ -55,11 +83,12 @@ export const MwebOptions = () => {
   const toggleParticipants = useSidepaneToggle(SIDE_PANE_OPTIONS.PARTICIPANTS);
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
-  const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
+  const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  // const isVideoOn = useHMSStore(selectIsLocalVideoEnabled);
 
-  useDropdownList({ open: openModals.size > 0, name: 'MoreSettings' });
+  useDropdownList({ open: openModals.size > 0 || openOptionsSheet || openSettingsSheet, name: 'MoreSettings' });
 
-  const updateState = (modalName, value) => {
+  const updateState = (modalName: string, value: boolean) => {
     setOpenModals(modals => {
       const copy = new Set(modals);
       if (value) {
@@ -76,13 +105,13 @@ export const MwebOptions = () => {
   return (
     <>
       <Sheet.Root open={openOptionsSheet} onOpenChange={setOpenOptionsSheet}>
-        <Sheet.Trigger asChild data-testid="more_settings_btn">
-          <IconButton>
-            <Tooltip title="More options">
+        <Tooltip title="More options">
+          <Sheet.Trigger asChild data-testid="more_settings_btn">
+            <IconButton>
               <DragHandleIcon />
-            </Tooltip>
-          </IconButton>
-        </Sheet.Trigger>
+            </IconButton>
+          </Sheet.Trigger>
+        </Tooltip>
         <Sheet.Content css={{ bg: '$surface_dim', pb: '$14' }}>
           <Sheet.Title
             css={{
@@ -116,32 +145,62 @@ export const MwebOptions = () => {
               px: '$9',
             }}
           >
-            <ActionTile.Root
-              onClick={() => {
-                toggleParticipants();
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
-              <PeopleIcon />
-              <ActionTile.Title>Participants</ActionTile.Title>
-            </ActionTile.Root>
+            {elements?.participant_list && (
+              <ActionTile.Root
+                onClick={() => {
+                  toggleParticipants();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <ActionTile.Count>{getFormattedCount(peerCount)}</ActionTile.Count>
+                <PeopleIcon />
+                <ActionTile.Title>Participants</ActionTile.Title>
+              </ActionTile.Root>
+            )}
 
-            {isVideoOn ? (
+            {screenType !== 'hls_live_streaming' ? (
+              <ActionTile.Root
+                active={isHandRaised}
+                onClick={() => {
+                  toggleHandRaise();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                {isHandRaised ? <HandRaiseSlashedIcon /> : <HandIcon />}
+                <ActionTile.Title>{isHandRaised ? 'Lower' : 'Raise'} Hand</ActionTile.Title>
+              </ActionTile.Root>
+            ) : null}
+
+            {/* {isVideoOn ? (
               <Suspense fallback="">
                 <VirtualBackground asActionTile onVBClick={() => setOpenOptionsSheet(false)} />
               </Suspense>
-            ) : null}
+            ) : null} */}
 
-            <ActionTile.Root
-              onClick={() => {
-                setShowEmojiCard(true);
-                setOpenOptionsSheet(false);
-              }}
-            >
-              <EmojiIcon />
-              <ActionTile.Title>Emoji Reactions</ActionTile.Title>
-            </ActionTile.Root>
+            {elements?.emoji_reactions && (
+              <ActionTile.Root
+                onClick={() => {
+                  setShowEmojiCard(true);
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <EmojiIcon />
+                <ActionTile.Title>Emoji Reactions</ActionTile.Title>
+              </ActionTile.Root>
+            )}
+
+            {elements?.brb && (
+              <ActionTile.Root
+                active={isBRBOn}
+                onClick={() => {
+                  toggleBRB();
+                  setOpenOptionsSheet(false);
+                }}
+              >
+                <BrbIcon />
+                <ActionTile.Title>Be Right Back</ActionTile.Title>
+              </ActionTile.Root>
+            )}
 
             <ActionTile.Root
               onClick={() => {
@@ -173,6 +232,7 @@ export const MwebOptions = () => {
                       setOpenOptionsSheet(false);
                       setIsRecordingLoading(false);
                     } catch (error) {
+                      // @ts-ignore
                       if (error.message.includes('stream already running')) {
                         ToastManager.addToast({
                           title: 'Recording already running',
@@ -180,6 +240,7 @@ export const MwebOptions = () => {
                         });
                       } else {
                         ToastManager.addToast({
+                          // @ts-ignore
                           title: error.message,
                           variant: 'error',
                         });
@@ -207,11 +268,11 @@ export const MwebOptions = () => {
       </Sheet.Root>
       <SettingsModal open={openSettingsSheet} onOpenChange={setOpenSettingsSheet} />
       {openModals.has(MODALS.MUTE_ALL) && (
-        <MuteAllModal onOpenChange={value => updateState(MODALS.MUTE_ALL, value)} isMobile />
+        <MuteAllModal onOpenChange={(value: boolean) => updateState(MODALS.MUTE_ALL, value)} isMobile />
       )}
       {openModals.has(MODALS.CHANGE_NAME) && (
         <ChangeNameModal
-          onOpenChange={value => updateState(MODALS.CHANGE_NAME, value)}
+          onOpenChange={(value: boolean) => updateState(MODALS.CHANGE_NAME, value)}
           openParentSheet={() => setOpenOptionsSheet(true)}
         />
       )}
@@ -235,7 +296,7 @@ export const MwebOptions = () => {
             mx: '$4',
           }}
         >
-          <EmojiCard />
+          <EmojiReaction />
         </Box>
       )}
       {showRecordingOn && (
@@ -247,6 +308,7 @@ export const MwebOptions = () => {
               setShowRecordingOn(false);
             } catch (error) {
               ToastManager.addToast({
+                // @ts-ignore
                 title: error.message,
                 variant: 'error',
               });

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

@@ -60,7 +60,9 @@ export function HLSFailureModal() {
             <Button outlined variant="standard" css={{ w: '100%' }} onClick={() => setOpenModal(false)}>
               Dismiss
             </Button>
-            <Button css={{ w: '100%' }}>Go Live</Button>
+            <Button css={{ w: '100%' }} onClick={startHLS}>
+              Go Live
+            </Button>
           </Flex>
         </Dialog.Content>
       </Dialog.Portal>

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

@@ -1,43 +1,66 @@
 /* eslint-disable no-case-declarations */
-import React, { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import React, { useCallback, useEffect } from 'react';
+import { useNavigate, useParams } from 'react-router-dom';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectRoomState,
+  useCustomEvent,
+  useHMSNotifications,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { Button } from '../../../';
+import { useUpdateRoomLayout } from '../../provider/roomLayoutProvider';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { ToastManager } from '../Toast/ToastManager';
 import { AutoplayBlockedModal } from './AutoplayBlockedModal';
 import { InitErrorModal } from './InitErrorModal';
-import { MessageNotifications } from './MessageNotifications';
 import { PeerNotifications } from './PeerNotifications';
 import { PermissionErrorModal } from './PermissionErrorModal';
 import { ReconnectNotifications } from './ReconnectNotifications';
 import { TrackBulkUnmuteModal } from './TrackBulkUnmuteModal';
 import { TrackNotifications } from './TrackNotifications';
 import { TrackUnmuteModal } from './TrackUnmuteModal';
-import { useHLSViewerRole, useIsHeadless, useSubscribedNotifications } from '../AppData/useUISettings';
-import { useNavigation } from '../hooks/useNavigation';
+import { useIsNotificationDisabled, useSubscribedNotifications } from '../AppData/useUISettings';
+import { useRedirectToLeave } from '../hooks/useRedirectToLeave';
 import { getMetadata } from '../../common/utils';
-
+import { ROLE_CHANGE_DECLINED } from '../../common/constants';
 export function Notifications() {
   const notification = useHMSNotifications();
-  const navigate = useNavigation();
-  const HLS_VIEWER_ROLE = useHLSViewerRole();
+  const navigate = useNavigate();
+  const params = useParams();
   const subscribedNotifications = useSubscribedNotifications() || {};
-  const isHeadless = useIsHeadless();
+  const roomState = useHMSStore(selectRoomState);
+  const updateRoomLayoutForRole = useUpdateRoomLayout();
+  const isNotificationDisabled = useIsNotificationDisabled();
+  const { redirectToLeave } = useRedirectToLeave();
+
+  const handleRoleChangeDenied = useCallback(request => {
+    ToastManager.addToast({
+      title: `${request.peerName} denied your request to join the ${request.role.name} role`,
+      variant: 'error',
+    });
+  }, []);
+
+  useCustomEvent({ type: ROLE_CHANGE_DECLINED, onEvent: handleRoleChangeDenied });
 
   useEffect(() => {
-    if (!notification) {
+    if (!notification || isNotificationDisabled) {
       return;
     }
     switch (notification.type) {
       case HMSNotificationTypes.METADATA_UPDATED:
+        if (roomState !== HMSRoomState.Connected) {
+          return;
+        }
         // Don't toast message when metadata is updated and raiseHand is false.
         // Don't toast message in case of local peer.
         const metadata = getMetadata(notification.data?.metadata);
-        if (!metadata?.isHandRaised || notification.data.isLocal || isHeadless) return;
+        if (!metadata?.isHandRaised || notification.data.isLocal) return;
 
         console.debug('Metadata updated', notification.data);
         if (!subscribedNotifications.METADATA_UPDATED) return;
-        ToastBatcher.showToast({ notification });
+        ToastBatcher.showToast({ notification, type: 'RAISE_HAND' });
         break;
       case HMSNotificationTypes.NAME_UPDATED:
         console.log(notification.data.id + ' changed their name to ' + notification.data.name);
@@ -59,7 +82,7 @@ export function Notifications() {
                 <Button
                   onClick={() => {
                     ToastManager.removeToast(toastId);
-                    window.location.reload();
+                    navigate(`/${params.roomId}${params.role ? `/${params.role}` : ''}`);
                   }}
                 >
                   Rejoin
@@ -70,11 +93,7 @@ export function Notifications() {
           }
           // goto leave for terminal if any action is not performed within 2secs
           // if network is still unavailable going to preview will throw an error
-          setTimeout(() => {
-            const previewLocation = window.location.pathname.replace('meeting', 'leave');
-            ToastManager.clearAllToast();
-            navigate(previewLocation);
-          }, 2000);
+          redirectToLeave(1000);
           return;
         }
         // Autoplay error or user denied screen share (cancelled browser pop-up)
@@ -90,13 +109,11 @@ export function Notifications() {
         });
         break;
       case HMSNotificationTypes.ROLE_UPDATED:
-        if (notification.data.roleName === HLS_VIEWER_ROLE) {
-          return;
-        }
         if (notification.data?.isLocal) {
           ToastManager.addToast({
             title: `You are now a ${notification.data.roleName}`,
           });
+          updateRoomLayoutForRole(notification.data.roleName);
         }
         break;
       case HMSNotificationTypes.CHANGE_TRACK_STATE_REQUEST:
@@ -114,11 +131,7 @@ export function Notifications() {
           title: `${notification.message}. 
               ${notification.data.reason && `Reason: ${notification.data.reason}`}`,
         });
-        setTimeout(() => {
-          const leaveLocation = window.location.pathname.replace('meeting', 'leave');
-          navigate(leaveLocation);
-          ToastManager.clearAllToast();
-        }, 2000);
+        redirectToLeave(1000);
         break;
       case HMSNotificationTypes.DEVICE_CHANGE_UPDATE:
         ToastManager.addToast({
@@ -129,18 +142,21 @@ export function Notifications() {
         break;
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED, HLS_VIEWER_ROLE]);
+  }, [notification, subscribedNotifications.ERROR, subscribedNotifications.METADATA_UPDATED]);
+
+  if (isNotificationDisabled) {
+    return null;
+  }
 
   return (
     <>
-      {!isHeadless && <TrackUnmuteModal />}
-      {!isHeadless && <TrackBulkUnmuteModal />}
+      <TrackUnmuteModal />
+      <TrackBulkUnmuteModal />
       <TrackNotifications />
       <PeerNotifications />
       <ReconnectNotifications />
       <AutoplayBlockedModal />
       <PermissionErrorModal />
-      <MessageNotifications />
       <InitErrorModal notification={notification} />
     </>
   );

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

@@ -1,5 +1,11 @@
 import { useEffect } from 'react';
-import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
+import {
+  HMSNotificationTypes,
+  HMSRoomState,
+  selectRoomState,
+  useHMSNotifications,
+  useHMSStore,
+} from '@100mslive/react-sdk';
 import { ToastBatcher } from '../Toast/ToastBatcher';
 import { useSubscribedNotifications } from '../AppData/useUISettings';
 import { isInternalRole } from '../../common/utils';
@@ -15,10 +21,15 @@ export const PeerNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const isPeerJoinSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_JOINED);
   const isPeerLeftSubscribed = useSubscribedNotifications(SUBSCRIBED_NOTIFICATIONS.PEER_LEFT);
+  const roomState = useHMSStore(selectRoomState);
   useEffect(() => {
+    if (roomState !== HMSRoomState.Connected) {
+      return;
+    }
     if (!notification || (notification?.data?.roleName && isInternalRole(notification.data.roleName))) {
       return;
     }
+
     console.debug(`[${notification.type}]`, notification);
     switch (notification.type) {
       case HMSNotificationTypes.PEER_LIST:
@@ -39,8 +50,9 @@ export const PeerNotifications = () => {
       default:
         return;
     }
+
     ToastBatcher.showToast({ notification });
-  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed]);
+  }, [notification, isPeerJoinSubscribed, isPeerLeftSubscribed, roomState]);
 
   return null;
 };

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

@@ -2,8 +2,8 @@ import React, { useEffect, useState } from 'react';
 import { useMedia } from 'react-use';
 import { HMSNotificationTypes, useHMSNotifications } from '@100mslive/react-sdk';
 import { Button, config as cssConfig, Dialog, Flex, Text } from '../../../';
-import androidPermissionAlert from '../../../assets/android-perm-1.png';
-import iosPermissions from '../../../assets/ios-perm-0.png';
+import androidPermissionAlert from '../../images/android-perm-1.png';
+import iosPermissions from '../../images/ios-perm-0.png';
 import { isAndroid, isIOS } from '../../common/constants';
 
 export function PermissionErrorModal() {
@@ -47,11 +47,17 @@ export function PermissionErrorModal() {
               borderBottom: '1px solid $border_default',
             }}
           >
-            {isMobile && isIOS ? <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} /> : null}
+            {isMobile && isIOS ? (
+              <img style={{ maxWidth: '100%', maxHeight: '100%' }} src={iosPermissions} alt="iOS Permission flow" />
+            ) : null}
 
             {/* Images for android */}
             {isMobile && isAndroid ? (
-              <img src={androidPermissionAlert} style={{ maxWidth: '100%', maxHeight: '100%' }} />
+              <img
+                src={androidPermissionAlert}
+                style={{ maxWidth: '100%', maxHeight: '100%' }}
+                alt="Android Permission flow "
+              />
             ) : null}
 
             <Text variant="h6">We can't access your {deviceType}</Text>

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

@@ -11,7 +11,6 @@ const notificationTypes = [
 ];
 let notificationId = null;
 
-const isQA = process.env.REACT_APP_ENV === 'qa';
 export const ReconnectNotifications = () => {
   const notification = useHMSNotifications(notificationTypes);
   const [open, setOpen] = useState(false);
@@ -22,18 +21,13 @@ export const ReconnectNotifications = () => {
       notificationId = ToastManager.replaceToast(notificationId, ToastConfig.RECONNECTED.single());
       setOpen(false);
     } else if (notification?.type === HMSNotificationTypes.RECONNECTING) {
-      if (isQA) {
-        ToastManager.removeToast(notificationId);
-        setOpen(true);
-      } else {
-        notificationId = ToastManager.replaceToast(
-          notificationId,
-          ToastConfig.RECONNECTING.single(notification.data.message),
-        );
-      }
+      notificationId = ToastManager.replaceToast(
+        notificationId,
+        ToastConfig.RECONNECTING.single(notification.data.message),
+      );
     }
   }, [notification]);
-  if (!open || !isQA) return null;
+  if (!open) return null;
   return (
     <Dialog.Root open={open} modal={true}>
       <Dialog.Portal container={document.getElementById('conferencing')}>

package/src/Prebuilt/components/PIP/PIPComponent.jsx

@@ -1,31 +1,20 @@
 import React, { useCallback, useEffect, useState } from 'react';
-import {
-  selectLocalPeerRoleName,
-  selectPeers,
-  selectTracksMap,
-  useHMSActions,
-  useHMSStore,
-  useHMSVanillaStore,
-} from '@100mslive/react-sdk';
+import { selectPeers, selectTracksMap, useHMSActions, useHMSStore, useHMSVanillaStore } from '@100mslive/react-sdk';
 import { PipIcon } from '@100mslive/react-icons';
 import { Flex, Tooltip } from '../../../';
 import IconButton from '../../IconButton';
 import { PictureInPicture } from './PIPManager';
 import { MediaSession } from './SetupMediaSession';
 import { usePinnedTrack } from '../AppData/useUISettings';
-import { useIsFeatureEnabled } from '../hooks/useFeatures';
-import { DEFAULT_HLS_VIEWER_ROLE, FEATURE_LIST } from '../../common/constants';
 
 /**
  * shows a button which when clicked shows some videos in PIP, clicking
  * again turns it off.
  */
 const PIPComponent = ({ content = null }) => {
-  const localPeerRole = useHMSStore(selectLocalPeerRoleName);
   const [isPipOn, setIsPipOn] = useState(PictureInPicture.isOn());
   const hmsActions = useHMSActions();
   const store = useHMSVanillaStore();
-  const isFeatureEnabled = useIsFeatureEnabled(FEATURE_LIST.PICTURE_IN_PICTURE);
 
   const onPipToggle = useCallback(() => {
     if (!isPipOn) {
@@ -36,7 +25,7 @@ const PIPComponent = ({ content = null }) => {
     }
   }, [hmsActions, isPipOn, store]);
 
-  if (!PictureInPicture.isSupported() || localPeerRole === DEFAULT_HLS_VIEWER_ROLE || !isFeatureEnabled) {
+  if (!PictureInPicture.isSupported()) {
     return null;
   }
   return (
@@ -66,8 +55,8 @@ export const ActivatedPIP = () => {
   const pinnedTrack = usePinnedTrack();
 
   useEffect(() => {
-    PictureInPicture.listenToStateChange(isPipOn => {
-      if (!isPipOn) {
+    function updatePIP() {
+      if (!PictureInPicture.isOn()) {
         return;
       }
       let pipPeers = storePeers;
@@ -77,7 +66,9 @@ export const ActivatedPIP = () => {
       PictureInPicture.updatePeersAndTracks(pipPeers, tracksMap).catch(err => {
         console.error('error in updating pip', err);
       });
-    });
+    }
+    PictureInPicture.listenToStateChange(updatePIP);
+    updatePIP();
   }, [storePeers, tracksMap, pinnedTrack]);
 
   return <></>;

package/src/Prebuilt/components/PIP/PIPManager.js

@@ -107,6 +107,7 @@ class PipManager {
     this.pipVideo?.removeEventListener(LEAVE_EVENT_NAME, this.stop);
     if (this.timeoutRef) {
       workerTimers.clearTimeout(this.timeoutRef);
+      this.timeoutRef = null;
     }
     if (this.isOn()) {
       this.exitPIP();

package/src/Prebuilt/components/Pagination.tsx

@@ -0,0 +1,60 @@
+import React, { useEffect } from 'react';
+import { ChevronLeftIcon, ChevronRightIcon } from '@100mslive/react-icons';
+import { StyledPagination } from '../../Pagination';
+
+export const Pagination = ({
+  page,
+  onPageChange,
+  numPages,
+}: {
+  page: number;
+  onPageChange: (page: number) => void;
+  numPages: number;
+}) => {
+  const disableLeft = page === 0;
+  const disableRight = page === numPages - 1;
+  const nextPage = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    onPageChange(Math.min(page + 1, numPages - 1));
+  };
+  const prevPage = (e: React.SyntheticEvent) => {
+    e.stopPropagation();
+    onPageChange(Math.max(page - 1, 0));
+  };
+
+  useEffect(() => {
+    // currentPageIndex should not exceed pages length
+    if (page >= numPages) {
+      onPageChange(Math.max(0, numPages - 1));
+    }
+  }, [numPages, onPageChange, page]);
+
+  if (numPages <= 1) {
+    return null;
+  }
+
+  return (
+    <StyledPagination.Root css={{ flexShrink: 0 }}>
+      <StyledPagination.Chevron disabled={disableLeft} onClick={prevPage}>
+        <ChevronLeftIcon width={16} height={16} style={{ cursor: disableLeft ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+      {numPages <= 5 ? (
+        <StyledPagination.Dots>
+          {[...Array(numPages)].map((_, i) => (
+            <StyledPagination.Dot
+              key={i}
+              active={page === i}
+              onClick={e => {
+                e.stopPropagation();
+                onPageChange(i);
+              }}
+            />
+          ))}
+        </StyledPagination.Dots>
+      ) : null}
+      <StyledPagination.Chevron disabled={disableRight} onClick={nextPage}>
+        <ChevronRightIcon width={16} height={16} style={{ cursor: disableRight ? 'not-allowed' : 'pointer' }} />
+      </StyledPagination.Chevron>
+    </StyledPagination.Root>
+  );
+};