import { mdiCloudUpload, mdiContentSave, mdiExitToApp, mdiImageMultiple, mdiMenu, mdiPlus, mdiSwapHorizontal, mdiText, mdiTooltipText, mdiViewCarousel, } from '@mdi/js'; import axios from 'axios'; import Head from 'next/head'; import NextImage from 'next/image'; import { useRouter } from 'next/router'; import React, { ReactElement, useCallback, useEffect, useMemo, useRef, useState, } from 'react'; import BaseButton from '../components/BaseButton'; import BaseIcon from '../components/BaseIcon'; import { getPageTitle } from '../config'; import LayoutAuthenticated from '../layouts/Authenticated'; import { usePreloadOrchestrator } from '../hooks/usePreloadOrchestrator'; import { extractPageLinksAndElements } from '../lib/extractPageLinks'; import { usePageSwitch } from '../hooks/usePageSwitch'; import { useTransitionPlayback } from '../hooks/useTransitionPlayback'; import { logger } from '../lib/logger'; import { resolveAssetPlaybackUrl } from '../lib/assetUrl'; import { parseJsonObject } from '../lib/parseJson'; import { buildElementStyle, ELEMENT_STYLE_PROPS } from '../lib/elementStyles'; import type { PreloadPageLink, PreloadElement } from '../types/preload'; import type { CanvasElementType, CanvasElement, ConstructorSchema, ConstructorAsset as ProjectAsset, AssetOption, GalleryCard, CarouselSlide, NavigationButtonKind, NormalizedElementDefault, } from '../types/constructor'; import { normalizeElementDefault, buildElementDefaultsMap, isCanvasElementType, } from '../types/constructor'; type TourPage = { id: string; name?: string; slug?: string; sort_order?: number; environment?: string; source_key?: string; requires_auth?: boolean; ui_schema_json?: string; background_image_url?: string; background_video_url?: string; background_audio_url?: string; background_loop?: boolean; }; type NavigationElementType = Extract< CanvasElementType, 'navigation_next' | 'navigation_prev' >; type DragElementState = { id: string; pointerOffsetX: number; pointerOffsetY: number; }; type TransitionPreviewState = { videoUrl: string; reverseMode: 'none' | 'reverse' | 'separate'; reverseVideoUrl?: string; durationSec?: number; title: string; }; type EditorMenuItem = | 'none' | 'background_image' | 'background_video' | 'background_audio' | 'create_transition'; type ConstructorPageProps = { mode?: 'constructor' | 'element_edit'; }; type ConstructorInteractionMode = 'edit' | 'interact'; const clamp = (value: number, min: number, max: number) => Math.min(Math.max(value, min), max); const normalizeAppearDelaySec = (value: unknown) => { const parsed = Number(value); if (!Number.isFinite(parsed) || parsed < 0) return 0; return Number(parsed); }; const normalizeAppearDurationSec = (value: unknown) => { if (value === null || value === undefined || value === '') return null; const parsed = Number(value); if (!Number.isFinite(parsed) || parsed <= 0) return null; return Number(parsed); }; const getTrimmedCssValue = (value: unknown) => { if (value === null || value === undefined) return ''; return String(value).trim(); }; const createLocalId = () => { if (typeof window !== 'undefined' && window.crypto?.randomUUID) { return window.crypto.randomUUID(); } return `constructor_${Date.now()}_${Math.random().toString(36).slice(2, 8)}`; }; const getAssetLabel = (asset: ProjectAsset) => { const baseName = asset.name?.trim() || 'Untitled asset'; const source = String(asset.storage_key || asset.cdn_url || '').trim(); return `${baseName}${source ? ` · ${source}` : ''}`; }; const getAssetSourceValue = (asset: ProjectAsset) => String(asset.storage_key || asset.cdn_url || '').trim(); const formatDurationNote = (durationSec?: number | string | null) => { const parsed = Number(durationSec); if (!Number.isFinite(parsed) || parsed <= 0) return 'Duration: unknown'; const totalSeconds = Math.round(parsed); const minutes = Math.floor(totalSeconds / 60); const seconds = totalSeconds % 60; if (minutes <= 0) return `Duration: ${seconds}s`; return `Duration: ${minutes}:${String(seconds).padStart(2, '0')}`; }; const readMediaDuration = ( playbackUrl: string, mediaType: 'video' | 'audio', ): Promise => new Promise((resolve) => { const mediaElement = mediaType === 'video' ? document.createElement('video') : document.createElement('audio'); let timeoutId: ReturnType | null = null; const cleanup = () => { mediaElement.removeEventListener('loadedmetadata', onLoadedMetadata); mediaElement.removeEventListener('error', onError); mediaElement.removeEventListener('abort', onError); if (timeoutId) clearTimeout(timeoutId); mediaElement.pause(); mediaElement.removeAttribute('src'); mediaElement.load(); }; const onLoadedMetadata = () => { const duration = Number(mediaElement.duration); cleanup(); if (Number.isFinite(duration) && duration > 0) { resolve(duration); return; } resolve(null); }; const onError = () => { cleanup(); resolve(null); }; timeoutId = setTimeout(() => { cleanup(); resolve(null); }, 12000); mediaElement.preload = 'metadata'; mediaElement.crossOrigin = 'anonymous'; mediaElement.addEventListener('loadedmetadata', onLoadedMetadata); mediaElement.addEventListener('error', onError); mediaElement.addEventListener('abort', onError); mediaElement.src = playbackUrl; mediaElement.load(); }); const resolveDurationWithFallback = async ( source: string, mediaType: 'video' | 'audio', ) => { const playbackUrl = resolveAssetPlaybackUrl(source); if (!playbackUrl) return null; const directDuration = await readMediaDuration(playbackUrl, mediaType); if (Number.isFinite(directDuration) && Number(directDuration) > 0) { return Number(directDuration); } try { const requestUrl = playbackUrl.startsWith('http://') || playbackUrl.startsWith('https://') ? playbackUrl : playbackUrl.replace(/^\/api(?=\/)/, ''); const token = typeof window !== 'undefined' ? localStorage.getItem('token') || '' : ''; const response = await axios.get(requestUrl, { responseType: 'blob', headers: token ? { Authorization: `Bearer ${token}` } : undefined, }); const blobUrl = URL.createObjectURL(response.data); try { const blobDuration = await readMediaDuration(blobUrl, mediaType); if (Number.isFinite(blobDuration) && Number(blobDuration) > 0) { return Number(blobDuration); } return null; } finally { URL.revokeObjectURL(blobUrl); } } catch (error) { logger.error( 'Failed to fetch media for duration probing:', error instanceof Error ? error : { error }, ); return null; } }; const isBackgroundImageAsset = (asset: ProjectAsset) => { if (asset.type) return asset.type === 'background_image'; const normalizedName = String(asset.name || '').toLowerCase(); if (!normalizedName) return false; const hasBackgroundKeyword = /\bbackground\b|\bbg\b|backdrop|wallpaper/.test( normalizedName, ); const hasExcludedKeyword = /\bicon\b|\blogo\b/.test(normalizedName); return hasBackgroundKeyword && !hasExcludedKeyword; }; const addFallbackAssetOption = ( options: AssetOption[], value?: string, fallbackLabel?: string, ): AssetOption[] => { const normalizedValue = String(value || '').trim(); if (!normalizedValue) return options; if (options.some((option) => option.value === normalizedValue)) return options; return [ ...options, { value: normalizedValue, label: fallbackLabel || `Custom URL · ${normalizedValue}`, }, ]; }; const labelByType: Record = { navigation_next: 'Navigation: Forward', navigation_prev: 'Navigation: Back', spot: 'Hotspot', description: 'Description', tooltip: 'Tooltip', gallery: 'Gallery', carousel: 'Carousel', logo: 'Logo', video_player: 'Video Player', audio_player: 'Audio Player', popup: 'Popup', }; const isNavigationElementType = ( type: CanvasElementType, ): type is NavigationElementType => type === 'navigation_next' || type === 'navigation_prev'; const getNavigationButtonLabel = (type: NavigationElementType) => type === 'navigation_next' ? 'Forward' : 'Back'; const getNavigationButtonKind = ( type: NavigationElementType, ): NavigationButtonKind => (type === 'navigation_prev' ? 'back' : 'forward'); const getNavigationTypeFromKind = ( kind: NavigationButtonKind, ): NavigationElementType => kind === 'back' ? 'navigation_prev' : 'navigation_next'; const createDefaultElement = ( type: CanvasElementType, index: number, ): CanvasElement => { const base: CanvasElement = { id: createLocalId(), type, label: labelByType[type], xPercent: clamp(12 + index * 4, 5, 80), yPercent: clamp(16 + index * 6, 8, 85), appearDelaySec: 0, appearDurationSec: null, }; if (type === 'gallery') { return { ...base, galleryCards: [ { id: createLocalId(), imageUrl: '', title: 'Card 1', description: '' }, ], }; } if (type === 'carousel') { return { ...base, carouselSlides: [ { id: createLocalId(), imageUrl: '', caption: 'Slide 1' }, ], carouselPrevIconUrl: '', carouselNextIconUrl: '', }; } if (type === 'tooltip') { return { ...base, iconUrl: '', tooltipTitle: 'Tooltip title', tooltipText: 'Tooltip text', }; } if (type === 'description') { return { ...base, iconUrl: '', descriptionTitle: 'TITLE', descriptionText: '', descriptionTitleFontSize: '48px', descriptionTextFontSize: '36px', descriptionTitleFontFamily: 'inherit', descriptionTextFontFamily: 'inherit', descriptionTitleColor: '#000000', descriptionTextColor: '#4B5563', descriptionBackgroundColor: 'transparent', }; } if (type === 'navigation_next' || type === 'navigation_prev') { return { ...base, navLabel: getNavigationButtonLabel(type), navType: getNavigationButtonKind(type), navDisabled: false, iconUrl: '', transitionReverseMode: 'auto_reverse', }; } if (type === 'video_player' || type === 'audio_player') { return { ...base, mediaUrl: '', mediaAutoplay: true, mediaLoop: true, mediaMuted: type === 'video_player', }; } return base; }; const mergeElementWithDefaults = ( element: CanvasElement, defaults?: Partial, options?: { preferElementValues?: boolean }, ): CanvasElement => { if (!defaults) return element; const preferElementValues = Boolean(options?.preferElementValues); const base = preferElementValues ? defaults : element; const override = preferElementValues ? element : defaults; const merged: CanvasElement = { ...base, ...override, id: element.id, type: element.type, label: element.label || defaults.label || element.type, xPercent: element.xPercent ?? defaults.xPercent ?? 50, yPercent: element.yPercent ?? defaults.yPercent ?? 50, }; // For style properties, use defaults if element has empty/null/undefined value // This ensures DB defaults are applied when element has no explicit value const elementRecord = element as unknown as Record; const defaultsRecord = defaults as unknown as Record; const mergedRecord = merged as unknown as Record; ELEMENT_STYLE_PROPS.forEach((prop) => { const elementValue = elementRecord[prop]; const defaultValue = defaultsRecord[prop]; const elementIsEmpty = elementValue === '' || elementValue === undefined || elementValue === null; const defaultHasValue = defaultValue !== undefined && defaultValue !== null && defaultValue !== ''; if (elementIsEmpty && defaultHasValue) { mergedRecord[prop] = defaultValue; } }); merged.xPercent = clamp(Number(merged.xPercent ?? element.xPercent), 0, 100); merged.yPercent = clamp(Number(merged.yPercent ?? element.yPercent), 0, 100); merged.appearDelaySec = normalizeAppearDelaySec(merged.appearDelaySec); merged.appearDurationSec = normalizeAppearDurationSec( merged.appearDurationSec, ); if (merged.type === 'gallery') { const cards = preferElementValues ? Array.isArray(element.galleryCards) ? element.galleryCards : defaults.galleryCards || [] : Array.isArray(defaults.galleryCards) ? defaults.galleryCards : element.galleryCards || []; merged.galleryCards = cards.map((card, cardIndex) => ({ id: String(card?.id || createLocalId()), imageUrl: String(card?.imageUrl || ''), title: String(card?.title || `Card ${cardIndex + 1}`), description: String(card?.description || ''), })); } if (merged.type === 'carousel') { const slides = preferElementValues ? Array.isArray(element.carouselSlides) ? element.carouselSlides : defaults.carouselSlides || [] : Array.isArray(defaults.carouselSlides) ? defaults.carouselSlides : element.carouselSlides || []; merged.carouselSlides = slides.map((slide, slideIndex) => ({ id: String(slide?.id || createLocalId()), imageUrl: String(slide?.imageUrl || ''), caption: String(slide?.caption || `Slide ${slideIndex + 1}`), })); } return merged; }; const getElementButtonTitle = (element: CanvasElement) => { if (element.type === 'gallery') { return `${element.label} (${element.galleryCards?.length || 0})`; } if (element.type === 'carousel') { return `${element.label} (${element.carouselSlides?.length || 0})`; } if (element.type === 'tooltip') return element.tooltipTitle ?? ''; if (element.type === 'description') return element.descriptionTitle ?? ''; if (element.type === 'navigation_next' || element.type === 'navigation_prev') return ( element.navLabel?.trim() || getNavigationButtonLabel(element.type as NavigationElementType) ); if ( (element.type === 'video_player' || element.type === 'audio_player') && element.mediaUrl ) { return `${element.label} · configured`; } return element.label; }; const buildCanvasElementStyle = (element: CanvasElement): React.CSSProperties => buildElementStyle(element); const ConstructorPage = ({ mode = 'constructor' }: ConstructorPageProps) => { const router = useRouter(); const canvasRef = useRef(null); const elementEditorRef = useRef(null); const [isAuthReady, setIsAuthReady] = useState(false); const isElementEditMode = mode === 'element_edit'; const projectId = useMemo(() => { const value = router.query.projectId; if (Array.isArray(value)) return value[0] || ''; return String(value || ''); }, [router.query.projectId]); const pageElementsListHref = useMemo(() => { if (!projectId) return '/project-element-defaults/project-element-defaults-list'; return `/project-element-defaults/project-element-defaults-list?projectId=${encodeURIComponent(projectId)}`; }, [projectId]); const pageIdFromRoute = useMemo(() => { const value = router.query.pageId; if (Array.isArray(value)) return value[0] || ''; return String(value || ''); }, [router.query.pageId]); const elementIdFromRoute = useMemo(() => { const value = router.query.elementId; if (Array.isArray(value)) return value[0] || ''; return String(value || ''); }, [router.query.elementId]); const [pages, setPages] = useState([]); const [pageLinks, setPageLinks] = useState([]); const [allPagesPreloadElements, setAllPagesPreloadElements] = useState< PreloadElement[] >([]); const [assets, setAssets] = useState([]); const [uiElementDefaultsByType, setUiElementDefaultsByType] = useState< Partial>> >({}); const [activePageId, setActivePageId] = useState(''); const [projectName, setProjectName] = useState(''); const [elements, setElements] = useState([]); const [backgroundImageUrl, setBackgroundImageUrl] = useState(''); const [backgroundVideoUrl, setBackgroundVideoUrl] = useState(''); const [backgroundAudioUrl, setBackgroundAudioUrl] = useState(''); const [selectedElementId, setSelectedElementId] = useState(''); const [selectedMenuItem, setSelectedMenuItem] = useState('none'); const [transitionPreview, setTransitionPreview] = useState(null); const [pendingNavigationPageId, setPendingNavigationPageId] = useState(''); const [isLoading, setIsLoading] = useState(true); const [isSaving, setIsSaving] = useState(false); const [isSavingToStage, setIsSavingToStage] = useState(false); const [isCreatingPage, setIsCreatingPage] = useState(false); const [isCreatingTransition, setIsCreatingTransition] = useState(false); const [newTransitionName, setNewTransitionName] = useState(''); const [newTransitionVideoUrl, setNewTransitionVideoUrl] = useState(''); const [newTransitionSupportsReverse, setNewTransitionSupportsReverse] = useState(true); const [errorMessage, setErrorMessage] = useState(''); const [successMessage, setSuccessMessage] = useState(''); const [resolvedDurationBySource, setResolvedDurationBySource] = useState< Record >({}); const [canvasElapsedSec, setCanvasElapsedSec] = useState(0); const [preloadedIconUrlMap, setPreloadedIconUrlMap] = useState< Record >({}); const [constructorInteractionMode, setConstructorInteractionMode] = useState('edit'); const [constructorControlsPosition, setConstructorControlsPosition] = useState({ x: 20, y: 20 }); const [menuPosition, setMenuPosition] = useState({ x: 0, y: 110 }); const [isMenuOpen, setIsMenuOpen] = useState(false); const [editorPosition, setEditorPosition] = useState({ x: 0, y: 72 }); const [isEditorCollapsed, setIsEditorCollapsed] = useState(false); const constructorControlsDragRef = useRef<{ pointerOffsetX: number; pointerOffsetY: number; } | null>(null); const menuDragRef = useRef<{ pointerOffsetX: number; pointerOffsetY: number; } | null>(null); const editorDragRef = useRef<{ pointerOffsetX: number; pointerOffsetY: number; } | null>(null); const elementDragRef = useRef(null); const transitionVideoRef = useRef(null); const lastInitializedPageIdRef = useRef(null); const didSetInitialCanvasFocus = useRef(false); const durationProbeInFlightRef = useRef>(new Set()); const pagePlaybackStartedAtRef = useRef(Date.now()); const preloadedIconUrlsRef = useRef>(new Set()); const activePage = useMemo( () => pages.find((item) => item.id === activePageId) || null, [activePageId, pages], ); // Preload orchestrator for better DX when previewing pages // Preloads neighbor page assets and transition videos // Uses allPagesPreloadElements (extracted in loadData) for proper neighbor preloading const preloadOrchestrator = usePreloadOrchestrator({ pages: pages.map((p) => ({ id: p.id, background_image_url: p.background_image_url, background_video_url: p.background_video_url, })), pageLinks, elements: allPagesPreloadElements, // Use elements from ALL pages for proper neighbor preloading currentPageId: activePageId, enabled: !isLoading && !!activePageId, // maxNeighborDepth defaults to 1 - only preload immediate neighbors }); // Page switch hook for smooth background transitions (uses blob URLs from preload cache) const pageSwitch = usePageSwitch({ preloadCache: preloadOrchestrator ? { getReadyBlobUrl: preloadOrchestrator.getReadyBlobUrl, getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl, preloadedUrls: preloadOrchestrator.preloadedUrls, } : undefined, }); // Helper to switch pages without flash // Uses usePageSwitch hook to resolve blob URLs from preload cache // Also updates storage path state for editing/saving purposes const switchToPage = useCallback( async (page: TourPage | null) => { // Mark this page as initialized to prevent redundant effect calls if (page) { lastInitializedPageIdRef.current = page.id; } // Update storage path state (for editing and saving) setBackgroundImageUrl(page?.background_image_url || ''); setBackgroundVideoUrl(page?.background_video_url || ''); setBackgroundAudioUrl(page?.background_audio_url || ''); // Use hook to resolve and set blob URLs for display await pageSwitch.switchToPage( page ? { id: page.id, background_image_url: page.background_image_url, background_video_url: page.background_video_url, background_audio_url: page.background_audio_url, } : null, () => { if (page) { setActivePageId(page.id); } }, ); }, [pageSwitch], ); const { isBuffering: isReverseBuffering } = useTransitionPlayback({ videoRef: transitionVideoRef, transition: transitionPreview ? { videoUrl: resolveAssetPlaybackUrl(transitionPreview.videoUrl), reverseMode: transitionPreview.reverseMode, reverseVideoUrl: transitionPreview.reverseVideoUrl ? resolveAssetPlaybackUrl(transitionPreview.reverseVideoUrl) : undefined, durationSec: transitionPreview.durationSec, targetPageId: pendingNavigationPageId || undefined, displayName: transitionPreview.title, } : null, onComplete: async (targetPageId) => { const video = transitionVideoRef.current; if (targetPageId) { const targetPage = pages.find((p) => p.id === targetPageId) || null; // Use switchToPage which resolves blob URLs via usePageSwitch await switchToPage(targetPage); setSelectedElementId(''); setSelectedMenuItem('none'); setErrorMessage(''); requestAnimationFrame(() => { requestAnimationFrame(() => { video?.removeAttribute('src'); video?.load(); setTransitionPreview(null); setPendingNavigationPageId(''); }); }); } else { video?.removeAttribute('src'); video?.load(); setTransitionPreview(null); setPendingNavigationPageId(''); } }, timeouts: { playbackStartMs: 3000, hardTimeoutMs: 45000, }, features: { useBlobUrl: true, preDecodeImages: false, // We handle image loading via usePageSwitch }, preload: { preloadedUrls: preloadOrchestrator.preloadedUrls, getCachedBlobUrl: preloadOrchestrator.getCachedBlobUrl, }, }); // Clear previous background overlay when new background is ready (direct navigation) useEffect(() => { if ( pageSwitch.isSwitching && pageSwitch.isNewBgReady && pageSwitch.previousBgImageUrl ) { pageSwitch.clearPreviousBackground(); } }, [ pageSwitch.isSwitching, pageSwitch.isNewBgReady, pageSwitch.previousBgImageUrl, pageSwitch.clearPreviousBackground, ]); const isConstructorEditMode = constructorInteractionMode === 'edit'; const allowedNavigationTypes = useMemo(() => { return ['navigation_next', 'navigation_prev']; }, []); const pageNameById = useMemo(() => { const acc: Record = {}; pages.forEach((page, index) => { acc[String(page.id)] = page.name || `Page ${index + 1}`; }); return acc; }, [pages]); const pageNameBySlug = useMemo(() => { const acc: Record = {}; pages.forEach((page, index) => { acc[String(page.slug)] = page.name || `Page ${index + 1}`; }); return acc; }, [pages]); const selectedElement = useMemo( () => elements.find((element) => element.id === selectedElementId) || null, [elements, selectedElementId], ); const iconPreloadTargets = useMemo(() => { const preloadableTypes: CanvasElementType[] = [ 'navigation_next', 'navigation_prev', 'tooltip', 'description', ]; const urls = elements .filter( (element) => preloadableTypes.includes(element.type) && Boolean(element.iconUrl), ) .map((element) => resolveAssetPlaybackUrl(element.iconUrl)) .filter(Boolean); return Array.from(new Set(urls)); }, [elements]); const normalizeNavigationElementType = useCallback( ( element: CanvasElement, nextType: NavigationElementType, ): CanvasElement => { if (!isNavigationElementType(element.type)) return element; const nextButtonLabel = getNavigationButtonLabel(nextType); const hasDefaultLabel = element.label === labelByType.navigation_next || element.label === labelByType.navigation_prev; const hasDefaultNavLabel = !element.navLabel || element.navLabel === getNavigationButtonLabel('navigation_next') || element.navLabel === getNavigationButtonLabel('navigation_prev'); return { ...element, type: nextType, navType: getNavigationButtonKind(nextType), label: hasDefaultLabel ? labelByType[nextType] : element.label, navLabel: hasDefaultNavLabel ? nextButtonLabel : element.navLabel, }; }, [], ); const imageAssetOptions = useMemo( () => assets .filter( (asset) => asset.asset_type === 'image' && getAssetSourceValue(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })), [assets], ); const backgroundImageAssetOptions = useMemo( () => assets .filter( (asset) => asset.asset_type === 'image' && getAssetSourceValue(asset) && isBackgroundImageAsset(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })), [assets], ); const videoAssetOptions = useMemo( () => assets .filter( (asset) => asset.asset_type === 'video' && getAssetSourceValue(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })), [assets], ); const audioAssetOptions = useMemo( () => assets .filter( (asset) => asset.asset_type === 'audio' && getAssetSourceValue(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })), [assets], ); const transitionVideoAssetOptions = useMemo(() => { const typedAssets = assets .filter( (asset) => asset.type === 'transition' && asset.asset_type === 'video' && getAssetSourceValue(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })); if (typedAssets.length > 0) return typedAssets; const taggedAssets = assets .filter( (asset) => asset.asset_type === 'video' && getAssetSourceValue(asset) && /\[TRANSITION\]/i.test(String(asset.name || '')), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })); if (taggedAssets.length > 0) return taggedAssets; return videoAssetOptions; }, [assets, videoAssetOptions]); const iconAssetOptions = useMemo( () => assets .filter( (asset) => asset.type === 'icon' && asset.asset_type === 'image' && getAssetSourceValue(asset), ) .map((asset) => ({ value: getAssetSourceValue(asset), label: getAssetLabel(asset), })), [assets], ); const getKnownDurationForSource = useCallback( (source?: string) => { const normalizedSource = String(source || '').trim(); if (!normalizedSource) return null; const resolvedDuration = resolvedDurationBySource[normalizedSource]; if (Number.isFinite(resolvedDuration) && Number(resolvedDuration) > 0) { return Number(resolvedDuration); } return null; }, [resolvedDurationBySource], ); const durationProbeTargets = useMemo< Array<{ source: string; mediaType: 'video' | 'audio' }> >(() => { const targets: Array<{ source: string; mediaType: 'video' | 'audio' }> = []; if (backgroundVideoUrl) { targets.push({ source: backgroundVideoUrl, mediaType: 'video' }); } if (backgroundAudioUrl) { targets.push({ source: backgroundAudioUrl, mediaType: 'audio' }); } if ( selectedElement && (selectedElement.type === 'video_player' || selectedElement.type === 'audio_player') && selectedElement.mediaUrl ) { targets.push({ source: selectedElement.mediaUrl, mediaType: selectedElement.type === 'video_player' ? 'video' : 'audio', }); } if (newTransitionVideoUrl) { targets.push({ source: newTransitionVideoUrl, mediaType: 'video' }); } elements.forEach((element) => { if (!isNavigationElementType(element.type)) return; if (element.transitionVideoUrl) { targets.push({ source: element.transitionVideoUrl, mediaType: 'video', }); } if (element.reverseVideoUrl) { targets.push({ source: element.reverseVideoUrl, mediaType: 'video' }); } }); return targets; }, [ backgroundAudioUrl, backgroundVideoUrl, elements, newTransitionVideoUrl, selectedElement, ]); useEffect(() => { let isCancelled = false; durationProbeTargets.forEach(({ source, mediaType }) => { const normalizedSource = String(source || '').trim(); if (!normalizedSource) return; if (getKnownDurationForSource(normalizedSource)) return; const probeKey = `${mediaType}:${normalizedSource}`; if (durationProbeInFlightRef.current.has(probeKey)) return; durationProbeInFlightRef.current.add(probeKey); resolveDurationWithFallback(normalizedSource, mediaType) .then((duration) => { if (isCancelled) return; setResolvedDurationBySource((prev) => ({ ...prev, [normalizedSource]: Number.isFinite(duration) && Number(duration) > 0 ? Number(duration) : null, })); }) .catch((error) => { logger.error( 'Failed to resolve media duration:', error instanceof Error ? error : { error }, ); if (isCancelled) return; setResolvedDurationBySource((prev) => ({ ...prev, [normalizedSource]: null, })); }) .finally(() => { durationProbeInFlightRef.current.delete(probeKey); }); }); return () => { isCancelled = true; }; }, [durationProbeTargets, getKnownDurationForSource]); const backgroundVideoDurationNote = useMemo( () => formatDurationNote(getKnownDurationForSource(backgroundVideoUrl)), [backgroundVideoUrl, getKnownDurationForSource], ); const backgroundAudioDurationNote = useMemo( () => formatDurationNote(getKnownDurationForSource(backgroundAudioUrl)), [backgroundAudioUrl, getKnownDurationForSource], ); const selectedMediaDurationNote = useMemo(() => { if ( !selectedElement || (selectedElement.type !== 'video_player' && selectedElement.type !== 'audio_player') ) { return 'Duration: unknown'; } return formatDurationNote( getKnownDurationForSource(selectedElement.mediaUrl || ''), ); }, [getKnownDurationForSource, selectedElement]); const newTransitionDurationNote = useMemo( () => formatDurationNote(getKnownDurationForSource(newTransitionVideoUrl)), [getKnownDurationForSource, newTransitionVideoUrl], ); const selectedTransitionDurationNote = useMemo(() => { if (!selectedElement || !isNavigationElementType(selectedElement.type)) { return 'Duration: unknown'; } return formatDurationNote( getKnownDurationForSource(selectedElement.transitionVideoUrl || ''), ); }, [getKnownDurationForSource, selectedElement]); useEffect(() => { if (newTransitionVideoUrl) return; if (!transitionVideoAssetOptions.length) return; setNewTransitionVideoUrl(transitionVideoAssetOptions[0].value); }, [newTransitionVideoUrl, transitionVideoAssetOptions]); useEffect(() => { setElements((prev) => { let hasChanges = false; const next = prev.map((element) => { if (!isNavigationElementType(element.type)) return element; const resolvedDuration = getKnownDurationForSource( element.transitionVideoUrl || '', ); const nextDuration = Number.isFinite(resolvedDuration) && Number(resolvedDuration) > 0 ? Number(resolvedDuration) : undefined; if (element.transitionDurationSec === nextDuration) return element; hasChanges = true; return { ...element, transitionDurationSec: nextDuration, }; }); return hasChanges ? next : prev; }); }, [getKnownDurationForSource]); const loadData = useCallback( async (preservePageId?: string) => { if (!projectId || !router.isReady || !isAuthReady) return; try { setIsLoading(true); setErrorMessage(''); setSuccessMessage(''); const [ projectResponse, pagesResponse, assetsResponse, uiElementsResponse, ] = await Promise.all([ axios.get(`/projects/${projectId}`), axios.get( `/tour_pages?limit=500&sort=asc&field=sort_order&project=${projectId}&environment=dev`, ), axios.get( `/assets?limit=500&page=0&sort=desc&field=createdAt&project=${projectId}`, ), axios.get( `/project-element-defaults?projectId=${projectId}&limit=200&page=0&sort=asc&field=sort_order`, ), ]); const pageRows: TourPage[] = Array.isArray(pagesResponse?.data?.rows) ? pagesResponse.data.rows : []; const assetRows: ProjectAsset[] = Array.isArray( assetsResponse?.data?.rows, ) ? assetsResponse.data.rows : []; setProjectName(projectResponse?.data?.name || ''); setPages(pageRows); // Extract page links and preload elements using shared utility const { pageLinks: syntheticPageLinks, preloadElements: allPreloadElements } = extractPageLinksAndElements(pageRows); setPageLinks(syntheticPageLinks); setAllPagesPreloadElements(allPreloadElements); setAssets(assetRows); // Process project element defaults using shared utilities const uiElementRows = Array.isArray(uiElementsResponse?.data?.rows) ? uiElementsResponse.data.rows : []; const normalizedDefaults = uiElementRows .map((row: Record) => normalizeElementDefault(row)) .filter((d): d is NormalizedElementDefault => d !== null); const defaultsByType = buildElementDefaultsMap(normalizedDefaults); setUiElementDefaultsByType(defaultsByType); // Preserve current page if specified and it still exists, otherwise use route or first page const preservedPageExists = preservePageId && pageRows.some((p: any) => p.id === preservePageId); const defaultPageId = preservedPageExists ? preservePageId : pageIdFromRoute || pageRows[0]?.id || ''; setActivePageId(defaultPageId); setIsMenuOpen(false); } catch (error: any) { if (error?.response?.status === 401) { const message = 'Your session has expired. Please sign in again.'; logger.error( 'Unauthorized constructor request:', error instanceof Error ? error : { error }, ); setErrorMessage(message); setPages([]); setAssets([]); router.replace('/login'); return; } const message = error?.response?.data?.message || error?.message || 'Failed to load constructor data.'; logger.error( 'Failed to load constructor data:', error instanceof Error ? error : { error }, ); setErrorMessage(message); setPages([]); setAssets([]); setUiElementDefaultsByType({}); } finally { setIsLoading(false); } }, [isAuthReady, pageIdFromRoute, projectId, router], ); useEffect(() => { if (!router.isReady || typeof window === 'undefined') return; const token = sessionStorage.getItem('token') || localStorage.getItem('token'); if (!token) { setIsAuthReady(false); setErrorMessage('Please sign in to continue.'); router.replace('/login'); return; } setIsAuthReady(true); }, [router]); useEffect(() => { if (!router.isReady) return; if (projectId) return; router.replace( isElementEditMode ? '/project-element-defaults/project-element-defaults-list' : '/projects/projects-list', ); }, [isElementEditMode, projectId, router]); useEffect(() => { loadData(); }, [loadData]); useEffect(() => { if (typeof window === 'undefined') return; setConstructorControlsPosition((prev) => { if (prev.x > 0) return prev; return { x: 20, y: 20, }; }); setMenuPosition((prev) => { if (prev.x > 0) return prev; return { x: Math.max(window.innerWidth - 280, 20), y: prev.y, }; }); setEditorPosition((prev) => { if (prev.x > 0) return prev; return { x: Math.max(window.innerWidth - 400, 20), y: prev.y, }; }); }, []); useEffect(() => { if (!router.isReady || !isAuthReady || isLoading) return; if (didSetInitialCanvasFocus.current) return; if (!canvasRef.current) return; didSetInitialCanvasFocus.current = true; requestAnimationFrame(() => { canvasRef.current?.focus({ preventScroll: true }); }); }, [isAuthReady, isLoading, router.isReady]); useEffect(() => { if (typeof window === 'undefined') return; if (isLoading || !activePageId) { setCanvasElapsedSec(0); return; } pagePlaybackStartedAtRef.current = Date.now(); setCanvasElapsedSec(0); const intervalId = window.setInterval(() => { const elapsed = (Date.now() - pagePlaybackStartedAtRef.current) / 1000; setCanvasElapsedSec(elapsed > 0 ? elapsed : 0); }, 100); return () => window.clearInterval(intervalId); }, [activePageId, isLoading]); useEffect(() => { if (typeof window === 'undefined') return; const targetSet = new Set(iconPreloadTargets); const nextPreloaded = new Set(); preloadedIconUrlsRef.current.forEach((url) => { if (targetSet.has(url)) nextPreloaded.add(url); }); preloadedIconUrlsRef.current = nextPreloaded; setPreloadedIconUrlMap(() => { const nextMap: Record = {}; nextPreloaded.forEach((url) => { nextMap[url] = true; }); return nextMap; }); if (!iconPreloadTargets.length) return; let isCancelled = false; const preloadImages: HTMLImageElement[] = []; iconPreloadTargets.forEach((url) => { if (preloadedIconUrlsRef.current.has(url)) return; const image = new Image(); const markReady = () => { if (isCancelled) return; preloadedIconUrlsRef.current.add(url); setPreloadedIconUrlMap((prev) => { if (prev[url]) return prev; return { ...prev, [url]: true, }; }); }; image.onload = markReady; image.onerror = () => { logger.error('Failed to preload icon asset:', { url }); markReady(); }; image.src = url; preloadImages.push(image); }); return () => { isCancelled = true; preloadImages.forEach((image) => { image.onload = null; image.onerror = null; }); }; }, [iconPreloadTargets]); useEffect(() => { if (!activePage) { setElements([]); setSelectedElementId(''); setBackgroundImageUrl(''); setBackgroundVideoUrl(''); setBackgroundAudioUrl(''); return; } const schema = parseJsonObject( activePage.ui_schema_json, {}, ); const normalizedElements = Array.isArray(schema.elements) ? schema.elements .filter( (item) => item && item.type && labelByType[item.type as CanvasElementType], ) .map((item) => { const elementType = item.type as CanvasElementType; const normalizedElement: CanvasElement = { ...item, id: String(item.id || createLocalId()), label: typeof item.label === 'string' && item.label.trim() ? item.label : labelByType[elementType], xPercent: clamp(Number(item.xPercent || 0), 0, 100), yPercent: clamp(Number(item.yPercent || 0), 0, 100), appearDelaySec: normalizeAppearDelaySec(item.appearDelaySec), appearDurationSec: normalizeAppearDurationSec( item.appearDurationSec, ), galleryCards: Array.isArray(item.galleryCards) ? item.galleryCards.map((card: any, index: number) => ({ id: String(card?.id || createLocalId()), imageUrl: String(card?.imageUrl || ''), title: String(card?.title || `Card ${index + 1}`), description: String(card?.description || ''), })) : undefined, carouselSlides: Array.isArray(item.carouselSlides) ? item.carouselSlides.map((slide: any, index: number) => ({ id: String(slide?.id || createLocalId()), imageUrl: String(slide?.imageUrl || ''), caption: String(slide?.caption || `Slide ${index + 1}`), })) : undefined, iconUrl: typeof item.iconUrl === 'string' ? item.iconUrl : '', carouselPrevIconUrl: typeof item.carouselPrevIconUrl === 'string' ? item.carouselPrevIconUrl : '', carouselNextIconUrl: typeof item.carouselNextIconUrl === 'string' ? item.carouselNextIconUrl : '', tooltipTitle: typeof item.tooltipTitle === 'string' ? item.tooltipTitle : '', tooltipText: typeof item.tooltipText === 'string' ? item.tooltipText : '', descriptionTitle: typeof item.descriptionTitle === 'string' ? item.descriptionTitle : '', descriptionText: typeof item.descriptionText === 'string' ? item.descriptionText : '', navLabel: typeof item.navLabel === 'string' ? item.navLabel : '', navType: item.navType === 'back' || item.navType === 'forward' ? item.navType : isNavigationElementType(elementType) ? getNavigationButtonKind( elementType as NavigationElementType, ) : undefined, // Support both targetPageSlug (new) and targetPageId (legacy) targetPageSlug: typeof item.targetPageSlug === 'string' ? item.targetPageSlug : '', targetPageId: typeof item.targetPageId === 'string' ? item.targetPageId : '', transitionVideoUrl: typeof item.transitionVideoUrl === 'string' ? item.transitionVideoUrl : '', transitionReverseMode: item.transitionReverseMode === 'separate_video' ? 'separate_video' : ('auto_reverse' as const), reverseVideoUrl: typeof item.reverseVideoUrl === 'string' ? item.reverseVideoUrl : '', transitionDurationSec: item.transitionDurationSec ? Number(item.transitionDurationSec) : undefined, mediaUrl: typeof item.mediaUrl === 'string' ? item.mediaUrl : '', mediaAutoplay: typeof item.mediaAutoplay === 'boolean' ? item.mediaAutoplay : true, mediaLoop: typeof item.mediaLoop === 'boolean' ? item.mediaLoop : true, mediaMuted: typeof item.mediaMuted === 'boolean' ? item.mediaMuted : item.type === 'video_player', }; return mergeElementWithDefaults( normalizedElement, uiElementDefaultsByType[elementType], { preferElementValues: true }, ); }) : []; setElements(normalizedElements); setSelectedMenuItem('none'); setSelectedElementId((current) => { if (!normalizedElements.length) return ''; if ( elementIdFromRoute && normalizedElements.some((element) => element.id === elementIdFromRoute) ) { return elementIdFromRoute; } if (normalizedElements.some((element) => element.id === current)) return current; return ''; }); // Set storage paths for editing/saving setBackgroundImageUrl(activePage.background_image_url || ''); setBackgroundVideoUrl(activePage.background_video_url || ''); setBackgroundAudioUrl(activePage.background_audio_url || ''); // Resolve blob URLs via hook for display (handles initial load and route changes) // Only call if this page wasn't already initialized via switchToPage function if (lastInitializedPageIdRef.current !== activePage.id) { lastInitializedPageIdRef.current = activePage.id; pageSwitch.switchToPage({ id: activePage.id, background_image_url: activePage.background_image_url, background_video_url: activePage.background_video_url, background_audio_url: activePage.background_audio_url, }); } }, [activePage, elementIdFromRoute, uiElementDefaultsByType, pageSwitch.switchToPage]); useEffect(() => { if (allowedNavigationTypes.length !== 1) return; const forcedType = allowedNavigationTypes[0]; setElements((prev) => { let hasChanges = false; const nextElements = prev.map((element) => { if ( !isNavigationElementType(element.type) || element.type === forcedType ) return element; hasChanges = true; return normalizeNavigationElementType(element, forcedType); }); return hasChanges ? nextElements : prev; }); }, [allowedNavigationTypes, normalizeNavigationElementType]); useEffect(() => { const onPointerMove = (event: MouseEvent) => { if (constructorControlsDragRef.current) { const maxX = Math.max(window.innerWidth - 460, 0); const maxY = Math.max(window.innerHeight - 64, 0); const nextX = clamp( event.clientX - constructorControlsDragRef.current.pointerOffsetX, 0, maxX, ); const nextY = clamp( event.clientY - constructorControlsDragRef.current.pointerOffsetY, 0, maxY, ); setConstructorControlsPosition({ x: nextX, y: nextY }); return; } if (menuDragRef.current) { const nextX = clamp( event.clientX - menuDragRef.current.pointerOffsetX, 0, window.innerWidth - 240, ); const nextY = clamp( event.clientY - menuDragRef.current.pointerOffsetY, 0, window.innerHeight - 60, ); setMenuPosition({ x: nextX, y: nextY }); return; } if (editorDragRef.current) { const editorWidth = isEditorCollapsed ? 260 : 380; const nextX = clamp( event.clientX - editorDragRef.current.pointerOffsetX, 0, window.innerWidth - editorWidth, ); const nextY = clamp( event.clientY - editorDragRef.current.pointerOffsetY, 0, window.innerHeight - 60, ); setEditorPosition({ x: nextX, y: nextY }); return; } if (!elementDragRef.current || !canvasRef.current) return; const rect = canvasRef.current.getBoundingClientRect(); const rawX = event.clientX - rect.left - elementDragRef.current.pointerOffsetX; const rawY = event.clientY - rect.top - elementDragRef.current.pointerOffsetY; const nextXPercent = clamp((rawX / rect.width) * 100, 0, 100); const nextYPercent = clamp((rawY / rect.height) * 100, 0, 100); setElements((prev) => prev.map((item) => item.id === elementDragRef.current?.id ? { ...item, xPercent: nextXPercent, yPercent: nextYPercent } : item, ), ); }; const onPointerUp = () => { constructorControlsDragRef.current = null; menuDragRef.current = null; editorDragRef.current = null; elementDragRef.current = null; }; window.addEventListener('mousemove', onPointerMove); window.addEventListener('mouseup', onPointerUp); return () => { window.removeEventListener('mousemove', onPointerMove); window.removeEventListener('mouseup', onPointerUp); }; }, [isEditorCollapsed]); useEffect(() => { if (isConstructorEditMode) return; elementDragRef.current = null; setSelectedElementId(''); setSelectedMenuItem('none'); }, [isConstructorEditMode]); useEffect(() => { if (!isConstructorEditMode) return; if (!selectedElementId && selectedMenuItem === 'none') return; const onOutsideMouseDown = (event: MouseEvent) => { const target = event.target as HTMLElement | null; if (!target) return; if (elementEditorRef.current?.contains(target)) return; const clickedElementId = target .closest('[data-constructor-element-id]') ?.getAttribute('data-constructor-element-id'); if ( selectedElementId && clickedElementId && clickedElementId === selectedElementId ) return; setSelectedElementId(''); setSelectedMenuItem('none'); }; window.addEventListener('mousedown', onOutsideMouseDown); return () => window.removeEventListener('mousedown', onOutsideMouseDown); }, [isConstructorEditMode, selectedElementId, selectedMenuItem]); const selectElementForEdit = (elementId: string) => { setSelectedElementId(elementId); setSelectedMenuItem('none'); }; const selectMenuItemForEdit = (item: EditorMenuItem) => { setSelectedElementId(''); setSelectedMenuItem(item); }; const addElement = (type: CanvasElementType) => { const nextElementType: CanvasElementType = isNavigationElementType(type) ? allowedNavigationTypes.includes(type) ? type : allowedNavigationTypes[0] : type; const baseElement = createDefaultElement(nextElementType, elements.length); const nextElement = mergeElementWithDefaults( baseElement, uiElementDefaultsByType[nextElementType], ); setElements((prev) => [...prev, nextElement]); selectElementForEdit(nextElement.id); setSuccessMessage('Element added. Drag it to set position.'); setErrorMessage(''); }; const createPage = useCallback(async () => { if (!projectId) { setErrorMessage('Project is required.'); return; } const maxSortOrder = Math.max( 0, ...pages.map((item) => Number(item.sort_order || 0)), ); const nextPageNumber = pages.length + 1; const payload = { project: projectId, environment: activePage?.environment || 'dev', source_key: '', name: `Page ${nextPageNumber}`, slug: `page-${nextPageNumber}-${Date.now().toString().slice(-4)}`, sort_order: maxSortOrder + 1, background_image_url: '', background_video_url: '', background_audio_url: '', background_loop: false, requires_auth: false, ui_schema_json: JSON.stringify({ elements: [] }), }; try { setIsCreatingPage(true); setErrorMessage(''); setSuccessMessage(''); const response = await axios.post('/tour_pages', { data: payload }); const createdPage = response?.data; await loadData(); if (createdPage?.id) { setActivePageId(createdPage.id); } setIsMenuOpen(true); setSuccessMessage( 'New page created. You can now configure it in constructor.', ); } catch (error: any) { const message = error?.response?.data?.message || error?.message || 'Failed to create page.'; logger.error( 'Failed to create page from constructor:', error instanceof Error ? error : { error }, ); setErrorMessage(message); } finally { setIsCreatingPage(false); } }, [activePage?.environment, loadData, pages, projectId]); const createTransition = useCallback(async () => { if (!projectId) { setErrorMessage('Project is required.'); return; } const sanitizedVideoUrl = String(newTransitionVideoUrl || '').trim(); if (!sanitizedVideoUrl) { setErrorMessage('Select a transition video asset first.'); return; } const sanitizedName = String(newTransitionName || '').trim() || `Transition ${Date.now().toString().slice(-4)}`; const resolvedDurationSec = getKnownDurationForSource(sanitizedVideoUrl); if (!resolvedDurationSec) { setErrorMessage( 'Could not resolve transition video duration yet. Please wait a moment and try again.', ); return; } try { setIsCreatingTransition(true); setErrorMessage(''); setSuccessMessage(''); const payload = { project: projectId, environment: activePage?.environment || 'dev', source_key: '', name: sanitizedName, slug: `transition-${createLocalId()}`, video_url: sanitizedVideoUrl, audio_url: '', supports_reverse: Boolean(newTransitionSupportsReverse), duration_sec: resolvedDurationSec, }; // Transitions are now stored directly in navigation elements as transitionVideoUrl setSuccessMessage('Transition video can be set directly on navigation elements.'); setNewTransitionName(''); } catch (error: any) { const message = error?.response?.data?.message || error?.message || 'Failed to create transition.'; logger.error( 'Failed to create transition from constructor:', error instanceof Error ? error : { error }, ); setErrorMessage(message); } finally { setIsCreatingTransition(false); } }, [ activePage?.environment, getKnownDurationForSource, newTransitionName, newTransitionSupportsReverse, newTransitionVideoUrl, projectId, ]); const saveConstructor = useCallback(async () => { if (!activePageId) { setErrorMessage('Select a page before saving.'); return; } try { setIsSaving(true); setErrorMessage(''); setSuccessMessage(''); const existingSchema = parseJsonObject>( activePage?.ui_schema_json, {}, ); const schemaToSave = { ...existingSchema, elements, }; await axios.put(`/tour_pages/${activePageId}`, { id: activePageId, data: { environment: activePage?.environment, source_key: activePage?.source_key, name: activePage?.name, slug: activePage?.slug, sort_order: activePage?.sort_order, requires_auth: activePage?.requires_auth, ui_schema_json: schemaToSave, background_image_url: backgroundImageUrl, background_video_url: backgroundVideoUrl, background_audio_url: backgroundAudioUrl, background_loop: Boolean(backgroundAudioUrl), }, }); setSuccessMessage( 'Constructor settings saved. Element positions are stored in percentages.', ); await loadData(activePageId); } catch (error: any) { const message = error?.response?.data?.message || error?.message || 'Failed to save constructor changes.'; logger.error( 'Failed to save constructor changes:', error instanceof Error ? error : { error }, ); setErrorMessage(message); } finally { setIsSaving(false); } }, [ activePage?.environment, activePage?.name, activePage?.requires_auth, activePage?.slug, activePage?.sort_order, activePage?.source_key, activePage?.ui_schema_json, activePageId, backgroundAudioUrl, backgroundImageUrl, backgroundVideoUrl, elements, loadData, ]); /** * Save all dev content to stage environment. * This copies all pages, elements, transitions, and audio from dev to stage. */ const saveToStage = useCallback(async () => { if (!projectId) { setErrorMessage('Project ID is required to save to stage.'); return; } // First save current changes await saveConstructor(); try { setIsSavingToStage(true); setErrorMessage(''); setSuccessMessage(''); await axios.post('/publish/save-to-stage', { projectId }); setSuccessMessage( 'Successfully saved dev content to stage environment. All pages, elements, and transitions have been copied.', ); } catch (error: any) { const message = error?.response?.data?.message || error?.message || 'Failed to save to stage.'; logger.error( 'Failed to save to stage:', error instanceof Error ? error : { error }, ); setErrorMessage(message); } finally { setIsSavingToStage(false); } }, [projectId, saveConstructor]); const onElementMouseDown = (event: React.MouseEvent, elementId: string) => { if (!isConstructorEditMode) return; event.preventDefault(); if (!canvasRef.current) return; const currentElement = elements.find((item) => item.id === elementId); if (!currentElement) return; selectElementForEdit(elementId); const rect = canvasRef.current.getBoundingClientRect(); const elementLeftPx = (currentElement.xPercent / 100) * rect.width; const elementTopPx = (currentElement.yPercent / 100) * rect.height; elementDragRef.current = { id: elementId, pointerOffsetX: event.clientX - rect.left - elementLeftPx, pointerOffsetY: event.clientY - rect.top - elementTopPx, }; }; const preventImageDragStart = (event: React.DragEvent) => { event.preventDefault(); }; const updateSelectedElement = (patch: Partial) => { if (!selectedElementId) return; setElements((prev) => prev.map((item) => item.id === selectedElementId ? { ...item, ...patch } : item, ), ); }; const removeSelectedElement = () => { if (!selectedElementId) return; let nextSelectedId = ''; setElements((prev) => { const filtered = prev.filter((item) => item.id !== selectedElementId); nextSelectedId = filtered[0]?.id || ''; return filtered; }); if (nextSelectedId) { selectElementForEdit(nextSelectedId); } else { setSelectedElementId(''); setSelectedMenuItem('none'); } setSuccessMessage('Element removed.'); }; const updateGalleryCard = (cardId: string, patch: Partial) => { if (!selectedElement || selectedElement.type !== 'gallery') return; const nextCards = (selectedElement.galleryCards || []).map((card) => card.id === cardId ? { ...card, ...patch } : card, ); updateSelectedElement({ galleryCards: nextCards }); }; const addGalleryCard = () => { if (!selectedElement || selectedElement.type !== 'gallery') return; const nextCards = [ ...(selectedElement.galleryCards || []), { id: createLocalId(), imageUrl: '', title: `Card ${(selectedElement.galleryCards || []).length + 1}`, description: '', }, ]; updateSelectedElement({ galleryCards: nextCards }); }; const removeGalleryCard = (cardId: string) => { if (!selectedElement || selectedElement.type !== 'gallery') return; const nextCards = (selectedElement.galleryCards || []).filter( (card) => card.id !== cardId, ); updateSelectedElement({ galleryCards: nextCards }); }; const updateCarouselSlide = ( slideId: string, patch: Partial, ) => { if (!selectedElement || selectedElement.type !== 'carousel') return; const nextSlides = (selectedElement.carouselSlides || []).map((slide) => slide.id === slideId ? { ...slide, ...patch } : slide, ); updateSelectedElement({ carouselSlides: nextSlides }); }; const addCarouselSlide = () => { if (!selectedElement || selectedElement.type !== 'carousel') return; const nextSlides = [ ...(selectedElement.carouselSlides || []), { id: createLocalId(), imageUrl: '', caption: `Slide ${(selectedElement.carouselSlides || []).length + 1}`, }, ]; updateSelectedElement({ carouselSlides: nextSlides }); }; const removeCarouselSlide = (slideId: string) => { if (!selectedElement || selectedElement.type !== 'carousel') return; const nextSlides = (selectedElement.carouselSlides || []).filter( (slide) => slide.id !== slideId, ); updateSelectedElement({ carouselSlides: nextSlides }); }; const openTransitionPreviewForElement = ( element: CanvasElement, direction: 'forward' | 'back', ) => { if (!isNavigationElementType(element.type)) return; if (!element.transitionVideoUrl) { setErrorMessage( 'Select transition video asset to preview transition playback.', ); return; } if ( direction === 'back' && element.transitionReverseMode === 'separate_video' && !element.reverseVideoUrl ) { setErrorMessage( 'Select back-transition asset or switch reverse mode to Auto Reverse.', ); return; } setTransitionPreview({ videoUrl: element.transitionVideoUrl, reverseMode: direction === 'forward' ? 'none' : element.transitionReverseMode === 'separate_video' ? 'separate' : 'reverse', reverseVideoUrl: element.reverseVideoUrl, durationSec: element.transitionDurationSec, title: `${element.navLabel || element.label} · ${direction}`, }); }; const openTransitionPreview = (direction: 'forward' | 'back') => { if ( !selectedElement || (selectedElement.type !== 'navigation_next' && selectedElement.type !== 'navigation_prev') ) { return; } openTransitionPreviewForElement(selectedElement, direction); }; const onCanvasElementClick = (element: CanvasElement) => { if (!isConstructorEditMode) { if (isNavigationElementType(element.type)) { // Disable navigation while transition is playing or buffering if (transitionPreview || isReverseBuffering) { return; } if (element.navDisabled) { return; } const direction = element.navType === 'back' || element.type === 'navigation_prev' ? 'back' : 'forward'; // Support both targetPageSlug (new) and targetPageId (legacy) const targetPageSlug = String(element.targetPageSlug || '').trim(); const legacyTargetPageId = String(element.targetPageId || '').trim(); // Resolve slug to page ID, or use legacy targetPageId const targetPage = targetPageSlug ? pages.find((p) => p.slug === targetPageSlug) : legacyTargetPageId ? pages.find((p) => p.id === legacyTargetPageId) : null; const targetPageId = targetPage?.id || ''; if (!targetPageId) { setErrorMessage( 'No target page configured for this navigation button.', ); return; } const hasPlayableTransition = Boolean(element.transitionVideoUrl) && !( direction === 'back' && element.transitionReverseMode === 'separate_video' && !element.reverseVideoUrl ); if (!hasPlayableTransition) { setPendingNavigationPageId(''); setTransitionPreview(null); // Use switchToPage which resolves blob URLs via usePageSwitch (reduces flash) switchToPage(targetPage).then(() => { setSelectedElementId(''); setSelectedMenuItem('none'); setErrorMessage(''); }); return; } setPendingNavigationPageId(targetPageId); openTransitionPreviewForElement(element, direction); } return; } selectElementForEdit(element.id); }; const onMenuDragStart = (event: React.MouseEvent) => { const targetRect = ( event.currentTarget as HTMLElement ).getBoundingClientRect(); menuDragRef.current = { pointerOffsetX: event.clientX - targetRect.left, pointerOffsetY: event.clientY - targetRect.top, }; }; const onConstructorControlsDragStart = (event: React.MouseEvent) => { const targetRect = ( event.currentTarget as HTMLElement ).getBoundingClientRect(); constructorControlsDragRef.current = { pointerOffsetX: event.clientX - targetRect.left, pointerOffsetY: event.clientY - targetRect.top, }; }; const onElementEditorDragStart = (event: React.MouseEvent) => { const target = event.target as HTMLElement; if (target.closest('button')) return; const targetRect = ( event.currentTarget as HTMLElement ).getBoundingClientRect(); editorDragRef.current = { pointerOffsetX: event.clientX - targetRect.left, pointerOffsetY: event.clientY - targetRect.top, }; }; const renderCanvasElementContent = (element: CanvasElement) => { if ( element.type === 'navigation_next' || element.type === 'navigation_prev' ) { const fallbackNavLabel = getNavigationButtonLabel(element.type); const navigationLabel = element.navLabel?.trim() || fallbackNavLabel; if (element.iconUrl) { // Use img tag with flexible sizing - auto for dimensions not provided const imgStyle: React.CSSProperties = { width: element.width || 'auto', height: element.height || 'auto', objectFit: 'contain', }; // eslint-disable-next-line @next/next/no-img-element return ( Navigation icon ); } // Support both targetPageSlug (new) and targetPageId (legacy) const targetPageName = element.targetPageSlug ? pageNameBySlug[element.targetPageSlug] : element.targetPageId ? pageNameById[element.targetPageId] : ''; return (
{navigationLabel}
{targetPageName ? ( To: {targetPageName} ) : null}
); } if (element.type === 'tooltip') { if (element.iconUrl) { return (
); } return (

{element.tooltipTitle}

{element.tooltipText || 'Tooltip text'}

); } if (element.type === 'description') { if (element.iconUrl) { return (
); } const bgColor = element.descriptionBackgroundColor || 'transparent'; return (

{element.descriptionTitle || 'TITLE'}

{element.descriptionText && (

{element.descriptionText}

)}
); } if (element.type === 'gallery') { const cards = element.galleryCards || []; return (

Gallery ({cards.length})

{cards.slice(0, 6).map((card) => (
{card.imageUrl ? (
) : (
No image
)}
))}
); } if (element.type === 'carousel') { const firstSlide = (element.carouselSlides || [])[0]; return (

Carousel ({element.carouselSlides?.length || 0})

{firstSlide?.imageUrl ? (
) : (
No slide image
)}

{firstSlide?.caption || 'No caption'}

{(element.carouselPrevIconUrl || element.carouselNextIconUrl) && (
{element.carouselPrevIconUrl ? (
) : null} Prev Next {element.carouselNextIconUrl ? (
) : null}
)}
); } if (element.type === 'video_player') { return (

Video player

); } if (element.type === 'audio_player') { return (

Audio player

); } return getElementButtonTitle(element); }; const isElementVisibleOnCanvas = (element: CanvasElement) => { const delay = Number(element.appearDelaySec || 0); if (canvasElapsedSec < delay) return false; if ( element.appearDurationSec === null || element.appearDurationSec === undefined ) { return true; } const duration = Number(element.appearDurationSec); if (!Number.isFinite(duration) || duration <= 0) return true; return canvasElapsedSec <= delay + duration; }; const isElementReadyForCanvasRender = (element: CanvasElement) => { const isPreloadableIconElement = (element.type === 'navigation_next' || element.type === 'navigation_prev' || element.type === 'tooltip' || element.type === 'description') && Boolean(element.iconUrl); if (!isPreloadableIconElement) return true; const playbackUrl = resolveAssetPlaybackUrl(element.iconUrl); if (!playbackUrl) return true; return Boolean(preloadedIconUrlMap[playbackUrl]); }; const canvasBackgroundStyle: React.CSSProperties = {}; // Prefer hook's blob URLs (instant display) but fall back to resolved URLs for manual changes const backgroundImageSrc = pageSwitch.currentBgImageUrl || resolveAssetPlaybackUrl(backgroundImageUrl); const backgroundVideoSrc = pageSwitch.currentBgVideoUrl || resolveAssetPlaybackUrl(backgroundVideoUrl); const backgroundAudioSrc = pageSwitch.currentBgAudioUrl || resolveAssetPlaybackUrl(backgroundAudioUrl); const backgroundImageSelectOptions = addFallbackAssetOption( backgroundImageAssetOptions, backgroundImageUrl, `Current image · ${backgroundImageUrl}`, ); const backgroundVideoSelectOptions = addFallbackAssetOption( videoAssetOptions, backgroundVideoUrl, `Current video · ${backgroundVideoUrl}`, ); const backgroundAudioSelectOptions = addFallbackAssetOption( audioAssetOptions, backgroundAudioUrl, `Current audio · ${backgroundAudioUrl}`, ); const hasEditorSelection = isConstructorEditMode && (Boolean(selectedElement) || selectedMenuItem !== 'none'); const editorTitle = selectedMenuItem === 'background_image' ? 'Background image' : selectedMenuItem === 'background_video' ? 'Background video' : selectedMenuItem === 'background_audio' ? 'Background audio' : selectedMenuItem === 'create_transition' ? 'Create transition' : selectedElement?.label || 'Element editor'; if (backgroundImageSrc) { canvasBackgroundStyle.backgroundImage = `url("${backgroundImageSrc}")`; canvasBackgroundStyle.backgroundSize = 'cover'; canvasBackgroundStyle.backgroundPosition = 'center'; } return ( <> {getPageTitle(isElementEditMode ? 'Edit Element' : 'Constructor')}

