@pixerate/editor-svelte 0.61.0 → 0.63.0

package/dist/video-editor/ClipInspector.svelte

@@ -2,14 +2,32 @@
   import {
     findVideoClip,
     formatVideoTimecode,
+    VIDEO_CLIP_ANIMATION_EFFECTS,
+    VIDEO_CLIP_ANIMATION_LABELS,
+    normalizeVideoGrade,
+    VIDEO_GRADE_CONTROLS,
+    VIDEO_GRADE_PRESET_NAMES,
+    videoGradePreset,
+    VIDEO_BLEND_MODE_LABELS,
+    VIDEO_BLEND_MODES,
+    VIDEO_FADE_CURVE_LABELS,
+    VIDEO_FADE_CURVES,
+    VIDEO_TRANSITION_LABELS,
     VIDEO_TRANSITION_TYPES,
+    VIDEO_WIPE_DIRECTIONS,
+    videoTransitionHasDirection,
     videoKeyframeRows,
+    videoTransitionAudioCurve,
     videoKeyframeToggleEdit,
     videoKeyframeValueEdit,
     type VideoEdit,
     type VideoEditorController,
+    type VideoFadeCurve,
+    type VideoGradeControl,
+    type VideoGradePreset,
     type VideoKeyframeRow,
-    type VideoTransitionType
+    type VideoTransitionType,
+    type VideoWipeDirection
   } from '@pixerate/editor/video-editor';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
 
@@ -86,6 +104,27 @@
     if (!type) apply({ op: 'set_transition', clip: clip.id, transition: null }, 'Remove transition');
     else apply({ op: 'set_transition', clip: clip.id, transition: { ...clip.transition, type: type as VideoTransitionType, duration: clip.transition?.duration ?? 500 } }, 'Set transition');
   }
