agora-appbuilder-core 4.1.12 → 4.1.13-beta.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agora-appbuilder-core",
-  "version": "4.1.12",
+  "version": "4.1.13-beta.1",
   "description": "React Native template for RTE app builder",
   "main": "index.js",
   "files": [

package/template/customization-api/temp.ts

@@ -16,7 +16,15 @@ import {useCaption} from '../src/subComponents/caption/useCaption';
 import useMuteToggleLocal, {
   MUTE_LOCAL_TYPE,
 } from '../src/utils/useMuteToggleLocal';
-import {RoomPhase} from 'white-web-sdk';
+// import {RoomPhase} from 'white-web-sdk';
+// Commented out for fastboard migration
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import {useScreenContext} from '../src/components/contexts/ScreenShareContext';
 import {filterObject} from '../src/utils/index';
 import {useToggleWhiteboard} from '../src/components/Controls';

package/template/defaultConfig.js

@@ -77,8 +77,8 @@ const DefaultConfig = {
   CHAT_ORG_NAME: '',
   CHAT_APP_NAME: '',
   CHAT_URL: '',
-  CLI_VERSION: '3.1.11',
-  CORE_VERSION: '4.1.11',
+  CLI_VERSION: '3.1.13-beta.1',
+  CORE_VERSION: '4.1.13-beta.1',
   DISABLE_LANDSCAPE_MODE: false,
   STT_AUTO_START: false,
   CLOUD_RECORDING_AUTO_START: false,

package/template/package.json

@@ -112,7 +112,7 @@
     "rn-emoji-keyboard": "^1.7.0",
     "rn-fetch-blob": "0.12.0",
     "text-encoding": "^0.7.0",
-    "white-web-sdk": "2.16.42"
+    "@netless/fastboard-react": "^1.1.2"
   },
   "devDependencies": {
     "@babel/core": "^7.20.0",

package/template/src/components/Controls.tsx

@@ -82,7 +82,15 @@ import {
 } from '../atoms/ToolbarPreset';
 
 import {whiteboardContext} from './whiteboard/WhiteboardConfigure';
-import {RoomPhase} from 'white-web-sdk';
+// import {RoomPhase} from 'white-web-sdk';
+// Commented out for fastboard migration
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import {useNoiseSupression} from '../app-state/useNoiseSupression';
 
 import {useVB} from './virtual-background/useVB';

package/template/src/components/whiteboard/FastBoardView.tsx

@@ -0,0 +1,227 @@
+/*
+********************************************
+ Copyright © 2021 Agora Lab, Inc., all rights reserved.
+ AppBuilder and all associated components, source code, APIs, services, and documentation 
+ (the "Materials") are owned by Agora Lab, Inc. and its licensors. The Materials may not be 
+ accessed, used, modified, or distributed for any purpose without a license from Agora Lab, Inc.  
+ Use without a license or in violation of any license terms and conditions (including use for 
+ any purpose competitive to Agora Lab, Inc.'s business) is strictly prohibited. For more 
+ information visit https://appbuilder.agora.io. 
+*********************************************
+*/
+
+import React, {useRef, useEffect} from 'react';
+import {StyleSheet, View, Text} from 'react-native';
+import {useRoomInfo} from 'customization-api';
+import {useString} from '../../utils/useString';
+import {whiteboardInitializingText} from '../../language/default-labels/videoCallScreenLabels';
+import {useFastboard, Fastboard, createFastboard, FastboardApp} from '@netless/fastboard-react/full';
+
+import {useLocalUid} from '../../../agora-rn-uikit';
+import useUserName from '../../utils/useUserName';
+
+interface FastBoardViewProps {
+  showToolbox?: boolean;
+}
+
+/**
+ * Technical Note: Why we are not using the 'useFastboard' hook?
+ * 
+ * We replaced the standard 'useFastboard' hook with a manual 'FastboardManager' implementation
+ * to solve a critical race condition in React 18+ Strict Mode.
+ * 
+ * Issue: "[WindowManager]: Already created cannot be created again"
+ * 
+ * In Strict Mode, React intentionally mounts, unmounts, and remounts components rapidly 
+ * to detect side-effects. The standard hook attempts to initialize the Fastboard singleton 
+ * twice in parallel. The first initialization is still "pending" when the second one starts,
+ * causing the underlying WindowManager to crash because it doesn't support concurrent init calls.
+ * 
+ * Solution: The 'FastboardManager' below uses Reference Counting and Singleton pattern to:
+ * 1. Deduplicate initialization requests (reusing the same Promise).
+ * 2. Delay cleanup slightly to handle the rapid Unmount -> Mount cycle without destroying the instance.
+ */
+const FastBoardView: React.FC<FastBoardViewProps> = ({showToolbox = true}) => {
+  const {
+    data: {whiteboard: {room_token, room_uuid} = {}, isHost},
+  } = useRoomInfo();
+  
+  const localUid = useLocalUid();
+  const [name] = useUserName();
+
+  const whiteboardInitializing = useString(whiteboardInitializingText)();
+
+  // Generate stable UID - only once
+  // Use local user's name or fallback to UID if name is not available
+  const uidRef = useRef<string>(name || String(localUid));
+  const [fastboard, setFastboard] = React.useState<FastboardApp | null>(null);
+
+  // Configuration object - Memoize stringified version to detect changes
+  const config = React.useMemo(() => ({
+    sdkConfig: {
+      appIdentifier: 'EEJBQPVbEe2Bao8ZShuoHQ/hgB5eo0qcDbVig',
+      region: 'us-sv',
+    },
+    joinRoom: {
+      uid: uidRef.current,
+      uuid: room_uuid,
+      roomToken: room_token,
+    },
+  }), [room_uuid, room_token]);
+
+  const configStr = JSON.stringify(config);
+
+  useEffect(() => {
+    let isMounted = true;
+    
+    const initFastboard = async () => {
+      try {
+        const app = await FastboardManager.acquire(configStr, config);
+        if (isMounted) {
+          setFastboard(app);
+        }
+      } catch (error) {
+        console.error("Fastboard initialization failed:", error);
+      }
+    };
+
+    initFastboard();
+
+    return () => {
+      isMounted = false;
+      FastboardManager.release(configStr);
+    };
+  }, [configStr, config]);
+
+  // Show loading if fastboard not ready yet
+  if (!fastboard) {
+    return (
+      <View style={styles.container}>
+        <View style={styles.placeholder}>
+          <Text style={styles.placeholderText}>{whiteboardInitializing}</Text>
+        </View>
+      </View>
+    );
+  }
+
+  return (
+    <View style={styles.container}>
+      <div style={divStyles.fastboardContainer}>
+        <Fastboard app={fastboard} />
+      </div>
+    </View>
+  );
+};
+
+// Global Manager to handle Strict Mode and Singleton constraints
+const FastboardManager = {
+  activeConfig: null as string | null,
+  instance: null as FastboardApp | null,
+  promise: null as Promise<FastboardApp> | null,
+  subscribers: 0,
+  
+  acquire: async (configStr: string, config: any): Promise<FastboardApp> => {
+    FastboardManager.subscribers++;
+    
+    // If config matches and we have an instance/promise, reuse it
+    if (FastboardManager.activeConfig === configStr) {
+      if (FastboardManager.instance) return FastboardManager.instance;
+      if (FastboardManager.promise) return FastboardManager.promise;
+    }
+    
+    // Config mismatch! We must cleanup the previous board before creating a new one.
+    // This happens if component remounts with new UID (e.g. Pin to Top).
+    
+    // 1. If there's a pending loading operation, wait for it and destroy the result.
+    if (FastboardManager.promise) {
+       try {
+          const oldApp = await FastboardManager.promise;
+           // Double check if it wasn't already destroyed or reassigned
+           if (oldApp) oldApp.destroy();
+       } catch (e) {
+          console.warn("Error cleaning up previous pending Fastboard:", e);
+       }
+    }
+    
+    // 2. If there's an active instance, destroy it.
+    if (FastboardManager.instance) {
+        try {
+            FastboardManager.instance.destroy();
+        } catch (e) {
+             console.warn("Error cleaning up previous active Fastboard:", e);
+        }
+    }
+    
+    // Reset state
+    FastboardManager.instance = null;
+    FastboardManager.promise = null;
+    FastboardManager.activeConfig = configStr;
+    
+    // 3. Create new instance
+    FastboardManager.promise = createFastboard(config).then(app => {
+      // Check if we are still the active config
+      if (FastboardManager.activeConfig === configStr) {
+         FastboardManager.instance = app;
+         return app;
+      } else {
+         // Config changed while loading
+         app.destroy();
+         throw new Error("Fastboard config changed during initialization");
+      }
+    });
+    
+    return FastboardManager.promise;
+  },
+  
+  release: (configStr: string) => {
+    FastboardManager.subscribers--;
+    
+    // Delayed cleanup to handle Strict Mode "Unmount -> Mount" flicker
+    setTimeout(() => {
+      if (FastboardManager.subscribers === 0 && FastboardManager.activeConfig === configStr) {
+         if (FastboardManager.instance) {
+           FastboardManager.instance.destroy();
+           FastboardManager.instance = null;
+         }
+         FastboardManager.promise = null;
+         FastboardManager.activeConfig = null;
+      }
+    }, 200);
+  }
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    position: 'relative',
+    backgroundColor: '#ffffff',
+  },
+  placeholder: {
+    position: 'absolute',
+    width: '100%',
+    height: '100%',
+    backgroundColor: '#f5f5f5',
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  placeholderText: {
+    color: '#666666',
+    fontSize: 16,
+  },
+  errorText: {
+    color: '#ff4444',
+    fontSize: 16,
+  },
+});
+
+const divStyles = {
+  fastboardContainer: {
+    width: '100%',
+    height: '100%',
+    borderRadius: 4,
+    overflow: 'hidden' as const,
+  },
+};
+
+export default FastBoardView;

package/template/src/components/whiteboard/StrokeWidthTool.tsx

@@ -1,6 +1,10 @@
 import * as React from 'react';
 //import './StrokeWidthTool.less';
-import {Color, Room, RoomState} from 'white-web-sdk';
+// import {Color, Room, RoomState} from 'white-web-sdk';
+// Commented out for fastboard migration
+type Color = [number, number, number];
+type Room = any;
+type RoomState = any;
 import {View, Text} from 'react-native';
 import ThemeConfig from '../../theme';
 import hexadecimalTransparency from '../../utils/hexadecimalTransparency';

package/template/src/components/whiteboard/WhiteboardButton.tsx

@@ -7,7 +7,15 @@ import {
   useRoomInfo,
 } from 'customization-api';
 import {whiteboardContext} from './WhiteboardConfigure';
-import {RoomPhase} from 'white-web-sdk';
+// import {RoomPhase} from 'white-web-sdk';
+// Commented out for fastboard migration
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import IconButton from '../../atoms/IconButton';
 import {EventNames} from '../../rtm-events';
 

package/template/src/components/whiteboard/WhiteboardCanvas.tsx

@@ -17,7 +17,15 @@ import {
   whiteboardPaper,
 } from './WhiteboardConfigure';
 import {StyleSheet, View, Text} from 'react-native';
-import {RoomPhase, ApplianceNames} from 'white-web-sdk';
+// import {RoomPhase, ApplianceNames} from 'white-web-sdk';
+// Commented out for fastboard migration
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import WhiteboardToolBox from './WhiteboardToolBox';
 import WhiteboardWidget from './WhiteboardWidget';
 

package/template/src/components/whiteboard/WhiteboardConfigure.tsx

@@ -8,11 +8,22 @@ import {
   randomIntFromInterval,
   randomString,
 } from '../../utils/common';
-import {WhiteWebSdk, RoomPhase, Room, ViewMode} from 'white-web-sdk';
+// import {WhiteWebSdk, RoomPhase, Room, ViewMode} from 'white-web-sdk';
+// Commented out for fastboard migration - types defined locally
+type Room = any;
+type ViewMode = any;
+type WhiteWebSdk = any;
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import LocalEventEmitter, {
   LocalEventsEnum,
 } from '../../rtm-events-api/LocalEvents';
-import {CursorTool} from './WhiteboardCursor';
+// import {CursorTool} from './WhiteboardCursor'; // Disabled for fastboard migration
 import useUserName from '../../utils/useUserName';
 import {DefaultLayouts} from '../../pages/video-call/DefaultLayouts';
 import events, {PersistanceLevel} from '../../rtm-events-api';
@@ -117,23 +128,24 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   const whiteboardRoom = useRef({} as Room);
   const {pinnedUid, activeUids} = useContent();
   const prevImageUploadHeightRef = useRef(0);
-  const cursorAdapter = new CursorTool();
+  // const cursorAdapter = new CursorTool(); // Disabled for fastboard migration
   const uploadPendingRef = useRef(false);
 
-  useEffect(() => {
-    if (
-      whiteboardRoomState === RoomPhase.Connected &&
-      pinnedUid &&
-      pinnedUid == whiteboardUidRef.current
-    ) {
-      whiteboardRoom?.current?.moveCamera &&
-        whiteboardRoom?.current?.moveCamera({
-          centerX: 0,
-          centerY: 0,
-          scale: 1,
-        });
-    }
-  }, [pinnedUid, whiteboardRoomState]);
+  // Disabled for fastboard migration - FastBoardView handles camera
+  // useEffect(() => {
+  //   if (
+  //     whiteboardRoomState === RoomPhase.Connected &&
+  //     pinnedUid &&
+  //     pinnedUid == whiteboardUidRef.current
+  //   ) {
+  //     whiteboardRoom?.current?.moveCamera &&
+  //       whiteboardRoom?.current?.moveCamera({
+  //         centerX: 0,
+  //         centerY: 0,
+  //         scale: 1,
+  //       });
+  //   }
+  // }, [pinnedUid, whiteboardRoomState]);
 
   const [name] = useUserName();
   const {
@@ -143,34 +155,35 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
   } = useRoomInfo();
   const {currentLayout} = useLayout();
 
-  useEffect(() => {
-    try {
-      if (
-        whiteboardRoomState === RoomPhase.Connected &&
-        isHost &&
-        !isMobileUA()
-      ) {
-        if (
-          currentLayout === DefaultLayouts[1].name &&
-          activeUids &&
-          activeUids?.length &&
-          (activeUids[0] === getWhiteboardUid() ||
-            pinnedUid === getWhiteboardUid())
-        ) {
-          whiteboardRoom?.current?.setWritable(true);
-        } else {
-          whiteboardRoom?.current?.setWritable(false);
-        }
-      }
-    } catch (error) {
-      logger.error(
-        LogSource.Internals,
-        'WHITEBOARD',
-        'error on whiteboard setWritable',
-        error,
-      );
-    }
-  }, [currentLayout, isHost, whiteboardRoomState, activeUids, pinnedUid]);
+  // Disabled for fastboard migration - FastBoardView handles writable state
+  // useEffect(() => {
+  //   try {
+  //     if (
+  //       whiteboardRoomState === RoomPhase.Connected &&
+  //       isHost &&
+  //       !isMobileUA()
+  //     ) {
+  //       if (
+  //         currentLayout === DefaultLayouts[1].name &&
+  //         activeUids &&
+  //         activeUids?.length &&
+  //         (activeUids[0] === getWhiteboardUid() ||
+  //           pinnedUid === getWhiteboardUid())
+  //       ) {
+  //         whiteboardRoom?.current?.setWritable(true);
+  //       } else {
+  //         whiteboardRoom?.current?.setWritable(false);
+  //       }
+  //     }
+  //   } catch (error) {
+  //     logger.error(
+  //       LogSource.Internals,
+  //       'WHITEBOARD',
+  //       'error on whiteboard setWritable',
+  //       error,
+  //     );
+  //   }
+  // }, [currentLayout, isHost, whiteboardRoomState, activeUids, pinnedUid]);
 
   const BoardColorChangedCallBack = ({boardColor}) => {
     setBoardColor(boardColor);
@@ -213,94 +226,20 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     };
   }, []);
 