{projectName || 'Loading project...'}

{errorMessage ? (

{errorMessage}

) : null} {successMessage ? (

{successMessage}

) : null} {pages.length > 0 && isElementEditMode && (
)}
{pages.length > 0 && !isElementEditMode && (
Constructor Controls
{isConstructorEditMode ? 'Drag & configure elements.' : 'Click and interact with rendered elements.'}
)}
{/* Background image - CSS backgroundImage on canvas provides instant display, NextImage enhances with optimized loading. bg-black prevents white flash. */} {backgroundImageSrc ? (
pageSwitch.markBackgroundReady()} onError={() => pageSwitch.markBackgroundReady()} />
) : null} {/* Previous background overlay - shows during page switch until new bg is ready */} {pageSwitch.previousBgImageUrl && pageSwitch.isSwitching && !pageSwitch.isNewBgReady && (
)} {backgroundVideoSrc ? (
{pages.length > 0 && hasEditorSelection && (

{editorTitle}

{selectedElement && ( )}
{!isEditorCollapsed && ( <> {selectedMenuItem === 'background_image' && (
)} {selectedMenuItem === 'background_video' && (

{backgroundVideoDurationNote}

)} {selectedMenuItem === 'background_audio' && (

{backgroundAudioDurationNote}

)} {selectedMenuItem === 'create_transition' && (

Create next page transition

setNewTransitionName(event.target.value) } />

Transition duration is automatic from video metadata.{' '} {newTransitionDurationNote}

)} {selectedElement && (
updateSelectedElement({ label: event.target.value }) } />
updateSelectedElement({ appearDelaySec: normalizeAppearDelaySec( event.target.value, ), }) } />
updateSelectedElement({ appearDurationSec: normalizeAppearDurationSec( event.target.value, ), }) } />

Leave empty for unlimited.

)} {selectedElement && (selectedElement.type === 'navigation_next' || selectedElement.type === 'navigation_prev') && (
updateSelectedElement({ navLabel: event.target.value, }) } />

{selectedMediaDurationNote}

{selectedTransitionDurationNote}

{selectedElement.transitionReverseMode === 'separate_video' && (
)}

Transition duration is set automatically from the selected video. {selectedTransitionDurationNote}

openTransitionPreview('forward')} /> openTransitionPreview('back')} />
)} {selectedElement && selectedElement.type === 'tooltip' && (
updateSelectedElement({ tooltipTitle: event.target.value, }) } />