+  function gradeValue(c: VideoGradeControl, raw: string) {
+    if (!clip) return;
+    const n = raw.trim() ? Number(raw) : 0;
+    if (!Number.isFinite(n)) {
+      localError = { text: `${c.label} must be a number from ${c.min} to ${c.max}.`, revision: editor.revision };
+      return;
+    }
+    // Out-of-range values are clamped to the control's range.
+    set('grade', normalizeVideoGrade({ ...clip.grade, [c.key]: n }), `Change ${c.label.toLowerCase()}`);
+  }
+  function gradePreset(name: string) {
+    const grade = clip && name ? videoGradePreset(name as VideoGradePreset) : undefined;
+    if (clip && grade) apply({ op: 'update_clip', clip: clip.id, set: { grade } }, `Apply ${name} look`);
+  }
+  function transitionAudioCurve(curve: string) {
+    if (!clip?.transition) return;
+    const { audioCurve: _, ...rest } = clip.transition;
+    // The type's own default is stored as no curve, so it follows the type if that changes.
+    const next = curve === videoTransitionAudioCurve(rest) ? rest : { ...rest, audioCurve: curve as VideoFadeCurve };
+    apply({ op: 'set_transition', clip: clip.id, transition: next }, 'Change transition sound');
+  }
   function transitionDuration(raw: string) {
     if (!clip?.transition) return;
     const n = Number(raw);
@@ -123,6 +162,38 @@
       <span class="tabular-nums" data-field="start">{formatVideoTimecode(clip.start, fps)}</span>
       <span class="text-muted-foreground">Duration</span>
       <span class="tabular-nums" data-field="duration">{formatVideoTimecode(clip.duration, fps)} ({(clip.duration / 1000).toFixed(2)} s)</span>
+      {#if at?.track.kind === 'video'}
+        <span class="text-muted-foreground">Blend</span>
+        <select class={input} aria-label="Blend mode" {disabled} value={clip.blend ?? 'normal'} onchange={(e) => set('blend', e.currentTarget.value === 'normal' ? undefined : e.currentTarget.value, 'Change blend mode')} data-field="blend">
+          {#each VIDEO_BLEND_MODES as m (m)}
+            <option value={m}>{VIDEO_BLEND_MODE_LABELS[m]}</option>
+          {/each}
+        </select>
+      {/if}
+      {#if at?.track.kind === 'video'}
+        <span class="text-muted-foreground">Look</span>
+        <select class={input} aria-label="Apply a look" {disabled} value="" onchange={(e) => gradePreset(e.currentTarget.value)} data-field="gradePreset">
+          <option value="">{clip.grade ? 'graded' : 'none'}</option>
+          {#each VIDEO_GRADE_PRESET_NAMES as name (name)}
+            <option value={name}>{name.replace(/-/g, ' ')}</option>
+          {/each}
+        </select>
+        {#each VIDEO_GRADE_CONTROLS as c (c.key)}
+          <span class="text-muted-foreground">{c.label}</span>
+          <input class={input} type="number" min={c.min} max={c.max} step={c.step} placeholder="0" aria-label={c.label} {disabled} value={clip.grade?.[c.key] ?? ''} onchange={(e) => gradeValue(c, e.currentTarget.value)} data-field="grade.{c.key}" />
+        {/each}
+      {/if}
+      {#if at?.track.kind === 'video'}
+        {#each [{ key: 'animateIn', label: 'Animate in', change: 'Change entrance' }, { key: 'animateOut', label: 'Animate out', change: 'Change exit' }] as const as row (row.key)}
+          <span class="text-muted-foreground">{row.label}</span>
+          <select class={input} aria-label={row.label} {disabled} value={clip[row.key]?.effect ?? ''} onchange={(e) => set(row.key, e.currentTarget.value ? { ...clip?.[row.key], effect: e.currentTarget.value } : undefined, row.change)} data-field={row.key}>
+            <option value="">none</option>
+            {#each VIDEO_CLIP_ANIMATION_EFFECTS as effect (effect)}
+              <option value={effect}>{VIDEO_CLIP_ANIMATION_LABELS[effect]}</option>
+            {/each}
+          </select>
+        {/each}
+      {/if}
       <span class="text-muted-foreground">Fade in</span>
       <input class={input} type="number" min="0" step="100" placeholder="0 ms" aria-label="Fade in" {disabled} value={clip.fadeIn ?? ''} onchange={(e) => number('fadeIn', e.currentTarget.value, 'Change fade in', { min: 0, what: 'Fade in must be a number of ms, 0 or more.' })} data-field="fadeIn" />
       <span class="text-muted-foreground">Fade out</span>
@@ -149,6 +220,16 @@
         <input class={input} type="number" min="0.05" step="0.05" placeholder="1" aria-label="Speed" {disabled} value={clip.speed ?? ''} onchange={(e) => number('speed', e.currentTarget.value, 'Change speed', { above: 0, what: 'Speed must be a number above 0 (1 = normal speed).' })} data-field="speed" />
         <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" />
+        {#each [{ key: 'fadeInCurve', on: clip.fadeIn, label: 'Fade in sound', aria: 'Fade in curve', change: 'Change fade in curve' }, { key: 'fadeOutCurve', on: clip.fadeOut, label: 'Fade out sound', aria: 'Fade out curve', change: 'Change fade out curve' }] as const as row (row.key)}
+          {#if row.on}
+            <span class="text-muted-foreground">{row.label}</span>
+            <select class={input} aria-label={row.aria} {disabled} value={clip[row.key] ?? 'linear'} onchange={(e) => set(row.key, e.currentTarget.value === 'linear' ? undefined : e.currentTarget.value, row.change)} data-field={row.key}>
+              {#each VIDEO_FADE_CURVES as c (c)}
+                <option value={c}>{VIDEO_FADE_CURVE_LABELS[c]}</option>
+              {/each}
+            </select>
+          {/if}
+        {/each}
       {:else if clip.type === 'text'}
         <span class="text-muted-foreground">Text</span>
         <textarea class={input} rows="2" aria-label="Text" {disabled} value={clip.text} onchange={(e) => text('text', e.currentTarget.value, 'Change text', true)} data-field="text"></textarea>
@@ -167,7 +248,7 @@
         <select class={input} aria-label="Transition" {disabled} value={clip.transition?.type ?? ''} onchange={(e) => setTransition(e.currentTarget.value)} data-field="transition">
           <option value="">none</option>
           {#each VIDEO_TRANSITION_TYPES as t (t)}
-            <option value={t}>{t}</option>
+            <option value={t}>{VIDEO_TRANSITION_LABELS[t]}</option>
           {/each}
         </select>
         {#if clip.transition}
@@ -175,6 +256,22 @@
           <span class="text-[10px] text-muted-foreground">ms</span>
         {/if}
       </div>
+      {#if clip.transition && videoTransitionHasDirection(clip.transition.type)}
+        <span class="text-muted-foreground">Direction</span>
+        <select class={input} aria-label="Transition direction" {disabled} value={clip.transition.direction ?? 'right'} onchange={(e) => clip?.transition && apply({ op: 'set_transition', clip: clip.id, transition: { ...clip.transition, direction: e.currentTarget.value as VideoWipeDirection } }, 'Change transition direction')} data-field="transitionDirection">
+          {#each VIDEO_WIPE_DIRECTIONS as d (d)}
+            <option value={d}>{d}</option>
+          {/each}
+        </select>
+      {/if}
+      {#if clip.transition}
+        <span class="text-muted-foreground">Transition sound</span>
+        <select class={input} aria-label="Transition sound curve" {disabled} value={videoTransitionAudioCurve(clip.transition)} onchange={(e) => transitionAudioCurve(e.currentTarget.value)} data-field="transitionAudioCurve">
+          {#each VIDEO_FADE_CURVES as c (c)}
+            <option value={c}>{VIDEO_FADE_CURVE_LABELS[c]}</option>
+          {/each}
+        </select>
+      {/if}
     </div>
   {/if}
   {#if message}

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,EAQH,KAAK,qBAAqB,EAG3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA6JH,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,EAsBH,KAAK,qBAAqB,EAO3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA4OH,QAAA,MAAM,aAAa,2CAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/video-editor/VideoTimeline.svelte

@@ -6,14 +6,19 @@
     videoDragLabel,
     videoAssetMap,
     videoClipLabel,
+    videoClipShowsWaveform,
+    videoClipWaveformPath,
     videoClipTint,
     videoDropTracks,
     videoRulerTicks,
+    type VideoAsset,
     type VideoClip,
     type VideoClipDragMode,
     type VideoClipDragPlan,
     type VideoEditorController,
+    type VideoMediaClip,
     type VideoTrack,
+    type VideoWaveformMode,
   } from '@pixerate/editor/video-editor';
   import { onDestroy } from 'svelte';
   import { videoEditorStateOf } from './createVideoEditor.svelte.js';
@@ -26,10 +31,22 @@
     onpxpersecondchange?: (pxPerSecond: number) => void;
     /** Allow moving and trimming clips, the track toggles and the edit keys (default true). False still scrubs, selects and plays. */
     editable?: boolean;
+    /** Draw waveforms in audio clips (default), in every clip with sound (`all`), or not at all. Sound is decoded once per asset through `controller.audioPeaks`. */
+    waveforms?: VideoWaveformMode;
     class?: string;
   }
 
-  let { controller, pxPerSecond = $bindable(100), onpxpersecondchange, editable = true, class: className = '' }: Props = $props();
+  let { controller, pxPerSecond = $bindable(100), onpxpersecondchange, editable = true, waveforms = 'audio', class: className = '' }: Props = $props();
+  /** Bumped when more sound peaks have loaded, so waveforms redraw. */
+  let peaksVersion = $state(0);
+  $effect(() => controller.audioPeaks.subscribe(() => peaksVersion++));
+  const CLIP_HEIGHT = 40;
+  /** The waveform path for a clip, starting to load its asset's sound the first time. */
+  function waveformPath(clip: VideoMediaClip, asset: VideoAsset, w: number): string {
+    void peaksVersion;
+    const peaks = controller.audioPeaks.get(asset);
+    return peaks ? videoClipWaveformPath(clip, peaks, w, CLIP_HEIGHT) : '';
+  }
   const view = videoEditorStateOf(() => controller);
   const editor = $derived(view.current);
   const project = $derived(editor.project);
@@ -320,10 +337,17 @@
                 data-dragging={item.dragging ? '' : undefined}
                 onpointerdown={(e) => onclipdown(e, clip, track)}
               >
+                {#if clip.type === 'media' && videoClipShowsWaveform(clip, asset, waveforms)}
+                  {@const w = Math.max(2, x(clip.duration))}
+                  {@const d = waveformPath(clip, asset, w)}
+                  {#if d}
+                    <svg class="pointer-events-none absolute inset-0" width={w} height={CLIP_HEIGHT} aria-hidden="true" data-waveform={clip.id}><path {d} fill="currentColor" fill-opacity="0.45" /></svg>
+                  {/if}
+                {/if}
                 {#if clip.transition}
-                  <span class="shrink-0 rounded bg-black/40 px-1 text-[9px]" title="{clip.transition.type} {clip.transition.duration} ms" data-transition={clip.transition.type}>⋈</span>
+                  <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="truncate drop-shadow">{videoClipLabel(clip, asset)}</span>
+                <span class="relative truncate drop-shadow">{videoClipLabel(clip, asset)}</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

@@ -1,4 +1,4 @@
-import { type VideoEditorController } from '@pixerate/editor/video-editor';
+import { type VideoEditorController, type VideoWaveformMode } from '@pixerate/editor/video-editor';
 interface Props {
     controller: VideoEditorController;
     /** Zoom: pixels per second of timeline (default 100). Bindable. */
@@ -7,6 +7,8 @@ interface Props {
     onpxpersecondchange?: (pxPerSecond: number) => void;
     /** Allow moving and trimming clips, the track toggles and the edit keys (default true). False still scrubs, selects and plays. */
     editable?: boolean;
+    /** Draw waveforms in audio clips (default), in every clip with sound (`all`), or not at all. Sound is decoded once per asset through `controller.audioPeaks`. */
+    waveforms?: VideoWaveformMode;
     class?: string;
 }
 declare const VideoTimeline: import("svelte").Component<Props, {}, "pxPerSecond">;

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,EAaH,KAAK,qBAAqB,EAE3B,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,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AA0QH,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;AA2RH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pixerate/editor-svelte",
-  "version": "0.61.0",
+  "version": "0.63.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.82.0"
+    "@pixerate/editor": "0.84.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",