@pixerate/editor-svelte 0.69.0 → 0.70.0

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

@@ -20,7 +20,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 {
@@ -57,6 +57,30 @@
   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 +303,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"

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,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;AAsTH,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.70.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.91.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",