From fd5e09047113c680d4f2b0673df1b7789553eb12 Mon Sep 17 00:00:00 2001
From: eswarclynn <esuclintblazer@gmail.com>
Date: Tue, 16 Jan 2024 10:34:39 +0530
Subject: [PATCH] fix: whiteboard zoom on mweb

---
 packages/react-sdk/src/hooks/useWhiteboard.ts               | 6 +++---
 .../roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx   | 5 ++++-
 2 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/packages/react-sdk/src/hooks/useWhiteboard.ts b/packages/react-sdk/src/hooks/useWhiteboard.ts
index e0ec3157ac..91b57bb2e7 100644
--- a/packages/react-sdk/src/hooks/useWhiteboard.ts
+++ b/packages/react-sdk/src/hooks/useWhiteboard.ts
@@ -10,7 +10,7 @@ import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
 
 const WHITEBOARD_ORIGIN = 'https://whiteboard-qa.100ms.live';
 
-export const useWhiteboard = () => {
+export const useWhiteboard = (isMobile = false) => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const localPeerUserId = useHMSStore(selectLocalPeer)?.customerUserId;
   const whiteboard = useHMSStore(selectWhiteboard);
@@ -30,11 +30,11 @@ export const useWhiteboard = () => {
     const url = new URL(WHITEBOARD_ORIGIN);
     url.searchParams.set('endpoint', `https://${whiteboard.addr}`);
     url.searchParams.set('token', whiteboard.token);
-    if (isHeadless) {
+    if (isHeadless || isMobile) {
       url.searchParams.set('zoom_to_content', 'true');
     }
     iframeRef.current.src = url.toString();
-  }, [whiteboard?.addr, whiteboard?.token, isHeadless]);
+  }, [whiteboard?.addr, whiteboard?.token, isHeadless, isMobile]);
 
   useEffect(() => {
     if (isConnected) {
diff --git a/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx b/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx
index 3fd588a4b7..ad286bc111 100644
--- a/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx
+++ b/packages/roomkit-react/src/Prebuilt/layouts/WhiteboardView.tsx
@@ -1,14 +1,17 @@
 import React, { useEffect, useMemo } from 'react';
+import { useMedia } from 'react-use';
 import { selectPeers, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
 import { SecondaryTiles } from '../components/SecondaryTiles';
 import { ProminenceLayout } from '../components/VideoLayouts/ProminenceLayout';
+import { config as cssConfig } from '../../';
 import { Box } from '../../Layout';
 // @ts-ignore: No implicit Any
 import { useSetAppDataByKey } from '../components/AppData/useUISettings';
 import { APP_DATA } from '../common/constants';
 
 const EmbedComponent = () => {
-  const { iframeRef } = useWhiteboard();
+  const isMobile = useMedia(cssConfig.media.md);
+  const { iframeRef } = useWhiteboard(isMobile);
 
   return (
     <Box