@100mslive/roomkit-react 0.3.3-alpha.3 → 0.3.3-alpha.4

package/package.json

@@ -10,7 +10,7 @@
     "prebuilt",
     "roomkit"
   ],
-  "version": "0.3.3-alpha.3",
+  "version": "0.3.3-alpha.4",
   "author": "100ms",
   "license": "MIT",
   "repository": {
@@ -82,12 +82,12 @@
     "react": ">=17.0.2 <19.0.0"
   },
   "dependencies": {
-    "@100mslive/hls-player": "0.3.3-alpha.3",
+    "@100mslive/hls-player": "0.3.3-alpha.4",
     "@100mslive/hms-noise-cancellation": "0.0.0-alpha.1",
-    "@100mslive/hms-virtual-background": "1.13.3-alpha.3",
-    "@100mslive/react-icons": "0.10.3-alpha.3",
-    "@100mslive/react-sdk": "0.10.3-alpha.3",
-    "@100mslive/types-prebuilt": "0.12.8",
+    "@100mslive/hms-virtual-background": "1.13.3-alpha.4",
+    "@100mslive/react-icons": "0.10.3-alpha.4",
+    "@100mslive/react-sdk": "0.10.3-alpha.4",
+    "@100mslive/types-prebuilt": "0.12.7",
     "@emoji-mart/data": "^1.0.6",
     "@emoji-mart/react": "^1.0.1",
     "@radix-ui/react-accordion": "1.0.0",
@@ -122,5 +122,5 @@
     "uuid": "^8.3.2",
     "worker-timers": "^7.0.40"
   },
-  "gitHead": "2f0dfb954601e7028cf0a4d9582a30be0fe726ca"
+  "gitHead": "f402d418c294acc6ce73bc81ab286d26431a6f53"
 }

package/src/Accordion/Accordion.tsx

@@ -64,15 +64,15 @@ export const AccordionRoot = StyledAccordion;
 export const AccordionItem = StyledItem;
 
 export const AccordionHeader: React.FC<
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
 > = React.forwardRef<
   HTMLButtonElement,
