@bendyline/squisq-video-react 1.2.2 → 2.0.0

package/src/VideoExportModal.tsx

@@ -4,7 +4,8 @@
  * States:
  *   configure → exporting (capturing + encoding) → complete | error
  *
- * Inline styles match the site's cream/gold palette (from FileToolbar).
+ * Hosts may supply a resolved color scheme so this portaled dialog matches
+ * the surface that opened it.
  */
 
 import { useState, useCallback } from 'react';
@@ -12,7 +13,11 @@ import type { Doc } from '@bendyline/squisq/schemas';
 import type { MediaProvider } from '@bendyline/squisq/schemas';
 import type { VideoQuality, VideoOrientation } from '@bendyline/squisq-video';
 import type { CaptionMode } from '@bendyline/squisq-react';
-import { useVideoExport, type VideoExportConfig } from './hooks/useVideoExport.js';
+import {
+  useVideoExport,
+  type VideoExportConfig,
+  type VideoOutputFormat,
+} from './hooks/useVideoExport.js';
 
 // ── Types ──────────────────────────────────────────────────────────
 
@@ -32,13 +37,15 @@ export interface VideoExportModalProps {
   /** Pre-collected audio map */
   audio?: Map<string, ArrayBuffer>;
   /**
-   * Seeds the modal's initial quality/fps/orientation/captionMode selections
-   * and is merged (as a base) into the config passed to the export hook, so a
-   * host can share one config shape with `useVideoExport`. The individual
-   * `images`/`audio`/`mediaProvider`/`playerScript` props still take
-   * precedence over any matching key here.
+   * Seeds the modal's initial format, motion, quality, FPS, orientation, and
+   * caption selections. It is merged (as a base) into the config passed to the
+   * export hook, so a host can share one config shape with `useVideoExport`.
+   * The individual `images`/`audio`/`mediaProvider`/`playerScript` props still
+   * take precedence over any matching key here.
    */
   defaultConfig?: Partial<VideoExportConfig>;
+  /** Visual color scheme for the portaled dialog. Defaults to light. */
+  colorScheme?: 'light' | 'dark';
   /** Called when the modal should close */
   onClose: () => void;
 }
@@ -52,12 +59,72 @@ function formatDuration(seconds: number): string {
   return `${m}m ${s}s`;
 }
 
+function encoderLabel(
+  outputFormat: VideoOutputFormat,
+  backend: 'webcodecs' | 'ffmpeg-wasm',
+): string {
+  if (outputFormat === 'gif') {
+    return backend === 'webcodecs'
+      ? 'WebCodecs (H.264) → ffmpeg.wasm (GIF)'
+      : 'ffmpeg.wasm (H.264 → GIF)';
+  }
+  return backend === 'webcodecs' ? 'WebCodecs (H.264)' : 'ffmpeg.wasm (H.264)';
+}
+
 // ── Styles ─────────────────────────────────────────────────────────
 
