@pixerate/editor-svelte 0.61.0 → 0.62.0

package/dist/video-editor/ClipInspector.svelte

@@ -2,6 +2,8 @@
   import {
     findVideoClip,
     formatVideoTimecode,
+    VIDEO_FADE_CURVE_LABELS,
+    VIDEO_FADE_CURVES,
     VIDEO_TRANSITION_TYPES,
     videoKeyframeRows,
     videoKeyframeToggleEdit,
@@ -149,6 +151,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>

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,EAUH,KAAK,qBAAqB,EAG3B,MAAM,+BAA+B,CAAC;AAIvC,UAAU,KAAK;IACb,UAAU,EAAE,qBAAqB,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAuKH,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.62.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.83.0"
   },
   "peerDependencies": {
     "@dagrejs/dagre": "^1.1.4",