-  const fileUploadCallBack = images => {
-    if (uploadPendingRef.current) {
-      let prevImageWidth = 0;
-      let prevImageHeight = prevImageUploadHeightRef.current;
-      let count = 0;
-      let focus = {
-        x: 0,
-        y: 0,
-      };
-      for (const key in images) {
-        if (Object.prototype.hasOwnProperty.call(images, key)) {
-          const element = images[key];
-          const uuid = key + ' ' + randomString();
-          const x = 0 + prevImageWidth + 50;
-          const y = 0 + prevImageUploadHeightRef?.current + 50;
-          whiteboardRoom.current?.insertImage({
-            centerX: x,
-            centerY: y,
-            height: dummyHeight,
-            width: dummyWidth,
-            uuid: uuid,
-            locked: false,
-          });
-          if (count === 0) {
-            focus.x = x;
-            focus.y = y;
-          }
-          setTimeout(() => {
-            whiteboardRoom.current?.completeImageUpload(uuid, element.url);
-          }, 1000);
-          prevImageWidth = prevImageWidth + 50 + dummyWidth;
-          if ((count + 1) % 4 === 0) {
-            prevImageUploadHeightRef.current =
-              prevImageUploadHeightRef.current + 50 + dummyHeight;
-            prevImageWidth = 0;
-          } else {
-            prevImageHeight = dummyHeight;
-          }
-          count = count + 1;
-        }
-      }
-
-      //for next image upload
-      if ((count + 1) % 4 !== 0) {
-        prevImageUploadHeightRef.current =
-          prevImageUploadHeightRef.current + 50 + prevImageHeight;
-      }
-      uploadPendingRef.current = false;
-
-      //focus the uploaded doc/image
-      whiteboardRoom.current?.moveCamera({
-        centerX: focus.x,
-        centerY: focus.y,
-      });
-      sendLastImageUploadPositionToRemoteUsers(
-        prevImageUploadHeightRef.current,
-      );
-    }
+  // Disabled for fastboard migration - file upload not supported yet
+  const fileUploadCallBack = (images: any) => {
+    // TODO: Implement file upload for fastboard if needed
+    console.log('File upload not yet implemented for fastboard');
   };
 
   const setUploadRef = () => {
     uploadPendingRef.current = true;
   };
 
-  const insertImageIntoWhiteboard = url => {
-    if (!url) {
-      return;
-    }
-    const uuid = randomString();
-    const y = 0 + prevImageUploadHeightRef?.current + 50;
-    whiteboardRoom.current?.insertImage({
-      centerX: 0,
-      centerY: y,
-      height: 300,
-      width: 300,
-      uuid: uuid,
-      locked: false,
-    });
-    setTimeout(() => {
-      whiteboardRoom.current?.completeImageUpload(uuid, url);
-    }, 1000);
-    whiteboardRoom.current?.moveCamera({
-      centerX: 0,
-      centerY: y,
-    });
-    prevImageUploadHeightRef.current =
-      prevImageUploadHeightRef.current + 50 + 300 + 100;
-    sendLastImageUploadPositionToRemoteUsers(prevImageUploadHeightRef.current);
+  // Disabled for fastboard migration - image insert not supported yet
+  const insertImageIntoWhiteboard = (url: string) => {
+    // TODO: Implement image insert for fastboard if needed
+    console.log('Image insert not yet implemented for fastboard');
   };
 
   const sendLastImageUploadPositionToRemoteUsers = (height: number) => {
@@ -326,79 +265,9 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     };
   }, []);
 