+interface VideoExportPalette {
+  overlay: string;
+  surface: string;
+  control: string;
+  border: string;
+  text: string;
+  heading: string;
+  label: string;
+  muted: string;
+  secondary: string;
+  primary: string;
+  primaryBorder: string;
+  success: string;
+  danger: string;
+}
+
+const VIDEO_EXPORT_PALETTES: Record<'light' | 'dark', VideoExportPalette> = {
+  light: {
+    overlay: 'rgba(0, 0, 0, 0.5)',
+    surface: '#FFFDF7',
+    control: '#ffffff',
+    border: '#c9b98a',
+    text: '#4a3c1f',
+    heading: '#2d2310',
+    label: '#5a4a2a',
+    muted: '#8a7a5a',
+    secondary: '#E8DFC6',
+    primary: '#8B6914',
+    primaryBorder: '#7a5c10',
+    success: '#2d6a10',
+    danger: '#a03020',
+  },
+  dark: {
+    overlay: 'rgba(2, 6, 23, 0.72)',
+    surface: '#111827',
+    control: '#0f172a',
+    border: '#475569',
+    text: '#e5e7eb',
+    heading: '#f8fafc',
+    label: '#cbd5e1',
+    muted: '#94a3b8',
+    secondary: '#1e293b',
+    primary: '#9a7416',
+    primaryBorder: '#d1a73b',
+    success: '#86efac',
+    danger: '#fca5a5',
+  },
+};
+
 const overlayStyle: React.CSSProperties = {
   position: 'fixed',
   inset: 0,
-  background: 'rgba(0, 0, 0, 0.5)',
   display: 'flex',
   alignItems: 'center',
   justifyContent: 'center',
@@ -65,22 +132,18 @@ const overlayStyle: React.CSSProperties = {
 };
 
 const modalStyle: React.CSSProperties = {
-  background: '#FFFDF7',
-  border: '1px solid #c9b98a',
   borderRadius: 0,
   padding: '24px 28px',
   minWidth: 380,
   maxWidth: 480,
   boxShadow: '0 8px 32px rgba(0,0,0,0.18)',
   fontFamily: 'system-ui, -apple-system, sans-serif',
-  color: '#4a3c1f',
 };
 
 const titleStyle: React.CSSProperties = {
   margin: '0 0 16px 0',
   fontSize: 18,
   fontWeight: 600,
-  color: '#2d2310',
 };
 
 const labelStyle: React.CSSProperties = {
@@ -88,7 +151,6 @@ const labelStyle: React.CSSProperties = {
   fontSize: 13,
   fontWeight: 500,
   marginBottom: 4,
-  color: '#5a4a2a',
 };
 
 const selectStyle: React.CSSProperties = {
@@ -96,10 +158,7 @@ const selectStyle: React.CSSProperties = {
   padding: '6px 8px',
   fontSize: 13,
   fontFamily: 'inherit',
-  border: '1px solid #c9b98a',
   borderRadius: 0,
-  background: '#fff',
-  color: '#4a3c1f',
   marginBottom: 12,
 };
 
@@ -109,9 +168,7 @@ const btnPrimary: React.CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#8B6914',
   color: '#fff',
-  border: '1px solid #7a5c10',
   borderRadius: 0,
 };
 
@@ -121,16 +178,12 @@ const btnSecondary: React.CSSProperties = {
   fontFamily: 'inherit',
   fontWeight: 500,
   cursor: 'pointer',
-  background: '#E8DFC6',
-  color: '#4a3c1f',
-  border: '1px solid #c9b98a',
   borderRadius: 0,
 };
 
 const progressBarOuterStyle: React.CSSProperties = {
   width: '100%',
   height: 8,
-  background: '#E8DFC6',
   borderRadius: 0,
   overflow: 'hidden',
   marginBottom: 8,
@@ -152,20 +205,55 @@ export function VideoExportModal({
   images,
   audio,
   defaultConfig,
+  colorScheme = 'light',
   onClose,
 }: VideoExportModalProps) {
+  const initialOutputFormat = defaultConfig?.outputFormat ?? 'mp4';
+  const [outputFormat, setOutputFormat] = useState<VideoOutputFormat>(initialOutputFormat);
   const [quality, setQuality] = useState<VideoQuality>(defaultConfig?.quality ?? 'normal');
-  const [fps, setFps] = useState(defaultConfig?.fps ?? 24);
+  const [fps, setFps] = useState(defaultConfig?.fps ?? (initialOutputFormat === 'gif' ? 10 : 24));
   const [orientation, setOrientation] = useState<VideoOrientation>(
     defaultConfig?.orientation ?? 'landscape',
   );
   const [captionMode, setCaptionMode] = useState<CaptionMode>(defaultConfig?.captionMode ?? 'off');
+  const [animationsEnabled, setAnimationsEnabled] = useState(
+    defaultConfig?.animationsEnabled ?? initialOutputFormat === 'mp4',
+  );
+  const palette = VIDEO_EXPORT_PALETTES[colorScheme];
+  const themedModalStyle: React.CSSProperties = {
+    ...modalStyle,
+    background: palette.surface,
+    border: `1px solid ${palette.border}`,
+    color: palette.text,
+    colorScheme,
+  };
+  const themedTitleStyle: React.CSSProperties = { ...titleStyle, color: palette.heading };
+  const themedLabelStyle: React.CSSProperties = { ...labelStyle, color: palette.label };
+  const themedSelectStyle: React.CSSProperties = {
+    ...selectStyle,
+    border: `1px solid ${palette.border}`,
+    background: palette.control,
+    color: palette.text,
+    colorScheme,
+  };
+  const themedPrimaryButtonStyle: React.CSSProperties = {
+    ...btnPrimary,
+    background: palette.primary,
+    border: `1px solid ${palette.primaryBorder}`,
+  };
+  const themedSecondaryButtonStyle: React.CSSProperties = {
+    ...btnSecondary,
+    background: palette.secondary,
+    color: palette.text,
+    border: `1px solid ${palette.border}`,
+  };
 
   const exportHook = useVideoExport();
   const {
     state,
     progress,
     backend,
+    outputFormat: completedOutputFormat,
     downloadUrl,
     fileSize,
     audioIncluded,
@@ -178,10 +266,23 @@ export function VideoExportModal({
     reset: resetExport,
   } = exportHook;
 
+  const handleOutputFormatChange = useCallback((next: VideoOutputFormat) => {
+    setOutputFormat(next);
+    if (next === 'gif') {
+      setFps(10);
+      setAnimationsEnabled(false);
+    } else {
+      setFps(24);
+      setAnimationsEnabled(true);
+    }
+  }, []);
+
   const handleExport = useCallback(async () => {
     const config: VideoExportConfig = {
       // defaultConfig is the base; explicit props/selections win over it.
       ...defaultConfig,
+      outputFormat,
+      animationsEnabled,
       quality,
       fps,
       orientation,
@@ -195,6 +296,8 @@ export function VideoExportModal({
     await startExport(doc, config);
   }, [
     doc,
+    outputFormat,
+    animationsEnabled,
     quality,
     fps,
     orientation,
@@ -212,11 +315,11 @@ export function VideoExportModal({
     const a = document.createElement('a');
     a.href = downloadUrl;
     const ts = new Date().toISOString().slice(0, 10);
-    a.download = `document-${ts}.mp4`;
+    a.download = `document-${ts}.${completedOutputFormat}`;
     document.body.appendChild(a);
     a.click();
     document.body.removeChild(a);
-  }, [downloadUrl]);
+  }, [downloadUrl, completedOutputFormat]);
 
   const handleClose = useCallback(() => {
     if (state === 'capturing' || state === 'encoding' || state === 'preparing') {
@@ -229,17 +332,37 @@ export function VideoExportModal({
   const isExporting = state === 'preparing' || state === 'capturing' || state === 'encoding';
 
   return (
-    <div style={overlayStyle} onClick={handleClose}>
-      <div style={modalStyle} onClick={(e) => e.stopPropagation()}>
-        <h2 style={titleStyle}>Export Video</h2>
+    <div
+      style={{ ...overlayStyle, background: palette.overlay }}
+      data-color-scheme={colorScheme}
+      onClick={handleClose}
+    >
+      <div style={themedModalStyle} onClick={(e) => e.stopPropagation()}>
+        <h2 style={themedTitleStyle}>
+          {outputFormat === 'gif' ? 'Export Animated GIF' : 'Export Video'}
+        </h2>
 
         {/* ── Configure State ── */}
         {state === 'idle' && (
           <>
             <div>
-              <label style={labelStyle}>Quality</label>
+              <label style={themedLabelStyle}>Format</label>
+              <select
+                aria-label="Format"
+                style={themedSelectStyle}
+                value={outputFormat}
+                onChange={(e) => handleOutputFormatChange(e.target.value as VideoOutputFormat)}
+              >
+                <option value="mp4">MP4 video</option>
+                <option value="gif">Animated GIF</option>
+              </select>
+            </div>
+
+            <div>
+              <label style={themedLabelStyle}>Quality</label>
               <select
-                style={selectStyle}
+                aria-label="Quality"
+                style={themedSelectStyle}
                 value={quality}
                 onChange={(e) => setQuality(e.target.value as VideoQuality)}
               >
@@ -250,12 +373,14 @@ export function VideoExportModal({
             </div>
 
             <div>
-              <label style={labelStyle}>Frame Rate</label>
+              <label style={themedLabelStyle}>Frame Rate</label>
               <select
-                style={selectStyle}
+                aria-label="Frame Rate"
+                style={themedSelectStyle}
                 value={fps}
                 onChange={(e) => setFps(Number(e.target.value))}
               >
+                <option value={10}>10 fps — recommended for GIF</option>
                 <option value={15}>15 fps — fast export</option>
                 <option value={24}>24 fps — cinematic</option>
                 <option value={30}>30 fps — smooth</option>
@@ -263,21 +388,27 @@ export function VideoExportModal({
             </div>
 
             <div>
-              <label style={labelStyle}>Orientation</label>
+              <label style={themedLabelStyle}>Orientation</label>
               <select
-                style={selectStyle}
+                aria-label="Orientation"
+                style={themedSelectStyle}
                 value={orientation}
                 onChange={(e) => setOrientation(e.target.value as VideoOrientation)}
               >
-                <option value="landscape">Landscape (1920 × 1080)</option>
-                <option value="portrait">Portrait (1080 × 1920)</option>
+                <option value="landscape">
+                  Landscape ({outputFormat === 'gif' ? '960 × 540' : '1920 × 1080'})
+                </option>
+                <option value="portrait">
+                  Portrait ({outputFormat === 'gif' ? '540 × 960' : '1080 × 1920'})
+                </option>
               </select>
             </div>
 
             <div>
-              <label style={labelStyle}>Captions</label>
+              <label style={themedLabelStyle}>Captions</label>
               <select
-                style={selectStyle}
+                aria-label="Captions"
+                style={themedSelectStyle}
                 value={captionMode}
                 onChange={(e) => setCaptionMode(e.target.value as CaptionMode)}
               >
@@ -287,12 +418,30 @@ export function VideoExportModal({
               </select>
             </div>
 
+            <div>
+              <label style={themedLabelStyle}>Animations &amp; transitions</label>
+              <select
+                aria-label="Animations and transitions"
+                style={themedSelectStyle}
+                value={animationsEnabled ? 'enabled' : 'disabled'}
+                onChange={(e) => setAnimationsEnabled(e.target.value === 'enabled')}
+              >
+                <option value="enabled">Enabled</option>
+                <option value="disabled">Disabled — smaller files</option>
+              </select>
+              {outputFormat === 'gif' && animationsEnabled && (
+                <p style={{ fontSize: 12, color: palette.muted, margin: '-6px 0 12px' }}>
+                  Disabling motion is recommended for much smaller GIFs.
+                </p>
+              )}
+            </div>
+
             <div style={footerStyle}>
-              <button style={btnSecondary} onClick={handleClose}>
+              <button style={themedSecondaryButtonStyle} onClick={handleClose}>
                 Cancel
               </button>
-              <button style={btnPrimary} onClick={handleExport}>
-                Export Video
+              <button style={themedPrimaryButtonStyle} onClick={handleExport}>
+                {outputFormat === 'gif' ? 'Export GIF' : 'Export Video'}
               </button>
             </div>
           </>
@@ -302,30 +451,30 @@ export function VideoExportModal({
         {isExporting && (
           <>
             {backend && (
-              <p style={{ fontSize: 12, color: '#8a7a5a', margin: '0 0 8px 0' }}>
-                Encoder: WebCodecs (H.264)
+              <p style={{ fontSize: 12, color: palette.muted, margin: '0 0 8px 0' }}>
+                Encoder: {encoderLabel(completedOutputFormat, backend)}
               </p>
             )}
 
-            <div style={progressBarOuterStyle}>
+            <div style={{ ...progressBarOuterStyle, background: palette.secondary }}>
               <div
                 style={{
                   width: `${progress}%`,
                   height: '100%',
-                  background: '#8B6914',
+                  background: palette.primary,
                   transition: 'width 0.3s ease',
                 }}
               />
             </div>
 
             <p style={{ fontSize: 13, margin: '0 0 4px 0' }}>{progress}% complete</p>
-            <p style={{ fontSize: 12, color: '#8a7a5a', margin: 0 }}>
+            <p style={{ fontSize: 12, color: palette.muted, margin: 0 }}>
               {formatDuration(elapsed)} elapsed
               {estimatedRemaining > 0 && ` · ~${formatDuration(estimatedRemaining)} remaining`}
             </p>
 
             <div style={footerStyle}>
-              <button style={btnSecondary} onClick={cancelExport}>
+              <button style={themedSecondaryButtonStyle} onClick={cancelExport}>
                 Cancel
               </button>
             </div>
@@ -335,31 +484,37 @@ export function VideoExportModal({
         {/* ── Complete State ── */}
         {state === 'complete' && (
           <>
-            <p style={{ fontSize: 14, margin: '0 0 8px 0', color: '#2d6a10' }}>Export complete!</p>
-            <p style={{ fontSize: 13, color: '#5a4a2a', margin: '0 0 4px 0' }}>
+            <p style={{ fontSize: 14, margin: '0 0 8px 0', color: palette.success }}>
+              Export complete!
+            </p>
+            <p style={{ fontSize: 13, color: palette.label, margin: '0 0 4px 0' }}>
               File size: {(fileSize / (1024 * 1024)).toFixed(1)} MB
             </p>
-            {audioIncluded ? (
-              <p style={{ fontSize: 12, color: '#2d6a10', margin: '0 0 4px 0' }}>
+            {completedOutputFormat === 'gif' ? (
+              <p style={{ fontSize: 12, color: palette.muted, margin: '0 0 4px 0' }}>
+                Animated GIF does not include audio.
+              </p>
+            ) : audioIncluded ? (
+              <p style={{ fontSize: 12, color: palette.success, margin: '0 0 4px 0' }}>
                 Audio included ✓
               </p>
             ) : (
-              <p style={{ fontSize: 12, color: '#8a7a5a', margin: '0 0 4px 0' }}>
+              <p style={{ fontSize: 12, color: palette.muted, margin: '0 0 4px 0' }}>
                 Video only{audioSkippedReason ? ` — ${audioSkippedReason}` : ''}
               </p>
             )}
             {backend && (
-              <p style={{ fontSize: 12, color: '#8a7a5a', margin: '0 0 12px 0' }}>
-                Encoded with WebCodecs (H.264)
+              <p style={{ fontSize: 12, color: palette.muted, margin: '0 0 12px 0' }}>
+                Encoded with {encoderLabel(completedOutputFormat, backend)}
               </p>
             )}
 
             <div style={footerStyle}>
-              <button style={btnSecondary} onClick={handleClose}>
+              <button style={themedSecondaryButtonStyle} onClick={handleClose}>
                 Close
               </button>
-              <button style={btnPrimary} onClick={handleDownload}>
-                Download MP4
+              <button style={themedPrimaryButtonStyle} onClick={handleDownload}>
+                Download {completedOutputFormat.toUpperCase()}
               </button>
             </div>
           </>
@@ -368,11 +523,13 @@ export function VideoExportModal({
         {/* ── Error State ── */}
         {state === 'error' && (
           <>
-            <p style={{ fontSize: 14, margin: '0 0 8px 0', color: '#a03020' }}>Export failed</p>
+            <p style={{ fontSize: 14, margin: '0 0 8px 0', color: palette.danger }}>
+              Export failed
+            </p>
             <p
               style={{
                 fontSize: 13,
-                color: '#5a4a2a',
+                color: palette.label,
                 margin: '0 0 12px 0',
                 wordBreak: 'break-word',
               }}
@@ -381,11 +538,11 @@ export function VideoExportModal({
             </p>
 
             <div style={footerStyle}>
-              <button style={btnSecondary} onClick={handleClose}>
+              <button style={themedSecondaryButtonStyle} onClick={handleClose}>
                 Close
               </button>
-              <button style={btnPrimary} onClick={handleExport}>
-                Retry
+              <button style={themedPrimaryButtonStyle} onClick={handleExport}>
+                Retry {outputFormat === 'gif' ? 'GIF' : 'video'}
               </button>
             </div>
           </>

package/src/__tests__/gifTranscode.test.ts

@@ -0,0 +1,118 @@
+import { beforeEach, describe, expect, it, vi } from 'vitest';
+
+const ffmpegState = vi.hoisted(() => ({
+  exitCode: 0,
+  loadConfig: undefined as unknown,
+  writes: [] as Array<[string, Uint8Array]>,
+  execArgs: [] as string[],
+  readPath: '',
+  execPromise: null as Promise<number> | null,
+  terminate: vi.fn(),
+}));
+
+vi.mock('@ffmpeg/ffmpeg', () => ({
+  FFmpeg: class {
+    async load(config?: unknown): Promise<boolean> {
+      ffmpegState.loadConfig = config;
+      return true;
+    }
+    async writeFile(path: string, data: Uint8Array): Promise<void> {
+      ffmpegState.writes.push([path, data]);
+    }
+    async exec(args: string[]): Promise<number> {
+      ffmpegState.execArgs = args;
+      return ffmpegState.execPromise ?? ffmpegState.exitCode;
+    }
+    async readFile(path: string): Promise<Uint8Array> {
+      ffmpegState.readPath = path;
+      return new Uint8Array([0x47, 0x49, 0x46, 0x38, 0x39, 0x61]);
+    }
+    terminate(): void {
+      ffmpegState.terminate();
+    }
+  },
+}));
+
+import { buildGifFfmpegArgs, transcodeMp4ToGifWithFfmpegWasm } from '../gifTranscode.js';
+
+describe('GIF ffmpeg.wasm transcode', () => {
+  beforeEach(() => {
+    ffmpegState.exitCode = 0;
+    ffmpegState.loadConfig = undefined;
+    ffmpegState.writes = [];
+    ffmpegState.execArgs = [];
+    ffmpegState.readPath = '';
+    ffmpegState.execPromise = null;
+    ffmpegState.terminate.mockClear();
+  });
+
+  it('builds a looping palette-based GIF command from the shared argument builder', () => {
+    const args = buildGifFfmpegArgs({ width: 960, height: 540, loop: 0 });
+    expect(args.slice(0, 3)).toEqual(['-y', '-i', 'video.mp4']);
+    expect(args).toContain('-filter_complex');
+    expect(args.join(' ')).toContain('palettegen=stats_mode=diff');
+    expect(args.join(' ')).toContain('paletteuse=dither=sierra2_4a:diff_mode=rectangle');
+    expect(args.slice(-3)).toEqual(['-loop', '0', 'out.gif']);
+  });
+
+  it('writes the MP4 intermediate, reads GIF89a bytes, and threads runtime URLs', async () => {
+    const input = new Uint8Array([1, 2, 3]);
+    const output = await transcodeMp4ToGifWithFfmpegWasm(
+      input,
+      { width: 960, height: 540 },
+      {
+        coreURL: '/vendor/core.js',
+        wasmURL: '/vendor/core.wasm',
+        classWorkerURL: '/vendor/class-worker.js',
+      },
+    );
+
+    expect(ffmpegState.loadConfig).toEqual({
+      coreURL: '/vendor/core.js',
+      wasmURL: '/vendor/core.wasm',
+      classWorkerURL: '/vendor/class-worker.js',
+    });
+    expect(ffmpegState.writes).toEqual([['video.mp4', input]]);
+    expect(ffmpegState.execArgs.at(-1)).toBe('out.gif');
+    expect(ffmpegState.readPath).toBe('out.gif');
+    expect(new TextDecoder().decode(output)).toBe('GIF89a');
+    expect(ffmpegState.terminate).toHaveBeenCalledOnce();
+  });
+
+  it('reports ffmpeg failures and still terminates the runtime', async () => {
+    ffmpegState.exitCode = 7;
+    await expect(
+      transcodeMp4ToGifWithFfmpegWasm(new Uint8Array([1]), { width: 960, height: 540 }),
+    ).rejects.toThrow('GIF transcode failed with exit code 7');
+    expect(ffmpegState.terminate).toHaveBeenCalledOnce();
+  });
+
+  it('rejects an empty MP4 before allocating the runtime', async () => {
+    await expect(
+      transcodeMp4ToGifWithFfmpegWasm(new Uint8Array(), { width: 960, height: 540 }),
+    ).rejects.toThrow('empty MP4');
+    expect(ffmpegState.terminate).not.toHaveBeenCalled();
+  });
+
+  it('terminates an in-progress palette transcode when aborted', async () => {
+    let finishExec!: (exitCode: number) => void;
+    ffmpegState.execPromise = new Promise<number>((resolve) => {
+      finishExec = resolve;
+    });
+    const controller = new AbortController();
+    const pending = transcodeMp4ToGifWithFfmpegWasm(
+      new Uint8Array([1]),
+      { width: 960, height: 540 },
+      undefined,
+      controller.signal,
+    );
+
+    await vi.waitFor(() => expect(ffmpegState.execArgs).not.toEqual([]));
+    controller.abort();
+    expect(ffmpegState.terminate).toHaveBeenCalledOnce();
+    finishExec(0);
+
+    await expect(pending).rejects.toMatchObject({ name: 'AbortError' });
+    expect(ffmpegState.terminate).toHaveBeenCalledOnce();
+  });
+});