@100mslive/roomkit-react 0.1.14 → 0.1.16

package/src/Prebuilt/components/Chat/PinnedMessage.tsx

@@ -67,7 +67,6 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
         />
       ) : null}
       <Flex
-        title={pinnedMessages[pinnedMessageIndex]?.text}
         css={{
           p: '$4',
           color: '$on_surface_medium',
@@ -95,7 +94,12 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
             },
           }}
         >
-          <Text variant="sm" css={{ color: '$on_surface_medium' }} {...swipeHandlers}>
+          <Text
+            variant="sm"
+            css={{ color: '$on_surface_medium' }}
+            {...swipeHandlers}
+            title={pinnedMessages[pinnedMessageIndex]?.text}
+          >
             <AnnotisedMessage
               message={`${currentPinnedMessage.slice(
                 0,
@@ -123,6 +127,7 @@ export const PinnedMessage = ({ clearPinnedMessage }: { clearPinnedMessage: (ind
               '&:hover .hide-on-hover': { display: 'none !important' },
               '&:hover .show-on-hover': { display: 'block !important' },
             }}
+            title="Unpin Message"
           >
             <UnpinIcon className="show-on-hover" style={{ display: 'none' }} height={20} width={20} />
             <PinIcon className="hide-on-hover" style={{ display: 'block' }} height={20} width={20} />

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -21,6 +21,7 @@ import { VideoStreamingSection } from '../layouts/VideoStreamingSection';
 // @ts-ignore: No implicit Any
 import FullPageProgress from './FullPageProgress';
 import { Header } from './Header';
+import { PreviousRoleInMetadata } from './PreviousRoleInMetadata';
 import {
   useRoomLayoutConferencingScreen,
   useRoomLayoutPreviewScreen,
@@ -175,6 +176,7 @@ export const ConferenceScreen = () => {
         <RoleChangeRequestModal />
         <HLSFailureModal />
         <ActivatedPIP />
+        <PreviousRoleInMetadata />
       </Flex>
     </>
   );

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { selectUnreadHMSMessagesCount, useHMSStore } from '@100mslive/react-sdk';
-import { ChatIcon, ChatUnreadIcon } from '@100mslive/react-icons';
-import { Tooltip } from '../../..';
+import { ChatIcon } from '@100mslive/react-icons';
+import { Box, Flex, Text, Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 // @ts-ignore: No implicit Any
@@ -15,10 +15,33 @@ export const ChatToggle = () => {
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
 
   return (
-    <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-      <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
-        {countUnreadMessages === 0 ? <ChatIcon /> : <ChatUnreadIcon data-testid="chat_unread_btn" />}
-      </IconButton>
-    </Tooltip>
+    <Box
+      css={{
+        position: 'relative',
+      }}
+    >
+      <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
+        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
+          <ChatIcon />
+        </IconButton>
+      </Tooltip>
+      {countUnreadMessages > 0 && (
+        <Flex
+          css={{
+            height: '$8',
+            p: '$4 4.5px',
+            justifyContent: 'center',
+            alignItems: 'center',
+            position: 'absolute',
+            top: '-$4',
+            right: '-$4',
+            borderRadius: '$space$14',
+            background: '$primary_default',
+          }}
+        >
+          <Text variant="overline">{countUnreadMessages > 99 ? '99+' : countUnreadMessages}</Text>
+        </Flex>
+      )}
+    </Box>
   );
 };

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

@@ -20,9 +20,9 @@ import { ScreenshareToggle } from '../ScreenShareToggle';
 import { VBToggle } from '../VirtualBackground/VBToggle';
 // @ts-ignore: No implicit Any
 import { ChatToggle } from './ChatToggle';
-// @ts-ignore: No implicit Any
 import { ParticipantCount } from './ParticipantList';
 import { PollsToggle } from './PollsToggle';
+import { WhiteboardToggle } from './WhiteboardToggle';
 import { ConferencingScreenElements } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
 // @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
@@ -105,6 +105,7 @@ export const Footer = ({
         )}
       </AppFooter.Center>
       <AppFooter.Right>
+        <WhiteboardToggle />
         {showPolls && <PollsToggle />}
         {!isMobile && elements?.chat && <ChatToggle />}
         {elements?.participant_list && <ParticipantCount />}

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

@@ -8,7 +8,6 @@ import { IconButton } from '../../../IconButton';
 import { Box, Flex } from '../../../Layout';
 import { Loading } from '../../../Loading';
 import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
 import { Participant, ParticipantSearch } from './ParticipantList';
 import { ItemData, itemKey, ROW_HEIGHT } from './RoleAccordion';
 // @ts-ignore: No implicit Any

package/src/Prebuilt/components/Footer/{ParticipantList.jsx → ParticipantList.tsx}

@@ -1,6 +1,8 @@
 import React, { Fragment, useCallback, useState } from 'react';
 import { useDebounce, useMedia } from 'react-use';
 import {
+  HMSPeer,
+  HMSRoleName,
   selectHandRaisedPeers,
   selectHasPeerHandRaised,
   selectIsLargeRoom,
@@ -12,39 +14,45 @@ import {
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
-import {
-  ChangeRoleIcon,
-  HandIcon,
-  MicOffIcon,
-  PeopleIcon,
-  PeopleRemoveIcon,
-  SearchIcon,
-  VerticalMenuIcon,
-} from '@100mslive/react-icons';
+import { ChangeRoleIcon, HandIcon, MicOffIcon, PeopleIcon, SearchIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Accordion, Box, config as cssConfig, Dropdown, Flex, Input, Text, textEllipsis } from '../../..';
+// @ts-ignore: No implicit Any
 import IconButton from '../../IconButton';
 import { ConnectionIndicator } from '../Connection/ConnectionIndicator';
-import { ToastManager } from '../Toast/ToastManager';
+import { RemoveParticipant } from '../RemoveParticipant';
 import { RoleAccordion } from './RoleAccordion';
-import { useRoomLayoutConferencingScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+import {
+  ConferencingScreenElements,
+  useRoomLayoutConferencingScreen,
+} from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane';
 import { useParticipants } from '../../common/hooks';
+// @ts-ignore: No implicit Any
 import { getFormattedCount } from '../../common/utils';
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ParticipantList = ({ offStageRoles = [], onActive }) => {
-  const [filter, setFilter] = useState();
+export const ParticipantList = ({
+  offStageRoles = [],
+  onActive,
+}: {
+  offStageRoles: HMSRoleName[];
+  onActive: (role: string) => void;
+}) => {
+  const [filter, setFilter] = useState<{ search?: string } | undefined>();
   const { participants, isConnected, peerCount } = useParticipants(filter);
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
-  const peersOrderedByRoles = {};
+  const peersOrderedByRoles: Record<string, HMSPeer[]> = {};
 
   const handRaisedPeers = useHMSStore(selectHandRaisedPeers);
 
   participants.forEach(participant => {
-    if (peersOrderedByRoles[participant.roleName] === undefined) {
-      peersOrderedByRoles[participant.roleName] = [];
+    if (participant.roleName) {
+      if (peersOrderedByRoles[participant.roleName] === undefined) {
+        peersOrderedByRoles[participant.roleName] = [];
+      }
+      peersOrderedByRoles[participant.roleName].push(participant);
     }
-    peersOrderedByRoles[participant.roleName].push(participant);
   });
 
   // prefill off_stage roles of large rooms to load more peers
@@ -56,7 +64,7 @@ export const ParticipantList = ({ offStageRoles = [], onActive }) => {
     });
   }
 
-  const onSearch = useCallback(value => {
+  const onSearch = useCallback((value: string) => {
     setFilter(filterValue => {
       if (!filterValue) {
         filterValue = {};
@@ -71,22 +79,34 @@ export const ParticipantList = ({ offStageRoles = [], onActive }) => {
 
   return (
     <Fragment>
-      <Flex direction="column" css={{ size: '100%', gap: '$4' }}>
+      <Flex
+        direction="column"
+        css={{
+          size: '100%',
+          gap: '$4',
+        }}
+      >
         {!filter?.search && participants.length === 0 ? null : <ParticipantSearch onSearch={onSearch} inSidePane />}
-        {participants.length === 0 ? (
-          <Flex align="center" justify="center" css={{ w: '100%', p: '$8 0' }}>
-            <Text variant="sm">{!filter ? 'No participants' : 'No matching participants'}</Text>
-          </Flex>
-        ) : null}
         <VirtualizedParticipants
           peersOrderedByRoles={peersOrderedByRoles}
           handRaisedList={handRaisedPeers}
-          isConnected={isConnected}
+          isConnected={!!isConnected}
           filter={filter}
           offStageRoles={offStageRoles}
           isLargeRoom={isLargeRoom}
           onActive={onActive}
-        />
+        >
+          {participants.length === 0 ? (
+            <Flex
+              align="center"
+              justify="center"
+              className="emptyParticipants"
+              css={{ w: '100%', p: '$8 0', display: 'none' }}
+            >
+              <Text variant="sm">{!filter ? 'No participants' : 'No matching participants'}</Text>
+            </Flex>
+          ) : null}
+        </VirtualizedParticipants>
       </Flex>
     </Fragment>
   );
@@ -123,6 +143,44 @@ export const ParticipantCount = () => {
   );
 };
 
+export const Participant = ({
+  peer,
+  isConnected,
+  style,
+}: {
+  peer: HMSPeer;
+  isConnected: boolean;
+  style: React.CSSProperties;
+}) => {
+  const localPeerId = useHMSStore(selectLocalPeerID);
+  return (
+    <Flex
+      key={peer.id}
+      css={{
+        w: '100%',
+        p: '$4 $8',
+        pr: '$6',
+        h: '$16',
+        '&:hover .participant_item': { display: 'flex' },
+      }}
+      align="center"
+      justify="between"
+      data-testid={'participant_' + peer.name}
+      style={style}
+    >
+      <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 && peer.roleName ? (
+        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
+      ) : null}
+    </Flex>
+  );
+};
+
 const VirtualizedParticipants = ({
   peersOrderedByRoles = {},
   isConnected,
@@ -131,6 +189,16 @@ const VirtualizedParticipants = ({
   offStageRoles,
   isLargeRoom,
   onActive,
+  children,
+}: {
+  peersOrderedByRoles: Record<string, HMSPeer[]>;
+  isConnected: boolean;
+  filter: undefined | { search?: string };
+  handRaisedList: HMSPeer[];
+  offStageRoles: HMSRoleName[];
+  isLargeRoom: boolean;
+  onActive: (role: string) => void;
+  children: React.ReactNode;
 }) => {
   return (
     <Flex
@@ -142,6 +210,9 @@ const VirtualizedParticipants = ({
         pr: '$10',
         mr: '-$10',
         flex: '1 1 0',
+        '& > div:empty ~ .emptyParticipants': {
+          display: 'flex',
+        },
       }}
     >
       <Accordion.Root type={isLargeRoom ? 'single' : 'multiple'} collapsible>
@@ -167,36 +238,7 @@ const VirtualizedParticipants = ({
           />
         ))}
       </Accordion.Root>
-    </Flex>
-  );
-};
-
-export const Participant = ({ peer, isConnected, style }) => {
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  return (
-    <Flex
-      key={peer.id}
-      css={{
-        w: '100%',
-        p: '$4 $8',
-        pr: '$6',
-        h: '$16',
-        '&:hover .participant_item': { display: 'flex' },
-      }}
-      align="center"
-      justify="between"
-      data-testid={'participant_' + peer.name}
-      style={style}
-    >
-      <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 ? (
-        <ParticipantActions peerId={peer.id} isLocal={peer.id === localPeerId} role={peer.roleName} />
-      ) : null}
+      {children}
     </Flex>
   );
 };
@@ -204,78 +246,86 @@ export const Participant = ({ peer, isConnected, style }) => {
 /**
  * shows settings to change for a participant like changing their role
  */
-const ParticipantActions = React.memo(({ peerId, role, isLocal }) => {
-  const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
-  const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
-  const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
-  const { elements } = useRoomLayoutConferencingScreen();
-  const { on_stage_exp } = elements || {};
-  const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
-  const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
+const ParticipantActions = React.memo(
+  ({ peerId, role, isLocal }: { peerId: string; role: string; isLocal: boolean }) => {
+    const isHandRaised = useHMSStore(selectHasPeerHandRaised(peerId));
+    const canChangeRole = useHMSStore(selectPermissions)?.changeRole;
+    const canRemoveOthers = useHMSStore(selectPermissions)?.removeOthers;
+    const { elements } = useRoomLayoutConferencingScreen();
+    const { on_stage_exp } = elements || {};
+    const shouldShowMoreActions = (on_stage_exp && canChangeRole) || canRemoveOthers;
+    const isAudioMuted = !useHMSStore(selectIsPeerAudioEnabled(peerId));
 
-  return (
-    <Flex
-      align="center"
-      css={{
-        flexShrink: 0,
-        gap: '$8',
-      }}
-    >
-      <ConnectionIndicator peerId={peerId} />
-      {isHandRaised && (
-        <Flex
-          align="center"
-          justify="center"
-          css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        >
-          <HandIcon height={19} width={19} />
-        </Flex>
-      )}
-      {isAudioMuted ? (
-        <Flex
-          align="center"
-          justify="center"
-          css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
-        >
-          <MicOffIcon height={19} width={19} />
-        </Flex>
-      ) : null}
+    return (
+      <Flex
+        align="center"
+        css={{
+          flexShrink: 0,
+          gap: '$8',
+        }}
+      >
+        <ConnectionIndicator peerId={peerId} />
+        {isHandRaised && (
+          <Flex
+            align="center"
+            justify="center"
+            css={{ p: '$1', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+          >
+            <HandIcon height={19} width={19} />
+          </Flex>
+        )}
+        {isAudioMuted ? (
+          <Flex
+            align="center"
+            justify="center"
+            css={{ p: '$2', c: '$on_surface_high', bg: '$surface_bright', borderRadius: '$round' }}
+          >
+            <MicOffIcon height={19} width={19} />
+          </Flex>
+        ) : null}
 
-      {shouldShowMoreActions && !isLocal ? (
-        <ParticipantMoreActions
-          peerId={peerId}
-          role={role}
-          elements={elements}
-          canChangeRole={canChangeRole}
-          canRemoveOthers={canRemoveOthers}
-        />
-      ) : null}
-    </Flex>
-  );
-});
+        {shouldShowMoreActions && !isLocal ? (
+          <ParticipantMoreActions peerId={peerId} role={role} elements={elements} canChangeRole={!!canChangeRole} />
+        ) : null}
+      </Flex>
+    );
+  },
+);
 
-const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemoveOthers }) => {
+const ParticipantMoreActions = ({
+  peerId,
+  role,
+  elements,
+  canChangeRole,
+}: {
+  peerId: string;
+  role: string;
+  canChangeRole: boolean;
+  elements: ConferencingScreenElements;
+}) => {
   const hmsActions = useHMSActions();
   const {
     bring_to_stage_label,
     remove_from_stage_label,
     on_stage_role,
     off_stage_roles = [],
+    skip_preview_for_role_change = false,
   } = elements.on_stage_exp || {};
   const isInStage = role === on_stage_role;
   const shouldShowStageRoleChange =
     canChangeRole &&
     ((isInStage && remove_from_stage_label) || (off_stage_roles?.includes(role) && bring_to_stage_label));
   const prevRole = useHMSStore(selectPeerMetadata(peerId))?.prevRole;
-  const localPeerId = useHMSStore(selectLocalPeerID);
-  const isLocal = localPeerId === peerId;
   const [open, setOpen] = useState(false);
 
   const handleStageAction = async () => {
     if (isInStage) {
       prevRole && hmsActions.changeRoleOfPeer(peerId, prevRole, true);
-    } else {
-      await hmsActions.changeRoleOfPeer(peerId, on_stage_role);
+    } else if (on_stage_role) {
+      await hmsActions.changeRoleOfPeer(peerId, on_stage_role, skip_preview_for_role_change);
+      if (skip_preview_for_role_change) {
+        await hmsActions.lowerRemotePeerHand(peerId);
+      }
     }
     setOpen(false);
   };
@@ -315,30 +365,22 @@ const ParticipantMoreActions = ({ peerId, role, elements, canChangeRole, canRemo
             </Dropdown.Item>
           ) : null}
 
-          {!isLocal && canRemoveOthers && (
-            <Dropdown.Item
-              css={{ color: '$alert_error_default', bg: '$surface_default' }}
-              onClick={async () => {
-                try {
-                  await hmsActions.removePeer(peerId, '');
-                } catch (error) {
-                  ToastManager.addToast({ title: error.message, variant: 'error' });
-                }
-              }}
-            >
-              <PeopleRemoveIcon />
-              <Text variant="sm" css={{ ml: '$4', color: 'inherit', fontWeight: '$semiBold' }}>
-                Remove Participant
-              </Text>
-            </Dropdown.Item>
-          )}
+          <RemoveParticipant peerId={peerId} />
         </Dropdown.Content>
       </Dropdown.Portal>
     </Dropdown.Root>
   );
 };
 
-export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false }) => {
+export const ParticipantSearch = ({
+  onSearch,
+  placeholder = 'Search for participants',
+  inSidePane = false,
+}: {
+  inSidePane?: boolean;
+  placeholder?: string;
+  onSearch: (val: string) => void;
+}) => {
   const [value, setValue] = React.useState('');
   const isMobile = useMedia(cssConfig.media.md);
 
@@ -364,7 +406,7 @@ export const ParticipantSearch = ({ onSearch, placeholder, inSidePane = false })
       <SearchIcon style={{ position: 'absolute', left: '0.5rem' }} />
       <Input
         type="text"
-        placeholder={placeholder || 'Search for participants'}
+        placeholder={placeholder}
         css={{ w: '100%', p: '$6', pl: '$14', bg: inSidePane ? '$surface_default' : '$surface_dim' }}
         value={value}
         onKeyDown={event => {

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

@@ -6,7 +6,6 @@ import { ChevronRightIcon } from '@100mslive/react-icons';
 import { Accordion } from '../../../Accordion';
 import { Flex } from '../../../Layout';
 import { Text } from '../../../Text';
-// @ts-ignore: No implicit Any
 import { Participant } from './ParticipantList';
 import { RoleOptions } from './RoleOptions';
 // @ts-ignore: No implicit Any
@@ -24,9 +23,18 @@ export function itemKey(index: number, data: ItemData) {
   return data.peerList[index]?.id;
 }
 
-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} />;
-});
+export const VirtualizedParticipantItem = React.memo(
+  ({ index, data, style }: { index: number; data: ItemData; style: React.CSSProperties }) => {
+    return (
+      <Participant
+        key={data.peerList[index].id}
+        peer={data.peerList[index]}
+        isConnected={data.isConnected}
+        style={style}
+      />
+    );
+  },
+);
 
 export const RoleAccordion = ({
   peerList = [],
@@ -39,15 +47,22 @@ export const RoleAccordion = ({
 }: ItemData & {
   roleName: string;
   isHandRaisedAccordion?: boolean;
-  filter?: { search: string };
+  filter?: { search?: string };
   offStageRoles: string[];
   onActive?: (role: string) => void;
 }) => {
   const [ref, { width }] = useMeasure<HTMLDivElement>();
-  const showAcordion = filter?.search ? peerList.some(peer => peer.name.toLowerCase().includes(filter.search)) : true;
   const isLargeRoom = useHMSStore(selectIsLargeRoom);
   const { peers, total, loadPeers } = usePaginatedParticipants({ role: roleName, limit: 10 });
   const isOffStageRole = roleName && offStageRoles.includes(roleName);
+  let peersInAccordion = peerList;
+  // for large rooms, peer list would be empty
+  if (isOffStageRole && isLargeRoom) {
+    peersInAccordion = peers;
+    if (filter?.search) {
+      peersInAccordion = peersInAccordion.filter(peer => peer.name.toLowerCase().includes(filter.search || ''));
+    }
+  }
 
   useEffect(() => {
     if (!isOffStageRole || !isLargeRoom) {
@@ -60,17 +75,12 @@ export const RoleAccordion = ({
     return () => clearInterval(interval);
   }, [isOffStageRole, isLargeRoom]); //eslint-disable-line
 
-  if (!showAcordion || (isHandRaisedAccordion && filter?.search) || (peerList.length === 0 && filter?.search)) {
+  if (peersInAccordion.length === 0 || (isHandRaisedAccordion && filter?.search)) {
     return null;
   }
 
-  const peersInAccordion = isOffStageRole && isLargeRoom ? peers : peerList;
   const height = ROW_HEIGHT * peersInAccordion.length;
-  const hasNext = total > peersInAccordion.length;
-
-  if (peersInAccordion.length === 0) {
-    return null;
-  }
+  const hasNext = total > peersInAccordion.length && !filter?.search;
 
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { useWhiteboard } from '@100mslive/react-sdk';
+import { PencilDrawIcon } from '@100mslive/react-icons';
+import { Tooltip } from '../../..';
+// @ts-ignore: No implicit Any
+import IconButton from '../../IconButton';
+// @ts-ignore: No implicit Any
+import { ToastManager } from '../Toast/ToastManager';
+
+export const WhiteboardToggle = () => {
+  const { toggle, open, isOwner } = useWhiteboard();
+  if (!toggle) {
+    return null;
+  }
+
+  return (
+    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
+      <IconButton
+        onClick={async () => {
+          try {
+            await toggle();
+          } catch (error) {
+            ToastManager.addToast({ title: (error as Error).message, variant: 'error' });
+          }
+        }}
+        active={!open}
+        disabled={open && !isOwner}
+        data-testid="whiteboard_btn"
+      >
+        <PencilDrawIcon />
+      </IconButton>
+    </Tooltip>
+  );
+};

package/src/Prebuilt/components/HMSVideo/HLSCaptionSelector.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ClosedCaptionIcon, OpenCaptionIcon } from '@100mslive/react-icons';
+import { IconButton, Tooltip } from '../../../';
+
+export function HLSCaptionSelector({ isEnabled, onClick }: { isEnabled: boolean; onClick: () => void }) {
+  return (
+    <Tooltip title="Subtitles/closed captions" side="top">
+      <IconButton css={{ p: '$2' }} onClick={() => onClick()}>
+        {isEnabled ? <ClosedCaptionIcon width="20" height="20px" /> : <OpenCaptionIcon width="20" height="20px" />}
+      </IconButton>
+    </Tooltip>
+  );
+}