457 lines
18 KiB
TypeScript
457 lines
18 KiB
TypeScript
import { useEffect, useRef, useState } from 'react';
|
|
import { useNavigate, useLocation } from 'react-router';
|
|
import {
|
|
Tldraw,
|
|
Editor,
|
|
useTldrawUser,
|
|
DEFAULT_SUPPORT_VIDEO_TYPES,
|
|
DEFAULT_SUPPORTED_IMAGE_TYPES,
|
|
TLStore,
|
|
TLStoreWithStatus
|
|
} from '@tldraw/tldraw';
|
|
import { useTLDraw } from '../../contexts/TLDrawContext';
|
|
import { useAuth } from '../../contexts/AuthContext';
|
|
import { useUser } from '../../contexts/UserContext';
|
|
// Tldraw services
|
|
import { localStoreService } from '../../services/tldraw/localStoreService';
|
|
import { PresentationService } from '../../services/tldraw/presentationService';
|
|
import { NavigationSnapshotService } from '../../services/tldraw/snapshotService';
|
|
// Tldraw utils
|
|
import { getUiOverrides, getUiComponents } from '../../utils/tldraw/ui-overrides';
|
|
import { customAssets } from '../../utils/tldraw/assets';
|
|
import { singlePlayerTools } from '../../utils/tldraw/tools';
|
|
import { allShapeUtils } from '../../utils/tldraw/shapes';
|
|
import { allBindingUtils } from '../../utils/tldraw/bindings';
|
|
import { singlePlayerEmbeds } from '../../utils/tldraw/embeds';
|
|
import { customSchema } from '../../utils/tldraw/schemas';
|
|
// Navigation
|
|
import { useNavigationStore } from '../../stores/navigationStore';
|
|
// Layout
|
|
import { HEADER_HEIGHT } from '../../pages/Layout';
|
|
// Styles
|
|
import '../../utils/tldraw/tldraw.css';
|
|
// App debug
|
|
import { logger } from '../../debugConfig';
|
|
import { CircularProgress, Alert, Snackbar } from '@mui/material';
|
|
|
|
interface LoadingState {
|
|
status: 'ready' | 'loading' | 'error';
|
|
error: string;
|
|
}
|
|
|
|
export default function SinglePlayerPage() {
|
|
// Context hooks with initialization states
|
|
const { profile: user, loading: userLoading } = useUser();
|
|
const { accessToken } = useAuth();
|
|
const { context, setAuthInfo, switchContext } = useNavigationStore();
|
|
const {
|
|
tldrawPreferences,
|
|
initializePreferences,
|
|
presentationMode,
|
|
setTldrawPreferences
|
|
} = useTLDraw();
|
|
const routerNavigate = useNavigate();
|
|
const location = useLocation();
|
|
|
|
|
|
// Refs
|
|
const editorRef = useRef<Editor | null>(null);
|
|
const snapshotServiceRef = useRef<NavigationSnapshotService | null>(null);
|
|
|
|
// State
|
|
const [loadingState, setLoadingState] = useState<LoadingState>({
|
|
status: 'ready',
|
|
error: ''
|
|
});
|
|
const storeRef = useRef<TLStore | null>(null);
|
|
const [storeReady, setStoreReady] = useState(false);
|
|
|
|
// TLDraw user preferences
|
|
const tldrawUser = useTldrawUser({
|
|
userPreferences: {
|
|
id: user?.id ?? '',
|
|
name: user?.display_name,
|
|
color: tldrawPreferences?.color,
|
|
locale: tldrawPreferences?.locale,
|
|
colorScheme: tldrawPreferences?.colorScheme,
|
|
animationSpeed: tldrawPreferences?.animationSpeed,
|
|
isSnapMode: tldrawPreferences?.isSnapMode
|
|
},
|
|
setUserPreferences: setTldrawPreferences
|
|
});
|
|
|
|
// Initialize store — runs as soon as user is ready, no editor needed for store creation
|
|
useEffect(() => {
|
|
if (!user) {
|
|
logger.debug('single-player-page', '⏳ Waiting for user data');
|
|
return;
|
|
}
|
|
|
|
logger.info('single-player-page', '🔄 Starting store initialization', {
|
|
hasUser: !!user,
|
|
userType: user.user_type,
|
|
username: user.username
|
|
});
|
|
|
|
const initializeStoreAndSnapshot = async () => {
|
|
try {
|
|
setLoadingState({ status: 'loading', error: '' });
|
|
|
|
// 1. Create store
|
|
logger.debug('single-player-page', '🔄 Creating TLStore');
|
|
const newStore = localStoreService.getStore({
|
|
schema: customSchema,
|
|
shapeUtils: allShapeUtils,
|
|
bindingUtils: allBindingUtils
|
|
});
|
|
logger.debug('single-player-page', '✅ TLStore created');
|
|
|
|
// 2. Initialize snapshot service
|
|
const snapshotService = new NavigationSnapshotService(newStore, editorRef.current || undefined);
|
|
if (accessToken) snapshotService.setAccessToken(accessToken);
|
|
snapshotServiceRef.current = snapshotService;
|
|
logger.debug('single-player-page', '✨ Initialized NavigationSnapshotService');
|
|
|
|
// 3. Load initial snapshot if we have a node
|
|
const storagePath = context.node?.node_storage_path;
|
|
if (storagePath) {
|
|
logger.debug('single-player-page', '📥 Loading snapshot from database', {
|
|
node_storage_path: storagePath,
|
|
user_type: user.user_type,
|
|
});
|
|
await NavigationSnapshotService.loadNodeSnapshotFromDatabase(
|
|
storagePath,
|
|
accessToken || '',
|
|
newStore,
|
|
setLoadingState,
|
|
undefined,
|
|
editorRef.current || undefined
|
|
);
|
|
snapshotService.setCurrentNodePath(storagePath);
|
|
logger.debug('single-player-page', '✅ Snapshot loaded from database');
|
|
} else {
|
|
logger.debug('single-player-page', '⚠️ No node in context, skipping snapshot load');
|
|
}
|
|
|
|
// 4. Set up debounced auto-save
|
|
let autoSaveTimeout: ReturnType<typeof setTimeout> | null = null;
|
|
let isAutoSaving = false;
|
|
|
|
newStore.listen(() => {
|
|
if (!snapshotServiceRef.current?.getCurrentNodePath()) return;
|
|
if (isAutoSaving) return;
|
|
if (autoSaveTimeout) clearTimeout(autoSaveTimeout);
|
|
autoSaveTimeout = setTimeout(async () => {
|
|
if (isAutoSaving) return;
|
|
isAutoSaving = true;
|
|
try {
|
|
logger.debug('single-player-page', '💾 Auto-saving changes (debounced)');
|
|
await snapshotServiceRef.current?.forceSaveCurrentNode();
|
|
} catch (error) {
|
|
logger.error('single-player-page', '❌ Auto-save failed', error);
|
|
} finally {
|
|
isAutoSaving = false;
|
|
}
|
|
}, 2000);
|
|
});
|
|
|
|
// 5. Update store state
|
|
storeRef.current = newStore;
|
|
setStoreReady(true);
|
|
setLoadingState({ status: 'ready', error: '' });
|
|
logger.info('single-player-page', '✅ Store initialization complete');
|
|
|
|
// 6. Handle cleanup
|
|
return () => {
|
|
logger.debug('single-player-page', '🧹 Starting cleanup');
|
|
if (snapshotServiceRef.current) {
|
|
snapshotServiceRef.current.forceSaveCurrentNode().catch(error => {
|
|
logger.error('single-player-page', '❌ Final save failed', error);
|
|
});
|
|
snapshotServiceRef.current.clearCurrentNode();
|
|
snapshotServiceRef.current = null;
|
|
}
|
|
storeRef.current?.dispose();
|
|
storeRef.current = null;
|
|
setStoreReady(false);
|
|
logger.debug('single-player-page', '🧹 Cleanup complete');
|
|
};
|
|
} catch (error) {
|
|
const errorMessage = error instanceof Error ? error.message : 'Failed to initialize store';
|
|
logger.error('single-player-page', '❌ Store initialization failed', error);
|
|
setLoadingState({ status: 'error', error: errorMessage });
|
|
return undefined;
|
|
}
|
|
};
|
|
|
|
initializeStoreAndSnapshot();
|
|
}, [user, context.node]);
|
|
|
|
// Handle navigation changes — save previous snapshot, load next one.
|
|
// No automatic node shape placement: the canvas shows only persisted state.
|
|
useEffect(() => {
|
|
const handleNodeChange = async () => {
|
|
if (!context.node?.id || !snapshotServiceRef.current || !storeRef.current) return;
|
|
|
|
const snapshotService = snapshotServiceRef.current;
|
|
const currentNode = context.node;
|
|
|
|
try {
|
|
setLoadingState({ status: 'loading', error: '' });
|
|
logger.debug('single-player-page', '🔄 Handling navigation to node', {
|
|
nodeId: currentNode.id,
|
|
node_storage_path: currentNode.node_storage_path,
|
|
});
|
|
|
|
const previousNode = context.history.currentIndex > 0
|
|
? context.history.nodes[context.history.currentIndex - 1]
|
|
: null;
|
|
|
|
await snapshotService.handleNavigationStart(previousNode, currentNode);
|
|
setLoadingState({ status: 'ready', error: '' });
|
|
} catch (error) {
|
|
logger.error('single-player-page', '❌ Failed to load node snapshot', error);
|
|
setLoadingState({
|
|
status: 'error',
|
|
error: error instanceof Error ? error.message : 'Failed to load node data'
|
|
});
|
|
}
|
|
};
|
|
|
|
handleNodeChange();
|
|
}, [context.node, context.history, storeReady]);
|
|
|
|
// Inject auth and trigger initial context when token is ready
|
|
useEffect(() => {
|
|
if (user?.id && accessToken) {
|
|
setAuthInfo(accessToken, user.id);
|
|
if (!context.node) {
|
|
switchContext({ main: 'profile', base: 'profile' }, null, null);
|
|
}
|
|
}
|
|
}, [user?.id, accessToken]);
|
|
|
|
// Initialize preferences when user is available
|
|
useEffect(() => {
|
|
if (user?.id && !tldrawPreferences) {
|
|
logger.debug('single-player-page', '🔄 Initializing preferences for user', { userId: user.id });
|
|
initializePreferences(user.id);
|
|
}
|
|
}, [user?.id, tldrawPreferences, initializePreferences]);
|
|
|
|
// Redirect if no user or incorrect role
|
|
useEffect(() => {
|
|
if (!user || !['admin', 'email_teacher', 'school_admin', 'teacher'].includes(user.user_type || '')) {
|
|
logger.info('single-player-page', '🚪 Redirecting to home - no user or incorrect role', {
|
|
hasUser: !!user,
|
|
userType: user?.user_type
|
|
});
|
|
routerNavigate('/', { replace: true });
|
|
}
|
|
}, [user, routerNavigate]);
|
|
|
|
// Handle presentation mode
|
|
useEffect(() => {
|
|
if (presentationMode && editorRef.current) {
|
|
logger.info('presentation', '🔄 Presentation mode changed', {
|
|
presentationMode,
|
|
editorExists: !!editorRef.current
|
|
});
|
|
|
|
const editor = editorRef.current;
|
|
const presentationService = new PresentationService(editor);
|
|
const cleanup = presentationService.startPresentationMode();
|
|
|
|
return () => {
|
|
logger.info('presentation', '🧹 Cleaning up presentation mode');
|
|
presentationService.stopPresentationMode();
|
|
cleanup();
|
|
};
|
|
}
|
|
}, [presentationMode]);
|
|
|
|
// Handle shared content
|
|
useEffect(() => {
|
|
const handleSharedContent = async () => {
|
|
if (!editorRef.current || !location.state) {
|
|
return;
|
|
}
|
|
|
|
const editor = editorRef.current;
|
|
const { sharedFile, sharedContent } = location.state as {
|
|
sharedFile?: File;
|
|
sharedContent?: {
|
|
title?: string;
|
|
text?: string;
|
|
url?: string;
|
|
};
|
|
};
|
|
|
|
if (sharedFile) {
|
|
logger.info('single-player-page', '📤 Processing shared file', {
|
|
name: sharedFile.name,
|
|
type: sharedFile.type
|
|
});
|
|
|
|
try {
|
|
// Handle different file types
|
|
if (sharedFile.type.startsWith('image/')) {
|
|
const imageUrl = URL.createObjectURL(sharedFile);
|
|
await editor.createShape({
|
|
type: 'image',
|
|
props: {
|
|
url: imageUrl,
|
|
w: 320,
|
|
h: 240,
|
|
name: sharedFile.name
|
|
}
|
|
});
|
|
URL.revokeObjectURL(imageUrl);
|
|
} else if (sharedFile.type === 'application/pdf') {
|
|
// Handle PDF (you might want to implement PDF handling)
|
|
logger.info('single-player-page', '📄 PDF handling not implemented yet');
|
|
} else if (sharedFile.type === 'text/plain') {
|
|
const text = await sharedFile.text();
|
|
editor.createShape({
|
|
type: 'text',
|
|
props: { text }
|
|
});
|
|
}
|
|
} catch (error) {
|
|
logger.error('single-player-page', '❌ Error processing shared file', { error });
|
|
}
|
|
}
|
|
|
|
if (sharedContent) {
|
|
logger.info('single-player-page', '📤 Processing shared content', { sharedContent });
|
|
|
|
const { title, text, url } = sharedContent;
|
|
let contentText = '';
|
|
|
|
if (title) {
|
|
contentText += `${title}\n`;
|
|
}
|
|
if (text) {
|
|
contentText += `${text}\n`;
|
|
}
|
|
if (url) {
|
|
contentText += url;
|
|
}
|
|
|
|
if (contentText) {
|
|
editor.createShape({
|
|
type: 'text',
|
|
props: { text: contentText }
|
|
});
|
|
}
|
|
}
|
|
};
|
|
|
|
handleSharedContent();
|
|
}, [location.state]);
|
|
|
|
// Modify the render logic to use presentationMode
|
|
const uiOverrides = getUiOverrides(presentationMode);
|
|
const uiComponents = getUiComponents(presentationMode);
|
|
|
|
// Show loading state if user context is still loading
|
|
if (userLoading || !user) {
|
|
return (
|
|
<div style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
top: `${HEADER_HEIGHT}px`,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'var(--color-background)'
|
|
}}>
|
|
<CircularProgress />
|
|
</div>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div style={{
|
|
position: 'fixed',
|
|
inset: 0,
|
|
top: `${HEADER_HEIGHT}px`,
|
|
}}>
|
|
{/* Loading overlay - show when loading or contexts not initialized */}
|
|
{(loadingState.status === 'loading' || !storeReady) && (
|
|
<div style={{
|
|
position: 'absolute',
|
|
top: 0,
|
|
left: 0,
|
|
right: 0,
|
|
bottom: 0,
|
|
display: 'flex',
|
|
alignItems: 'center',
|
|
justifyContent: 'center',
|
|
backgroundColor: 'rgba(255, 255, 255, 0.8)',
|
|
zIndex: 1000,
|
|
}}>
|
|
<CircularProgress />
|
|
</div>
|
|
)}
|
|
|
|
{/* Error snackbar */}
|
|
<Snackbar
|
|
open={loadingState.status === 'error'}
|
|
autoHideDuration={6000}
|
|
onClose={() => setLoadingState({ status: 'ready', error: '' })}
|
|
>
|
|
<Alert severity="error" onClose={() => setLoadingState({ status: 'ready', error: '' })}>
|
|
{loadingState.error}
|
|
</Alert>
|
|
</Snackbar>
|
|
|
|
{storeReady && storeRef.current && <Tldraw
|
|
user={tldrawUser}
|
|
store={storeRef.current}
|
|
tools={singlePlayerTools}
|
|
shapeUtils={allShapeUtils}
|
|
bindingUtils={allBindingUtils}
|
|
components={uiComponents}
|
|
overrides={uiOverrides}
|
|
embeds={singlePlayerEmbeds}
|
|
assetUrls={customAssets}
|
|
autoFocus={true}
|
|
hideUi={false}
|
|
inferDarkMode={false}
|
|
acceptedImageMimeTypes={DEFAULT_SUPPORTED_IMAGE_TYPES}
|
|
acceptedVideoMimeTypes={DEFAULT_SUPPORT_VIDEO_TYPES}
|
|
maxImageDimension={Infinity}
|
|
maxAssetSize={100 * 1024 * 1024}
|
|
renderDebugMenuItems={() => []}
|
|
onMount={(editor) => {
|
|
logger.info('single-player-page', '🎨 Starting Tldraw mount');
|
|
try {
|
|
if (!editor) {
|
|
logger.error('single-player-page', '❌ Editor is null in onMount');
|
|
return;
|
|
}
|
|
|
|
editorRef.current = editor;
|
|
logger.debug('single-player-page', '✅ Editor ref set');
|
|
|
|
// Update snapshot service with editor reference
|
|
if (snapshotServiceRef.current) {
|
|
snapshotServiceRef.current.setEditor(editor);
|
|
if (accessToken) snapshotServiceRef.current.setAccessToken(accessToken);
|
|
}
|
|
|
|
logger.info('single-player-page', '✅ Tldraw mounted successfully', {
|
|
editorId: editor.store.id,
|
|
presentationMode,
|
|
});
|
|
} catch (error) {
|
|
logger.error('single-player-page', '❌ Error in onMount', error);
|
|
}
|
|
}}
|
|
/>}
|
|
</div>
|
|
);
|
|
}
|
|
|