@100mslive/react-native-room-kit 1.1.7 → 1.1.8

package/lib/typescript/redux/reducers/hmsStates.d.ts

@@ -1,7 +1,7 @@
-import type { HMSLocalPeer, HMSNoiseCancellationPlugin, HMSPeer, HMSRole, HMSRoleChangeRequest, HMSRoom, HMSSpeaker } from '@100mslive/react-native-hms';
+import type { HMSLocalPeer, HMSNoiseCancellationPlugin, HMSPeer, HMSRole, HMSRoleChangeRequest, HMSRoom, HMSSpeaker, HMSWhiteboard } from '@100mslive/react-native-hms';
 import type { Layout } from '@100mslive/types-prebuilt';
 import { HmsStateActionTypes } from '../actionTypes';
-type ActionType = SetRoomAction | SetLocalPeerAction | SetRolesAction | SetIsLocalAudioMutedAction | SetIsLocalVideoMutedAction | SetIsLocalScreenSharedAction | SetRoomLocallyMutedAction | ResetAction | AddToPreviewPeersList | RemoveFromPreviewPeersList | SetLayoutConfig | SetRoleChangeRequest | AddParticipant | AddParticipants | RemoveParticipant | RemoveParticipants | AddUpdateParticipant | ReplaceParticipantsList | SetActiveSpeakers | SetReconnecting | SetNoiseCancellationPlugin;
+type ActionType = SetRoomAction | SetLocalPeerAction | SetRolesAction | SetIsLocalAudioMutedAction | SetIsLocalVideoMutedAction | SetIsLocalScreenSharedAction | SetRoomLocallyMutedAction | ResetAction | AddToPreviewPeersList | RemoveFromPreviewPeersList | SetLayoutConfig | SetRoleChangeRequest | AddParticipant | AddParticipants | RemoveParticipant | RemoveParticipants | AddUpdateParticipant | ReplaceParticipantsList | SetActiveSpeakers | SetReconnecting | SetNoiseCancellationPlugin | SetWhiteboard;
 type SetRoomAction = {
     type: HmsStateActionTypes.SET_ROOM_STATE;
     room: HMSRoom | null;
@@ -86,6 +86,10 @@ type SetNoiseCancellationPlugin = {
     type: HmsStateActionTypes.SET_NOISE_CANCELLATION_PLUGIN;
     noiseCancellationPlugin: HMSNoiseCancellationPlugin;
 };
+type SetWhiteboard = {
+    type: HmsStateActionTypes.SET_WHITEBOARD;
+    whiteboard: HMSWhiteboard | null;
+};
 type IntialStateType = {
     isLocalAudioMuted: boolean | undefined;
     isLocalVideoMuted: boolean | undefined;
@@ -101,6 +105,7 @@ type IntialStateType = {
     layoutConfig: Layout[] | null;
     roleChangeRequest: HMSRoleChangeRequest | null;
     noiseCancellationPlugin: HMSNoiseCancellationPlugin | null;
+    whiteboard: HMSWhiteboard | null;
 };
 declare const hmsStatesReducer: (state: IntialStateType | undefined, action: ActionType) => IntialStateType;
 export default hmsStatesReducer;

package/lib/typescript/redux/reducers/hmsStates.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"hmsStates.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/hmsStates.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,YAAY,EACZ,0BAA0B,EAC1B,OAAO,EACP,OAAO,EACP,oBAAoB,EACpB,OAAO,EACP,UAAU,EACX,MAAM,6BAA6B,CAAC;AACrC,OAAO,KAAK,EAAE,MAAM,EAAE,MAAM,2BAA2B,CAAC;AACxD,OAAO,EAAE,mBAAmB,EAAE,MAAM,gBAAgB,CAAC;AAErD,KAAK,UAAU,GACX,aAAa,GACb,kBAAkB,GAClB,cAAc,GACd,0BAA0B,GAC1B,0BAA0B,GAC1B,4BAA4B,GAC5B,yBAAyB,GACzB,WAAW,GACX,qBAAqB,GACrB,0BAA0B,GAC1B,eAAe,GACf,oBAAoB,GACpB,cAAc,GACd,eAAe,GACf,iBAAiB,GACjB,kBAAkB,GAClB,oBAAoB,GACpB,uBAAuB,GACvB,iBAAiB,GACjB,eAAe,GACf,0BAA0B,CAAC;AAE/B,KAAK,aAAa,GAAG;IACnB,IAAI,EAAE,mBAAmB,CAAC,cAAc,CAAC;IACzC,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;CACtB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,mBAAmB,CAAC,oBAAoB,CAAC;IAC/C,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;CAChC,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC,eAAe,CAAC;IAC1C,KAAK,EAAE,OAAO,EAAE,CAAC;CAClB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,mBAAmB,CAAC,8BAA8B,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,mBAAmB,CAAC,8BAA8B,CAAC;IACzD,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;CACxC,CAAC;AAEF,KAAK,4BAA4B,GAAG;IAClC,IAAI,EAAE,mBAAmB,CAAC,gCAAgC,CAAC;IAC3D,mBAAmB,EAAE,OAAO,GAAG,SAAS,CAAC;CAC1C,CAAC;AAEF,KAAK,WAAW,GAAG;IACjB,IAAI,EAAE,mBAAmB,CAAC,YAAY,CAAC;CACxC,CAAC;AAEF,KAAK,yBAAyB,GAAG;IAC/B,IAAI,EAAE,mBAAmB,CAAC,sBAAsB,CAAC;IACjD,gBAAgB,EAAE,OAAO,CAAC;CAC3B,CAAC;AAEF,KAAK,qBAAqB,GAAG;IAC3B,IAAI,EAAE,mBAAmB,CAAC,yBAAyB,CAAC;IACpD,IAAI,EAAE,OAAO,CAAC;CACf,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,mBAAmB,CAAC,8BAA8B,CAAC;IACzD,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,mBAAmB,CAAC,iBAAiB,CAAC;IAC5C,YAAY,EAAE,MAAM,EAAE,CAAC;CACxB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,mBAAmB,CAAC,uBAAuB,CAAC;IAClD,iBAAiB,EAAE,oBAAoB,GAAG,IAAI,CAAC;CAChD,CAAC;AAEF,KAAK,cAAc,GAAG;IACpB,IAAI,EAAE,mBAAmB,CAAC,eAAe,CAAC;IAC1C,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;IAC3C,YAAY,EAAE,OAAO,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,mBAAmB,CAAC,kBAAkB,CAAC;IAC7C,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,kBAAkB,GAAG;IACxB,IAAI,EAAE,mBAAmB,CAAC,mBAAmB,CAAC;IAC9C,YAAY,EAAE,OAAO,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,oBAAoB,GAAG;IAC1B,IAAI,EAAE,mBAAmB,CAAC,kBAAkB,CAAC;IAC7C,WAAW,EAAE,OAAO,CAAC;CACtB,CAAC;AAEF,KAAK,uBAAuB,GAAG;IAC7B,IAAI,EAAE,mBAAmB,CAAC,yBAAyB,CAAC;IACpD,QAAQ,EAAE,MAAM,CAAC;IACjB,YAAY,EAAE,OAAO,EAAE,CAAC;CACzB,CAAC;AAEF,KAAK,iBAAiB,GAAG;IACvB,IAAI,EAAE,mBAAmB,CAAC,mBAAmB,CAAC;IAC9C,cAAc,EAAE,UAAU,EAAE,CAAC;CAC9B,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,IAAI,EAAE,mBAAmB,CAAC,gBAAgB,CAAC;IAC3C,YAAY,EAAE,OAAO,CAAC;CACvB,CAAC;AAEF,KAAK,0BAA0B,GAAG;IAChC,IAAI,EAAE,mBAAmB,CAAC,6BAA6B,CAAC;IACxD,uBAAuB,EAAE,0BAA0B,CAAC;CACrD,CAAC;AAEF,KAAK,eAAe,GAAG;IACrB,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,iBAAiB,EAAE,OAAO,GAAG,SAAS,CAAC;IACvC,mBAAmB,EAAE,OAAO,GAAG,SAAS,CAAC;IACzC,YAAY,EAAE,OAAO,CAAC;IACtB,gBAAgB,EAAE,OAAO,CAAC;IAC1B,IAAI,EAAE,OAAO,GAAG,IAAI,CAAC;IACrB,SAAS,EAAE,YAAY,GAAG,IAAI,CAAC;IAC/B,mBAAmB,EAAE,MAAM,CAAC,MAAM,EAAE,CAAC,OAAO,GAAG,YAAY,CAAC,EAAE,CAAC,CAAC;IAChE,cAAc,EAAE,UAAU,EAAE,CAAC;IAC7B,KAAK,EAAE,OAAO,EAAE,CAAC;IACjB,gBAAgB,EAAE,OAAO,EAAE,CAAC;IAC5B,YAAY,EAAE,MAAM,EAAE,GAAG,IAAI,CAAC;IAC9B,iBAAiB,EAAE,oBAAoB,GAAG,IAAI,CAAC;IAC/C,uBAAuB,EAAE,0BAA0B,GAAG,IAAI,CAAC;CAC5D,CAAC;AAmBF,QAAA,MAAM,gBAAgB,+CAEZ,UAAU,KACjB,eAiZF,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"hmsStates.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/hmsStates.ts"],"names":[],"mappings":"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"}

package/lib/typescript/redux/reducers/index.d.ts

@@ -29,6 +29,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         gridViewActivePage: number;
         startingOrStoppingRecording: boolean;
         fullScreenPeerTrackNode: import("../../utils/types").PeerTrackNode | null;
+        fullScreenWhiteboard: boolean;
         screensharePeerTrackNodes: import("../../utils/types").PeerTrackNode[];
         notifications: import("../../types").Notification[];
         activeChatBottomSheetTab: "Chat" | "Participants";
@@ -80,6 +81,7 @@ declare const _default: import("redux").Reducer<import("redux").CombinedState<{
         layoutConfig: import("@100mslive/types-prebuilt").Layout[] | null;
         roleChangeRequest: import("@100mslive/react-native-hms").HMSRoleChangeRequest | null;
         noiseCancellationPlugin: import("@100mslive/react-native-hms").HMSNoiseCancellationPlugin | null;
+        whiteboard: import("@100mslive/react-native-hms").HMSWhiteboard | null;
     };
     chatWindow: {
         showChatView: boolean;

package/lib/typescript/redux/reducers/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAOG"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/redux/reducers/index.ts"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBAOG"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@100mslive/react-native-room-kit",
-  "version": "1.1.7",
+  "version": "1.1.8",
   "description": "100ms Room Kit provides simple & easy to use UI components to build Live Streaming & Video Conferencing experiences in your apps.",
   "main": "lib/commonjs/index",
   "module": "lib/module/index",
@@ -140,7 +140,7 @@
     "typescript": "^5.0.2"
   },
   "peerDependencies": {
-    "@100mslive/react-native-hms": "1.10.4",
+    "@100mslive/react-native-hms": "1.10.5",
     "@react-native-community/blur": "^4.3.2",
     "@react-native-masked-view/masked-view": "^0.2.9",
     "@shopify/flash-list": "^1.4.3",
@@ -152,7 +152,8 @@
     "react-native-modal": "^12.1.0",
     "react-native-reanimated": ">=2.17.0",
     "react-native-safe-area-context": "^3.3.0",
-    "react-native-simple-toast": "^1.1.3"
+    "react-native-simple-toast": "^1.1.3",
+    "react-native-webview": "^13.8.7"
   },
   "resolutions": {
     "@types/react": "17.0.21"

package/src/HMSRoomSetup.tsx

@@ -4,6 +4,7 @@ import {
   HMSRoom,
   HMSTrack,
   HMSUpdateListenerActions,
+  HMSWhiteboardUpdateType,
 } from '@100mslive/react-native-hms';
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { Alert, Keyboard, StatusBar, StyleSheet, View } from 'react-native';
@@ -22,6 +23,7 @@ import {
   setInitialRole,
   setLocalPeerTrackNode,
   setMiniViewPeerTrackNode,
+  setWhiteboard,
   updateLocalPeerTrackNode,
 } from './redux/actions';
 import { createPeerTrackNode, getRandomUserId } from './utils/functions';
@@ -482,6 +484,25 @@ export const HMSRoomSetup = () => {
     };
   }, [isHLSViewer]);
 
+  useEffect(() => {
+    const subscription =
+      hmsInstance.interactivityCenter.addWhiteboardUpdateListener(
+        async (hmsWhiteboard, updateType) => {
+          dispatch(
+            setWhiteboard(
+              updateType === HMSWhiteboardUpdateType.STARTED
+                ? hmsWhiteboard
+                : null
+            )
+          );
+        }
+      );
+
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
   // Syncs showing Polls with HLS Player onCue event
   useHLSCuedPolls();
 

package/src/Icons/Pencil/index.tsx

@@ -4,10 +4,13 @@ import type { ImageProps } from 'react-native';
 
 import { useHMSRoomStyle } from '../../hooks-util';
 
-interface PencilIconProps extends Omit<ImageProps, 'source'> {}
+interface PencilIconProps extends Omit<ImageProps, 'source'> {
+  type?: 'normal' | 'board';
+}
 
 export const PencilIcon: React.FC<PencilIconProps> = ({
   style,
+  type = 'normal',
   ...restProps
 }) => {
   const iconStyles = useHMSRoomStyle((theme) => ({
@@ -16,7 +19,11 @@ export const PencilIcon: React.FC<PencilIconProps> = ({
 
   return (
     <Image
-      source={require('./assets/pencil.png')}
+      source={
+        type === 'board'
+          ? require('./assets/pencil-board.png')
+          : require('./assets/pencil.png')
+      }
       style={[styles.icon, iconStyles, style]}
       {...restProps}
     />

package/src/components/DisplayView.tsx

@@ -31,6 +31,7 @@ import { PreviewForRoleChangeModal } from './PreviewForRoleChangeModal';
 import { ChatAndParticipantsBottomSheet } from './ChatAndParticipants';
 import { LeaveRoomBottomSheet } from './LeaveRoomBottomSheet';
 import { EndRoomModal } from './EndRoomModal';
+import { FullScreenWhiteboard } from './FullScreenWhiteboard';
 
 type CapturedImagePath = { uri: string } | null;
 
@@ -143,6 +144,8 @@ export const DisplayView: React.FC<DisplayViewProps> = ({
 
           <FullScreenVideoView />
 
+          <FullScreenWhiteboard />
+
           <ChatAndParticipantsBottomSheet />
 
           <BottomSheet

package/src/components/Footer.tsx

@@ -118,8 +118,11 @@ export const useFooterHeight = (excludeSafeArea: boolean = false) => {
   const { bottom } = useSafeAreaInsets();
 
   return (
-    (excludeSafeArea ? 0 : bottom) + (Platform.OS === 'android' ? 16 : 0) + 40
-  ); // bottomSafeArea + marginBottom + content
+    (excludeSafeArea ? 0 : bottom) +
+    (Platform.OS === 'android' ? 16 : 0) +
+    42 +
+    16
+  ); // bottomSafeArea + marginBottom + content + contentTopPadding
 };
 
 const styles = StyleSheet.create({

package/src/components/FullScreenWhiteboard.tsx

@@ -0,0 +1,59 @@
+import * as React from 'react';
+import Modal from 'react-native-modal';
+import { StyleSheet } from 'react-native';
+import { useDispatch, useSelector } from 'react-redux';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+import type { RootState } from '../redux';
+import { useHMSRoomColorPalette, useHMSRoomStyle } from '../hooks-util';
+import { setFullScreenWhiteboard } from '../redux/actions';
+import { Whiteboard } from './Whiteboard';
+
+export const FullScreenWhiteboard = () => {
+  const dispatch = useDispatch();
+  const fullScreenWhiteboard = useSelector(
+    (state: RootState) => state.app.fullScreenWhiteboard
+  );
+
+  const { background_dim: backgroundDimColor } = useHMSRoomColorPalette();
+
+  const contentContainerStyles = useHMSRoomStyle((theme) => ({
+    backgroundColor: theme.palette.background_dim,
+  }));
+
+  const handleClosingFullScreenView = () => {
+    dispatch(setFullScreenWhiteboard(false));
+  };
+
+  return (
+    <Modal
+      isVisible={fullScreenWhiteboard}
+      animationIn={'fadeInUp'}
+      animationInTiming={100}
+      animationOutTiming={100}
+      animationOut={'fadeOutDown'}
+      backdropColor={backgroundDimColor}
+      backdropOpacity={0.3}
+      onBackButtonPress={handleClosingFullScreenView}
+      onBackdropPress={handleClosingFullScreenView}
+      useNativeDriver={true}
+      useNativeDriverForBackdrop={true}
+      hideModalContentWhileAnimating={true}
+      style={styles.modal}
+      supportedOrientations={['portrait', 'landscape']}
+    >
+      <SafeAreaView style={[contentContainerStyles, styles.container]}>
+        <Whiteboard />
+      </SafeAreaView>
+    </Modal>
+  );
+};
+
+const styles = StyleSheet.create({
+  modal: {
+    margin: 0,
+  },
+  container: {
+    flexGrow: 1,
+  },
+});

package/src/components/GridView.tsx

@@ -16,6 +16,7 @@ import { PaginationDots } from './PaginationDots';
 import { setGridViewActivePage } from '../redux/actions';
 import { Tile } from './Tile';
 import { useIsLandscapeOrientation } from '../utils/dimension';
+import { WhiteboardContainer } from './WhiteboardContainer';
 
 export type GridViewProps = {
   onPeerTileMorePress(peerTrackNode: PeerTrackNode): void;
@@ -52,6 +53,9 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
     const screenshareTilesAvailable = useSelector(
       (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
     );
+    const whiteboardActive = useSelector(
+      (state: RootState) => !!state.hmsStates.whiteboard
+    );
     const regularTilesAvailable = pairedPeers.length > 0;
 
     const isLandscapeOrientation = useIsLandscapeOrientation();
@@ -147,9 +151,12 @@ export const GridView = React.forwardRef<GridViewRefAttrs, GridViewProps>(
             setHmsViewRefs={setHmsViewRefs}
             onPeerTileMorePress={onPeerTileMorePress}
           />
+        ) : whiteboardActive ? (
+          <WhiteboardContainer />
         ) : null}
 
-        {screenshareTilesAvailable && isLandscapeOrientation ? null : (
+        {(whiteboardActive || screenshareTilesAvailable) &&
+        isLandscapeOrientation ? null : (
           <RegularTiles
             ref={regularTilesFlatlistRef}
             pairedPeers={pairedPeers}
@@ -209,8 +216,10 @@ const RegularTiles = React.forwardRef<
   const dispatch = useDispatch();
   const { height: safeHeight } = useSafeAreaFrame();
 
-  const screenshareTilesAvailable = useSelector(
-    (state: RootState) => state.app.screensharePeerTrackNodes.length > 0
+  const screenshareTilesOrWhiteboardActive = useSelector(
+    (state: RootState) =>
+      state.app.screensharePeerTrackNodes.length > 0 ||
+      !!state.hmsStates.whiteboard
   );
   const activeIndex = useSelector(
     (state: RootState) => state.app.gridViewActivePage
@@ -248,7 +257,7 @@ const RegularTiles = React.forwardRef<
   );
 
   return (
-    <View style={{ flex: screenshareTilesAvailable ? undefined : 1 }}>
+    <View style={{ flex: screenshareTilesOrWhiteboardActive ? undefined : 1 }}>
       <FlatList
         ref={flatlistRef}
         horizontal={true}
@@ -275,7 +284,7 @@ const RegularTiles = React.forwardRef<
           list={pairedPeers}
           activeIndex={activeIndex}
           style={
-            screenshareTilesAvailable || isLandscapeOrientation
+            screenshareTilesOrWhiteboardActive || isLandscapeOrientation
               ? { marginVertical: isLandscapeOrientation ? 4 : 8 }
               : null
           }

package/src/components/HLSChatView.tsx

@@ -10,13 +10,16 @@ import { HLSDescriptionPane } from './HLSDescriptionPane';
 import { useIsLandscapeOrientation } from '../utils/dimension';
 import type { RootState } from '../redux';
 import { HLSNotifications } from './HLSNotifications';
+import { PipModes } from '../utils/types';
 
 export const HLSChatView = () => {
   const isLandscapeOrientation = useIsLandscapeOrientation();
   const { chatWrapperConstraints } = useHLSViewsConstraints();
-  const hlsFullScreen = useSelector(
-    (state: RootState) => state.app.hlsFullScreen
-  );
+  const fullScreenMode = useSelector((state: RootState) => {
+    const hlsFullScreen = state.app.hlsFullScreen;
+    const isPipModeActive = state.app.pipModeStatus === PipModes.ACTIVE;
+    return hlsFullScreen || isPipModeActive;
+  });
 
   const hmsRoomStyles = useHMSRoomStyleSheet((theme) => ({
     wrapper: {
@@ -24,7 +27,7 @@ export const HLSChatView = () => {
     },
   }));
 
-  if (hlsFullScreen) {
+  if (fullScreenMode) {
     return null;
   }
 

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/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/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';
@@ -22,6 +22,7 @@ import { BottomSheet, useBottomSheetActions } from './BottomSheet';
 import {
   isPublishingAllowed,
   useHMSConferencingScreenConfig,
+  useHMSInstance,
   useHMSLayoutConfig,
   useHMSRoomColorPalette,
   useHMSRoomStyleSheet,
@@ -38,6 +39,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 +59,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 +81,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();
@@ -271,6 +280,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 +458,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 }} />,
@@ -458,7 +533,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'