-  const join = () => {
-    const InitState = whiteboardRoomState;
-    try {
-      const index = randomIntFromInterval(0, 9);
-      setWhiteboardRoomState(RoomPhase.Connecting);
-      logger.log(LogSource.Internals, 'WHITEBOARD', 'Trying to join room');
-      whiteWebSdkClient.current
-        .joinRoom({
-          cursorAdapter: cursorAdapter,
-          uid: `${whiteboardUidRef.current}`,
-          uuid: room_uuid,
-          roomToken: room_token,
-          floatBar: true,
-          isWritable: isHost && !isMobileUA(),
-          userPayload: {
-            cursorName: name,
-            cursorColor: CursorColor[index].cursorColor,
-            textColor: CursorColor[index].textColor,
-          },
-        })
-        .then(room => {
-          logger.log(LogSource.Internals, 'WHITEBOARD', 'Join room successful');
-          whiteboardRoom.current = room;
-          cursorAdapter.setRoom(room);
-          whiteboardRoom.current?.setViewMode(ViewMode.Freedom);
-          whiteboardRoom.current?.bindHtmlElement(whiteboardPaper);
-          if (isHost && !isMobileUA()) {
-            whiteboardRoom.current?.setMemberState({
-              strokeColor: [0, 0, 0],
-            });
-          }
-          setWhiteboardRoomState(RoomPhase.Connected);
-        })
-        .catch(err => {
-          setWhiteboardRoomState(InitState);
-          logger.error(
-            LogSource.Internals,
-            'WHITEBOARD',
-            'Join room error',
-            err,
-          );
-        });
-    } catch (err) {
-      setWhiteboardRoomState(InitState);
-      logger.error(LogSource.Internals, 'WHITEBOARD', 'Join room error', err);
-    }
-  };
-
-  const leave = () => {
-    const InitState = whiteboardRoomState;
-    try {
-      setWhiteboardRoomState(RoomPhase.Disconnecting);
-      whiteboardRoom.current
-        ?.disconnect()
-        .then(() => {
-          whiteboardUidRef.current = Date.now();
-          whiteboardRoom.current?.bindHtmlElement(null);
-          setWhiteboardRoomState(RoomPhase.Disconnected);
-        })
-        .catch(err => {
-          setWhiteboardRoomState(InitState);
-          logger.error(
-            LogSource.Internals,
-            'WHITEBOARD',
-            'leave room error',
-            err,
-          );
-        });
-    } catch (err) {
-      setWhiteboardRoomState(InitState);
-      logger.error(LogSource.Internals, 'WHITEBOARD', 'leave room error', err);
-    }
-  };
+  // Disabled for fastboard migration - FastBoardView handles join/leave
+  // const join = () => { ... };
+  // const leave = () => { ... };
 
   const joinWhiteboardRoom = () => {
     setWhiteboardActive(true);
@@ -408,24 +277,35 @@ const WhiteboardConfigure: React.FC<WhiteboardPropsInterface> = props => {
     setWhiteboardActive(false);
   };
 
+  // Disabled for fastboard migration - FastBoardView handles its own connection
+  // useEffect(() => {
+  //   if (!whiteWebSdkClient.current.joinRoom && whiteboardActive) {
+  //     const appIdentifier = $config.WHITEBOARD_APPIDENTIFIER;
+  //     whiteWebSdkClient.current = new WhiteWebSdk({
+  //       appIdentifier: appIdentifier,
+  //       region: $config.WHITEBOARD_REGION,
+  //     });
+  //     join();
+  //     setWhiteboardStartedFirst(true);
+  //   } else if (whiteboardActive) {
+  //     join();
+  //   } else {
+  //     if (
+  //       whiteboardRoom.current &&
+  //       Object.keys(whiteboardRoom.current)?.length
+  //     ) {
+  //       leave();
+  //     }
+  //   }
+  // }, [whiteboardActive]);
+
+  // For fastboard: just set whiteboardStartedFirst when active
   useEffect(() => {
-    if (!whiteWebSdkClient.current.joinRoom && whiteboardActive) {
-      const appIdentifier = $config.WHITEBOARD_APPIDENTIFIER;
-      whiteWebSdkClient.current = new WhiteWebSdk({
-        appIdentifier: appIdentifier,
-        region: $config.WHITEBOARD_REGION,
-      });
-      join();
+    if (whiteboardActive) {
       setWhiteboardStartedFirst(true);
-    } else if (whiteboardActive) {
-      join();
+      setWhiteboardRoomState(RoomPhase.Connected);
     } else {
-      if (
-        whiteboardRoom.current &&
-        Object.keys(whiteboardRoom.current)?.length
-      ) {
-        leave();
-      }
+      setWhiteboardRoomState(RoomPhase.Disconnected);
     }
   }, [whiteboardActive]);
 

package/template/src/components/whiteboard/WhiteboardCursor.tsx

@@ -1,13 +1,21 @@
 import * as React from 'react';
-import {
-  Cursor,
-  CursorAdapter,
-  CursorDescription,
-  Player,
-  Room,
-  RoomMember,
-  RoomState,
-} from 'white-web-sdk';
+// import {
+//   Cursor,
+//   CursorAdapter,
+//   CursorDescription,
+//   Player,
+//   Room,
+//   RoomMember,
+//   RoomState,
+// } from 'white-web-sdk';
+// Commented out for fastboard migration - types defined locally
+type Cursor = any;
+type CursorAdapter = any;
+type CursorDescription = {x: number; y: number; width: number; height: number};
+type Player = any;
+type Room = any;
+type RoomMember = any;
+type RoomState = any;
 
 export type CursorComponentProps = {
   roomMember: RoomMember;

package/template/src/components/whiteboard/WhiteboardToolBox.tsx

@@ -13,7 +13,21 @@
 import React, {useContext, useEffect, useState} from 'react';
 import {StyleSheet, View, Pressable} from 'react-native';
 import {hexToRgb, isMobileUA, isWeb, randomString} from '../../utils/common';
-import {ApplianceNames} from 'white-web-sdk';
+// import {ApplianceNames} from 'white-web-sdk';
+// Commented out for fastboard migration
+const ApplianceNames = {
+  selector: 'selector',
+  pencil: 'pencil',
+  rectangle: 'rectangle',
+  ellipse: 'ellipse',
+  straight: 'straight',
+  arrow: 'arrow',
+  hand: 'hand',
+  laserPointer: 'laserPointer',
+  eraser: 'eraser',
+  text: 'text',
+  pencilEraser: 'pencilEraser',
+} as const;
 import StorageContext from '../../components/StorageContext';
 import {useRoomInfo} from '../room-info/useRoomInfo';
 import Toast from '../../../react-native-toast-message';

package/template/src/components/whiteboard/WhiteboardView.tsx

@@ -13,7 +13,15 @@
 import React, {useRef, useEffect, useContext, useState} from 'react';
 import {whiteboardContext} from './WhiteboardConfigure';
 import {StyleSheet, View, Text} from 'react-native';
-import {RoomPhase, ApplianceNames} from 'white-web-sdk';
+// import {RoomPhase, ApplianceNames} from 'white-web-sdk';
+// Commented out for fastboard migration
+enum RoomPhase {
+  Connecting = 'connecting',
+  Connected = 'connected',
+  Reconnecting = 'reconnecting',
+  Disconnecting = 'disconnecting',
+  Disconnected = 'disconnected',
+}
 import WhiteboardToolBox from './WhiteboardToolBox';
 import WhiteboardCanvas from './WhiteboardCanvas';
 import {useContent, useLayout} from 'customization-api';

package/template/src/components/whiteboard/WhiteboardWidget.tsx

@@ -12,7 +12,10 @@
 
 import React, {useContext, useState} from 'react';
 import {StyleSheet, View, TouchableOpacity, Text} from 'react-native';
-import {Room, RoomState} from 'white-web-sdk';
+// import {Room, RoomState} from 'white-web-sdk';
+// Commented out for fastboard migration
+type Room = any;
+type RoomState = any;
 import {
   IconButton,
   useContent,

package/template/src/components/whiteboard/WhiteboardWrapper.tsx

@@ -2,7 +2,8 @@ import React, {useContext} from 'react';
 import {whiteboardContext} from './WhiteboardConfigure';
 import VideoRenderer from '../../pages/video-call/VideoRenderer';
 import {useContent} from 'customization-api';
-import WhiteboardView from './WhiteboardView';
+// import WhiteboardView from './WhiteboardView';
+import FastBoardView from './FastBoardView';
 
 const WhiteboardWrapper = () => {
   const {getWhiteboardUid} = useContext(whiteboardContext);
@@ -28,7 +29,7 @@ const WhiteboardWrapper = () => {
           name: 'Whiteboard',
           muted: undefined,
         }}
-        CustomChild={WhiteboardView}
+        CustomChild={FastBoardView}
       />
     );
   }