fix: move read only zoom to content logic to prebuilt

packages/hms-whiteboard/src/hooks/useCollaboration.ts

@@ -243,11 +243,11 @@ export function useCollaboration({
 
   // zoom to fit on remote changes for hls viewer
   useEffect(() => {
-    if (!editor || !editor.getInstanceState()?.isReadonly || !zoomToContent) return;
+    if (!editor || !zoomToContent) return;
 
     store.listen(
       () => {
-        editor.zoomToFit();
+        editor.zoomToContent();
       },
       { source: 'remote', scope: 'document' },
     );

packages/react-sdk/src/hooks/useWhiteboard.ts

@@ -1,18 +1,16 @@
 import { useCallback, useEffect, useState } from 'react';
 import {
-  selectAppData,
   selectIsConnectedToRoom,
   selectLocalPeer,
   selectPermissions,
   selectWhiteboard,
 } from '@100mslive/hms-video-store';
 import { useHMSActions, useHMSStore } from '../primitives/HmsRoomProvider';
 
-export const useWhiteboard = (isMobile = false) => {
+export const useWhiteboard = () => {
   const isConnected = useHMSStore(selectIsConnectedToRoom);
   const localPeerUserId = useHMSStore(selectLocalPeer)?.customerUserId;
   const whiteboard = useHMSStore(selectWhiteboard);
-  const isHeadless = useHMSStore(selectAppData('disableNotifications'));
   const open = !!whiteboard?.open;
   const isOwner = whiteboard?.owner === localPeerUserId;
   const actions = useHMSActions();
@@ -44,7 +42,7 @@ export const useWhiteboard = (isMobile = false) => {
     endpoint: whiteboard?.addr,
     isOwner,
     isAdmin,
-    zoomToContent: isHeadless || isMobile,
+    permissions,
     toggle: isEnabled && isAdmin ? toggle : undefined,
   };
 };

packages/roomkit-react/src/Prebuilt/components/VideoLayouts/WhiteboardLayout.tsx

@@ -1,7 +1,13 @@
 import React, { useEffect, useMemo } from 'react';
 import { useMedia } from 'react-use';
 import { Whiteboard } from '@100mslive/hms-whiteboard';
-import { selectPeerByCondition, selectWhiteboard, useHMSStore, useWhiteboard } from '@100mslive/react-sdk';
+import {
+  selectAppData,
+  selectPeerByCondition,
+  selectWhiteboard,
+  useHMSStore,
+  useWhiteboard,
+} from '@100mslive/react-sdk';
 import { Box } from '../../../Layout';
 import { config as cssConfig } from '../../../Theme';
 import { InsetTile } from '../InsetTile';
@@ -17,7 +23,10 @@ import '@100mslive/hms-whiteboard/index.css';
 
 const WhiteboardEmbed = () => {
   const isMobile = useMedia(cssConfig.media.md);
-  const { token, endpoint, zoomToContent } = useWhiteboard(isMobile);
+  const { token, endpoint, permissions } = useWhiteboard();
+  const isHeadless = useHMSStore(selectAppData('disableNotifications'));
+
+  const isReadonly = !permissions?.includes('write');
 
   if (!token) {
     return null;
@@ -36,7 +45,11 @@ const WhiteboardEmbed = () => {
       }}
     >
       <Box css={{ size: '100%' }}>
-        <Whiteboard token={token} endpoint={`https://${endpoint}`} zoomToContent={zoomToContent} />
+        <Whiteboard
+          token={token}
+          endpoint={`https://${endpoint}`}
+          zoomToContent={isHeadless || (isMobile && isReadonly)}
+        />
       </Box>
     </Box>
   );