-  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS; chevronID?: string }>
->(({ children, iconStyles, css, chevronID, ...props }, forwardedRef) => (
+  PropsWithChildren<BaseAccordion.AccordionTriggerProps & { iconStyles?: CSS; css?: CSS }>
+>(({ children, iconStyles, css, ...props }, forwardedRef) => (
   <StyledHeader css={css}>
     <StyledTrigger {...props} ref={forwardedRef}>
       {children}
-      <StyledChevron data-testid={chevronID} aria-hidden css={iconStyles} />
+      <StyledChevron aria-hidden css={iconStyles} />
     </StyledTrigger>
   </StyledHeader>
 ));

package/src/IconButton/IconButton.tsx

@@ -25,14 +25,19 @@ export const IconButton = styled('button', {
   '&[disabled]': {
     opacity: 0.5,
     cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
   },
   '&:focus': {
     outline: 'none',
   },
   variants: {
     active: {
+      false: {
+        backgroundColor: '$secondary_dim',
+        color: '$on_primary_high',
+        '&:not([disabled]):hover': {
+          backgroundColor: '$secondary_default',
+        },
+      },
       true: {
         '&:not([disabled]):hover': {
           backgroundColor: '$on_surface_low',

package/src/Prebuilt/IconButton.tsx

@@ -7,18 +7,22 @@ const IconButton = styled(BaseIconButton, {
   border: '1px solid $border_bright',
   bg: '$background_dim',
   r: '$1',
-  '&[disabled]': {
-    opacity: 0.5,
-    cursor: 'not-allowed',
-    backgroundColor: '$secondary_dim',
-    color: '$on_primary_high',
-  },
   variants: {
     active: {
       true: {
         color: '$on_surface_high',
         backgroundColor: 'transparent',
       },
+      false: {
+        border: '1px solid transparent',
+        color: '$on_primary_high',
+      },
+    },
+    disabled: {
+      true: {
+        backgroundColor: '$surface_brighter',
+        color: '$on_surface_low',
+      },
     },
   },
 });

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

@@ -410,7 +410,6 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
     }, [blacklistedMessageIDs, messages]);
 
     const vanillaStore = useHMSVanillaStore();
-    const rerenderOnFirstMount = useRef(false);
 
     useEffect(() => {
       const unsubscribe = vanillaStore.subscribe(() => {
@@ -427,15 +426,6 @@ export const ChatBody = React.forwardRef<VariableSizeList, { scrollToBottom: (co
       return unsubscribe;
     }, [vanillaStore, listRef, scrollToBottom]);
 
-    useEffect(() => {
-      // @ts-ignore
-      if (filteredMessages.length > 0 && listRef?.current && !rerenderOnFirstMount.current) {
-        rerenderOnFirstMount.current = true;
-        // @ts-ignore
-        listRef.current.resetAfterIndex(0);
-      }
-    }, [listRef, filteredMessages]);
-
     return filteredMessages.length === 0 ? (
       <EmptyChat />
     ) : (

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

@@ -2,7 +2,7 @@ import React, { ReactNode, useCallback, useEffect, useRef, useState } from 'reac
 import { useMedia } from 'react-use';
 import data from '@emoji-mart/data';
 import Picker from '@emoji-mart/react';
-import { HMSException, selectLocalPeer, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
+import { HMSException, selectLocalPeer, useAVToggle, useHMSActions, useHMSStore } from '@100mslive/react-sdk';
 import { EmojiIcon, PauseCircleIcon, SendIcon, VerticalMenuIcon } from '@100mslive/react-icons';
 import { Box, config as cssConfig, Flex, IconButton as BaseIconButton, Popover, styled, Text } from '../../..';
 import { IconButton } from '../../../IconButton';
@@ -89,6 +89,8 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
   const defaultSelection = useDefaultChatSelection();
   const selection = selectedPeer.name || selectedRole || defaultSelection;
   const isLocalPeerBlacklisted = useIsPeerBlacklisted({ local: true });
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isMwebHLSStream = useMobileHLSStream();
   const isLandscapeHLSStream = useLandscapeHLSStream();
 
@@ -273,7 +275,7 @@ export const ChatFooter = ({ onSend, children }: { onSend: (count: number) => vo
                 }}
                 gap="2"
               >
-                <RaiseHand css={{ bg: '$surface_default' }} />
+                {noAVPermissions ? <RaiseHand css={{ bg: '$surface_default' }} /> : null}
                 <MoreSettings elements={elements} screenType={screenType} />
               </Flex>
             </>

package/src/Prebuilt/components/ConferenceScreen.tsx

@@ -6,6 +6,7 @@ import {
   selectAppData,
   selectIsConnectedToRoom,
   selectRoomState,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
 } from '@100mslive/react-sdk';
@@ -53,6 +54,8 @@ export const ConferenceScreen = () => {
   const dropdownListRef = useRef<string[]>();
   const [isHLSStarted] = useSetAppDataByKey(APP_DATA.hlsStarted);
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   // using it in hls stream to show action button when chat is disabled
   const showChat = !!screenProps.elements?.chat;
   const autoRoomJoined = useRef(isPreviewScreenEnabled);
@@ -199,7 +202,7 @@ export const ConferenceScreen = () => {
             justify="end"
             gap="2"
           >
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             <MoreSettings elements={screenProps.elements} screenType={screenProps.screenType} />
             <Box
               css={{

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

@@ -9,7 +9,7 @@ import { useIsSidepaneTypeOpen, useSidepaneToggle } from '../AppData/useSidepane
 // @ts-ignore: No implicit Any
 import { SIDE_PANE_OPTIONS } from '../../common/constants';
 
-export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
+export const ChatToggle = () => {
   const countUnreadMessages = useHMSStore(selectUnreadHMSMessagesCount);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
@@ -21,7 +21,7 @@ export const ChatToggle = ({ onClick }: { onClick?: () => void }) => {
       }}
     >
       <Tooltip key="chat" title={`${isChatOpen ? 'Close' : 'Open'} chat`}>
-        <IconButton onClick={() => (onClick ? onClick() : toggleChat())} active={!isChatOpen} data-testid="chat_btn">
+        <IconButton onClick={toggleChat} active={!isChatOpen} data-testid="chat_btn">
           <ChatIcon />
         </IconButton>
       </Tooltip>

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

@@ -2,6 +2,7 @@ import React, { useEffect } from 'react';
 import { useMedia } from 'react-use';
 import { ConferencingScreen } from '@100mslive/types-prebuilt';
 import { Chat_ChatState } from '@100mslive/types-prebuilt/elements/chat';
+import { useAVToggle } from '@100mslive/react-sdk';
 import { config as cssConfig, Footer as AppFooter } from '../../..';
 // @ts-ignore: No implicit Any
 import { AudioVideoToggle } from '../AudioVideoToggle';
@@ -40,6 +41,8 @@ export const Footer = ({
   const isOverlayChat = !!elements?.chat?.is_overlay;
   const openByDefault = elements?.chat?.initial_state === Chat_ChatState.CHAT_STATE_OPEN;
 
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const isChatOpen = useIsSidepaneTypeOpen(SIDE_PANE_OPTIONS.CHAT);
   const toggleChat = useSidepaneToggle(SIDE_PANE_OPTIONS.CHAT);
   const { showPolls } = useShowPolls();
@@ -87,7 +90,7 @@ export const Footer = ({
       >
         {isMobile ? (
           <>
-            <RaiseHand />
+            {noAVPermissions ? <RaiseHand /> : null}
             {elements?.chat && <ChatToggle />}
             <MoreSettings elements={elements} screenType={screenType} />
           </>

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

@@ -324,15 +324,12 @@ const HandRaisedAccordionParticipantActions = ({ peerId, role }: { peerId: strin
     peerId,
     role,
   });
-  if (!shouldShowStageRoleChange) {
-    return null;
-  }
   return (
     <>
       <Button variant="standard" css={quickActionStyle} onClick={lowerPeerHand}>
         <CrossIcon height={18} width={18} />
       </Button>
-      {!isInStage && (
+      {shouldShowStageRoleChange && !isInStage && (
         <Button variant="primary" onClick={handleStageAction} css={quickActionStyle}>
           <AddIcon height={18} width={18} />
         </Button>

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

@@ -93,7 +93,6 @@ export const RoleAccordion = ({
   return (
     <Accordion.Item value={roleName} css={{ '&:hover .role_actions': { visibility: 'visible' }, mb: '$8' }} ref={ref}>
       <Accordion.Header
-        chevronID={`role_accordion_btn_${roleName}`}
         iconStyles={{ c: '$on_surface_high' }}
         css={{
           textTransform: 'capitalize',
@@ -149,17 +148,18 @@ export const RoleAccordion = ({
             <ChevronRightIcon />
           </Flex>
         ) : null}
-        {isHandRaisedAccordion && canBringToStage && (
+        {isHandRaisedAccordion && (
           <>
             <HorizontalDivider />
             <Flex css={{ w: '100%', p: '$6', gap: '$4' }} justify="center">
               <Button variant="standard" onClick={lowerAllHands} icon css={{ pl: '$2' }}>
                 <CrossIcon /> Lower all hands
               </Button>
-
-              <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
-                <AddIcon /> {bring_to_stage_label}
-              </Button>
+              {canBringToStage && (
+                <Button onClick={bringAllToStage} icon css={{ pl: '$2' }}>
+                  <AddIcon /> {bring_to_stage_label}
+                </Button>
+              )}
             </Flex>
           </>
         )}

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
+import { useWhiteboard } from '@100mslive/react-sdk';
 import { PencilDrawIcon } from '@100mslive/react-icons';
 import { Tooltip } from '../../..';
 // @ts-ignore: No implicit Any
@@ -9,28 +9,14 @@ import { ToastManager } from '../Toast/ToastManager';
 
 export const WhiteboardToggle = () => {
   const { toggle, open, isOwner } = useWhiteboard();
-  const { screenSharingPeerId, amIScreenSharing } = useScreenShare();
-  const remoteScreenShare = screenSharingPeerId && !amIScreenSharing;
-  const disabled = remoteScreenShare || (open && !isOwner);
-
   if (!toggle) {
     return null;
   }
 
   return (
-    <Tooltip
-      key="whiteboard"
-      title={
-        remoteScreenShare
-          ? 'Cannot open whiteboard when viewing a shared screen'
-          : `${open ? 'Close' : 'Open'} Whiteboard`
-      }
-    >
+    <Tooltip key="whiteboard" title={`${open ? 'Close' : 'Open'} Whiteboard`}>
       <IconButton
         onClick={async () => {
-          if (disabled) {
-            return;
-          }
           try {
             await toggle();
           } catch (error) {
@@ -38,7 +24,7 @@ export const WhiteboardToggle = () => {
           }
         }}
         active={!open}
-        disabled={disabled}
+        disabled={open && !isOwner}
         data-testid="whiteboard_btn"
       >
         <PencilDrawIcon />

package/src/Prebuilt/components/HMSVideo/HMSVideo.jsx

@@ -9,7 +9,6 @@ export const HMSVideo = forwardRef(({ children, ...props }, videoRef) => {
         size: '100%',
         position: 'relative',
         justifyContent: 'center',
-        transition: 'all 0.3s ease-in-out',
         '@md': {
           height: 'auto',
           '& video': {

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

@@ -9,8 +9,8 @@ export const PlayPauseButton = ({
   height = 20,
 }: {
   isPaused: boolean;
-  width?: number;
-  height?: number;
+  width: number;
+  height: number;
 }) => {
   const { hlsPlayer } = useHMSPlayerContext();
   const onClick = async (event: MouseEvent) => {

package/src/Prebuilt/components/HMSVideo/{SeekControl.tsx → SeekControls.tsx}

@@ -1,7 +1,7 @@
 import React, { MouseEventHandler } from 'react';
 import { IconButton, Tooltip } from '../../..';
 
-export const SeekControl = ({
+export const SeekControls = ({
   title,
   onClick,
   children,
@@ -9,7 +9,7 @@ export const SeekControl = ({
 }: {
   title: string;
   onClick?: MouseEventHandler<HTMLButtonElement>;
-  css?: any;
+  css: any;
   children: React.ReactNode;
 }) => {
   return (

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

@@ -25,12 +25,8 @@ export const VideoProgress = ({
     if (videoEl.buffered.length > 0) {
       bufferProgress = Math.floor(getPercentage(videoEl.buffered?.end(0), duration));
     }
-    if (!isNaN(videoProgress)) {
-      setVideoProgress(videoProgress);
-    }
-    if (!isNaN(bufferProgress)) {
-      setBufferProgress(bufferProgress);
-    }
+    setVideoProgress(isNaN(videoProgress) ? 0 : videoProgress);
+    setBufferProgress(isNaN(bufferProgress) ? 0 : bufferProgress);
   }, [videoEl]);
   const timeupdateHandler = useCallback(() => {
     if (!videoEl || seekProgress) {
@@ -46,7 +42,7 @@ export const VideoProgress = ({
     return function cleanup() {
       videoEl?.removeEventListener('timeupdate', timeupdateHandler);
     };
-  }, [setProgress, timeupdateHandler, videoEl]);
+  }, [timeupdateHandler, videoEl]);
 
   const onProgress = (progress: number[]) => {
     const progress1 = Math.floor(getPercentage(progress[0], 100));

package/src/Prebuilt/components/HMSVideo/index.ts

@@ -2,13 +2,15 @@
 import { LeftControls, RightControls, VideoControls } from './Controls';
 // @ts-ignore
 import { HMSVideo } from './HMSVideo';
-import { PlayPauseSeekControls, PlayPauseSeekOverlayControls } from './PlayPauseSeekControls';
+import { PlayPauseButton } from './PlayPauseButton';
+import { SeekControls } from './SeekControls';
 import { VideoProgress } from './VideoProgress';
 import { VideoTime } from './VideoTime';
 import { VolumeControl } from './VolumeControl';
 
 export const HMSVideoPlayer = {
   Root: HMSVideo,
+  PlayPauseButton: PlayPauseButton,
   Progress: VideoProgress,
   Duration: VideoTime,
   Volume: VolumeControl,
@@ -17,8 +19,5 @@ export const HMSVideoPlayer = {
     Left: LeftControls,
     Right: RightControls,
   },
-  PlayPauseSeekControls: {
-    Overlay: PlayPauseSeekOverlayControls,
-    Button: PlayPauseSeekControls,
-  },
+  Seeker: SeekControls,
 };

package/src/Prebuilt/components/IconButtonWithOptions/IconButtonWithOptions.tsx

@@ -25,9 +25,9 @@ const IconSection = styled(IconButton, {
   p: '$4',
   r: '$1',
   bg: 'transparent',
-  borderTopRightRadius: '0 !important',
+  borderTopRightRadius: 0,
   borderColor: '$border_bright',
-  borderBottomRightRadius: '0 !important',
+  borderBottomRightRadius: 0,
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,
@@ -41,8 +41,8 @@ const IconSection = styled(IconButton, {
     ...variants,
     hideOptions: {
       true: {
-        borderTopRightRadius: '$1 !important',
-        borderBottomRightRadius: '$1 !important',
+        borderTopRightRadius: '$1',
+        borderBottomRightRadius: '$1',
       },
     },
   },
@@ -53,10 +53,10 @@ const OptionsSection = styled(IconButton, {
   h: '$14',
   p: '$4 $2',
   r: '$1',
-  borderTopLeftRadius: '0 !important',
+  borderTopLeftRadius: 0,
   borderColor: '$border_bright',
-  borderBottomLeftRadius: '0 !important',
-  borderLeftWidth: '0 !important',
+  borderBottomLeftRadius: 0,
+  borderLeftWidth: 0,
   position: 'relative',
   '&:not([disabled]):focus-visible': {
     zIndex: 1,

package/src/Prebuilt/components/MoreSettings/SplitComponents/DesktopOptions.tsx

@@ -29,6 +29,7 @@ import { FullScreenItem } from '../FullScreenItem';
 import { MuteAllModal } from '../MuteAllModal';
 // @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 { APP_DATA, isMacOS } from '../../../common/constants';

package/src/Prebuilt/components/MoreSettings/SplitComponents/MwebOptions.tsx

@@ -6,6 +6,7 @@ import {
   selectIsConnectedToRoom,
   selectPeerCount,
   selectPermissions,
+  useAVToggle,
   useHMSActions,
   useHMSStore,
   useRecordingStreaming,
@@ -50,6 +51,7 @@ import { usePollViewToggle, useSidepaneToggle } from '../../AppData/useSidepane'
 import { useShowPolls } from '../../AppData/useUISettings';
 // @ts-ignore: No implicit any
 import { useDropdownList } from '../../hooks/useDropdownList';
+// @ts-ignore: No implicit any
 import { useMyMetadata } from '../../hooks/useMetadata';
 import { useUnreadPollQuizPresent } from '../../hooks/useUnreadPollQuizPresent';
 import { useLandscapeHLSStream, useMobileHLSStream } from '../../../common/hooks';
@@ -93,6 +95,8 @@ export const MwebOptions = ({
   const peerCount = useHMSStore(selectPeerCount);
   const emojiCardRef = useRef(null);
   const { isBRBOn, toggleBRB, isHandRaised, toggleHandRaise } = useMyMetadata();
+  const { toggleAudio, toggleVideo } = useAVToggle();
+  const noAVPermissions = !(toggleAudio || toggleVideo);
   const { unreadPollQuiz, setUnreadPollQuiz } = useUnreadPollQuizPresent();
   const { title, description } = useRoomLayoutHeader();
   const toggleDetailsSheet = useSheetToggle(SHEET_OPTIONS.ROOM_DETAILS);
@@ -171,7 +175,7 @@ export const MwebOptions = ({
               </ActionTile.Root>
             )}
 
-            {elements.hand_raise ? (
+            {!noAVPermissions ? (
               <ActionTile.Root
                 active={isHandRaised}
                 onClick={() => {

package/src/Prebuilt/components/PreviousRoleInMetadata.tsx

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { selectLocalPeerRoleName, useHMSVanillaStore } from '@100mslive/react-sdk';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const PreviousRoleInMetadata = () => {

package/src/Prebuilt/components/RaiseHand.tsx

@@ -4,17 +4,11 @@ import { CSS } from '../../Theme';
 import { Tooltip } from '../../Tooltip';
 // @ts-ignore: No implicit Any
 import IconButton from '../IconButton';
-import { useRoomLayoutConferencingScreen } from '../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from './hooks/useMetadata';
 
 export const RaiseHand = ({ css }: { css?: CSS }) => {
   const { isHandRaised, toggleHandRaise } = useMyMetadata();
-  const { elements } = useRoomLayoutConferencingScreen();
-
-  if (!elements.hand_raise) {
-    return null;
-  }
-
   return (
     <Tooltip title={isHandRaised ? 'Lower hand' : 'Raise hand'}>
       <IconButton

package/src/Prebuilt/components/RoleChangeRequest/RoleChangeRequestModal.tsx

@@ -13,6 +13,7 @@ import { Flex, Text } from '../../..';
 import { PreviewControls, PreviewTile } from '../Preview/PreviewJoin';
 import { RequestPrompt } from './RequestPrompt';
 import { useRoomLayoutPreviewScreen } from '../../provider/roomLayoutProvider/hooks/useRoomLayoutScreen';
+// @ts-ignore: No implicit Any
 import { useMyMetadata } from '../hooks/useMetadata';
 // @ts-ignore: No implicit Any
 import { ROLE_CHANGE_DECLINED } from '../../common/constants';

package/src/Prebuilt/components/VideoLayouts/GridLayout.tsx

@@ -5,14 +5,12 @@ import {
   selectLocalPeerRoleName,
   selectPeers,
   selectPeerScreenSharing,
-  selectWhiteboard,
   useHMSStore,
   useHMSVanillaStore,
 } from '@100mslive/react-sdk';
 import { EqualProminence } from './EqualProminence';
 import { RoleProminence } from './RoleProminence';
 import { ScreenshareLayout } from './ScreenshareLayout';
-import { WhiteboardLayout } from './WhiteboardLayout';
 // @ts-ignore: No implicit Any
 import { usePinnedTrack, useSetAppDataByKey } from '../AppData/useUISettings';
 import { VideoTileContext } from '../hooks/useVideoTileLayout';
@@ -42,7 +40,6 @@ export const GridLayout = ({
   hide_metadata_on_tile = false,
 }: GridLayoutProps) => {
   const peerSharing = useHMSStore(selectPeerScreenSharing);
-  const whiteboard = useHMSStore(selectWhiteboard);
   const pinnedTrack = usePinnedTrack();
   const peers = useHMSStore(selectPeers);
   const localPeerRole = useHMSStore(selectLocalPeerRoleName);
@@ -56,9 +53,9 @@ export const GridLayout = ({
       )) ||
     pinnedTrack;
   const updatedPeers = useMemo(() => {
-    // remove screenshare/whiteboard peer from active speaker sorting
-    if (activeScreensharePeerId || whiteboard?.open) {
-      return peers.filter(peer => peer.id !== activeScreensharePeerId || peer.customerUserId !== whiteboard?.owner);
+    // remove screenshare peer from active speaker sorting
+    if (activeScreensharePeerId) {
+      return peers.filter(peer => peer.id !== activeScreensharePeerId);
     }
     if (isInsetEnabled) {
       const isLocalPeerPinned = localPeerID === pinnedTrack?.peerId;
@@ -70,16 +67,7 @@ export const GridLayout = ({
       }
     }
     return peers;
-  }, [
-    isInsetEnabled,
-    whiteboard,
-    activeScreensharePeerId,
-    localPeerRole,
-    localPeerID,
-    prominentRoles,
-    peers,
-    pinnedTrack,
-  ]);
+  }, [isInsetEnabled, activeScreensharePeerId, localPeerRole, localPeerID, prominentRoles, peers, pinnedTrack]);
   const vanillaStore = useHMSVanillaStore();
   const [sortedPeers, setSortedPeers] = useState(updatedPeers);
   const peersSorter = useMemo(() => new PeersSorter(vanillaStore), [vanillaStore]);
@@ -116,17 +104,6 @@ export const GridLayout = ({
         />
       </VideoTileContext.Provider>
     );
-  } else if (whiteboard?.open) {
-    return (
-      <VideoTileContext.Provider value={tileLayout}>
-        <WhiteboardLayout
-          peers={sortedPeers}
-          onPageSize={setPageSize}
-          onPageChange={setMainPage}
-          edgeToEdge={edge_to_edge}
-        />
-      </VideoTileContext.Provider>
-    );
   } else if (isRoleProminence) {
     return (
       <VideoTileContext.Provider value={tileLayout}>

package/src/Prebuilt/components/hooks/useCloseScreenshareWhiteboard.tsx

@@ -6,27 +6,19 @@ import { useScreenShare, useWhiteboard } from '@100mslive/react-sdk';
  * close existing screenshare or whiteboard when the other is started
  */
 export const useCloseScreenshareWhiteboard = () => {
-  const { amIScreenSharing, screenSharingPeerId, toggleScreenShare } = useScreenShare();
+  const { amIScreenSharing, toggleScreenShare } = useScreenShare();
   const { isOwner: isWhiteboardOwner, toggle: toggleWhiteboard } = useWhiteboard();
-  const prevScreenSharer = usePrevious(screenSharingPeerId);
+  const prevScreenSharer = usePrevious(amIScreenSharing);
   const prevWhiteboardOwner = usePrevious(isWhiteboardOwner);
 
   // if both screenshare and whiteboard are open, close the one that was open earlier
   useEffect(() => {
-    if (isWhiteboardOwner && screenSharingPeerId) {
-      if (prevScreenSharer && amIScreenSharing && !prevWhiteboardOwner) {
+    if (isWhiteboardOwner && amIScreenSharing) {
+      if (prevScreenSharer && !prevWhiteboardOwner) {
         toggleScreenShare?.();
       } else if (prevWhiteboardOwner && !prevScreenSharer) {
         toggleWhiteboard?.();
       }
     }
-  }, [
-    isWhiteboardOwner,
-    screenSharingPeerId,
-    amIScreenSharing,
-    prevScreenSharer,
-    prevWhiteboardOwner,
-    toggleScreenShare,
-    toggleWhiteboard,
-  ]);
+  }, [isWhiteboardOwner, amIScreenSharing, prevScreenSharer, prevWhiteboardOwner, toggleScreenShare, toggleWhiteboard]);
 };