@100mslive/react-native-room-kit 1.1.7 → 1.1.9-beta.0

package/src/components/HLSPlayerContainer.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import { View, StyleSheet } from 'react-native';
+import { useSelector } from 'react-redux';
 import type { HMSHLSPlayer } from '@100mslive/react-native-hms';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
 import {
@@ -13,11 +14,16 @@ import {
 import { useHLSViewsConstraints } from '../hooks-util';
 import { HLSPlayer } from './HLSPlayer';
 import { HLSPlayerControls } from './HLSPlayerControls';
+import { PipModes } from '../utils/types';
+import type { RootState } from '../redux';
 
 export const _HLSPlayerContainer: React.FC = () => {
   const hlsPlayerRef =
     React.useRef<React.ElementRef<typeof HMSHLSPlayer>>(null);
   const { playerWrapperConstraints } = useHLSViewsConstraints();
+  const isPipModeActive = useSelector(
+    (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
+  );
 
   const animatedValue = useSharedValue(1);
 
@@ -82,13 +88,15 @@ export const _HLSPlayerContainer: React.FC = () => {
       >
         <HLSPlayer ref={hlsPlayerRef} />
 
-        <HLSPlayerControls
-          playerRef={hlsPlayerRef}
-          animatedValue={animatedValue}
-          cancelCurrentControlAnimation={cancelCurrentControlAnimation}
-          hideControlsAfterDelay={hideControlsAfterDelay}
-          resetHideControlAnimation={resetHideControlAnimation}
-        />
+        {isPipModeActive ? null : (
+          <HLSPlayerControls
+            playerRef={hlsPlayerRef}
+            animatedValue={animatedValue}
+            cancelCurrentControlAnimation={cancelCurrentControlAnimation}
+            hideControlsAfterDelay={hideControlsAfterDelay}
+            resetHideControlAnimation={resetHideControlAnimation}
+          />
+        )}
       </View>
     </GestureDetector>
   );

package/src/components/HMSHLSMessage.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Platform,
   TouchableOpacity,
+  Linking,
 } from 'react-native';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 
@@ -19,6 +20,7 @@ import { PinIcon, ThreeDotsIcon } from '../Icons';
 import { setSelectedMessageForAction } from '../redux/actions';
 import { ModalTypes } from '../utils/types';
 import type { RootState } from '../redux';
+import { splitLinksAndContent } from '../utils/functions';
 
 interface HMSHLSMessageProps {
   message: HMSMessage;
@@ -63,6 +65,9 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
       pinnedLabel: {
         color: '#ffffff',
       },
+      link: {
+        color: theme.palette.primary_bright,
+      },
     }),
     []
   );
@@ -81,6 +86,13 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
       message.sender &&
       message.sender.peerID !== localPeerId); // can remove participants
 
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      await Linking.openURL(url);
+    }
+  };
+
   return (
     <View style={styles.container}>
       {isPinned ? (
@@ -106,7 +118,10 @@ const _HMSHLSMessage: React.FC<HMSHLSMessageProps> = ({ message }) => {
             {'   '}
           </Text>
 
-          {message.message}
+          {splitLinksAndContent(message.message, {
+            pressHandler: handleLinkPress,
+            style: hmsRoomStyles.link,
+          })}
         </Text>
 
         {canTakeAction ? (

package/src/components/HMSManageCameraRotation.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import { RotateCameraIcon } from '../Icons';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
@@ -8,17 +9,25 @@ import { PressableIcon } from './PressableIcon';
 import { useHMSRoomStyle } from '../hooks-util';
 import { TestIds } from '../utils/constants';
 
-export const HMSManageCameraRotation = () => {
+interface HMSManageCameraRotationProps extends RotateCameraButtonProps {}
+
+export const HMSManageCameraRotation: React.FC<
+  HMSManageCameraRotationProps
+> = ({ style }) => {
   const canPublishVideo = useCanPublishVideo();
 
   if (!canPublishVideo) {
     return null;
   }
 
-  return <RotateCameraButton />;
+  return <RotateCameraButton style={style} />;
 };
 
-const RotateCameraButton = () => {
+interface RotateCameraButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const RotateCameraButton: React.FC<RotateCameraButtonProps> = ({ style }) => {
   const hmsActions = useHMSActions();
   // TODO: set initial `isLocalVideoMuted` state value as per initial track setting
   const isLocalVideoMuted = useSelector(
@@ -43,9 +52,14 @@ const RotateCameraButton = () => {
 
   return (
     <PressableIcon
-      testID={isLocalVideoMuted ? TestIds.switch_camera_disabled : TestIds.switch_camera}
+      testID={
+        isLocalVideoMuted
+          ? TestIds.switch_camera_disabled
+          : TestIds.switch_camera
+      }
       onPress={handleVideoMuteTogglePress}
       disabled={isLocalVideoMuted}
+      style={style}
     >
       <RotateCameraIcon style={cameraIconStyles} />
     </PressableIcon>

package/src/components/HMSManageLocalVideo.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react';
 import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
 
 import type { RootState } from '../redux';
 import { useCanPublishVideo, useHMSActions } from '../hooks-sdk';
@@ -7,17 +8,27 @@ import { PressableIcon } from './PressableIcon';
 import { CameraIcon } from '../Icons';
 import { TestIds } from '../utils/constants';
 
-export const HMSManageLocalVideo = () => {
+interface HMSManageLocalVideoProps extends ToggleVideoMuteButtonProps {}
+
+export const HMSManageLocalVideo: React.FC<HMSManageLocalVideoProps> = ({
+  style,
+}) => {
   const canPublishVideo = useCanPublishVideo();
 
   if (!canPublishVideo) {
     return null;
   }
 
-  return <ToggleVideoMuteButton />;
+  return <ToggleVideoMuteButton style={style} />;
 };
 
-const ToggleVideoMuteButton = () => {
+interface ToggleVideoMuteButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const ToggleVideoMuteButton: React.FC<ToggleVideoMuteButtonProps> = ({
+  style,
+}) => {
   const hmsActions = useHMSActions();
   // TODO: set initial `isLocalVideoMuted` state value as per initial track setting
   const isLocalVideoMuted = useSelector(
@@ -32,9 +43,14 @@ const ToggleVideoMuteButton = () => {
 
   return (
     <PressableIcon
-      testID={!!isLocalVideoMuted ? TestIds.camera_muted_btn : TestIds.camera_unmuted_btn}
+      testID={
+        !!isLocalVideoMuted
+          ? TestIds.camera_muted_btn
+          : TestIds.camera_unmuted_btn
+      }
       onPress={handleVideoMuteTogglePress}
       active={isLocalVideoMuted}
+      style={style}
     >
       <CameraIcon muted={!!isLocalVideoMuted} />
     </PressableIcon>

package/src/components/HMSManageVirtualBackground.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { useSelector } from 'react-redux';
+import type { StyleProp, ViewStyle } from 'react-native';
+
+import { VirtualBackgroundIcon } from '../Icons';
+import { useCanPublishVideo } from '../hooks-sdk';
+import type { RootState } from '../redux';
+import { PressableIcon } from './PressableIcon';
+import { useHMSRoomStyle, useModalType } from '../hooks-util';
+import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
+import { ModalTypes } from '../utils/types';
+
+interface HMSManageVirtualBackgroundProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+export const HMSManageVirtualBackground: React.FC<
+  HMSManageVirtualBackgroundProps
+> = ({ style }) => {
+  const canPublishVideo = useCanPublishVideo();
+  const videoPluginExists = useSelector(
+    (state: RootState) => !!state.hmsStates.videoPlugin
+  );
+
+  if (!canPublishVideo || !videoPluginExists) {
+    return null;
+  }
+
+  return <VirtualBackgroundButton style={style} />;
+};
+
+interface VirtualBackgroundButtonProps {
+  style?: StyleProp<ViewStyle>;
+}
+
+const VirtualBackgroundButton: React.FC<VirtualBackgroundButtonProps> = ({
+  style,
+}) => {
+  const { handleModalVisibleType } = useModalType();
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const videoPluginExists = useSelector(
+    (state: RootState) => !!state.hmsStates.videoPlugin
+  );
+
+  const handleVideoMuteTogglePress = async () => {
+    if (isLocalVideoMuted || !videoPluginExists) {
+      return;
+    }
+    handleModalVisibleType(ModalTypes.VIRTUAL_BACKGROUND);
+  };
+
+  const cameraIconStyles = useHMSRoomStyle(
+    (theme) => ({
+      tintColor: isLocalVideoMuted
+        ? theme.palette.on_surface_low
+        : theme.palette.on_surface_high,
+    }),
+    [isLocalVideoMuted]
+  );
+
+  return (
+    <React.Fragment>
+      <PressableIcon
+        onPress={handleVideoMuteTogglePress}
+        disabled={isLocalVideoMuted}
+        style={style}
+      >
+        <VirtualBackgroundIcon style={cameraIconStyles} />
+      </PressableIcon>
+
+      <VirtualBackgroundBottomSheet />
+    </React.Fragment>
+  );
+};

package/src/components/HMSOverlayMessageView.tsx

@@ -6,6 +6,7 @@ import {
   StyleSheet,
   Platform,
   TouchableOpacity,
+  Linking,
 } from 'react-native';
 import type { HMSMessage } from '@100mslive/react-native-hms';
 import { Gesture, GestureDetector } from 'react-native-gesture-handler';
@@ -20,6 +21,7 @@ import { PinIcon, ThreeDotsIcon } from '../Icons';
 import { setSelectedMessageForAction } from '../redux/actions';
 import { ModalTypes } from '../utils/types';
 import type { RootState } from '../redux';
+import { splitLinksAndContent } from '../utils/functions';
 
 interface HMSMessageProps {
   message: HMSMessage;
@@ -66,6 +68,9 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       pinnedLabel: {
         color: '#ffffff',
       },
+      link: {
+        color: _theme.palette.primary_bright,
+      },
     }),
     []
   );
@@ -84,6 +89,13 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       message.sender &&
       message.sender.peerID !== localPeerId); // can remove participants
 
+  const handleLinkPress = async (url: string) => {
+    const canOpen = await Linking.canOpenURL(url);
+    if (canOpen) {
+      await Linking.openURL(url);
+    }
+  };
+
   return (
     <View style={styles.container}>
       {isPinned ? (
@@ -126,7 +138,10 @@ const _HMSOverlayMessageView: React.FC<HMSMessageProps> = ({ message }) => {
       </View>
 
       <Text style={[styles.message, hmsRoomStyles.message]}>
-        {message.message}
+        {splitLinksAndContent(message.message, {
+          pressHandler: handleLinkPress,
+          style: hmsRoomStyles.link,
+        })}
       </Text>
     </View>
   );

package/src/components/HMSRoomOptions.tsx

@@ -23,6 +23,7 @@ import { ChangeNameModalContent } from './ChangeNameModalContent';
 import { StopRecordingModalContent } from './StopRecordingModalContent';
 import { TestIds } from '../utils/constants';
 import { PollsAndQuizBottomSheet } from './PollsAndQuizBottomSheet';
+import { VirtualBackgroundBottomSheet } from './VirtualBackgroundBottomSheet';
 
 interface HMSRoomOptionsProps {}
 
@@ -74,6 +75,8 @@ export const HMSRoomOptions: React.FC<HMSRoomOptionsProps> = () => {
 
       <PollsAndQuizBottomSheet />
 
+      <VirtualBackgroundBottomSheet />
+
       <BottomSheet
         isVisible={modalVisible === ModalTypes.CHANGE_NAME}
         dismissModal={dismissModal}

package/src/components/MeetingScreenContent.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useRef, useState, useEffect } from 'react';
-import { StyleSheet, View, Keyboard } from 'react-native';
+import { StyleSheet, View, Keyboard, Platform } from 'react-native';
 import { useSelector } from 'react-redux';
 import {
   Easing,
@@ -21,6 +21,7 @@ import { useKeyboardState } from '../hooks-util';
 import { HMSStatusBar } from './StatusBar';
 import { AnimatedFooter } from './AnimatedFooter';
 import { AnimatedHeader } from './AnimatedHeader';
+import { useIsLandscapeOrientation } from '../utils/dimension';
 // import { ReconnectionView } from './ReconnectionView';
 
 interface MeetingScreenContentProps {
@@ -33,9 +34,14 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
   const offset = useSharedValue(1);
   const timerIdRef = useRef<NodeJS.Timeout | null>(null);
   const [controlsHidden, setControlsHidden] = useState(false);
+  const isLandscapeOrientation = useIsLandscapeOrientation();
   const isPipModeActive = useSelector(
     (state: RootState) => state.app.pipModeStatus === PipModes.ACTIVE
   );
+  const whiteboardActive =
+    Platform.OS === 'android'
+      ? useSelector((state: RootState) => !!state.hmsStates.whiteboard)
+      : null;
   const { keyboardState } = useKeyboardState();
 
   const dismissKeyboard = useCallback(() => {
@@ -75,9 +81,28 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     [dismissKeyboard, clearTimer]
   );
 
+  if (
+    !!whiteboardActive &&
+    (isLandscapeOrientation ? offset.value === 1 : offset.value < 1)
+  ) {
+    cancelAnimation(offset);
+    offset.value = withTiming(
+      isLandscapeOrientation ? 0 : 1,
+      { duration: 200, easing: Easing.ease },
+      (finished) => {
+        if (finished) {
+          runOnJS(setControlsHidden)(offset.value === 0);
+        }
+      }
+    );
+  }
+
   // Handles Auto hiding the controls for the first time
   // to make this feature discoverable
   useEffect(() => {
+    if (!!whiteboardActive) {
+      return;
+    }
     clearTimer();
     timerIdRef.current = setTimeout(() => {
       timerIdRef.current = null;
@@ -85,9 +110,10 @@ export const MeetingScreenContent: React.FC<MeetingScreenContentProps> = ({
     }, HeaderFooterHideDelayMs);
 
     return clearTimer;
-  }, [clearTimer, toggleControls]);
+  }, [clearTimer, toggleControls, !!whiteboardActive]);
 
   const tapGesture = Gesture.Tap()
+    .enabled(Platform.select({ android: !whiteboardActive, default: true }))
     .onEnd(() => toggleControls())
     .requireExternalGestureToFail();
 

package/src/components/Preview.tsx

@@ -37,6 +37,7 @@ import { hexToRgbA } from '../utils/theme';
 import { HMSManageNoiseCancellation } from './HMSManageNoiseCancellation';
 import { useSelector } from 'react-redux';
 import type { RootState } from '../redux';
+import { HMSManageVirtualBackground } from './HMSManageVirtualBackground';
 
 const backButtonEdges = ['top'] as const;
 const headerEdges = ['top', 'left', 'right'] as const;
@@ -174,11 +175,17 @@ export const Preview = ({
                 <View style={styles.micAndCameraControls}>
                   <HMSManageLocalAudio />
 
-                  <View style={styles.manageLocalButtonWrapper}>
-                    <HMSManageLocalVideo />
-                  </View>
+                  <HMSManageLocalVideo
+                    style={styles.manageLocalButtonWrapper}
+                  />
 
-                  <HMSManageCameraRotation />
+                  <HMSManageCameraRotation
+                    style={styles.manageLocalButtonWrapper}
+                  />
+
+                  <HMSManageVirtualBackground
+                    style={styles.manageLocalButtonWrapper}
+                  />
                 </View>
 
                 {showNoiseCancellationButton && <HMSManageNoiseCancellation />}
@@ -242,7 +249,7 @@ const styles = StyleSheet.create({
     alignItems: 'center',
   },
   manageLocalButtonWrapper: {
-    marginHorizontal: 16,
+    marginLeft: 16,
   },
   joinButtonRow: {
     marginVertical: 16,

package/src/components/RoomSettingsModalContent.tsx

@@ -3,7 +3,7 @@ import { View, StyleSheet, Text, TouchableOpacity } from 'react-native';
 import type { TouchableOpacityProps } from 'react-native';
 import type { HMSAudioMixingMode } from '@100mslive/react-native-hms';
 import { HMSRecordingState } from '@100mslive/react-native-hms';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import type { RootState } from '../redux';
 import { ModalTypes } from '../utils/types';
@@ -16,12 +16,14 @@ import {
   PollVoteIcon,
   RecordingIcon,
   ScreenShareIcon,
+  VirtualBackgroundIcon,
   WaveIcon,
 } from '../Icons';
 import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSConferencingScreenConfig,
+  useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -38,6 +40,8 @@ import { RoomSettingsModalDebugModeContent } from './RoomSettingsModalDebugModeC
 import { ParticipantsCount } from './ParticipantsCount';
 import { selectAllowedTracksToPublish } from '../hooks-sdk-selectors';
 import { TestIds } from '../utils/constants';
+import { addNotification } from '../redux/actions';
+import { NotificationTypes } from '../types';
 
 interface RoomSettingsModalContentProps {
   newAudioMixingMode: HMSAudioMixingMode;
@@ -56,6 +60,8 @@ export const RoomSettingsModalContent: React.FC<
 > = (props) => {
   const { closeRoomSettingsModal, setModalVisible } = props;
 
+  const hmsInstance = useHMSInstance();
+  const dispatch = useDispatch();
   const debugMode = useSelector((state: RootState) => state.user.debugMode);
 
   const hmsActions = useHMSActions();
@@ -76,6 +82,10 @@ export const RoomSettingsModalContent: React.FC<
     return permissions?.pollRead || permissions?.pollWrite;
   });
 
+  const whiteboardAdminPermission = useSelector((state: RootState) => {
+    return !!state.hmsStates.localPeer?.role?.permissions?.whiteboard?.admin;
+  });
+
   const { registerOnModalHideAction } = useBottomSheetActions();
 
   const { canShowParticipants, show } = useShowChatAndParticipants();
@@ -252,6 +262,27 @@ export const RoomSettingsModalContent: React.FC<
   };
   // #endregion
 
+  // #region Virtual Background
+  const videoPlugin = useSelector(
+    (state: RootState) => state.hmsStates.videoPlugin
+  );
+  const isLocalVideoMuted = useSelector(
+    (state: RootState) => state.hmsStates.isLocalVideoMuted
+  );
+  const virtualBackgroundApplied = useSelector(
+    (state: RootState) => state.app.selectedVirtualBackground !== null
+  );
+  const handleVirtualBackground = () => {
+    // Register callback to be called when bottom sheet is hiddden
+    registerOnModalHideAction(() => {
+      if (!videoPlugin || isLocalVideoMuted) return;
+      setModalVisible(ModalTypes.VIRTUAL_BACKGROUND);
+    });
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+  // #endregion
+
   const changeName = () => {
     // Register callback to be called when bottom sheet is hiddden
     registerOnModalHideAction(() => {
@@ -271,6 +302,61 @@ export const RoomSettingsModalContent: React.FC<
     closeRoomSettingsModal();
   };
 
+  const whiteboard = useSelector(
+    (state: RootState) => state.hmsStates.whiteboard
+  );
+  const screenShareNodesAvailable = useSelector(
+    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  );
+
+  const toggleWhiteboard = async () => {
+    if (!whiteboardAdminPermission) return;
+
+    if (whiteboard && whiteboard.isOwner) {
+      hmsInstance.interactivityCenter
+        .stopWhiteboard()
+        .then((success) => {
+          console.log('#stopWhiteboard stopped whiteboard ', success);
+        })
+        .catch((error) => {
+          console.log('#stopWhiteboard error ', error);
+        });
+    } else if (whiteboard && !whiteboard.isOwner) {
+      const uid = Math.random().toString(16).slice(2);
+      dispatch(
+        addNotification({
+          id: uid,
+          type: NotificationTypes.ERROR,
+          title:
+            'Only the peer who started the whiteboard has the ability to close it!',
+        })
+      );
+    } else if (isLocalScreenShared || screenShareNodesAvailable) {
+      const uid = Math.random().toString(16).slice(2);
+      dispatch(
+        addNotification({
+          id: uid,
+          type: NotificationTypes.ERROR,
+          title: isLocalScreenShared
+            ? 'Discontinue screenshare to open the whiteboard!'
+            : "Can't open whiteboard while screenshare is happening!",
+        })
+      );
+    } else {
+      hmsInstance.interactivityCenter
+        .startWhiteboard('Interactive Session')
+        .then((success) => {
+          console.log('#startWhiteboard started whiteboard ', success);
+        })
+        .catch((error) => {
+          console.log('#startWhiteboard error ', error);
+        });
+    }
+
+    // Close the current bottom sheet
+    closeRoomSettingsModal();
+  };
+
   const canShowBRB = useHMSLayoutConfig(
     (layoutConfig) =>
       !!layoutConfig?.screens?.conferencing?.default?.elements?.brb
@@ -394,6 +480,17 @@ export const RoomSettingsModalContent: React.FC<
               isActive: false,
               hide: !canReadOrWritePoll,
             },
+            {
+              id: 'whiteboard',
+              icon: (
+                <PencilIcon type="board" style={{ width: 20, height: 20 }} />
+              ),
+              label: whiteboard ? 'Close Whiteboard' : 'Open Whiteboard',
+              pressHandler: toggleWhiteboard,
+              isActive: !!whiteboard && whiteboard.isOwner,
+              disabled: !!whiteboard && !whiteboard.isOwner,
+              hide: !whiteboardAdminPermission,
+            },
             {
               id: 'noise-cancellation',
               icon: <WaveIcon style={{ width: 20, height: 20 }} />,
@@ -405,6 +502,15 @@ export const RoomSettingsModalContent: React.FC<
               hide: !showNoiseCancellationButton,
               disabled: isLocalAudioMuted,
             },
+            {
+              id: 'virtual-background',
+              icon: <VirtualBackgroundIcon style={{ width: 20, height: 20 }} />,
+              label: 'Virtual Background',
+              pressHandler: handleVirtualBackground,
+              isActive: virtualBackgroundApplied,
+              hide: !videoPlugin,
+              disabled: isLocalVideoMuted,
+            },
           ].filter((itm) => !itm.hide),
           true
         ).map((itm, idx) => {
@@ -458,7 +564,7 @@ type SettingItemProps = {
   onPress(): void;
   disabled?: TouchableOpacityProps['disabled'];
   testID?: TouchableOpacityProps['testID'];
-  isActive?: boolean;
+  isActive?: boolean | null;
 };
 
 const SettingItem: React.FC<SettingItemProps> = ({

package/src/components/TilesContainer.tsx

@@ -25,13 +25,15 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
   const { width: safeWidth } = useSafeAreaFrame();
   const isLandscapeOrientation = useIsLandscapeOrientation();
 
-  const screenshareTilesAvailable = useSelector(
-    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  const screenshareTilesOrWhiteboardAcive = useSelector(
+    (state: RootState) =>
+      state.app.screensharePeerTrackNodes.length > 0 ||
+      !!state.hmsStates.whiteboard
   );
 
   const stylesConfig = computeTileWidthAndHeight(peerTrackNodes.length, {
     isLandscapeOrientation,
-    type: screenshareTilesAvailable ? 'row' : 'default',
+    type: screenshareTilesOrWhiteboardAcive ? 'row' : 'default',
   });
 
   // In this layout, Tile will take as much height and width as possible
@@ -44,12 +46,12 @@ const _TilesContainer: React.FC<TilesContainerProps> = ({
         // If tile are growable, then we want whatever remaining space to be between them
         {
           justifyContent:
-            screenshareTilesAvailable && peerTrackNodes.length === 1
+            screenshareTilesOrWhiteboardAcive && peerTrackNodes.length === 1
               ? 'center'
               : growableTileLayout
                 ? 'space-between'
                 : 'center',
-          flexDirection: screenshareTilesAvailable
+          flexDirection: screenshareTilesOrWhiteboardAcive
             ? 'row'
             : isLandscapeOrientation
               ? 'row'