@elah/editor 0.4.1 → 0.6.0

package/dist/editor/Preview/MediaTransformOverlay.js

@@ -1,15 +1,25 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useCallback, useLayoutEffect, useMemo, useRef, useState, } from 'react';
-import { resolveDrawRect, transformFromContainRect, computeContainViewport, } from '@elah/core';
+import { memo, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState, } from 'react';
+import { Crop as CropIcon, Move as MoveIcon } from 'lucide-react';
+import { resolveDrawRect, transformFromContainRect, computeContainViewport, normalizeCrop, } from '@elah/core';
 import { useTimelineEngine, useSelectionStore, usePlaybackStore, useMediaLibraryStore, } from '@elah/react';
 import { useResolvedScene } from '../useResolvedScene';
 const MIN_BOX_PX = 28;
 const BOX_PAD = 0;
 const MIN_RENDER_PX = 16;
 const MAX_RENDER_STAGE_MULTIPLE = 8;
+const MIN_CROP_FRACTION = 0.05;
 const clamp = (v, lo, hi) => Math.min(hi, Math.max(lo, v));
 const clamp01 = (v) => clamp(v, 0, 1);
-export function MediaTransformOverlay() {
+function rotateLocalToStage(v, rotation) {
+    const c = Math.cos(rotation);
+    const s = Math.sin(rotation);
+    return { x: v.x * c - v.y * s, y: v.x * s + v.y * c };
+}
+function rotateStageToLocal(v, rotation) {
+    return rotateLocalToStage(v, -rotation);
+}
+export const MediaTransformOverlay = memo(function MediaTransformOverlay() {
     const engine = useTimelineEngine();
     const scene = useResolvedScene();
     const isPlaying = usePlaybackStore((s) => s.isPlaying);
@@ -20,6 +30,10 @@ export function MediaTransformOverlay() {
     const rootRef = useRef(null);
     const [size, setSize] = useState({ width: 0, height: 0 });
     const gestureRef = useRef(null);
+    const [mode, setMode] = useState('resize');
+    useEffect(() => {
+        setMode('resize');
+    }, [selectedClipIds]);
     useLayoutEffect(() => {
         const el = rootRef.current;
         if (!el)
@@ -36,13 +50,14 @@ export function MediaTransformOverlay() {
     const items = useMemo(() => {
         if (fit.width <= 0)
             return [];
-        const clips = [...scene.videos, ...scene.images];
+        const clips = [...scene.videos, ...scene.images].sort((a, b) => a.zIndex - b.zIndex);
         return clips.map((clip) => {
             const assetId = engine.findClip(clip.id)?.clip.assetId;
             const asset = assetId ? assets[assetId] : undefined;
             const contentW = asset?.width ?? stage.width;
             const contentH = asset?.height ?? stage.height;
-            const r = resolveDrawRect(clip.transform, stage.width, stage.height, contentW, contentH);
+            const crop = normalizeCrop(clip.crop);
+            const r = resolveDrawRect(clip.transform, stage.width, stage.height, contentW, contentH, clip.crop);
             const centerScreenX = fit.x + (r.x + r.width / 2) * scale;
             const centerScreenY = fit.y + (r.y + r.height / 2) * scale;
             const rawW = r.width * scale;
@@ -51,13 +66,19 @@ export function MediaTransformOverlay() {
             const h = Math.max(rawH, MIN_BOX_PX);
             const left = rawW < MIN_BOX_PX ? centerScreenX - w / 2 : fit.x + r.x * scale;
             const top = rawH < MIN_BOX_PX ? centerScreenY - h / 2 : fit.y + r.y * scale;
+            const fullW = r.width / crop.width;
+            const fullH = r.height / crop.height;
             return {
                 clip,
                 contentW,
                 contentH,
+                crop,
+                fullW,
+                fullH,
                 rect: { left, top, width: w, height: h },
                 centerScreenX,
                 centerScreenY,
+                rotation: r.rotation,
             };
         });
     }, [scene.videos, scene.images, assets, engine, stage.width, stage.height, fit, scale]);
@@ -73,14 +94,86 @@ export function MediaTransformOverlay() {
             const y = clamp01(g.base.y + dy / g.stageH);
             engine.previewClip(g.id, g.trackId, { transform: { ...g.base, x, y } });
         }
+        else if (g.type === 'resize') {
+            const h = g.handle;
+            const halfW0 = g.halfW0;
+            const halfH0 = g.halfH0;
+            const rotation = g.base.rotation;
+            const dxStage = (e.clientX - g.startClientX) / scale;
+            const dyStage = (e.clientY - g.startClientY) / scale;
+            const local = rotateStageToLocal({ x: dxStage, y: dyStage }, rotation);
+            const minHalf = MIN_RENDER_PX / 2;
+            const maxHalf = (MAX_RENDER_STAGE_MULTIPLE * Math.max(g.stageW, g.stageH)) / 2;
+            let newHalfW = h.sx !== 0 ? clamp(halfW0 + h.sx * local.x, minHalf, maxHalf) : halfW0;
+            let newHalfH = h.sy !== 0 ? clamp(halfH0 + h.sy * local.y, minHalf, maxHalf) : halfH0;
+            if (e.shiftKey) {
+                const ratioW = newHalfW / halfW0;
+                const ratioH = newHalfH / halfH0;
+                const ratio = h.sx !== 0 && h.sy !== 0 ? Math.max(ratioW, ratioH) : h.sx !== 0 ? ratioW : ratioH;
+                newHalfW = clamp(halfW0 * ratio, minHalf, maxHalf);
+                newHalfH = clamp(halfH0 * ratio, minHalf, maxHalf);
+            }
+            const rotatedHandleVec = rotateLocalToStage({ x: h.sx * newHalfW, y: h.sy * newHalfH }, rotation);
+            const centerX = g.anchorStageX + rotatedHandleVec.x;
+            const centerY = g.anchorStageY + rotatedHandleVec.y;
+            const scaleX = (newHalfW * 2) / Math.max(1, g.contentW * g.base.scale);
+            const scaleY = (newHalfH * 2) / Math.max(1, g.contentH * g.base.scale);
+            engine.previewClip(g.id, g.trackId, {
+                transform: {
+                    ...g.base,
+                    x: centerX / g.stageW,
+                    y: centerY / g.stageH,
+                    scaleX,
+                    scaleY,
+                },
+            });
+        }
+        else if (g.type === 'crop-resize') {
+            const h = g.handle;
+            const baseCrop = g.baseCrop;
+            const fullW = g.fullW;
+            const fullH = g.fullH;
+            const rotation = g.base.rotation;
+            const dxStage = (e.clientX - g.startClientX) / scale;
+            const dyStage = (e.clientY - g.startClientY) / scale;
+            const local = rotateStageToLocal({ x: dxStage, y: dyStage }, rotation);
+            const visW0 = fullW * baseCrop.width;
+            const visH0 = fullH * baseCrop.height;
+            const minVisW = MIN_CROP_FRACTION * fullW;
+            const minVisH = MIN_CROP_FRACTION * fullH;
+            const newVisW = h.sx !== 0 ? clamp(visW0 + h.sx * local.x, minVisW, fullW) : visW0;
+            const newVisH = h.sy !== 0 ? clamp(visH0 + h.sy * local.y, minVisH, fullH) : visH0;
+            const newCropW = newVisW / fullW;
+            const newCropH = newVisH / fullH;
+            let newCropX = baseCrop.x;
+            if (h.sx === -1)
+                newCropX = baseCrop.x + (baseCrop.width - newCropW);
+            newCropX = clamp(newCropX, 0, 1 - newCropW);
+            let newCropY = baseCrop.y;
+            if (h.sy === -1)
+                newCropY = baseCrop.y + (baseCrop.height - newCropH);
+            newCropY = clamp(newCropY, 0, 1 - newCropH);
+            const rotatedHandleVec = rotateLocalToStage({ x: h.sx * (newVisW / 2), y: h.sy * (newVisH / 2) }, rotation);
+            const centerX = g.anchorStageX + rotatedHandleVec.x;
+            const centerY = g.anchorStageY + rotatedHandleVec.y;
+            engine.previewClip(g.id, g.trackId, {
+                crop: normalizeCrop({ x: newCropX, y: newCropY, width: newCropW, height: newCropH }),
+                transform: { ...g.base, x: centerX / g.stageW, y: centerY / g.stageH },
+            });
+        }
         else {
-            const dist = Math.hypot(e.clientX - g.centerClientX, e.clientY - g.centerClientY);
-            const ratio = g.startDist > 0 ? dist / g.startDist : 1;
-            const minScale = MIN_RENDER_PX / Math.max(1, Math.min(g.contentW, g.contentH));
-            const maxScale = (MAX_RENDER_STAGE_MULTIPLE * Math.max(g.stageW, g.stageH)) /
-                Math.max(1, Math.max(g.contentW, g.contentH));
-            const next = clamp(g.base.scale * ratio, minScale, maxScale);
-            engine.previewClip(g.id, g.trackId, { transform: { ...g.base, scale: next } });
+            const baseCrop = g.baseCrop;
+            const fullW = g.fullW;
+            const fullH = g.fullH;
+            const rotation = g.base.rotation;
+            const dxStage = (e.clientX - g.startClientX) / scale;
+            const dyStage = (e.clientY - g.startClientY) / scale;
+            const local = rotateStageToLocal({ x: dxStage, y: dyStage }, rotation);
+            const cropX = clamp(baseCrop.x - local.x / fullW, 0, 1 - baseCrop.width);
+            const cropY = clamp(baseCrop.y - local.y / fullH, 0, 1 - baseCrop.height);
+            engine.previewClip(g.id, g.trackId, {
+                crop: { ...baseCrop, x: cropX, y: cropY },
+            });
         }
     }, [engine, scale]);
     const endGesture = useCallback((e) => {
@@ -92,10 +185,11 @@ export function MediaTransformOverlay() {
         if (target.hasPointerCapture?.(e.pointerId)) {
             target.releasePointerCapture(e.pointerId);
         }
-        engine.commitInteraction(g.type === 'move' ? 'Move clip' : 'Resize clip');
+        const label = g.type === 'move' ? 'Move clip' : g.type === 'resize' ? 'Resize clip' : 'Crop clip';
+        engine.commitInteraction(label);
     }, [engine]);
     const baseTransformFor = useCallback((item) => item.clip.transform ??
-        transformFromContainRect(item.contentW, item.contentH, stage.width, stage.height), [stage.width, stage.height]);
+        transformFromContainRect(item.contentW * item.crop.width, item.contentH * item.crop.height, stage.width, stage.height), [stage.width, stage.height]);
     const beginMove = useCallback((e, item) => {
         e.stopPropagation();
         if (!selectedClipIds.has(item.clip.id))
@@ -112,23 +206,79 @@ export function MediaTransformOverlay() {
             stageH: stage.height,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            centerClientX: 0,
-            centerClientY: 0,
-            startDist: 0,
         };
     }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
-    const beginResize = useCallback((e, item) => {
+    const beginResize = useCallback((e, item, handle) => {
         e.stopPropagation();
         if (!selectedClipIds.has(item.clip.id))
             selectClip(item.clip.id);
         e.currentTarget.setPointerCapture(e.pointerId);
-        const rootRect = rootRef.current?.getBoundingClientRect();
-        const centerClientX = (rootRect?.left ?? 0) + item.centerScreenX;
-        const centerClientY = (rootRect?.top ?? 0) + item.centerScreenY;
+        const base = baseTransformFor(item);
+        const halfW0 = (item.contentW * base.scale * (base.scaleX ?? 1)) / 2;
+        const halfH0 = (item.contentH * base.scale * (base.scaleY ?? 1)) / 2;
+        const centerX = base.x * stage.width;
+        const centerY = base.y * stage.height;
+        const rotatedAnchor = rotateLocalToStage({ x: -handle.sx * halfW0, y: -handle.sy * halfH0 }, base.rotation);
         gestureRef.current = {
             type: 'resize',
             id: item.clip.id,
             trackId: item.clip.trackId,
+            base,
+            contentW: item.contentW,
+            contentH: item.contentH,
+            stageW: stage.width,
+            stageH: stage.height,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            handle: { sx: handle.sx, sy: handle.sy },
+            anchorStageX: centerX + rotatedAnchor.x,
+            anchorStageY: centerY + rotatedAnchor.y,
+            halfW0,
+            halfH0,
+        };
+    }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
+    const beginCropResize = useCallback((e, item, handle) => {
+        e.stopPropagation();
+        if (!selectedClipIds.has(item.clip.id))
+            selectClip(item.clip.id);
+        e.currentTarget.setPointerCapture(e.pointerId);
+        const base = baseTransformFor(item);
+        const baseCrop = item.crop;
+        const visW0 = item.fullW * baseCrop.width;
+        const visH0 = item.fullH * baseCrop.height;
+        const halfW0 = visW0 / 2;
+        const halfH0 = visH0 / 2;
+        const centerX = base.x * stage.width;
+        const centerY = base.y * stage.height;
+        const rotatedAnchor = rotateLocalToStage({ x: -handle.sx * halfW0, y: -handle.sy * halfH0 }, base.rotation);
+        gestureRef.current = {
+            type: 'crop-resize',
+            id: item.clip.id,
+            trackId: item.clip.trackId,
+            base,
+            contentW: item.contentW,
+            contentH: item.contentH,
+            stageW: stage.width,
+            stageH: stage.height,
+            startClientX: e.clientX,
+            startClientY: e.clientY,
+            handle: { sx: handle.sx, sy: handle.sy },
+            anchorStageX: centerX + rotatedAnchor.x,
+            anchorStageY: centerY + rotatedAnchor.y,
+            baseCrop,
+            fullW: item.fullW,
+            fullH: item.fullH,
+        };
+    }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
+    const beginCropPan = useCallback((e, item) => {
+        e.stopPropagation();
+        if (!selectedClipIds.has(item.clip.id))
+            selectClip(item.clip.id);
+        e.currentTarget.setPointerCapture(e.pointerId);
+        gestureRef.current = {
+            type: 'crop-pan',
+            id: item.clip.id,
+            trackId: item.clip.trackId,
             base: baseTransformFor(item),
             contentW: item.contentW,
             contentH: item.contentH,
@@ -136,15 +286,16 @@ export function MediaTransformOverlay() {
             stageH: stage.height,
             startClientX: e.clientX,
             startClientY: e.clientY,
-            centerClientX,
-            centerClientY,
-            startDist: Math.hypot(e.clientX - centerClientX, e.clientY - centerClientY),
+            baseCrop: item.crop,
+            fullW: item.fullW,
+            fullH: item.fullH,
         };
     }, [selectedClipIds, selectClip, baseTransformFor, stage.width, stage.height]);
     return (_jsxs("div", { ref: rootRef, className: "absolute inset-0 z-[2] pointer-events-none overflow-hidden", children: [!isPlaying && ownsSelection && (_jsx("div", { className: "absolute inset-0 pointer-events-auto", onPointerDown: () => clearSelection() })), !isPlaying &&
                 items.map((item) => {
                     const { clip, rect } = item;
                     const selected = selectedClipIds.has(clip.id);
+                    const cropping = selected && mode === 'crop';
                     const boxStyle = {
                         position: 'absolute',
                         left: rect.left - BOX_PAD,
@@ -154,28 +305,78 @@ export function MediaTransformOverlay() {
                         boxSizing: 'border-box',
                         border: selected ? '1px solid var(--elah-selection-color, #4c9aff)' : '1px solid transparent',
                         borderRadius: 2,
-                        cursor: 'move',
+                        cursor: cropping ? 'grab' : 'move',
                         pointerEvents: 'auto',
                         touchAction: 'none',
+                        transform: item.rotation ? `rotate(${item.rotation}rad)` : undefined,
+                        zIndex: clip.zIndex,
                     };
-                    return (_jsx("div", { style: boxStyle, onPointerDown: (e) => beginMove(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, children: selected &&
-                            CORNERS.map((corner) => (_jsx("div", { onPointerDown: (e) => beginResize(e, item), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
-                                    position: 'absolute',
-                                    ...corner.pos,
-                                    width: 10,
-                                    height: 10,
-                                    background: 'var(--elah-selection-handle, #fff)',
-                                    border: '1px solid var(--elah-selection-color, #4c9aff)',
-                                    borderRadius: 2,
-                                    cursor: corner.cursor,
-                                    pointerEvents: 'auto',
-                                    touchAction: 'none',
-                                } }, corner.key))) }, clip.id));
+                    return (_jsxs("div", { children: [_jsxs("div", { style: boxStyle, onPointerDown: (e) => (cropping ? beginCropPan(e, item) : beginMove(e, item)), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, children: [cropping && item.crop.width < 1 - 1e-3 && (_jsx("div", { style: {
+                                            position: 'absolute',
+                                            left: -(item.crop.x / item.crop.width) * rect.width,
+                                            top: -(item.crop.y / item.crop.height) * rect.height,
+                                            width: rect.width / item.crop.width,
+                                            height: rect.height / item.crop.height,
+                                            border: '1px dashed var(--elah-selection-color, #4c9aff)',
+                                            opacity: 0.4,
+                                            pointerEvents: 'none',
+                                        } })), selected &&
+                                        HANDLES.map((handle) => (_jsx("div", { onPointerDown: (e) => cropping ? beginCropResize(e, item, handle) : beginResize(e, item, handle), onPointerMove: handlePointerMove, onPointerUp: endGesture, onPointerCancel: endGesture, style: {
+                                                position: 'absolute',
+                                                ...handle.pos,
+                                                width: 10,
+                                                height: 10,
+                                                background: 'var(--elah-selection-handle, #fff)',
+                                                border: '1px solid var(--elah-selection-color, #4c9aff)',
+                                                borderRadius: 2,
+                                                cursor: handle.cursor,
+                                                pointerEvents: 'auto',
+                                                touchAction: 'none',
+                                            } }, handle.key)))] }), selected && (_jsx(ModeToggle, { mode: mode, onChange: setMode, left: item.centerScreenX, top: rect.top, zIndex: clip.zIndex + 1 }))] }, clip.id));
                 })] }));
-}
-const CORNERS = [
-    { key: 'nw', pos: { left: -5, top: -5 }, cursor: 'nwse-resize' },
-    { key: 'ne', pos: { right: -5, top: -5 }, cursor: 'nesw-resize' },
-    { key: 'sw', pos: { left: -5, bottom: -5 }, cursor: 'nesw-resize' },
-    { key: 'se', pos: { right: -5, bottom: -5 }, cursor: 'nwse-resize' },
+});
+const HANDLES = [
+    { key: 'nw', sx: -1, sy: -1, pos: { left: -5, top: -5 }, cursor: 'nwse-resize' },
+    { key: 'n', sx: 0, sy: -1, pos: { left: '50%', top: -5, transform: 'translateX(-50%)' }, cursor: 'ns-resize' },
+    { key: 'ne', sx: 1, sy: -1, pos: { right: -5, top: -5 }, cursor: 'nesw-resize' },
+    { key: 'e', sx: 1, sy: 0, pos: { right: -5, top: '50%', transform: 'translateY(-50%)' }, cursor: 'ew-resize' },
+    { key: 'se', sx: 1, sy: 1, pos: { right: -5, bottom: -5 }, cursor: 'nwse-resize' },
+    { key: 's', sx: 0, sy: 1, pos: { left: '50%', bottom: -5, transform: 'translateX(-50%)' }, cursor: 'ns-resize' },
+    { key: 'sw', sx: -1, sy: 1, pos: { left: -5, bottom: -5 }, cursor: 'nesw-resize' },
+    { key: 'w', sx: -1, sy: 0, pos: { left: -5, top: '50%', transform: 'translateY(-50%)' }, cursor: 'ew-resize' },
 ];
+function ModeToggle({ mode, onChange, left, top, zIndex, }) {
+    const segment = (value, Icon, label) => {
+        const active = mode === value;
+        return (_jsxs("button", { type: "button", onPointerDown: (e) => e.stopPropagation(), onClick: () => onChange(value), title: label, "aria-pressed": active, style: {
+                display: 'flex',
+                alignItems: 'center',
+                gap: 4,
+                border: 'none',
+                borderRadius: 5,
+                padding: '3px 8px',
+                fontSize: 11,
+                lineHeight: 1,
+                fontWeight: 500,
+                cursor: 'pointer',
+                color: active ? 'var(--elah-popover-accent-text, #a5b4fc)' : 'var(--elah-text-muted, #9ca3af)',
+                background: active ? 'var(--elah-selection-color, #4c9aff)' : 'transparent',
+                opacity: active ? 1 : 0.9,
+            }, children: [_jsx(Icon, { size: 12 }), label] }, value));
+    };
+    return (_jsxs("div", { className: "pointer-events-auto", onPointerDown: (e) => e.stopPropagation(), style: {
+            position: 'absolute',
+            left,
+            top: top - 8,
+            transform: 'translate(-50%, -100%)',
+            display: 'flex',
+            gap: 2,
+            padding: 2,
+            borderRadius: 7,
+            background: 'var(--elah-popover-bg, #1a1f2b)',
+            border: '1px solid var(--elah-popover-border, #2d3548)',
+            boxShadow: 'var(--elah-popover-shadow, 0 8px 32px rgba(0, 0, 0, 0.6))',
+            zIndex,
+            whiteSpace: 'nowrap',
+        }, children: [segment('resize', MoveIcon, 'Resize'), segment('crop', CropIcon, 'Crop')] }));
+}

package/dist/editor/Preview/Preview.js

@@ -1,13 +1,15 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { forwardRef, useEffect, useImperativeHandle, useRef, } from 'react';
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState, } from 'react';
 import { GpuRenderer } from '@elah/core';
 import { resolveTimeline } from '@elah/core';
-import { useTimelineEngine, usePlaybackEngine, useMediaLibraryStore } from '@elah/react';
-import { AudioPlaybackController, preloadProjectImages, warmImageSrc } from '@elah/core';
+import { useTimelineEngine, usePlaybackEngine } from '@elah/react';
+import { AudioPlaybackController, PerfSummary, clipLoadStore, preloadProjectImages, warmImageSrc, warmVideoSrc, } from '@elah/core';
+import { useMediaLibraryStore, usePlaybackStore } from '@elah/react';
 import { cn } from '@elah/timeline';
 import { TextOverlay } from './TextOverlay';
 import { ShapeOverlay } from './ShapeOverlay';
 import { MediaTransformOverlay } from './MediaTransformOverlay';
+import { PreviewLoadingOverlay } from './PreviewLoadingOverlay';
 import { TransitionOverlay } from './TransitionOverlay';
 import { StageBorder } from './StageBorder';
 export const Preview = forwardRef(function Preview({ demuxerFactory, debug = false, probeLayer = false, clearColor, preserveDrawingBuffer, enableAudio = true, audioResolver, style, className, }, ref) {
@@ -16,6 +18,8 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
     const transitionOverlayRef = useRef(null);
     const engine = useTimelineEngine();
     const playback = usePlaybackEngine();
+    const [glState, setGlState] = useState('ok');
+    const [reloadKey, setReloadKey] = useState(0);
     useImperativeHandle(ref, () => ({
         getCanvas: () => rendererRef.current?.getCanvas() ?? null,
         getRenderer: () => rendererRef.current,
@@ -24,18 +28,31 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
         const container = containerRef.current;
         if (!container)
             return;
+        let dirty = true;
+        const markDirty = () => {
+            dirty = true;
+        };
         const renderer = new GpuRenderer({
             probeLayer,
             demuxerFactory,
             preserveDrawingBuffer,
             ...(clearColor ? { clearColor } : {}),
+            onContextLost: () => setGlState('lost'),
+            onContextRestored: () => {
+                setGlState('ok');
+                markDirty();
+            },
+            onContextUnrecoverable: () => setGlState('failed'),
+            onClipLoad: (clipId, state) => clipLoadStore.getState().set(clipId, state),
         });
         renderer.mount(container);
         renderer.setDebug(debug);
         rendererRef.current = renderer;
+        setGlState('ok');
         const resize = () => {
             const dpr = window.devicePixelRatio ?? 1;
             renderer.resize(container.clientWidth, container.clientHeight, dpr);
+            markDirty();
         };
         const observer = new ResizeObserver(resize);
         observer.observe(container);
@@ -45,13 +62,36 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
             : null;
         audio?.start();
         let warmAudio = null;
-        const warmImages = () => preloadProjectImages(engine.getProject());
+        let warmAudioOnLoad = null;
+        const warmImages = (clip) => {
+            if (clip) {
+                if (clip.type === 'image' && typeof clip.src === 'string')
+                    warmImageSrc(clip.src);
+                return;
+            }
+            preloadProjectImages(engine.getProject());
+        };
+        const warmImagesOnLoad = () => warmImages();
         warmImages();
-        engine.on('change', warmImages);
+        engine.on('clip:added', warmImages);
+        engine.on('clip:updated', warmImages);
+        engine.on('project:loaded', warmImagesOnLoad);
+        engine.on('change', markDirty);
+        const unsubPlayback = usePlaybackStore.subscribe(markDirty);
         if (audio) {
-            warmAudio = () => audio.preloadProjectAudio();
+            warmAudio = (clip) => {
+                if (clip) {
+                    if (clip.type === 'audio' && typeof clip.src === 'string')
+                        audio.warmAudioSrc(clip.src);
+                    return;
+                }
+                audio.preloadProjectAudio();
+            };
+            warmAudioOnLoad = () => warmAudio?.();
             warmAudio();
-            engine.on('change', warmAudio);
+            engine.on('clip:added', warmAudio);
+            engine.on('clip:updated', warmAudio);
+            engine.on('project:loaded', warmAudioOnLoad);
         }
         const warmedAssetIds = new Set();
         const unsubMediaLibrary = useMediaLibraryStore.subscribe((state) => {
@@ -64,35 +104,76 @@ export const Preview = forwardRef(function Preview({ demuxerFactory, debug = fal
                     audio?.warmAudioSrc(asset.src);
                 else if (asset?.kind === 'image')
                     warmImageSrc(asset.src);
+                else if (asset?.kind === 'video')
+                    warmVideoSrc(asset.src);
             }
         });
         let rafId = 0;
         const PREWARM_HORIZON_FRAMES = 30;
+        const PAUSED_PREWARM_INTERVAL_MS = 500;
+        let lastPrewarmAt = 0;
+        const perf = new PerfSummary();
+        const unsubPerfPlayback = usePlaybackStore.subscribe(() => perf.count('playbackNotify'));
+        const countTracks = () => perf.count('engineChange');
+        engine.on('change', countTracks);
         const tick = () => {
+            rafId = requestAnimationFrame(tick);
+            if (renderer.isContextLost)
+                return;
+            const playing = usePlaybackStore.getState().isPlaying;
+            const now = performance.now();
+            const hasLoading = Object.values(clipLoadStore.getState().byClipId).some((s) => s === 'loading');
+            if (!playing && !dirty && !hasLoading) {
+                if (now - lastPrewarmAt >= PAUSED_PREWARM_INTERVAL_MS) {
+                    lastPrewarmAt = now;
+                    const frame = Math.floor(playback.getFrameAt());
+                    const project = engine.getProject();
+                    renderer.prewarm(resolveTimeline(frame + PREWARM_HORIZON_FRAMES, project));
+                }
+                return;
+            }
+            dirty = false;
             const frame = Math.floor(playback.getFrameAt());
             const project = engine.getProject();
-            const scene = resolveTimeline(frame, project);
+            const scene = perf.measure('resolve', () => resolveTimeline(frame, project));
             const canvas = renderer.getCanvas();
             if (canvas)
                 transitionOverlayRef.current?.captureIfNewTransition(scene, canvas);
-            renderer.render(scene);
+            perf.measure('render', () => renderer.render(scene));
             transitionOverlayRef.current?.update(scene);
-            const prewarmScene = resolveTimeline(frame + PREWARM_HORIZON_FRAMES, project);
-            renderer.prewarm(prewarmScene);
-            rafId = requestAnimationFrame(tick);
+            lastPrewarmAt = now;
+            perf.measure('prewarm', () => {
+                const prewarmScene = resolveTimeline(frame + PREWARM_HORIZON_FRAMES, project);
+                renderer.prewarm(prewarmScene);
+            });
+            perf.endTick(performance.now() - now, { fps: renderer.fps });
         };
         rafId = requestAnimationFrame(tick);
         return () => {
             cancelAnimationFrame(rafId);
             observer.disconnect();
-            if (warmAudio)
-                engine.off('change', warmAudio);
-            engine.off('change', warmImages);
+            if (warmAudio) {
+                engine.off('clip:added', warmAudio);
+                engine.off('clip:updated', warmAudio);
+            }
+            if (warmAudioOnLoad)
+                engine.off('project:loaded', warmAudioOnLoad);
+            engine.off('clip:added', warmImages);
+            engine.off('clip:updated', warmImages);
+            engine.off('project:loaded', warmImagesOnLoad);
+            engine.off('change', markDirty);
+            unsubPlayback();
+            unsubPerfPlayback();
+            engine.off('change', countTracks);
             unsubMediaLibrary();
             audio?.destroy();
             renderer.dispose();
             rendererRef.current = null;
+            clipLoadStore.getState().clear();
         };
-    }, [engine, playback, demuxerFactory, debug, probeLayer, preserveDrawingBuffer, enableAudio, audioResolver]);
-    return (_jsxs("div", { ref: containerRef, className: cn('relative w-full h-full bg-[var(--elah-preview-bg,#06070A)]', className), style: style, children: [_jsx(StageBorder, {}), _jsx(TransitionOverlay, { ref: transitionOverlayRef }), _jsx(MediaTransformOverlay, {}), _jsx(ShapeOverlay, {}), _jsx(TextOverlay, {})] }));
+    }, [engine, playback, demuxerFactory, debug, probeLayer, preserveDrawingBuffer, enableAudio, audioResolver, reloadKey]);
+    return (_jsxs("div", { ref: containerRef, className: cn('relative w-full h-full bg-[var(--elah-preview-bg,#06070A)]', className), style: style, children: [_jsx(StageBorder, {}), _jsx(TransitionOverlay, { ref: transitionOverlayRef }), _jsx(MediaTransformOverlay, {}), _jsx(ShapeOverlay, {}), _jsx(TextOverlay, {}), _jsx(PreviewLoadingOverlay, {}), glState !== 'ok' && (_jsx("div", { className: "absolute inset-0 z-10 flex flex-col items-center justify-center gap-3 bg-[var(--elah-overlay-scrim,rgba(0,0,0,0.7))] text-[color:var(--elah-overlay-text,#ffffff)] text-sm", "data-testid": "preview-gl-recovery", children: glState === 'lost' ? (_jsx("span", { children: "Recovering preview\u2026" })) : (_jsxs(_Fragment, { children: [_jsx("span", { children: "The preview stopped rendering (graphics context lost)." }), _jsx("button", { type: "button", className: "rounded-md border border-[color:var(--elah-overlay-border,rgba(255,255,255,0.3))] bg-[var(--elah-overlay-bg,rgba(255,255,255,0.1))] px-3 py-1.5 hover:bg-[var(--elah-overlay-bg-hover,rgba(255,255,255,0.2))]", onClick: () => {
+                                setGlState('ok');
+                                setReloadKey((k) => k + 1);
+                            }, children: "Reload preview" })] })) }))] }));
 });

package/dist/editor/Preview/PreviewLoadingOverlay.d.ts

@@ -0,0 +1 @@
+export declare function PreviewLoadingOverlay(): import("react/jsx-runtime").JSX.Element | null;

package/dist/editor/Preview/PreviewLoadingOverlay.js

@@ -0,0 +1,18 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useClipLoadStore } from '@elah/react';
+function summarise(byClipId) {
+    let sawLoading = false;
+    for (const state of Object.values(byClipId)) {
+        if (state === 'error')
+            return 'error';
+        if (state === 'loading')
+            sawLoading = true;
+    }
+    return sawLoading ? 'loading' : null;
+}
+export function PreviewLoadingOverlay() {
+    const state = useClipLoadStore((s) => summarise(s.byClipId));
+    if (state === null)
+        return null;
+    return (_jsx("div", { className: "pointer-events-none absolute inset-0 z-[9] flex flex-col items-center justify-center gap-2", "data-testid": "preview-media-loading", role: "status", "aria-live": "polite", children: state === 'loading' ? (_jsxs(_Fragment, { children: [_jsx("span", { className: "h-7 w-7 animate-spin rounded-full border-2 border-[color:var(--elah-spinner-track,rgba(255,255,255,0.25))] border-t-[color:var(--elah-spinner-head,rgba(255,255,255,0.9))]", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "Loading media" })] })) : (_jsx("span", { className: "rounded-md bg-[var(--elah-overlay-scrim,rgba(0,0,0,0.7))] px-3 py-1.5 text-sm text-[color:var(--elah-overlay-text,#ffffff)]", children: "Couldn't load this video" })) }));
+}

package/dist/editor/Preview/ShapeOverlay.d.ts

@@ -1 +1 @@
-export declare function ShapeOverlay(): import("react/jsx-runtime").JSX.Element;
+export declare const ShapeOverlay: import("react").NamedExoticComponent<object>;