@pixerate/editor-svelte 0.69.0 → 0.71.0

package/dist/video-editor/ClipInspector.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import {
     findVideoClip,
+    formatVideoSeconds,
     formatVideoTimecode,
     VIDEO_CLIP_ANIMATION_EFFECTS,
     VIDEO_CLIP_ANIMATION_LABELS,
@@ -311,6 +312,12 @@
         <input class={input} type="number" min="1" step="1" placeholder="64" aria-label="Font size" {disabled} value={clip.fontSize ?? ''} onchange={(e) => number('fontSize', e.currentTarget.value, 'Change font size', { above: 0, what: 'Font size must be a number of pixels above 0.' })} data-field="fontSize" />
         <span class="text-muted-foreground">Background</span>
         <input class={input} placeholder="none" aria-label="Text background" {disabled} value={clip.background ?? ''} onchange={(e) => text('background', e.currentTarget.value, 'Change text background')} data-field="background" />
+      {:else if clip.type === 'sequence'}
+        {@const sequence = editor.project.sequences?.find((q) => q.id === clip.sequence)}
+        <span class="text-muted-foreground">Sequence</span>
+        <span class="truncate" title="A compound clip plays its sequence as one picture and sound; its clips cannot be edited here yet" data-field="sequence">{sequence?.name ?? clip.sequence} · from {formatVideoSeconds(clip.in ?? 0)}</span>
+        <span class="text-muted-foreground">Muted</span>
+        <input type="checkbox" class="justify-self-start" aria-label="Muted" {disabled} checked={!!clip.muted} onchange={(e) => set('muted', e.currentTarget.checked || undefined, e.currentTarget.checked ? 'Mute clip' : 'Unmute clip')} data-field="muted" />
       {:else}
         <span class="text-muted-foreground">Colour</span>
         <input class={input} aria-label="Clip colour" {disabled} value={clip.color} onchange={(e) => text('color', e.currentTarget.value, 'Change colour', true)} data-field="color" />

package/dist/video-editor/ClipInspector.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ClipInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/ClipInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EA0BH,KAAK,qBAAqB,EAQ3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA+SH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"ClipInspector.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/ClipInspector.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EA2BH,KAAK,qBAAqB,EAQ3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqTH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/MediaBin.svelte

@@ -130,6 +130,7 @@
         <li class="flex items-center gap-1 rounded border border-border px-1 py-0.5" data-asset={asset.id}>
           <span class="rounded bg-muted px-1 text-[10px] text-muted-foreground">{asset.kind}</span>
           <span class="min-w-0 flex-1 truncate" title={asset.src}>{asset.name ?? asset.id}</span>
+          {#if asset.proxies?.length}<span class="rounded bg-muted px-1 text-[10px] text-muted-foreground" title="Proxies: {asset.proxies.map((p) => `${p.scale * 100}%`).join(', ')} (the preview can play these; exports use the original)" data-asset-proxies="">proxy</span>{/if}
           {#if asset.duration !== undefined}<span class="tabular-nums text-muted-foreground">{formatVideoSeconds(asset.duration)}</span>{/if}
           <button type="button" class={btn} disabled={editor.readOnly} onclick={() => addToTimeline(asset)} aria-label="Add {asset.name ?? asset.id} to timeline" data-add-to-timeline="">Add to timeline</button>
         </li>

package/dist/video-editor/MediaBin.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MediaBin.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/MediaBin.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmIH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"MediaBin.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/MediaBin.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAOH,KAAK,qBAAqB,EAC3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAoIH,QAAA,MAAM,QAAQ,2CAAwC,CAAC;AACvD,KAAK,QAAQ,GAAG,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC;AAC5C,eAAe,QAAQ,CAAC"}

package/dist/video-editor/VideoTimeline.svelte

@@ -5,6 +5,7 @@
     planVideoClipDrag,
     videoDragLabel,
     videoAssetMap,
+    videoSequenceMap,
     videoClipLabel,
     videoClipShowsWaveform,
     videoClipWaveformPath,
@@ -20,7 +21,7 @@
     type VideoTrack,
     type VideoWaveformMode,
   } from '@pixerate/editor/video-editor';
-  import { onDestroy } from 'svelte';
+  import { onDestroy, untrack } from 'svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
   interface Props {
@@ -51,12 +52,37 @@
   const editor = $derived(view.current);
   const project = $derived(editor.project);
   const assets = $derived(videoAssetMap(project));
+  const sequences = $derived(videoSequenceMap(project));
   const px = $derived(Math.max(1, pxPerSecond));
   const x = (ms: number) => (ms * px) / 1000;
   /** Room after the last clip to drop and drag into. */
   const span = $derived(Math.max(editor.duration + 5000, 10000));
   const width = $derived(x(span));
   const ticks = $derived(videoRulerTicks(span, px, project.fps));
+  /** The stretches the controller's frame cache holds, every two pixels, re-read after edits and at most four times a second as frames arrive. */
+  let cached: { start: number; end: number }[] = $state.raw([]);
+  $effect(() => {
+    const cache = controller.frameCache;
+    const step = 2000 / px;
+    const p = project;
+    if (!cache) {
+      cached = [];
+      return;
+    }
+    let timer: ReturnType<typeof setTimeout> | null = null;
+    const read = () => {
+      timer = null;
+      cached = cache.cachedRanges(p, { step });
+    };
+    untrack(read);
+    const off = cache.subscribe(() => {
+      timer ??= setTimeout(read, 250);
+    });
+    return () => {
+      off();
+      if (timer) clearTimeout(timer);
+    };
+  });
   const canEdit = $derived(editable && !editor.readOnly);
   const HEADER = 144;
   const ZOOM_MIN = 10;
@@ -279,6 +305,9 @@
               {#if t.label}<span class="absolute -top-0.5 left-1 whitespace-nowrap tabular-nums">{t.label}</span>{/if}
             </div>
           {/each}
+          {#each cached as r (r.start)}
+            <div class="pointer-events-none absolute bottom-0 h-[3px] bg-emerald-500/70" style="left:{x(r.start)}px;width:{Math.max(1, x(r.end - r.start))}px" title="Frames cached: plays and scrubs without waiting" data-cached-range=""></div>
+          {/each}
           {#each project.markers ?? [] as m (m.id)}
             <div
               class="absolute top-0 h-2 w-2 -translate-x-1/2 rotate-45"
@@ -324,6 +353,7 @@
             {#each row.items as item (item.clip.id)}
               {@const clip = item.clip}
               {@const asset = clip.type === 'media' ? assets.get(clip.asset) : undefined}
+              {@const label = videoClipLabel(clip, asset, clip.type === 'sequence' ? sequences.get(clip.sequence) : undefined)}
               {@const selected = editor.selection.includes(clip.id)}
               <div
                 class="absolute inset-y-1 flex select-none touch-none items-center gap-1 overflow-hidden rounded px-1.5 text-[11px] text-white {selected ? 'outline outline-2 outline-offset-1 outline-rose-500' : ''} {item.dragging ? 'opacity-80 shadow-lg' : ''} {canEdit && !track.locked ? 'cursor-grab' : 'cursor-pointer'}"
@@ -331,8 +361,9 @@
                 role="button"
                 tabindex="-1"
                 aria-pressed={selected}
-                title="{videoClipLabel(clip, asset)} · {formatVideoTimecode(item.start, project.fps)}–{formatVideoTimecode(item.start + item.duration, project.fps)}"
+                title="{label} · {formatVideoTimecode(item.start, project.fps)}–{formatVideoTimecode(item.start + item.duration, project.fps)}"
                 data-clip={clip.id}
+                data-compound={clip.type === 'sequence' ? clip.sequence : undefined}
                 data-selected={selected ? '' : undefined}
                 data-dragging={item.dragging ? '' : undefined}
                 onpointerdown={(e) => onclipdown(e, clip, track)}
@@ -347,7 +378,7 @@
                 {#if clip.transition}
                   <span class="relative shrink-0 rounded bg-black/40 px-1 text-[9px]" title="{clip.transition.type} {clip.transition.duration} ms" data-transition={clip.transition.type}>⋈</span>
                 {/if}
-                <span class="relative truncate drop-shadow">{videoClipLabel(clip, asset)}</span>
+                <span class="relative truncate drop-shadow">{label}</span>
                 {#if canEdit && !track.locked}
                   <div class="absolute inset-y-0 left-0 w-1.5 cursor-ew-resize bg-white/0 hover:bg-white/40" data-edge="start" aria-hidden="true"></div>
                   <div class="absolute inset-y-0 right-0 w-1.5 cursor-ew-resize bg-white/0 hover:bg-white/40" data-edge="end" aria-hidden="true"></div>

package/dist/video-editor/VideoTimeline.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTimeline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAgBH,KAAK,qBAAqB,EAG1B,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAKvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iKAAiK;IACjK,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2RH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"VideoTimeline.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTimeline.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAiBH,KAAK,qBAAqB,EAG1B,KAAK,iBAAiB,EACvB,MAAM,+BAA+B,CAAC;AAKvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,mEAAmE;IACnE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,0DAA0D;IAC1D,mBAAmB,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,KAAK,IAAI,CAAC;IACpD,kIAAkI;IAClI,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,iKAAiK;IACjK,SAAS,CAAC,EAAE,iBAAiB,CAAC;IAC9B,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwTH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/VideoTransport.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-  import { formatVideoTimecode, type VideoEditorController } from '@pixerate/editor/video-editor';
+  import { formatVideoTimecode, parseVideoPreviewScale, VIDEO_PREVIEW_SCALE_OPTIONS, videoProjectHasProxies, type VideoEditorController } from '@pixerate/editor/video-editor';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
   interface Props {
@@ -17,7 +17,7 @@
   const locked = $derived(editor.readOnly);
 </script>
 
-<!-- Play / pause, frame steps, the playhead's timecode, and split, delete, undo and redo. -->
+<!-- Play / pause, frame steps, the playhead's timecode, a preview size when there are proxies, and split, delete, undo and redo. -->
 <div class="flex flex-wrap items-center gap-1.5 text-xs {className}" data-video-transport="">
   <button type="button" class={btn} aria-label="Step back one frame" onclick={() => controller.step(-1)} data-step-back="">◀︎|</button>
   <button type="button" class={btn} aria-label={editor.playing ? 'Pause' : 'Play'} onclick={() => controller.toggle()} disabled={editor.duration <= 0} data-play="">
@@ -25,6 +25,13 @@
   </button>
   <button type="button" class={btn} aria-label="Step forward one frame" onclick={() => controller.step(1)} data-step-forward="">|▶︎</button>
   <span class="tabular-nums text-muted-foreground" data-timecode="">{formatVideoTimecode(editor.time, fps)} / {formatVideoTimecode(editor.duration, fps)}</span>
+  {#if videoProjectHasProxies(editor.project)}
+    <select class="rounded border border-border bg-transparent px-1 py-0.5 text-xs" value={String(editor.previewScale)} onchange={(e) => controller.setPreviewScale(parseVideoPreviewScale(e.currentTarget.value))} aria-label="Preview size" title="Play proxies in the preview (the export always uses the originals)" data-preview-scale="">
+      {#each VIDEO_PREVIEW_SCALE_OPTIONS as o (o.value)}
+        <option value={o.value}>{o.label}</option>
+      {/each}
+    </select>
+  {/if}
   {#if editable}
     <span class="ml-auto flex flex-wrap gap-1">
       <button type="button" class={btn} disabled={locked} onclick={() => controller.splitAtPlayhead()} title="Split at the playhead (S)" data-split="">Split</button>

package/dist/video-editor/VideoTransport.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"VideoTransport.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTransport.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAuB,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI9F,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAmCH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"VideoTransport.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoTransport.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAAoG,KAAK,qBAAqB,EAAE,MAAM,+BAA+B,CAAC;AAI3K,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,4FAA4F;IAC5F,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0CH,QAAA,MAAM,cAAc,2CAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.69.0",
+  "version": "0.71.0",
   "description": "Svelte bindings and prompt/rich-text components for @pixerate/editor",
   "author": "Pixerate",
   "license": "MIT",
@@ -131,7 +131,7 @@
     "@tiptap/extension-bubble-menu": "^2.11.5",
     "@tiptap/extension-placeholder": "^2.11.5",
     "@tiptap/starter-kit": "^2.11.5",
-    "@pixerate/editor": "0.90.0"
+    "@pixerate/editor": "0.92.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",