fix: enable whiteboard zoom on mweb (#2427)

* feat: setup example app, remove custom app, tests * fix: update README * ci: remove unused step from create pr workflow * fix: example title, icon * fix: typo * fix: storybook * fix: vercel deployment * fix: output dir * fix: whiteboard zoom on mweb * fix: update versions --------- Co-authored-by: raviteja83 <[email protected]>
100mslive · Jan 16, 2024 · 8eacb5f · 8eacb5f · vercel · Jan 16, 2024
1 parent 9252326
commit 8eacb5f
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git 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
@@ -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