@pixerate/editor-svelte 0.63.0 → 0.64.0

package/dist/video-editor/TranscriptPanel.svelte

@@ -0,0 +1,136 @@
+<script lang="ts">
+  import {
+    findVideoFillers,
+    findVideoTranscriptPauses,
+    videoRemoveRangesEdits,
+    videoTimelineTranscript,
+    videoTranscriptEdit,
+    videoWordAt,
+    videoWordsRange,
+    type VideoEditorController,
+    type VideoTimelineWord
+  } from '@pixerate/editor/video-editor';
+  import { videoEditorStateOf } from './createVideoEditor.svelte.js';
+
+  interface Props {
+    controller: VideoEditorController;
+    /** Track whose words to show (default: the first audio track with a transcribed clip, else the first video track with one). */
+    track?: string;
+    /** Allow cutting by text and loading transcripts (default true). */
+    editable?: boolean;
+    class?: string;
+  }
+
+  let { controller, track, editable = true, class: className = '' }: Props = $props();
+  const view = videoEditorStateOf(() => controller);
+  const editor = $derived(view.current);
+  const canEdit = $derived(editable && !editor.readOnly);
+  const words: VideoTimelineWord[] = $derived.by(() => {
+    try {
+      return videoTimelineTranscript(editor.project, { track });
+    } catch {
+      return [];
+    }
+  });
+  const current = $derived(videoWordAt(words, editor.time));
+  let anchor = $state<number | null>(null);
+  let focus = $state<number | null>(null);
+  let message = $state<string | null>(null);
+  const selected = $derived(anchor !== null && focus !== null && anchor < words.length && focus < words.length ? ([Math.min(anchor, focus), Math.max(anchor, focus)] as const) : null);
+  const sound = $derived(editor.project.assets.filter((a) => a.kind !== 'image'));
+  const btn = 'rounded border border-border px-1.5 py-0.5 text-[11px] disabled:opacity-40';
+
+  function cut(ranges: { from: number; to: number }[], label: string, none: string) {
+    if (!ranges.length) {
+      message = none;
+      return;
+    }
+    const r = controller.apply(videoRemoveRangesEdits(ranges), label);
+    message = r.ok ? null : r.error;
+    anchor = null;
+    focus = null;
+  }
+  function cutSelection() {
+    if (selected) cut([videoWordsRange(words, selected[0], selected[1])], 'Cut words', 'Select words to cut.');
+  }
+  function pick(e: MouseEvent, i: number) {
+    if (e.shiftKey && anchor !== null) focus = i;
+    else {
+      anchor = i;
+      focus = i;
+      controller.seek(words[i].start);
+    }
+  }
+  async function load(assetId: string, file: File | undefined) {
+    if (!file) return;
+    try {
+      const r = controller.apply(videoTranscriptEdit(assetId, await file.text()), 'Attach transcript');
+      message = r.ok ? null : r.error;
+    } catch (e) {
+      message = e instanceof Error ? e.message : String(e);
+    }
+  }
+</script>
+
+<!--
+  Edit by text: the words the timeline plays, from its media's transcripts. Click a word to go to it,
+  Shift-click to select a run of words, then delete them to cut that stretch out. "Remove fillers"
+  and "Tighten pauses" cut every um and long gap at once. Each cut is one undo step.
+-->
+<div class="flex flex-col gap-2 text-xs {className}" data-transcript-panel="">
+  {#if words.length}
+    <div
+      class="max-h-48 overflow-y-auto leading-6"
+      role="listbox"
+      aria-label="Transcript"
+      aria-multiselectable="true"
+      tabindex="0"
+      onkeydown={(e) => {
+        if (canEdit && selected && (e.key === 'Delete' || e.key === 'Backspace')) {
+          e.preventDefault();
+          cutSelection();
+        }
+      }}
+    >
+      {#each words as w, i (`${w.clip}:${w.index}`)}
+        {@const inSelection = selected !== null && i >= selected[0] && i <= selected[1]}
+        <span
+          role="option"
+          aria-selected={inSelection}
+          tabindex="-1"
+          class="cursor-pointer rounded px-0.5 {inSelection ? 'bg-rose-500/30' : i === current ? 'bg-amber-400/40' : 'hover:bg-muted'}"
+          data-word={i}
+          data-current={i === current ? '' : undefined}
+          data-selected={inSelection ? '' : undefined}
+          onclick={(e) => pick(e, i)}
+          onkeydown={() => {}}>{w.word}</span
+        >{' '}
+      {/each}
+    </div>
+    {#if canEdit}
+      <div class="flex flex-wrap gap-1">
+        <button type="button" class={btn} disabled={!selected} onclick={cutSelection}>Delete selected words</button>
+        <button type="button" class={btn} onclick={() => cut(findVideoFillers(words), 'Remove fillers', 'No filler words found.')}>Remove fillers</button>
+        <button type="button" class={btn} onclick={() => cut(findVideoTranscriptPauses(words, { fps: editor.project.fps }), 'Tighten pauses', 'No long pauses found.')}>Tighten pauses</button>
+      </div>
+    {/if}
+  {:else}
+    <p class="text-muted-foreground" data-transcript-empty="">No transcribed media on the timeline. Load a transcript (Whisper JSON, .srt or .vtt) for a video or audio asset to edit by text.</p>
+  {/if}
+  {#if canEdit && sound.length}
+    <details>
+      <summary class="cursor-pointer text-muted-foreground">Transcripts</summary>
+      <ul class="mt-1 space-y-1">
+        {#each sound as a (a.id)}
+          <li class="flex items-center gap-2">
+            <span class="min-w-0 flex-1 truncate">{a.name ?? a.id} {a.transcript ? `· ${a.transcript.length} words` : ''}</span>
+            <input type="file" accept=".json,.srt,.vtt,application/json,text/vtt" aria-label="Load a transcript for {a.name ?? a.id}" class="w-40 text-[10px]" onchange={(e) => void load(a.id, e.currentTarget.files?.[0])} />
+          </li>
+        {/each}
+      </ul>
+    </details>
+  {/if}
+  {#if message}
+    <p class="text-red-500" role="alert" data-transcript-error="">{message}</p>
+  {/if}
+</div>

package/dist/video-editor/TranscriptPanel.svelte.d.ts

@@ -0,0 +1,13 @@
+import { type VideoEditorController } from '@pixerate/editor/video-editor';
+interface Props {
+    controller: VideoEditorController;
+    /** Track whose words to show (default: the first audio track with a transcribed clip, else the first video track with one). */
+    track?: string;
+    /** Allow cutting by text and loading transcripts (default true). */
+    editable?: boolean;
+    class?: string;
+}
+declare const TranscriptPanel: import("svelte").Component<Props, {}, "">;
+type TranscriptPanel = ReturnType<typeof TranscriptPanel>;
+export default TranscriptPanel;
+//# sourceMappingURL=TranscriptPanel.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TranscriptPanel.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/TranscriptPanel.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,EAQH,KAAK,qBAAqB,EAE3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,+HAA+H;IAC/H,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,oEAAoE;IACpE,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAqGH,QAAA,MAAM,eAAe,2CAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/video-editor/VideoEditor.svelte

@@ -3,6 +3,7 @@
   import { VideoEditorController, type VideoEditorOptions } from '@pixerate/editor/video-editor';
   import ClipInspector from './ClipInspector.svelte';
   import MediaBin from './MediaBin.svelte';
+  import TranscriptPanel from './TranscriptPanel.svelte';
   import VideoPreview from './VideoPreview.svelte';
   import VideoTimeline from './VideoTimeline.svelte';
   import VideoTransport from './VideoTransport.svelte';
@@ -22,10 +23,12 @@
     pxPerSecond?: number;
     /** List the project's issues under the timeline (default true). */
     showIssues?: boolean;
+    /** Show the transcript panel for editing by text (default true). */
+    showTranscript?: boolean;
     class?: string;
   }
 
-  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, class: className = '' }: Props = $props();
+  let { controller, options, editable = true, pxPerSecond = $bindable(100), showIssues = true, showTranscript = true, class: className = '' }: Props = $props();
   let owned: VideoEditorController | null = null;
   // A controller is made only when none is passed, and kept for the component's lifetime.
   const ctl = $derived(controller ?? (owned ??= new VideoEditorController(options)));
@@ -54,6 +57,7 @@
     <VideoPreview controller={ctl} class="rounded-md" />
     <VideoTransport controller={ctl} editable={false} />
     <VideoTimeline controller={ctl} bind:pxPerSecond editable={false} />
+    {#if showTranscript}<TranscriptPanel controller={ctl} editable={false} />{/if}
     {@render issueList()}
   </div>
 {:else}
@@ -66,6 +70,7 @@
     <ClipInspector controller={ctl} class="min-w-0" />
     <div class="flex min-w-0 flex-col gap-2 lg:col-span-3">
       <VideoTimeline controller={ctl} bind:pxPerSecond />
+      {#if showTranscript}<TranscriptPanel controller={ctl} />{/if}
       {@render issueList()}
     </div>
   </div>

package/dist/video-editor/VideoEditor.svelte.d.ts

@@ -13,6 +13,8 @@ interface Props {
     pxPerSecond?: number;
     /** List the project's issues under the timeline (default true). */
     showIssues?: boolean;
+    /** Show the transcript panel for editing by text (default true). */
+    showTranscript?: boolean;
     class?: string;
 }
 declare const VideoEditor: import("svelte").Component<Props, {}, "pxPerSecond">;

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

@@ -1 +1 @@
-{"version":3,"file":"VideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAS7F,UAAU,KAAK;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAwDH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"VideoEditor.svelte.d.ts","sourceRoot":"","sources":["../../src/video-editor/VideoEditor.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,qBAAqB,EAAE,KAAK,kBAAkB,EAAE,MAAM,+BAA+B,CAAC;AAU7F,UAAU,KAAK;IACb,2FAA2F;IAC3F,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,8EAA8E;IAC9E,OAAO,CAAC,EAAE,kBAAkB,CAAC;IAC7B;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,kEAAkE;IAClE,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,mEAAmE;IACnE,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,oEAAoE;IACpE,cAAc,CAAC,EAAE,OAAO,CAAC;IACzB,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA2DH,QAAA,MAAM,WAAW,sDAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/video-editor/index.d.ts

@@ -5,12 +5,14 @@ import type VideoTransportComponent from "./VideoTransport.svelte";
 import type VideoTimelineComponent from "./VideoTimeline.svelte";
 import type ClipInspectorComponent from "./ClipInspector.svelte";
 import type MediaBinComponent from "./MediaBin.svelte";
+import type TranscriptPanelComponent from "./TranscriptPanel.svelte";
 export { default as VideoEditor } from "./VideoEditor.svelte";
 export { default as VideoPreview } from "./VideoPreview.svelte";
 export { default as VideoTransport } from "./VideoTransport.svelte";
 export { default as VideoTimeline } from "./VideoTimeline.svelte";
 export { default as ClipInspector } from "./ClipInspector.svelte";
 export { default as MediaBin } from "./MediaBin.svelte";
+export { default as TranscriptPanel } from "./TranscriptPanel.svelte";
 export * from "./createVideoEditor.svelte.js";
 export type VideoEditorProps = ComponentProps<typeof VideoEditorComponent>;
 export type VideoPreviewProps = ComponentProps<typeof VideoPreviewComponent>;
@@ -18,4 +20,5 @@ export type VideoTransportProps = ComponentProps<typeof VideoTransportComponent>
 export type VideoTimelineProps = ComponentProps<typeof VideoTimelineComponent>;
 export type ClipInspectorProps = ComponentProps<typeof ClipInspectorComponent>;
 export type MediaBinProps = ComponentProps<typeof MediaBinComponent>;
+export type TranscriptPanelProps = ComponentProps<typeof TranscriptPanelComponent>;
 //# sourceMappingURL=index.d.ts.map

package/dist/video-editor/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/video-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,+BAA+B,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/video-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,QAAQ,CAAC;AAC7C,OAAO,KAAK,oBAAoB,MAAM,sBAAsB,CAAC;AAC7D,OAAO,KAAK,qBAAqB,MAAM,uBAAuB,CAAC;AAC/D,OAAO,KAAK,uBAAuB,MAAM,yBAAyB,CAAC;AACnE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,sBAAsB,MAAM,wBAAwB,CAAC;AACjE,OAAO,KAAK,iBAAiB,MAAM,mBAAmB,CAAC;AACvD,OAAO,KAAK,wBAAwB,MAAM,0BAA0B,CAAC;AAErE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,wBAAwB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,+BAA+B,CAAC;AAE9C,MAAM,MAAM,gBAAgB,GAAG,cAAc,CAAC,OAAO,oBAAoB,CAAC,CAAC;AAC3E,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,OAAO,qBAAqB,CAAC,CAAC;AAC7E,MAAM,MAAM,mBAAmB,GAAG,cAAc,CAAC,OAAO,uBAAuB,CAAC,CAAC;AACjF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,OAAO,sBAAsB,CAAC,CAAC;AAC/E,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,OAAO,iBAAiB,CAAC,CAAC;AACrE,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,wBAAwB,CAAC,CAAC"}

package/dist/video-editor/index.js

@@ -4,4 +4,5 @@ export { default as VideoTransport } from "./VideoTransport.svelte";
 export { default as VideoTimeline } from "./VideoTimeline.svelte";
 export { default as ClipInspector } from "./ClipInspector.svelte";
 export { default as MediaBin } from "./MediaBin.svelte";
+export { default as TranscriptPanel } from "./TranscriptPanel.svelte";
 export * from "./createVideoEditor.svelte.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.63.0",
+  "version": "0.64.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.84.0"
+    "@pixerate/editor": "0.85.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",