diff --git a/template/customization-api/temp.ts b/template/customization-api/temp.ts index 46fed9a8f..0b76255c5 100644 --- a/template/customization-api/temp.ts +++ b/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'; diff --git a/template/package.json b/template/package.json index ef2865a74..e1c71035b 100644 --- a/template/package.json +++ b/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.1" }, "devDependencies": { "@babel/core": "^7.20.0", diff --git a/template/src/components/Controls.tsx b/template/src/components/Controls.tsx index 0828af9e2..8f5e79744 100644 --- a/template/src/components/Controls.tsx +++ b/template/src/components/Controls.tsx @@ -76,7 +76,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'; diff --git a/template/src/components/whiteboard/FastBoardView.tsx b/template/src/components/whiteboard/FastBoardView.tsx new file mode 100644 index 000000000..46c21af0a --- /dev/null +++ b/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 = ({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(name || String(localUid)); + const [fastboard, setFastboard] = React.useState(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 ( + + + {whiteboardInitializing} + + + ); + } + + return ( + +
+ +
+ + ); +}; + +// 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 | null, + subscribers: 0, + + acquire: async (configStr: string, config: any): Promise => { + 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; diff --git a/template/src/components/whiteboard/StrokeWidthTool.tsx b/template/src/components/whiteboard/StrokeWidthTool.tsx index e983c7f9c..4c020cc64 100644 --- a/template/src/components/whiteboard/StrokeWidthTool.tsx +++ b/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'; diff --git a/template/src/components/whiteboard/WhiteboardButton.tsx b/template/src/components/whiteboard/WhiteboardButton.tsx index c938cf3af..bd106449c 100644 --- a/template/src/components/whiteboard/WhiteboardButton.tsx +++ b/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'; diff --git a/template/src/components/whiteboard/WhiteboardCanvas.tsx b/template/src/components/whiteboard/WhiteboardCanvas.tsx index 704d13b9b..d29f26fe1 100644 --- a/template/src/components/whiteboard/WhiteboardCanvas.tsx +++ b/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'; diff --git a/template/src/components/whiteboard/WhiteboardConfigure.tsx b/template/src/components/whiteboard/WhiteboardConfigure.tsx index 229c7525a..b35e86905 100644 --- a/template/src/components/whiteboard/WhiteboardConfigure.tsx +++ b/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 = 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 = 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 = 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 = 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 = 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]); diff --git a/template/src/components/whiteboard/WhiteboardCursor.tsx b/template/src/components/whiteboard/WhiteboardCursor.tsx index 8e4c7a3c1..3e7db53ff 100644 --- a/template/src/components/whiteboard/WhiteboardCursor.tsx +++ b/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; diff --git a/template/src/components/whiteboard/WhiteboardToolBox.tsx b/template/src/components/whiteboard/WhiteboardToolBox.tsx index b0d065d9a..9a7fd3f4c 100644 --- a/template/src/components/whiteboard/WhiteboardToolBox.tsx +++ b/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'; diff --git a/template/src/components/whiteboard/WhiteboardView.tsx b/template/src/components/whiteboard/WhiteboardView.tsx index 4ab461ebe..504989a96 100644 --- a/template/src/components/whiteboard/WhiteboardView.tsx +++ b/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'; diff --git a/template/src/components/whiteboard/WhiteboardWidget.tsx b/template/src/components/whiteboard/WhiteboardWidget.tsx index e98ef73ee..cf3e5927f 100644 --- a/template/src/components/whiteboard/WhiteboardWidget.tsx +++ b/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, diff --git a/template/src/components/whiteboard/WhiteboardWrapper.tsx b/template/src/components/whiteboard/WhiteboardWrapper.tsx index 02315f17e..e4997b2c2 100644 --- a/template/src/components/whiteboard/WhiteboardWrapper.tsx +++ b/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} /> ); }