From e222f15d1dd50aa50be8c7424d86aa7fedf0defc Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sun, 31 Aug 2025 13:26:53 +0200 Subject: feat: implement timeline caching with cache indicator --- apps/web/src/hooks/use-frame-cache.ts | 320 ++++++++++++++++++++++++++++++++++ 1 file changed, 320 insertions(+) create mode 100644 apps/web/src/hooks/use-frame-cache.ts (limited to 'apps/web/src/hooks/use-frame-cache.ts') diff --git a/apps/web/src/hooks/use-frame-cache.ts b/apps/web/src/hooks/use-frame-cache.ts new file mode 100644 index 00000000..8dc99966 --- /dev/null +++ b/apps/web/src/hooks/use-frame-cache.ts @@ -0,0 +1,320 @@ +import { useRef, useCallback } from "react"; +import { + TimelineTrack, + TimelineElement, + MediaElement, + TextElement, +} from "@/types/timeline"; +import { MediaFile } from "@/types/media"; +import { TProject } from "@/types/project"; + +interface CachedFrame { + imageData: ImageData; + timelineHash: string; + timestamp: number; +} + +interface FrameCacheOptions { + maxCacheSize?: number; // Maximum number of cached frames + cacheResolution?: number; // Frames per second to cache at +} + +// Shared singleton cache across hook instances (HMR-safe) +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const __frameCacheGlobal: any = globalThis as any; +const __sharedFrameCache: Map = + __frameCacheGlobal.__sharedFrameCache ?? new Map(); +__frameCacheGlobal.__sharedFrameCache = __sharedFrameCache; + +export function useFrameCache(options: FrameCacheOptions = {}) { + const { maxCacheSize = 300, cacheResolution = 30 } = options; // 10 seconds at 30fps + + const frameCacheRef = useRef(__sharedFrameCache); + + // Generate a hash of the timeline state that affects rendering + const getTimelineHash = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): string => { + // Get elements that are active at this time + const activeElements: Array<{ + id: string; + type: string; + startTime: number; + duration: number; + trimStart: number; + trimEnd: number; + mediaId?: string; + // Text-specific properties + content?: string; + fontSize?: number; + fontFamily?: string; + color?: string; + backgroundColor?: string; + x?: number; + y?: number; + rotation?: number; + opacity?: number; + }> = []; + + for (const track of tracks) { + if (track.muted) continue; + + for (const element of track.elements) { + // Check if element has hidden property (some elements might not have it) + const isHidden = "hidden" in element ? element.hidden : false; + if (isHidden) continue; + + const elementStart = element.startTime; + const elementEnd = + element.startTime + + (element.duration - element.trimStart - element.trimEnd); + + if (time >= elementStart && time < elementEnd) { + if (element.type === "media") { + const mediaElement = element as MediaElement; + activeElements.push({ + id: element.id, + type: element.type, + startTime: element.startTime, + duration: element.duration, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + mediaId: mediaElement.mediaId, + }); + } else if (element.type === "text") { + const textElement = element as TextElement; + activeElements.push({ + id: element.id, + type: element.type, + startTime: element.startTime, + duration: element.duration, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + content: textElement.content, + fontSize: textElement.fontSize, + fontFamily: textElement.fontFamily, + color: textElement.color, + backgroundColor: textElement.backgroundColor, + x: textElement.x, + y: textElement.y, + rotation: textElement.rotation, + opacity: textElement.opacity, + }); + } + } + } + } + + // Include project settings that affect rendering + const projectState = { + backgroundColor: activeProject?.backgroundColor, + backgroundType: activeProject?.backgroundType, + blurIntensity: activeProject?.blurIntensity, + canvasSize: activeProject?.canvasSize, + }; + + return JSON.stringify({ + activeElements, + projectState, + time: Math.floor(time * cacheResolution) / cacheResolution, // Quantize time + }); + }, + [cacheResolution] + ); + + // Check if a frame is cached and valid + const isFrameCached = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): boolean => { + const frameKey = Math.floor(time * cacheResolution); + const cached = frameCacheRef.current.get(frameKey); + + if (!cached) return false; + + const currentHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + return cached.timelineHash === currentHash; + }, + [getTimelineHash, cacheResolution] + ); + + // Get cached frame if available and valid + const getCachedFrame = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): ImageData | null => { + const frameKey = Math.floor(time * cacheResolution); + const cached = frameCacheRef.current.get(frameKey); + + if (!cached) return null; + + const currentHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + if (cached.timelineHash !== currentHash) { + // Cache is stale, remove it + frameCacheRef.current.delete(frameKey); + return null; + } + + return cached.imageData; + }, + [getTimelineHash, cacheResolution] + ); + + // Cache a rendered frame + const cacheFrame = useCallback( + ( + time: number, + imageData: ImageData, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): void => { + const frameKey = Math.floor(time * cacheResolution); + const timelineHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + + // Enforce cache size limit (LRU eviction) + if (frameCacheRef.current.size >= maxCacheSize) { + // Remove oldest entries + const entries = Array.from(frameCacheRef.current.entries()); + entries.sort((a, b) => a[1].timestamp - b[1].timestamp); + + // Remove oldest 20% of entries + const toRemove = Math.floor(entries.length * 0.2); + for (let i = 0; i < toRemove; i++) { + frameCacheRef.current.delete(entries[i][0]); + } + } + + frameCacheRef.current.set(frameKey, { + imageData, + timelineHash, + timestamp: Date.now(), + }); + }, + [getTimelineHash, cacheResolution, maxCacheSize] + ); + + // Clear cache when timeline changes significantly + const invalidateCache = useCallback(() => { + frameCacheRef.current.clear(); + }, []); + + // Get render status for timeline indicator + const getRenderStatus = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): "cached" | "not-cached" => { + return isFrameCached(time, tracks, mediaFiles, activeProject) + ? "cached" + : "not-cached"; + }, + [isFrameCached] + ); + + // Pre-render frames around current time + const preRenderNearbyFrames = useCallback( + async ( + currentTime: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null, + renderFunction: (time: number) => Promise, + range: number = 3 // seconds + ) => { + const framesToPreRender: number[] = []; + + // Calculate frames to pre-render (around current time) + for ( + let offset = -range; + offset <= range; + offset += 1 / cacheResolution + ) { + const time = currentTime + offset; + if (time < 0) continue; + + if (!isFrameCached(time, tracks, mediaFiles, activeProject)) { + framesToPreRender.push(time); + } + } + + // Expand to full 1-second buckets to avoid fragmented tiny cache regions + const secondsToPreRender = new Set(); + for (const t of framesToPreRender) { + secondsToPreRender.add(Math.floor(t)); + } + + const expandedTimes: number[] = []; + for (const s of secondsToPreRender) { + for (let k = 0; k < cacheResolution; k++) { + const t = s + k / cacheResolution; + if (t < 0) continue; + if (!isFrameCached(t, tracks, mediaFiles, activeProject)) { + expandedTimes.push(t); + } + } + } + + // Sort forward-first near currentTime to improve perceived responsiveness + expandedTimes.sort((a, b) => { + const da = a >= currentTime ? a - currentTime : currentTime - a + 1e6; + const db = b >= currentTime ? b - currentTime : currentTime - b + 1e6; + return da - db; + }); + + // Cap total scheduled renders to avoid jank (e.g., up to 90 frames) + const CAP = Math.max(30, Math.min(90, cacheResolution * 3)); + const toSchedule = expandedTimes.slice(0, CAP); + + // Pre-render during idle time + for (const time of toSchedule) { + requestIdleCallback(async () => { + try { + const imageData = await renderFunction(time); + cacheFrame(time, imageData, tracks, mediaFiles, activeProject); + } catch (error) { + console.warn(`Pre-render failed for time ${time}:`, error); + } + }); + } + }, + [isFrameCached, cacheFrame, cacheResolution] + ); + + return { + isFrameCached, + getCachedFrame, + cacheFrame, + invalidateCache, + getRenderStatus, + preRenderNearbyFrames, + cacheSize: frameCacheRef.current.size, + }; +} -- cgit v1.3.1 From 2c5d5dc23437e288d7e6936e0337583dc8dbc782 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Sun, 31 Aug 2025 19:57:50 +0200 Subject: bunch of small improvements --- apps/web/src/components/editor/export-button.tsx | 291 ++++++---- .../editor/media-panel/views/captions.tsx | 2 +- apps/web/src/components/editor/panel-base-view.tsx | 5 +- apps/web/src/components/editor/preview-panel.tsx | 7 +- apps/web/src/data/colors/syntax-ui.tsx | 64 +-- apps/web/src/hooks/use-frame-cache.ts | 640 ++++++++++----------- apps/web/src/lib/canvas-gradients.ts | 388 +++++++------ apps/web/src/lib/timeline-renderer.ts | 8 +- 8 files changed, 750 insertions(+), 655 deletions(-) (limited to 'apps/web/src/hooks/use-frame-cache.ts') diff --git a/apps/web/src/components/editor/export-button.tsx b/apps/web/src/components/editor/export-button.tsx index 41a5f65c..246e8b6f 100644 --- a/apps/web/src/components/editor/export-button.tsx +++ b/apps/web/src/components/editor/export-button.tsx @@ -16,7 +16,7 @@ import { DEFAULT_EXPORT_OPTIONS, } from "@/lib/export"; import { useProjectStore } from "@/stores/project-store"; -import { Download, X } from "lucide-react"; +import { Check, Copy, Download, RotateCcw, X } from "lucide-react"; import { ExportFormat, ExportQuality, ExportResult } from "@/types/export"; import { PropertyGroup } from "./properties-panel/property-item"; @@ -134,135 +134,184 @@ function ExportPopover({ return ( <> -
-

- {isExporting ? "Exporting project" : "Export project"} -

- -
+ {exportResult && !exportResult.success ? ( + + ) : ( + <> +
+

+ {isExporting ? "Exporting project" : "Export project"} +

+ +
-
- {!isExporting && ( - <> -
- - setFormat(value as ExportFormat)} - > -
- - -
-
- - -
- - +
+ {!isExporting && ( + <> +
+ + + setFormat(value as ExportFormat) + } + > +
+ + +
+
+ + +
+ + - - - setQuality(value as ExportQuality) - } - > -
- - -
-
- - -
-
- - -
-
- - -
- - + + + setQuality(value as ExportQuality) + } + > +
+ + +
+
+ + +
+
+ + +
+
+ + +
+ + - -
- setIncludeAudio(!!checked)} - /> - + +
+ + setIncludeAudio(!!checked) + } + /> + +
+
- -
- - - )} - - {isExporting && ( -
-
-
-

- {Math.round(progress * 100)}% -

-

100%

-
- -
+ + + )} - -
- )} + {isExporting && ( +
+
+
+

+ {Math.round(progress * 100)}% +

+

100%

+
+ +
- {exportResult && !exportResult.success && ( -
-
Export failed
-

- {exportResult.error || "Unknown error occurred"} -

- + +
+ )}
- )} -
+ + )} ); } + +function ExportError({ + error, + onRetry, +}: { + error: string; + onRetry: () => void; +}) { + const [copied, setCopied] = useState(false); + + const handleCopy = async () => { + await navigator.clipboard.writeText(error); + setCopied(true); + setTimeout(() => setCopied(false), 1000); + }; + + return ( +
+
+

Export failed

+

+ {error} +

+
+ +
+ + +
+
+ ); +} diff --git a/apps/web/src/components/editor/media-panel/views/captions.tsx b/apps/web/src/components/editor/media-panel/views/captions.tsx index 59403a8d..fbe5b418 100644 --- a/apps/web/src/components/editor/media-panel/views/captions.tsx +++ b/apps/web/src/components/editor/media-panel/views/captions.tsx @@ -188,7 +188,7 @@ export function Captions() { }; return ( - + -
{children}
+
{children}
); } @@ -40,7 +41,7 @@ export function PanelBaseView({ ref, }: PanelBaseViewProps) { return ( -
+
{!tabs || tabs.length === 0 ? ( {children} ) : ( diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index b7cc9578..8b1abd81 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -260,6 +260,7 @@ export function PreviewPanel() { }, []); const hasAnyElements = tracks.some((track) => track.elements.length > 0); + const shouldRenderPreview = hasAnyElements || activeProject?.backgroundType; const getActiveElements = (): ActiveElement[] => { const activeElements: ActiveElement[] = []; @@ -701,7 +702,7 @@ export function PreviewPanel() { className="flex-1 flex flex-col items-center justify-center min-h-0 min-w-0" >
- {hasAnyElements ? ( + {shouldRenderPreview ? (
{activeElements.length === 0 ? ( -
- No elements at current time -
+ <> ) : ( activeElements.map((elementData) => renderElement(elementData)) )} diff --git a/apps/web/src/data/colors/syntax-ui.tsx b/apps/web/src/data/colors/syntax-ui.tsx index 6a7677b4..50c7e7cc 100644 --- a/apps/web/src/data/colors/syntax-ui.tsx +++ b/apps/web/src/data/colors/syntax-ui.tsx @@ -1,32 +1,32 @@ -// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients) - -export const syntaxUIGradients = [ - // Cyan to Blue gradients - "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", - "linear-gradient(to right, #bfdbfe, #a5f3fc)", - "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", - - // Purple gradients - "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)", - "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)", - - // Blue gradients - "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", - "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", - - // Green gradients - "linear-gradient(to right, #6ee7b7, #34d399, #10b981)", - "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)", - - // Red gradient - "linear-gradient(to right, #fca5a5, #f87171, #ef4444)", - - // Yellow/Orange gradient - "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)", - - // Pink gradient - "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)", - - // Neon radial gradient - "radial-gradient(circle at bottom left, #ff00ff, #00ffff)", -]; +// These are the gradients from Syntax UI (https://syntaxui.com/effects/gradients) + +export const syntaxUIGradients = [ + // Cyan to Blue gradients + "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", + "linear-gradient(to right, #bfdbfe, #a5f3fc)", + "linear-gradient(to right, #22d3ee, #0ea5e9, #0284c7)", + + // Purple gradients + "linear-gradient(to right, #e9d5ff, #d8b4fe, #c084fc)", + "linear-gradient(to right, #c4b5fd, #a78bfa, #8b5cf6)", + + // Blue gradients + "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", + "linear-gradient(to right, #93c5fd, #60a5fa, #3b82f6)", + + // Green gradients + "linear-gradient(to right, #6ee7b7, #34d399, #10b981)", + "linear-gradient(to right, #d1fae5, #a7f3d0, #6ee7b7)", + + // Red gradient + "linear-gradient(to right, #fca5a5, #f87171, #ef4444)", + + // Yellow/Orange gradient + "linear-gradient(to right, #fde68a, #fbbf24, #f59e0b)", + + // Pink gradient + "linear-gradient(to right, #fbcfe8, #f9a8d4, #f472b6)", + + // Neon radial gradient + "radial-gradient(circle at bottom left, #ff00ff, #00ffff)", +]; diff --git a/apps/web/src/hooks/use-frame-cache.ts b/apps/web/src/hooks/use-frame-cache.ts index 8dc99966..2abfb912 100644 --- a/apps/web/src/hooks/use-frame-cache.ts +++ b/apps/web/src/hooks/use-frame-cache.ts @@ -1,320 +1,320 @@ -import { useRef, useCallback } from "react"; -import { - TimelineTrack, - TimelineElement, - MediaElement, - TextElement, -} from "@/types/timeline"; -import { MediaFile } from "@/types/media"; -import { TProject } from "@/types/project"; - -interface CachedFrame { - imageData: ImageData; - timelineHash: string; - timestamp: number; -} - -interface FrameCacheOptions { - maxCacheSize?: number; // Maximum number of cached frames - cacheResolution?: number; // Frames per second to cache at -} - -// Shared singleton cache across hook instances (HMR-safe) -// eslint-disable-next-line @typescript-eslint/no-explicit-any -const __frameCacheGlobal: any = globalThis as any; -const __sharedFrameCache: Map = - __frameCacheGlobal.__sharedFrameCache ?? new Map(); -__frameCacheGlobal.__sharedFrameCache = __sharedFrameCache; - -export function useFrameCache(options: FrameCacheOptions = {}) { - const { maxCacheSize = 300, cacheResolution = 30 } = options; // 10 seconds at 30fps - - const frameCacheRef = useRef(__sharedFrameCache); - - // Generate a hash of the timeline state that affects rendering - const getTimelineHash = useCallback( - ( - time: number, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null - ): string => { - // Get elements that are active at this time - const activeElements: Array<{ - id: string; - type: string; - startTime: number; - duration: number; - trimStart: number; - trimEnd: number; - mediaId?: string; - // Text-specific properties - content?: string; - fontSize?: number; - fontFamily?: string; - color?: string; - backgroundColor?: string; - x?: number; - y?: number; - rotation?: number; - opacity?: number; - }> = []; - - for (const track of tracks) { - if (track.muted) continue; - - for (const element of track.elements) { - // Check if element has hidden property (some elements might not have it) - const isHidden = "hidden" in element ? element.hidden : false; - if (isHidden) continue; - - const elementStart = element.startTime; - const elementEnd = - element.startTime + - (element.duration - element.trimStart - element.trimEnd); - - if (time >= elementStart && time < elementEnd) { - if (element.type === "media") { - const mediaElement = element as MediaElement; - activeElements.push({ - id: element.id, - type: element.type, - startTime: element.startTime, - duration: element.duration, - trimStart: element.trimStart, - trimEnd: element.trimEnd, - mediaId: mediaElement.mediaId, - }); - } else if (element.type === "text") { - const textElement = element as TextElement; - activeElements.push({ - id: element.id, - type: element.type, - startTime: element.startTime, - duration: element.duration, - trimStart: element.trimStart, - trimEnd: element.trimEnd, - content: textElement.content, - fontSize: textElement.fontSize, - fontFamily: textElement.fontFamily, - color: textElement.color, - backgroundColor: textElement.backgroundColor, - x: textElement.x, - y: textElement.y, - rotation: textElement.rotation, - opacity: textElement.opacity, - }); - } - } - } - } - - // Include project settings that affect rendering - const projectState = { - backgroundColor: activeProject?.backgroundColor, - backgroundType: activeProject?.backgroundType, - blurIntensity: activeProject?.blurIntensity, - canvasSize: activeProject?.canvasSize, - }; - - return JSON.stringify({ - activeElements, - projectState, - time: Math.floor(time * cacheResolution) / cacheResolution, // Quantize time - }); - }, - [cacheResolution] - ); - - // Check if a frame is cached and valid - const isFrameCached = useCallback( - ( - time: number, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null - ): boolean => { - const frameKey = Math.floor(time * cacheResolution); - const cached = frameCacheRef.current.get(frameKey); - - if (!cached) return false; - - const currentHash = getTimelineHash( - time, - tracks, - mediaFiles, - activeProject - ); - return cached.timelineHash === currentHash; - }, - [getTimelineHash, cacheResolution] - ); - - // Get cached frame if available and valid - const getCachedFrame = useCallback( - ( - time: number, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null - ): ImageData | null => { - const frameKey = Math.floor(time * cacheResolution); - const cached = frameCacheRef.current.get(frameKey); - - if (!cached) return null; - - const currentHash = getTimelineHash( - time, - tracks, - mediaFiles, - activeProject - ); - if (cached.timelineHash !== currentHash) { - // Cache is stale, remove it - frameCacheRef.current.delete(frameKey); - return null; - } - - return cached.imageData; - }, - [getTimelineHash, cacheResolution] - ); - - // Cache a rendered frame - const cacheFrame = useCallback( - ( - time: number, - imageData: ImageData, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null - ): void => { - const frameKey = Math.floor(time * cacheResolution); - const timelineHash = getTimelineHash( - time, - tracks, - mediaFiles, - activeProject - ); - - // Enforce cache size limit (LRU eviction) - if (frameCacheRef.current.size >= maxCacheSize) { - // Remove oldest entries - const entries = Array.from(frameCacheRef.current.entries()); - entries.sort((a, b) => a[1].timestamp - b[1].timestamp); - - // Remove oldest 20% of entries - const toRemove = Math.floor(entries.length * 0.2); - for (let i = 0; i < toRemove; i++) { - frameCacheRef.current.delete(entries[i][0]); - } - } - - frameCacheRef.current.set(frameKey, { - imageData, - timelineHash, - timestamp: Date.now(), - }); - }, - [getTimelineHash, cacheResolution, maxCacheSize] - ); - - // Clear cache when timeline changes significantly - const invalidateCache = useCallback(() => { - frameCacheRef.current.clear(); - }, []); - - // Get render status for timeline indicator - const getRenderStatus = useCallback( - ( - time: number, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null - ): "cached" | "not-cached" => { - return isFrameCached(time, tracks, mediaFiles, activeProject) - ? "cached" - : "not-cached"; - }, - [isFrameCached] - ); - - // Pre-render frames around current time - const preRenderNearbyFrames = useCallback( - async ( - currentTime: number, - tracks: TimelineTrack[], - mediaFiles: MediaFile[], - activeProject: TProject | null, - renderFunction: (time: number) => Promise, - range: number = 3 // seconds - ) => { - const framesToPreRender: number[] = []; - - // Calculate frames to pre-render (around current time) - for ( - let offset = -range; - offset <= range; - offset += 1 / cacheResolution - ) { - const time = currentTime + offset; - if (time < 0) continue; - - if (!isFrameCached(time, tracks, mediaFiles, activeProject)) { - framesToPreRender.push(time); - } - } - - // Expand to full 1-second buckets to avoid fragmented tiny cache regions - const secondsToPreRender = new Set(); - for (const t of framesToPreRender) { - secondsToPreRender.add(Math.floor(t)); - } - - const expandedTimes: number[] = []; - for (const s of secondsToPreRender) { - for (let k = 0; k < cacheResolution; k++) { - const t = s + k / cacheResolution; - if (t < 0) continue; - if (!isFrameCached(t, tracks, mediaFiles, activeProject)) { - expandedTimes.push(t); - } - } - } - - // Sort forward-first near currentTime to improve perceived responsiveness - expandedTimes.sort((a, b) => { - const da = a >= currentTime ? a - currentTime : currentTime - a + 1e6; - const db = b >= currentTime ? b - currentTime : currentTime - b + 1e6; - return da - db; - }); - - // Cap total scheduled renders to avoid jank (e.g., up to 90 frames) - const CAP = Math.max(30, Math.min(90, cacheResolution * 3)); - const toSchedule = expandedTimes.slice(0, CAP); - - // Pre-render during idle time - for (const time of toSchedule) { - requestIdleCallback(async () => { - try { - const imageData = await renderFunction(time); - cacheFrame(time, imageData, tracks, mediaFiles, activeProject); - } catch (error) { - console.warn(`Pre-render failed for time ${time}:`, error); - } - }); - } - }, - [isFrameCached, cacheFrame, cacheResolution] - ); - - return { - isFrameCached, - getCachedFrame, - cacheFrame, - invalidateCache, - getRenderStatus, - preRenderNearbyFrames, - cacheSize: frameCacheRef.current.size, - }; -} +import { useRef, useCallback } from "react"; +import { + TimelineTrack, + TimelineElement, + MediaElement, + TextElement, +} from "@/types/timeline"; +import { MediaFile } from "@/types/media"; +import { TProject } from "@/types/project"; + +interface CachedFrame { + imageData: ImageData; + timelineHash: string; + timestamp: number; +} + +interface FrameCacheOptions { + maxCacheSize?: number; // Maximum number of cached frames + cacheResolution?: number; // Frames per second to cache at +} + +// Shared singleton cache across hook instances (HMR-safe) +// eslint-disable-next-line @typescript-eslint/no-explicit-any +const __frameCacheGlobal: any = globalThis as any; +const __sharedFrameCache: Map = + __frameCacheGlobal.__sharedFrameCache ?? new Map(); +__frameCacheGlobal.__sharedFrameCache = __sharedFrameCache; + +export function useFrameCache(options: FrameCacheOptions = {}) { + const { maxCacheSize = 300, cacheResolution = 30 } = options; // 10 seconds at 30fps + + const frameCacheRef = useRef(__sharedFrameCache); + + // Generate a hash of the timeline state that affects rendering + const getTimelineHash = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): string => { + // Get elements that are active at this time + const activeElements: Array<{ + id: string; + type: string; + startTime: number; + duration: number; + trimStart: number; + trimEnd: number; + mediaId?: string; + // Text-specific properties + content?: string; + fontSize?: number; + fontFamily?: string; + color?: string; + backgroundColor?: string; + x?: number; + y?: number; + rotation?: number; + opacity?: number; + }> = []; + + for (const track of tracks) { + if (track.muted) continue; + + for (const element of track.elements) { + // Check if element has hidden property (some elements might not have it) + const isHidden = "hidden" in element ? element.hidden : false; + if (isHidden) continue; + + const elementStart = element.startTime; + const elementEnd = + element.startTime + + (element.duration - element.trimStart - element.trimEnd); + + if (time >= elementStart && time < elementEnd) { + if (element.type === "media") { + const mediaElement = element as MediaElement; + activeElements.push({ + id: element.id, + type: element.type, + startTime: element.startTime, + duration: element.duration, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + mediaId: mediaElement.mediaId, + }); + } else if (element.type === "text") { + const textElement = element as TextElement; + activeElements.push({ + id: element.id, + type: element.type, + startTime: element.startTime, + duration: element.duration, + trimStart: element.trimStart, + trimEnd: element.trimEnd, + content: textElement.content, + fontSize: textElement.fontSize, + fontFamily: textElement.fontFamily, + color: textElement.color, + backgroundColor: textElement.backgroundColor, + x: textElement.x, + y: textElement.y, + rotation: textElement.rotation, + opacity: textElement.opacity, + }); + } + } + } + } + + // Include project settings that affect rendering + const projectState = { + backgroundColor: activeProject?.backgroundColor, + backgroundType: activeProject?.backgroundType, + blurIntensity: activeProject?.blurIntensity, + canvasSize: activeProject?.canvasSize, + }; + + return JSON.stringify({ + activeElements, + projectState, + time: Math.floor(time * cacheResolution) / cacheResolution, // Quantize time + }); + }, + [cacheResolution] + ); + + // Check if a frame is cached and valid + const isFrameCached = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): boolean => { + const frameKey = Math.floor(time * cacheResolution); + const cached = frameCacheRef.current.get(frameKey); + + if (!cached) return false; + + const currentHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + return cached.timelineHash === currentHash; + }, + [getTimelineHash, cacheResolution] + ); + + // Get cached frame if available and valid + const getCachedFrame = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): ImageData | null => { + const frameKey = Math.floor(time * cacheResolution); + const cached = frameCacheRef.current.get(frameKey); + + if (!cached) return null; + + const currentHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + if (cached.timelineHash !== currentHash) { + // Cache is stale, remove it + frameCacheRef.current.delete(frameKey); + return null; + } + + return cached.imageData; + }, + [getTimelineHash, cacheResolution] + ); + + // Cache a rendered frame + const cacheFrame = useCallback( + ( + time: number, + imageData: ImageData, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): void => { + const frameKey = Math.floor(time * cacheResolution); + const timelineHash = getTimelineHash( + time, + tracks, + mediaFiles, + activeProject + ); + + // Enforce cache size limit (LRU eviction) + if (frameCacheRef.current.size >= maxCacheSize) { + // Remove oldest entries + const entries = Array.from(frameCacheRef.current.entries()); + entries.sort((a, b) => a[1].timestamp - b[1].timestamp); + + // Remove oldest 20% of entries + const toRemove = Math.floor(entries.length * 0.2); + for (let i = 0; i < toRemove; i++) { + frameCacheRef.current.delete(entries[i][0]); + } + } + + frameCacheRef.current.set(frameKey, { + imageData, + timelineHash, + timestamp: Date.now(), + }); + }, + [getTimelineHash, cacheResolution, maxCacheSize] + ); + + // Clear cache when timeline changes significantly + const invalidateCache = useCallback(() => { + frameCacheRef.current.clear(); + }, []); + + // Get render status for timeline indicator + const getRenderStatus = useCallback( + ( + time: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null + ): "cached" | "not-cached" => { + return isFrameCached(time, tracks, mediaFiles, activeProject) + ? "cached" + : "not-cached"; + }, + [isFrameCached] + ); + + // Pre-render frames around current time + const preRenderNearbyFrames = useCallback( + async ( + currentTime: number, + tracks: TimelineTrack[], + mediaFiles: MediaFile[], + activeProject: TProject | null, + renderFunction: (time: number) => Promise, + range: number = 3 // seconds + ) => { + const framesToPreRender: number[] = []; + + // Calculate frames to pre-render (around current time) + for ( + let offset = -range; + offset <= range; + offset += 1 / cacheResolution + ) { + const time = currentTime + offset; + if (time < 0) continue; + + if (!isFrameCached(time, tracks, mediaFiles, activeProject)) { + framesToPreRender.push(time); + } + } + + // Expand to full 1-second buckets to avoid fragmented tiny cache regions + const secondsToPreRender = new Set(); + for (const t of framesToPreRender) { + secondsToPreRender.add(Math.floor(t)); + } + + const expandedTimes: number[] = []; + for (const s of secondsToPreRender) { + for (let k = 0; k < cacheResolution; k++) { + const t = s + k / cacheResolution; + if (t < 0) continue; + if (!isFrameCached(t, tracks, mediaFiles, activeProject)) { + expandedTimes.push(t); + } + } + } + + // Sort forward-first near currentTime to improve perceived responsiveness + expandedTimes.sort((a, b) => { + const da = a >= currentTime ? a - currentTime : currentTime - a + 1e6; + const db = b >= currentTime ? b - currentTime : currentTime - b + 1e6; + return da - db; + }); + + // Cap total scheduled renders to avoid jank (e.g., up to 90 frames) + const CAP = Math.max(30, Math.min(90, cacheResolution * 3)); + const toSchedule = expandedTimes.slice(0, CAP); + + // Pre-render during idle time + for (const time of toSchedule) { + requestIdleCallback(async () => { + try { + const imageData = await renderFunction(time); + cacheFrame(time, imageData, tracks, mediaFiles, activeProject); + } catch (error) { + console.warn(`Pre-render failed for time ${time}:`, error); + } + }); + } + }, + [isFrameCached, cacheFrame, cacheResolution] + ); + + return { + isFrameCached, + getCachedFrame, + cacheFrame, + invalidateCache, + getRenderStatus, + preRenderNearbyFrames, + cacheSize: frameCacheRef.current.size, + }; +} diff --git a/apps/web/src/lib/canvas-gradients.ts b/apps/web/src/lib/canvas-gradients.ts index a3b93c02..7d1cdc05 100644 --- a/apps/web/src/lib/canvas-gradients.ts +++ b/apps/web/src/lib/canvas-gradients.ts @@ -1,169 +1,219 @@ -function splitBackgroundLayers(input: string): string[] { - const layers: string[] = []; - let depth = 0; - let start = 0; - for (let i = 0; i < input.length; i += 1) { - const ch = input[i] as string; - if (ch === "(") depth += 1; - else if (ch === ")") depth -= 1; - else if (ch === "," && depth === 0) { - layers.push(input.slice(start, i).trim()); - start = i + 1; - } - } - layers.push(input.slice(start).trim()); - return layers; -} - -function extractColorFromStop(stop: string): string { - const s = stop.trim(); - const funcs = ["rgba(", "rgb(", "hsla(", "hsl("] as const; - for (const fn of funcs) { - if (s.startsWith(fn)) { - let depth = 0; - for (let i = 0; i < s.length; i += 1) { - const ch = s[i] as string; - if (ch === "(") depth += 1; - else if (ch === ")") { - depth -= 1; - if (depth === 0) { - return s.slice(0, i + 1); - } - } - } - return s; - } - } - const firstToken = s.split(" ")[0] as string; - return firstToken; -} - -function drawLinearGradient( - ctx: CanvasRenderingContext2D, - width: number, - height: number, - layer: string -): void { - const inside = layer.slice(layer.indexOf("(") + 1, layer.lastIndexOf(")")); - const parts = splitBackgroundLayers(inside); - const dir = (parts.shift() || "").trim(); - let x0 = 0, - y0 = 0, - x1 = width, - y1 = 0; - if (dir.endsWith("deg")) { - const deg = parseFloat(dir); - const rad = ((90 - deg) * Math.PI) / 180; - const cx = width / 2; - const cy = height / 2; - const r = Math.hypot(width, height) / 2; - x0 = cx - Math.cos(rad) * r; - y0 = cy - Math.sin(rad) * r; - x1 = cx + Math.cos(rad) * r; - y1 = cy + Math.sin(rad) * r; - } else if (dir.startsWith("to ")) { - const d = dir.slice(3).trim(); - if (d === "right") { - x0 = 0; - y0 = 0; - x1 = width; - y1 = 0; - } else if (d === "left") { - x0 = width; - y0 = 0; - x1 = 0; - y1 = 0; - } else if (d === "bottom") { - x0 = 0; - y0 = 0; - x1 = 0; - y1 = height; - } else if (d === "top") { - x0 = 0; - y0 = height; - x1 = 0; - y1 = 0; - } - } else { - parts.unshift(dir); - } - const grad = ctx.createLinearGradient(x0, y0, x1, y1); - const colorStops = parts; - const n = Math.max(1, colorStops.length - 1); - for (let i = 0; i < colorStops.length; i += 1) { - const color = extractColorFromStop(colorStops[i] as string); - grad.addColorStop(Math.min(1, Math.max(0, i / n)), color); - } - ctx.fillStyle = grad; - ctx.fillRect(0, 0, width, height); -} - -function drawRadialGradient( - ctx: CanvasRenderingContext2D, - width: number, - height: number, - layer: string -): void { - const inside = layer.slice(layer.indexOf("(") + 1, layer.lastIndexOf(")")); - const parts = splitBackgroundLayers(inside); - const first = (parts.shift() || "").trim(); - let cx = width / 2; - let cy = height / 2; - if (first.startsWith("circle at")) { - const pos = first.replace("circle at", "").trim(); - const [px, py] = pos.split(" "); - const parsePos = (p?: string, full?: number): number => { - if (!p) return (full || 0) / 2; - if (p.endsWith("%")) return (parseFloat(p) / 100) * (full || 0); - if (p === "left") return 0; - if (p === "right") return full || 0; - if (p === "top") return 0; - if (p === "bottom") return full || 0; - if (p === "center") return (full || 0) / 2; - return (full || 0) / 2; - }; - if (px && py) { - cx = parsePos(px, width); - cy = parsePos(py, height); - } else if (px) { - cx = parsePos(px, width); - cy = parsePos(px, height); - } - } else { - parts.unshift(first); - } - const r = Math.hypot(width, height); - const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r); - const colorStops = parts; - const n = Math.max(1, colorStops.length - 1); - for (let i = 0; i < colorStops.length; i += 1) { - const color = extractColorFromStop(colorStops[i] as string); - grad.addColorStop(Math.min(1, Math.max(0, i / n)), color); - } - ctx.fillStyle = grad; - ctx.fillRect(0, 0, width, height); -} - -export function drawCssBackground( - ctx: CanvasRenderingContext2D, - width: number, - height: number, - css: string -): void { - const layers = splitBackgroundLayers(css).filter(Boolean); - for (let i = layers.length - 1; i >= 0; i -= 1) { - const layer = layers[i] as string; - if (layer.startsWith("linear-gradient(")) { - drawLinearGradient(ctx, width, height, layer); - } else if (layer.startsWith("radial-gradient(")) { - drawRadialGradient(ctx, width, height, layer); - } else if ( - layer.startsWith("#") || - layer.startsWith("rgb") || - layer.startsWith("hsl") - ) { - ctx.fillStyle = layer; - ctx.fillRect(0, 0, width, height); - } - } -} +function splitBackgroundLayers(input: string): string[] { + const layers: string[] = []; + let depth = 0; + let start = 0; + for (let i = 0; i < input.length; i += 1) { + const ch = input[i] as string; + if (ch === "(") depth += 1; + else if (ch === ")") depth -= 1; + else if (ch === "," && depth === 0) { + layers.push(input.slice(start, i).trim()); + start = i + 1; + } + } + layers.push(input.slice(start).trim()); + return layers; +} + +function parseColorStop(stop: string): { color: string; position?: number } { + const s = stop.trim(); + + // Handle functional colors like rgba(), rgb(), hsla(), hsl() + const colorFunctions = ["rgba(", "rgb(", "hsla(", "hsl("]; + let color = ""; + let remaining = ""; + + for (const fn of colorFunctions) { + if (s.startsWith(fn)) { + let depth = 0; + for (let i = 0; i < s.length; i += 1) { + const ch = s[i] as string; + if (ch === "(") depth += 1; + else if (ch === ")") { + depth -= 1; + if (depth === 0) { + color = s.slice(0, i + 1); + remaining = s.slice(i + 1).trim(); + break; + } + } + } + break; + } + } + + if (!color) { + const parts = s.split(/\s+/); + color = parts[0] as string; + remaining = parts.slice(1).join(" "); + } + + // Convert transparent to transparent white for better blending + if (color === "transparent") { + color = "rgba(255, 255, 255, 0)"; + } + + // Parse position if present + let position: number | undefined; + if (remaining) { + const posMatch = remaining.match(/(\d+(?:\.\d+)?)%/); + if (posMatch) { + position = parseFloat(posMatch[1] as string) / 100; + } + } + + return { color, position }; +} + +function parseLinearGradient(layer: string, width: number, height: number) { + const inside = layer.slice(layer.indexOf("(") + 1, layer.lastIndexOf(")")); + const parts = splitBackgroundLayers(inside); + const dir = (parts.shift() || "").trim(); + + let x0 = 0, + y0 = 0, + x1 = width, + y1 = 0; // default: to right + + if (dir.endsWith("deg")) { + const deg = parseFloat(dir); + const rad = (deg * Math.PI) / 180; + const cx = width / 2; + const cy = height / 2; + const r = Math.hypot(width, height) / 2; + x0 = cx - Math.cos(rad) * r; + y0 = cy - Math.sin(rad) * r; + x1 = cx + Math.cos(rad) * r; + y1 = cy + Math.sin(rad) * r; + } else if (dir.startsWith("to ")) { + const d = dir.slice(3).trim(); + if (d === "right") { + x0 = 0; + y0 = 0; + x1 = width; + y1 = 0; + } else if (d === "left") { + x0 = width; + y0 = 0; + x1 = 0; + y1 = 0; + } else if (d === "bottom") { + x0 = 0; + y0 = 0; + x1 = 0; + y1 = height; + } else if (d === "top") { + x0 = 0; + y0 = height; + x1 = 0; + y1 = 0; + } + } else { + // No direction specified, treat as first color + parts.unshift(dir); + } + + return { x0, y0, x1, y1, colors: parts }; +} + +function parseRadialGradient(layer: string, width: number, height: number) { + const inside = layer.slice(layer.indexOf("(") + 1, layer.lastIndexOf(")")); + const parts = splitBackgroundLayers(inside); + const first = (parts.shift() || "").trim(); + + let cx = width / 2; + let cy = height / 2; + + if (first.startsWith("circle at")) { + const pos = first.replace("circle at", "").trim(); + const coords = pos.split(/\s+/); + + for (let i = 0; i < coords.length; i += 1) { + const coord = coords[i] as string; + if (coord.endsWith("%")) { + const val = parseFloat(coord) / 100; + if (i === 0) cx = val * width; + else if (i === 1) cy = val * height; + } else if (coord === "left") cx = 0; + else if (coord === "right") cx = width; + else if (coord === "top") cy = 0; + else if (coord === "bottom") cy = height; + else if (coord === "center") { + if (i === 0) cx = width / 2; + else if (i === 1) cy = height / 2; + } + } + } else { + parts.unshift(first); + } + + // Use farthest-corner for radius + const r = Math.max( + Math.hypot(cx, cy), + Math.hypot(width - cx, cy), + Math.hypot(cx, height - cy), + Math.hypot(width - cx, height - cy) + ); + + return { cx, cy, r, colors: parts }; +} + +export function drawCssBackground( + ctx: CanvasRenderingContext2D, + width: number, + height: number, + css: string +): void { + const layers = splitBackgroundLayers(css).filter(Boolean); + + // Draw layers from last to first (CSS background order) + for (let i = layers.length - 1; i >= 0; i -= 1) { + const layer = layers[i] as string; + + if (layer.startsWith("linear-gradient(")) { + const { x0, y0, x1, y1, colors } = parseLinearGradient( + layer, + width, + height + ); + const grad = ctx.createLinearGradient(x0, y0, x1, y1); + const colorStops = colors.map((c) => parseColorStop(c as string)); + + // Handle positions properly + for (let j = 0; j < colorStops.length; j += 1) { + const stop = colorStops[j] as { color: string; position?: number }; + const pos = stop.position ?? j / Math.max(1, colorStops.length - 1); + grad.addColorStop(Math.max(0, Math.min(1, pos)), stop.color); + } + + ctx.fillStyle = grad; + ctx.fillRect(0, 0, width, height); + } else if (layer.startsWith("radial-gradient(")) { + const { cx, cy, r, colors } = parseRadialGradient(layer, width, height); + const grad = ctx.createRadialGradient(cx, cy, 0, cx, cy, r); + const colorStops = colors.map((c) => parseColorStop(c as string)); + + // Handle positions properly + for (let j = 0; j < colorStops.length; j += 1) { + const stop = colorStops[j] as { color: string; position?: number }; + const pos = stop.position ?? j / Math.max(1, colorStops.length - 1); + grad.addColorStop(Math.max(0, Math.min(1, pos)), stop.color); + } + + ctx.fillStyle = grad; + ctx.fillRect(0, 0, width, height); + } else if ( + layer.startsWith("#") || + layer.startsWith("rgb") || + layer.startsWith("hsl") || + layer === "transparent" || + layer === "white" || + layer === "black" + ) { + if (layer !== "transparent") { + ctx.fillStyle = layer; + ctx.fillRect(0, 0, width, height); + } + } + } +} diff --git a/apps/web/src/lib/timeline-renderer.ts b/apps/web/src/lib/timeline-renderer.ts index 4d00129c..b2650b7c 100644 --- a/apps/web/src/lib/timeline-renderer.ts +++ b/apps/web/src/lib/timeline-renderer.ts @@ -58,13 +58,9 @@ export async function renderTimelineFrame({ ctx.fillRect(0, 0, canvasWidth, canvasHeight); } - // If backgroundColor is a CSS gradient string, draw it using JS (no foreignObject) to avoid CORS tainting + // If backgroundColor is a CSS gradient string, draw it if (backgroundColor && backgroundColor.includes("gradient")) { - try { - drawCssBackground(ctx, canvasWidth, canvasHeight, backgroundColor); - } catch { - // best-effort; ignore failures - } + drawCssBackground(ctx, canvasWidth, canvasHeight, backgroundColor); } const scaleX = projectCanvasSize ? canvasWidth / projectCanvasSize.width : 1; -- cgit v1.3.1 From d8f446580c2636e87aa39c00b1565406c56f9343 Mon Sep 17 00:00:00 2001 From: Maze Winther Date: Mon, 1 Sep 2025 22:15:32 +0200 Subject: feat: remove default background scene and add scene management --- apps/web/src/components/editor/preview-panel.tsx | 22 +- apps/web/src/components/editor/scenes-view.tsx | 262 ++++++++++++++++----- .../editor/timeline/timeline-cache-indicator.tsx | 14 +- .../editor/timeline/timeline-toolbar.tsx | 6 +- .../providers/migrators/scenes-migrator.tsx | 12 +- apps/web/src/components/ui/button.tsx | 2 +- apps/web/src/components/ui/dialog.tsx | 4 +- apps/web/src/components/ui/split-button.tsx | 2 +- apps/web/src/hooks/use-frame-cache.ts | 60 +++-- apps/web/src/lib/storage/storage-service.ts | 2 - apps/web/src/stores/project-store.ts | 8 +- apps/web/src/stores/scene-store.ts | 113 ++++++--- apps/web/src/types/project.ts | 1 - 13 files changed, 364 insertions(+), 144 deletions(-) (limited to 'apps/web/src/hooks/use-frame-cache.ts') diff --git a/apps/web/src/components/editor/preview-panel.tsx b/apps/web/src/components/editor/preview-panel.tsx index 8b1abd81..36f6a2ba 100644 --- a/apps/web/src/components/editor/preview-panel.tsx +++ b/apps/web/src/components/editor/preview-panel.tsx @@ -14,6 +14,7 @@ import { cn } from "@/lib/utils"; import { formatTimeCode } from "@/lib/time"; import { EditableTimecode } from "@/components/ui/editable-timecode"; import { useFrameCache } from "@/hooks/use-frame-cache"; +import { useSceneStore } from "@/stores/scene-store"; import { DEFAULT_CANVAS_SIZE, DEFAULT_FPS, @@ -43,6 +44,7 @@ export function PreviewPanel() { const { currentTime, toggle, setCurrentTime } = usePlaybackStore(); const { isPlaying, volume, muted } = usePlaybackStore(); const { activeProject } = useProjectStore(); + const { currentScene } = useSceneStore(); const previewRef = useRef(null); const canvasRef = useRef(null); const { getCachedFrame, cacheFrame, invalidateCache, preRenderNearbyFrames } = @@ -219,11 +221,10 @@ export function PreviewPanel() { }; }, [dragState, previewDimensions, canvasSize, updateTextElement]); - // Invalidate cache when timeline changes + // Clear the frame cache when background settings change since they affect rendering useEffect(() => { invalidateCache(); }, [ - tracks, mediaFiles, activeProject?.backgroundColor, activeProject?.backgroundType, @@ -494,7 +495,8 @@ export function PreviewPanel() { currentTime, tracks, mediaFiles, - activeProject + activeProject, + currentScene?.id ); if (cachedFrame) { mainCtx.putImageData(cachedFrame, 0, 0); @@ -532,7 +534,9 @@ export function PreviewPanel() { }); return tempCtx.getImageData(0, 0, displayWidth, displayHeight); - } + }, + currentScene?.id, + 3 ); } else { // Small lookahead while playing @@ -567,6 +571,7 @@ export function PreviewPanel() { return tempCtx.getImageData(0, 0, displayWidth, displayHeight); }, + currentScene?.id, 1 ); } @@ -644,7 +649,14 @@ export function PreviewPanel() { displayWidth, displayHeight ); - cacheFrame(currentTime, imageData, tracks, mediaFiles, activeProject); + cacheFrame( + currentTime, + imageData, + tracks, + mediaFiles, + activeProject, + currentScene?.id + ); // Blit offscreen to visible canvas mainCtx.clearRect(0, 0, displayWidth, displayHeight); diff --git a/apps/web/src/components/editor/scenes-view.tsx b/apps/web/src/components/editor/scenes-view.tsx index f1df32e9..b5432b53 100644 --- a/apps/web/src/components/editor/scenes-view.tsx +++ b/apps/web/src/components/editor/scenes-view.tsx @@ -1,64 +1,198 @@ -"use client"; - -import { - Sheet, - SheetContent, - SheetDescription, - SheetHeader, - SheetTitle, - SheetTrigger, -} from "@/components/ui/sheet"; -import { Button } from "@/components/ui/button"; -import { useSceneStore } from "@/stores/scene-store"; -import { Check } from "lucide-react"; - -export function ScenesView({ children }: { children: React.ReactNode }) { - const { scenes, currentScene, switchToScene } = useSceneStore(); - - const handleSceneSwitch = async (sceneId: string) => { - try { - await switchToScene({ sceneId }); - } catch (error) { - console.error("Failed to switch scene:", error); - } - }; - - return ( - - {children} - - - Scenes - - Switch between scenes in your project - - -
- {scenes.length === 0 ? ( -
- No scenes available -
- ) : ( -
- {scenes.map((scene) => ( - - ))} -
- )} -
- - - ); -} +"use client"; + +import { + Sheet, + SheetContent, + SheetDescription, + SheetHeader, + SheetTitle, + SheetTrigger, +} from "@/components/ui/sheet"; +import { Button } from "@/components/ui/button"; +import { useSceneStore } from "@/stores/scene-store"; +import { Check, ListCheck, Trash2 } from "lucide-react"; +import { cn } from "@/lib/utils"; +import { useState } from "react"; +import { + Dialog, + DialogContent, + DialogHeader, + DialogTitle, + DialogDescription, + DialogFooter, + DialogTrigger, +} from "@/components/ui/dialog"; + +export function ScenesView({ children }: { children: React.ReactNode }) { + const { scenes, currentScene, switchToScene, deleteScene } = useSceneStore(); + const [isSelectMode, setIsSelectMode] = useState(false); + const [selectedScenes, setSelectedScenes] = useState>(new Set()); + + const handleSceneSwitch = async (sceneId: string) => { + if (isSelectMode) { + toggleSceneSelection(sceneId); + return; + } + + try { + await switchToScene({ sceneId }); + } catch (error) { + console.error("Failed to switch scene:", error); + } + }; + + const toggleSceneSelection = (sceneId: string) => { + setSelectedScenes((prev) => { + const newSet = new Set(prev); + if (newSet.has(sceneId)) { + newSet.delete(sceneId); + } else { + newSet.add(sceneId); + } + return newSet; + }); + }; + + const handleSelectMode = () => { + setIsSelectMode(!isSelectMode); + setSelectedScenes(new Set()); + }; + + const handleDeleteSelected = async () => { + for (const sceneId of selectedScenes) { + const scene = scenes.find((s) => s.id === sceneId); + if (scene && !scene.isMain) { + try { + await deleteScene({ sceneId }); + } catch (error) { + console.error("Failed to delete scene:", error); + } + } + } + setSelectedScenes(new Set()); + setIsSelectMode(false); + }; + + return ( + + {children} + + + + {isSelectMode ? `Select scenes (${selectedScenes.size})` : "Scenes"} + + + {isSelectMode + ? "Select scenes to delete" + : "Switch between scenes in your project"} + + +
+
+ + {isSelectMode && ( + scenes.find((s) => s.id === id)?.isMain + )} + > + + + )} +
+ {scenes.length === 0 ? ( +
+ No scenes available +
+ ) : ( +
+ {scenes.map((scene) => ( + + ))} +
+ )} +
+ + + ); +} + +function DeleteDialog({ + count, + onDelete, + disabled, + children, +}: { + count: number; + onDelete: () => void; + disabled?: boolean; + children: React.ReactNode; +}) { + const [open, setOpen] = useState(false); + + const handleDelete = () => { + onDelete(); + setOpen(false); + }; + + return ( + + {children} + + + Delete Scenes + + Are you sure you want to delete {count} scene + {count === 1 ? "" : "s"}? This action cannot be undone. + + + + + + + + + ); +} diff --git a/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx b/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx index ef667d67..7def2985 100644 --- a/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx +++ b/apps/web/src/components/editor/timeline/timeline-cache-indicator.tsx @@ -5,6 +5,7 @@ import { TIMELINE_CONSTANTS } from "@/constants/timeline-constants"; import { TimelineTrack } from "@/types/timeline"; import { MediaFile } from "@/types/media"; import { TProject } from "@/types/project"; +import { useSceneStore } from "@/stores/scene-store"; interface CacheSegment { startTime: number; @@ -22,7 +23,8 @@ interface TimelineCacheIndicatorProps { time: number, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ) => "cached" | "not-cached"; } @@ -34,6 +36,8 @@ export function TimelineCacheIndicator({ activeProject, getRenderStatus, }: TimelineCacheIndicatorProps) { + const { currentScene } = useSceneStore(); + // Calculate cache segments by sampling the timeline const calculateCacheSegments = (): CacheSegment[] => { const segments: CacheSegment[] = []; @@ -49,7 +53,13 @@ export function TimelineCacheIndicator({ for (let i = 0; i <= totalSamples; i++) { const time = i / sampleRate; const cached = - getRenderStatus(time, tracks, mediaFiles, activeProject) === "cached"; + getRenderStatus( + time, + tracks, + mediaFiles, + activeProject, + currentScene?.id + ) === "cached"; if (!currentSegment) { // Start first segment diff --git a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx index 7eeb84e4..79b5d5b2 100644 --- a/apps/web/src/components/editor/timeline/timeline-toolbar.tsx +++ b/apps/web/src/components/editor/timeline/timeline-toolbar.tsx @@ -67,7 +67,7 @@ export function TimelineToolbar({ } = useTimelineStore(); const { currentTime, duration, isPlaying, toggle, seek } = usePlaybackStore(); const { toggleBookmark, isBookmarked, activeProject } = useProjectStore(); - const { currentScene } = useSceneStore(); + const { scenes, currentScene } = useSceneStore(); const handleSplitSelected = () => { if (selectedElements.length === 0) return; @@ -359,11 +359,11 @@ export function TimelineToolbar({
- + {currentScene?.name || "No Scene"} - {}}> + {}}> diff --git a/apps/web/src/components/providers/migrators/scenes-migrator.tsx b/apps/web/src/components/providers/migrators/scenes-migrator.tsx index 521e24af..b984a7f4 100644 --- a/apps/web/src/components/providers/migrators/scenes-migrator.tsx +++ b/apps/web/src/components/providers/migrators/scenes-migrator.tsx @@ -92,23 +92,13 @@ export function ScenesMigrator({ children }: { children: React.ReactNode }) { id: generateUUID(), name: "Main Scene", isMain: true, - isBackground: false, - createdAt: new Date(), - updatedAt: new Date(), - }; - - const backgroundScene: Scene = { - id: generateUUID(), - name: "Background", - isMain: false, - isBackground: true, createdAt: new Date(), updatedAt: new Date(), }; const migratedProject: TProject = { ...project, - scenes: [mainScene, backgroundScene], + scenes: [mainScene], currentSceneId: mainScene.id, updatedAt: new Date(), }; diff --git a/apps/web/src/components/ui/button.tsx b/apps/web/src/components/ui/button.tsx index 3d17c042..56a10f44 100644 --- a/apps/web/src/components/ui/button.tsx +++ b/apps/web/src/components/ui/button.tsx @@ -16,7 +16,7 @@ const buttonVariants = cva( "primary-gradient": "bg-gradient-to-r from-cyan-400 to-blue-500 text-white hover:opacity-85 transition-opacity", destructive: - "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90", + "bg-destructive/0 border border-destructive/25 text-destructive shadow-xs hover:bg-destructive hover:text-destructive-foreground", outline: "border border-input bg-transparent shadow-xs hover:opacity-75 transition-opacity hover:text-accent-foreground", secondary: diff --git a/apps/web/src/components/ui/dialog.tsx b/apps/web/src/components/ui/dialog.tsx index ad7e825b..42d0f80d 100644 --- a/apps/web/src/components/ui/dialog.tsx +++ b/apps/web/src/components/ui/dialog.tsx @@ -22,7 +22,7 @@ const DialogOverlay = React.forwardRef< { diff --git a/apps/web/src/components/ui/split-button.tsx b/apps/web/src/components/ui/split-button.tsx index 1ef29500..ca3b518c 100644 --- a/apps/web/src/components/ui/split-button.tsx +++ b/apps/web/src/components/ui/split-button.tsx @@ -39,7 +39,7 @@ const SplitButtonSide = forwardRef< ref={ref} variant="text" className={cn( - "h-full rounded-none bg-panel-accent !opacity-100 border-0 gap-0 font-normal transition-colors", + "h-full rounded-none bg-panel-accent !opacity-100 border-0 gap-0 font-normal transition-colors disabled:text-muted-foreground", onClick ? "hover:bg-foreground/10 hover:opacity-100 cursor-pointer" : "cursor-default select-text", diff --git a/apps/web/src/hooks/use-frame-cache.ts b/apps/web/src/hooks/use-frame-cache.ts index 2abfb912..cce187f1 100644 --- a/apps/web/src/hooks/use-frame-cache.ts +++ b/apps/web/src/hooks/use-frame-cache.ts @@ -37,7 +37,8 @@ export function useFrameCache(options: FrameCacheOptions = {}) { time: number, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ): string => { // Get elements that are active at this time const activeElements: Array<{ @@ -117,11 +118,13 @@ export function useFrameCache(options: FrameCacheOptions = {}) { canvasSize: activeProject?.canvasSize, }; - return JSON.stringify({ + const hash = { activeElements, projectState, - time: Math.floor(time * cacheResolution) / cacheResolution, // Quantize time - }); + sceneId, + time: Math.floor(time * cacheResolution) / cacheResolution, + }; + return JSON.stringify(hash); }, [cacheResolution] ); @@ -132,7 +135,8 @@ export function useFrameCache(options: FrameCacheOptions = {}) { time: number, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ): boolean => { const frameKey = Math.floor(time * cacheResolution); const cached = frameCacheRef.current.get(frameKey); @@ -143,7 +147,8 @@ export function useFrameCache(options: FrameCacheOptions = {}) { time, tracks, mediaFiles, - activeProject + activeProject, + sceneId ); return cached.timelineHash === currentHash; }, @@ -156,21 +161,33 @@ export function useFrameCache(options: FrameCacheOptions = {}) { time: number, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ): ImageData | null => { const frameKey = Math.floor(time * cacheResolution); const cached = frameCacheRef.current.get(frameKey); - if (!cached) return null; + if (!cached) { + return null; + } const currentHash = getTimelineHash( time, tracks, mediaFiles, - activeProject + activeProject, + sceneId ); + console.log(cached.timelineHash === currentHash); if (cached.timelineHash !== currentHash) { // Cache is stale, remove it + console.log( + "Cache miss - hash mismatch:", + JSON.stringify({ + cachedHash: cached.timelineHash.slice(0, 100), + currentHash: currentHash.slice(0, 100), + }) + ); frameCacheRef.current.delete(frameKey); return null; } @@ -187,14 +204,16 @@ export function useFrameCache(options: FrameCacheOptions = {}) { imageData: ImageData, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ): void => { const frameKey = Math.floor(time * cacheResolution); const timelineHash = getTimelineHash( time, tracks, mediaFiles, - activeProject + activeProject, + sceneId ); // Enforce cache size limit (LRU eviction) @@ -230,9 +249,10 @@ export function useFrameCache(options: FrameCacheOptions = {}) { time: number, tracks: TimelineTrack[], mediaFiles: MediaFile[], - activeProject: TProject | null + activeProject: TProject | null, + sceneId?: string ): "cached" | "not-cached" => { - return isFrameCached(time, tracks, mediaFiles, activeProject) + return isFrameCached(time, tracks, mediaFiles, activeProject, sceneId) ? "cached" : "not-cached"; }, @@ -247,6 +267,7 @@ export function useFrameCache(options: FrameCacheOptions = {}) { mediaFiles: MediaFile[], activeProject: TProject | null, renderFunction: (time: number) => Promise, + sceneId?: string, range: number = 3 // seconds ) => { const framesToPreRender: number[] = []; @@ -260,7 +281,7 @@ export function useFrameCache(options: FrameCacheOptions = {}) { const time = currentTime + offset; if (time < 0) continue; - if (!isFrameCached(time, tracks, mediaFiles, activeProject)) { + if (!isFrameCached(time, tracks, mediaFiles, activeProject, sceneId)) { framesToPreRender.push(time); } } @@ -276,7 +297,7 @@ export function useFrameCache(options: FrameCacheOptions = {}) { for (let k = 0; k < cacheResolution; k++) { const t = s + k / cacheResolution; if (t < 0) continue; - if (!isFrameCached(t, tracks, mediaFiles, activeProject)) { + if (!isFrameCached(t, tracks, mediaFiles, activeProject, sceneId)) { expandedTimes.push(t); } } @@ -298,7 +319,14 @@ export function useFrameCache(options: FrameCacheOptions = {}) { requestIdleCallback(async () => { try { const imageData = await renderFunction(time); - cacheFrame(time, imageData, tracks, mediaFiles, activeProject); + cacheFrame( + time, + imageData, + tracks, + mediaFiles, + activeProject, + sceneId + ); } catch (error) { console.warn(`Pre-render failed for time ${time}:`, error); } diff --git a/apps/web/src/lib/storage/storage-service.ts b/apps/web/src/lib/storage/storage-service.ts index 112d09b6..2688f6e8 100644 --- a/apps/web/src/lib/storage/storage-service.ts +++ b/apps/web/src/lib/storage/storage-service.ts @@ -78,7 +78,6 @@ class StorageService { id: scene.id, name: scene.name, isMain: scene.isMain, - isBackground: scene.isBackground, createdAt: scene.createdAt.toISOString(), updatedAt: scene.updatedAt.toISOString(), })); @@ -114,7 +113,6 @@ class StorageService { id: scene.id, name: scene.name, isMain: scene.isMain, - isBackground: scene.isBackground || false, // Default for legacy scenes createdAt: new Date(scene.createdAt), updatedAt: new Date(scene.updatedAt), })) || []; diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts index 0c67be9f..c58f7309 100644 --- a/apps/web/src/stores/project-store.ts +++ b/apps/web/src/stores/project-store.ts @@ -4,7 +4,7 @@ import { storageService } from "@/lib/storage/storage-service"; import { toast } from "sonner"; import { useMediaStore } from "./media-store"; import { useTimelineStore } from "./timeline-store"; -import { createBackgroundScene, useSceneStore } from "./scene-store"; +import { useSceneStore } from "./scene-store"; import { generateUUID } from "@/lib/utils"; import { CanvasSize, CanvasMode } from "@/types/editor"; @@ -14,9 +14,8 @@ export const DEFAULT_FPS = 30; export function createMainScene(): Scene { return { id: generateUUID(), - name: "Main scene", + name: "Main Scene", isMain: true, - isBackground: false, createdAt: new Date(), updatedAt: new Date(), }; @@ -24,7 +23,6 @@ export function createMainScene(): Scene { const createDefaultProject = (name: string): TProject => { const mainScene = createMainScene(); - const backgroundScene = createBackgroundScene(); return { id: generateUUID(), @@ -32,7 +30,7 @@ const createDefaultProject = (name: string): TProject => { thumbnail: "", createdAt: new Date(), updatedAt: new Date(), - scenes: [mainScene, backgroundScene], + scenes: [mainScene], currentSceneId: mainScene.id, backgroundColor: "#000000", backgroundType: "color", diff --git a/apps/web/src/stores/scene-store.ts b/apps/web/src/stores/scene-store.ts index 1b789427..a9f65a49 100644 --- a/apps/web/src/stores/scene-store.ts +++ b/apps/web/src/stores/scene-store.ts @@ -9,29 +9,17 @@ export function getMainScene({ scenes }: { scenes: Scene[] }): Scene | null { return scenes.find((scene) => scene.isMain) || null; } -export function getBackgroundScene({ - scenes, -}: { - scenes: Scene[]; -}): Scene | null { - return scenes.find((scene) => scene.isBackground) || null; -} - -export function createBackgroundScene(): Scene { - return { - id: generateUUID(), - name: "Background", - isMain: false, - isBackground: true, - createdAt: new Date(), - updatedAt: new Date(), - }; -} - -function ensureBackgroundScene({ scenes }: { scenes: Scene[] }): Scene[] { - const hasBackground = scenes.some((scene) => scene.isBackground); - if (!hasBackground) { - return [...scenes, createBackgroundScene()]; +function ensureMainScene(scenes: Scene[]): Scene[] { + const hasMain = scenes.some((scene) => scene.isMain); + if (!hasMain) { + const mainScene: Scene = { + id: generateUUID(), + name: "Main scene", + isMain: true, + createdAt: new Date(), + updatedAt: new Date(), + }; + return [mainScene, ...scenes]; } return scenes; } @@ -49,6 +37,7 @@ interface SceneStore { name: string; isMain: boolean; }) => Promise; + deleteScene: ({ sceneId }: { sceneId: string }) => Promise; renameScene: ({ sceneId, name, @@ -115,6 +104,62 @@ export const useSceneStore = create((set, get) => ({ } }, + deleteScene: async ({ sceneId }: { sceneId: string }) => { + const { scenes, currentScene } = get(); + const sceneToDelete = scenes.find((s) => s.id === sceneId); + + if (!sceneToDelete) { + throw new Error("Scene not found"); + } + + if (sceneToDelete.isMain) { + throw new Error("Cannot delete main scene"); + } + + const updatedScenes = scenes.filter((s) => s.id !== sceneId); + + // Determine new current scene if we're deleting the current one + let newCurrentScene = currentScene; + if (currentScene?.id === sceneId) { + newCurrentScene = getMainScene({ scenes: updatedScenes }); + } + + // Update project + const projectStore = useProjectStore.getState(); + const { activeProject } = projectStore; + + if (!activeProject) { + throw new Error("No active project"); + } + + const updatedProject = { + ...activeProject, + scenes: updatedScenes, + updatedAt: new Date(), + }; + + try { + await storageService.saveProject({ project: updatedProject }); + useProjectStore.setState({ activeProject: updatedProject }); + set({ + scenes: updatedScenes, + currentScene: newCurrentScene, + }); + + // If we switched scenes, load the new scene's timeline + if (newCurrentScene && newCurrentScene.id !== currentScene?.id) { + const timelineStore = useTimelineStore.getState(); + await timelineStore.loadProjectTimeline({ + projectId: activeProject.id, + sceneId: newCurrentScene.id, + }); + } + } catch (error) { + console.error("Failed to delete scene:", error); + throw error; + } + }, + renameScene: async ({ sceneId, name }: { sceneId: string; name: string }) => { const { scenes } = get(); const updatedScenes = scenes.map((scene) => @@ -226,7 +271,7 @@ export const useSceneStore = create((set, get) => ({ scenes: Scene[]; currentSceneId?: string; }) => { - const ensuredScenes = ensureBackgroundScene({ scenes }); + const ensuredScenes = ensureMainScene(scenes); const currentScene = currentSceneId ? ensuredScenes.find((s) => s.id === currentSceneId) : null; @@ -241,19 +286,25 @@ export const useSceneStore = create((set, get) => ({ if (ensuredScenes.length > scenes.length) { const projectStore = useProjectStore.getState(); const { activeProject } = projectStore; - + if (activeProject) { const updatedProject = { ...activeProject, scenes: ensuredScenes, updatedAt: new Date(), }; - - storageService.saveProject({ project: updatedProject }).then(() => { - useProjectStore.setState({ activeProject: updatedProject }); - }).catch(error => { - console.error("Failed to save project with background scene:", error); - }); + + storageService + .saveProject({ project: updatedProject }) + .then(() => { + useProjectStore.setState({ activeProject: updatedProject }); + }) + .catch((error) => { + console.error( + "Failed to save project with background scene:", + error + ); + }); } } }, diff --git a/apps/web/src/types/project.ts b/apps/web/src/types/project.ts index 7fa53c69..f182653d 100644 --- a/apps/web/src/types/project.ts +++ b/apps/web/src/types/project.ts @@ -6,7 +6,6 @@ export interface Scene { id: string; name: string; isMain: boolean; - isBackground: boolean; createdAt: Date; updatedAt: Date; } -- cgit v1.3.1