fundus 0.8.0 → 0.9.0

package/dist/runtime/chroma-key-video-lifecycle.js

@@ -0,0 +1,324 @@
+const HAVE_CURRENT_DATA = 2;
+function copyChromaKey(parameters) {
+    return {
+        ...parameters,
+        keyColor: [...parameters.keyColor]
+    };
+}
+/** Internal media state machine for a single, stable video element. */
+export class ChromaKeyVideoLifecycle {
+    #video;
+    #renderer;
+    #active = null;
+    #sourceGeneration = 0;
+    #playing = false;
+    #disposed = false;
+    #loopGeneration = 0;
+    #loopRunning = false;
+    #pendingFrame = null;
+    constructor(video, renderer) {
+        this.#video = video;
+        this.#renderer = renderer;
+        video.addEventListener('play', this.#handlePlay);
+        video.addEventListener('pause', this.#handleStop);
+        video.addEventListener('ended', this.#handleStop);
+        video.addEventListener('seeked', this.#handleSeeked);
+        video.addEventListener('loadeddata', this.#handleLoadedData);
+        video.addEventListener('error', this.#handleError);
+    }
+    switchSource(snapshot) {
+        if (this.#disposed)
+            return;
+        const previous = this.#active;
+        if (previous &&
+            (previous.status === 'loading' || previous.status === 'settled') &&
+            previous.rawVideoUrl === snapshot.rawVideoUrl &&
+            previous.maskUrl === snapshot.maskUrl) {
+            return;
+        }
+        this.#stopLoop();
+        this.#invalidatePlayRequest(previous);
+        const active = {
+            generation: ++this.#sourceGeneration,
+            status: 'loading',
+            rawVideoUrl: snapshot.rawVideoUrl,
+            normalizedVideoUrl: snapshot.resolvedVideoUrl,
+            maskUrl: snapshot.maskUrl,
+            chromaKey: copyChromaKey(snapshot.chromaKey),
+            mediaSettled: false,
+            maskSettled: !snapshot.maskUrl,
+            playRequestToken: 0,
+            playRequestPending: false,
+            playRejectedForCurrentIntent: false
+        };
+        this.#active = active;
+        this.#video.pause();
+        this.#renderer.setMask(null);
+        this.#renderer.clear();
+        this.#video.src = snapshot.resolvedVideoUrl;
+        // Reading the reflected property gives the browser-normalized absolute URL.
+        active.normalizedVideoUrl = this.#video.src;
+        this.#video.load();
+        this.#primeMedia();
+        if (snapshot.maskUrl)
+            this.#loadMask(active, snapshot.maskUrl);
+    }
+    setPlaying(playing) {
+        if (this.#disposed)
+            return;
+        const changed = this.#playing !== playing;
+        this.#playing = playing;
+        const active = this.#active;
+        if (!playing) {
+            this.#invalidatePlayRequest(active);
+            this.#stopLoop();
+            // Keep the muted loading warm-up alive until the browser has produced a
+            // decodable frame. Some engines treat preload="auto" as metadata-only and
+            // do not reach loadeddata until playback has started.
+            if (!active || active.status !== 'loading' || active.mediaSettled) {
+                this.#video.pause();
+            }
+            return;
+        }
+        if (changed && active)
+            active.playRejectedForCurrentIntent = false;
+        this.#requestPlayback(active);
+    }
+    setChromaKey(parameters) {
+        if (this.#disposed)
+            return;
+        const active = this.#active;
+        if (!active || active.status === 'failed' || active.status === 'disposed')
+            return;
+        active.chromaKey = copyChromaKey(parameters);
+        if (active.status === 'settled' && this.#video.paused && this.#isCurrentResource(active)) {
+            this.#draw(active);
+        }
+    }
+    dispose() {
+        if (this.#disposed)
+            return;
+        this.#disposed = true;
+        this.#sourceGeneration++;
+        const active = this.#active;
+        this.#invalidatePlayRequest(active);
+        this.#stopLoop();
+        if (active)
+            active.status = 'disposed';
+        this.#active = null;
+        this.#video.removeEventListener('play', this.#handlePlay);
+        this.#video.removeEventListener('pause', this.#handleStop);
+        this.#video.removeEventListener('ended', this.#handleStop);
+        this.#video.removeEventListener('seeked', this.#handleSeeked);
+        this.#video.removeEventListener('loadeddata', this.#handleLoadedData);
+        this.#video.removeEventListener('error', this.#handleError);
+        this.#video.pause();
+    }
+    #loadMask(active, maskUrl) {
+        const image = new Image();
+        image.src = maskUrl;
+        image
+            .decode()
+            .then(() => {
+            if (!this.#isActive(active) || active.status !== 'loading')
+                return;
+            this.#renderer.setMask(image);
+            active.maskSettled = true;
+            this.#settleIfReady(active);
+        })
+            .catch(() => {
+            if (!this.#isActive(active) || active.status !== 'loading')
+                return;
+            console.warn(`Failed to load chroma-key mask "${maskUrl}".`);
+            active.maskSettled = true;
+            this.#settleIfReady(active);
+        });
+    }
+    #primeMedia() {
+        let request;
+        try {
+            request = this.#video.play();
+        }
+        catch {
+            return;
+        }
+        Promise.resolve(request).catch(() => {
+            // Muted warm-up is best-effort. If preload still reaches loadeddata, the
+            // normal settled playback request below gets its own retry state.
+        });
+    }
+    #handleLoadedData = () => {
+        const active = this.#active;
+        if (!active || active.status !== 'loading')
+            return;
+        if (!this.#isCurrentResource(active))
+            return;
+        active.mediaSettled = true;
+        if (!this.#playing)
+            this.#video.pause();
+        this.#settleIfReady(active);
+    };
+    #handleError = () => {
+        const active = this.#active;
+        if (!active || active.status === 'failed' || active.status === 'disposed')
+            return;
+        active.status = 'failed';
+        this.#invalidatePlayRequest(active);
+        this.#stopLoop();
+        this.#video.pause();
+        this.#renderer.clear();
+    };
+    #handlePlay = () => {
+        const active = this.#active;
+        // Loading playback only warms the hidden media element up to loadeddata.
+        // Drawing and the frame loop remain gated on video + mask settlement.
+        if (active?.status === 'loading')
+            return;
+        if (!active || active.status !== 'settled') {
+            this.#stopLoop();
+            this.#video.pause();
+            return;
+        }
+        active.playRejectedForCurrentIntent = false;
+        if (!this.#video.paused)
+            this.#startLoop(active);
+    };
+    #handleStop = () => {
+        const active = this.#active;
+        this.#stopLoop();
+        if (active?.status === 'settled')
+            this.#draw(active);
+    };
+    #handleSeeked = () => {
+        const active = this.#active;
+        if (!active || active.status !== 'settled' || !this.#video.paused)
+            return;
+        this.#draw(active);
+    };
+    #settleIfReady(active) {
+        if (!this.#isActive(active) ||
+            active.status !== 'loading' ||
+            !active.mediaSettled ||
+            !active.maskSettled) {
+            return;
+        }
+        if (!this.#isCurrentResource(active)) {
+            active.mediaSettled = false;
+            return;
+        }
+        if (!this.#playing && !this.#video.paused)
+            this.#video.pause();
+        active.status = 'settled';
+        this.#draw(active);
+        if (this.#playing && !this.#video.paused)
+            this.#startLoop(active);
+        else
+            this.#requestPlayback(active);
+    }
+    #draw(active) {
+        if (!this.#isActive(active) ||
+            active.status !== 'settled' ||
+            !this.#isCurrentResource(active)) {
+            return;
+        }
+        this.#renderer.draw(this.#video, active.chromaKey);
+    }
+    #isCurrentResource(active) {
+        return (this.#video.readyState >= HAVE_CURRENT_DATA &&
+            this.#video.currentSrc === active.normalizedVideoUrl);
+    }
+    #isActive(active) {
+        return (!this.#disposed && this.#active === active && active.generation === this.#sourceGeneration);
+    }
+    #requestPlayback(active) {
+        if (!active ||
+            !this.#isActive(active) ||
+            active.status !== 'settled' ||
+            !this.#playing ||
+            !this.#video.paused ||
+            active.playRequestPending ||
+            active.playRejectedForCurrentIntent) {
+            return;
+        }
+        const requestToken = ++active.playRequestToken;
+        active.playRequestPending = true;
+        let request;
+        try {
+            request = this.#video.play();
+        }
+        catch {
+            this.#finishPlayRequest(active, requestToken, false);
+            return;
+        }
+        Promise.resolve(request).then(() => this.#finishPlayRequest(active, requestToken, true), () => this.#finishPlayRequest(active, requestToken, false));
+    }
+    #finishPlayRequest(active, requestToken, succeeded) {
+        if (!this.#isActive(active) || active.playRequestToken !== requestToken)
+            return;
+        active.playRequestPending = false;
+        active.playRejectedForCurrentIntent = !succeeded;
+    }
+    #invalidatePlayRequest(active) {
+        if (!active)
+            return;
+        active.playRequestToken++;
+        active.playRequestPending = false;
+    }
+    #startLoop(active) {
+        if (this.#loopRunning ||
+            !this.#isActive(active) ||
+            active.status !== 'settled' ||
+            this.#video.paused) {
+            return;
+        }
+        this.#loopRunning = true;
+        this.#loopGeneration++;
+        this.#scheduleNextFrame(active, this.#loopGeneration);
+    }
+    #scheduleNextFrame(active, loopGeneration) {
+        const sourceGeneration = active.generation;
+        let handle = 0;
+        const callback = () => {
+            const pending = this.#pendingFrame;
+            if (!pending ||
+                pending.generation !== loopGeneration ||
+                pending.handle !== handle ||
+                this.#loopGeneration !== loopGeneration ||
+                !this.#loopRunning ||
+                !this.#isActive(active) ||
+                active.generation !== sourceGeneration ||
+                active.status !== 'settled' ||
+                this.#video.paused) {
+                return;
+            }
+            this.#pendingFrame = null;
+            this.#draw(active);
+            if (this.#loopRunning &&
+                this.#loopGeneration === loopGeneration &&
+                this.#isActive(active) &&
+                !this.#video.paused) {
+                this.#scheduleNextFrame(active, loopGeneration);
+            }
+        };
+        if (this.#video.requestVideoFrameCallback) {
+            handle = this.#video.requestVideoFrameCallback(callback);
+            this.#pendingFrame = { generation: loopGeneration, kind: 'rvfc', handle };
+        }
+        else {
+            handle = requestAnimationFrame(callback);
+            this.#pendingFrame = { generation: loopGeneration, kind: 'raf', handle };
+        }
+    }
+    #stopLoop() {
+        this.#loopGeneration++;
+        this.#loopRunning = false;
+        const pending = this.#pendingFrame;
+        this.#pendingFrame = null;
+        if (!pending)
+            return;
+        if (pending.kind === 'rvfc')
+            this.#video.cancelVideoFrameCallback?.(pending.handle);
+        else
+            cancelAnimationFrame(pending.handle);
+    }
+}

package/dist/runtime/components/ChromaKeyVideo.svelte

@@ -1,11 +1,9 @@
-<!--
-	Plays a greenscreen video keyed onto a transparent canvas. Video and mask
-	sources are read at mount; keying parameters are read for every frame.
--->
+<!-- Plays a greenscreen video whose source, mask, playback and keying can change in place. -->
 <script lang="ts">
-	import { onMount, type Snippet } from 'svelte';
-	import type { ChromaKeyVideoManifestEntry } from '../../core/index.js';
+	import { onMount, untrack, type Snippet } from 'svelte';
+	import type { ChromaKeyParameters, ChromaKeyVideoManifestEntry } from '../../core/index.js';
 	import { ChromaKeyGl } from '../chroma-key-gl.js';
+	import { ChromaKeyVideoLifecycle } from '../chroma-key-video-lifecycle.js';
 	import { resolveRetainedSource } from '../preload-registry.js';
 
 	interface Props {
@@ -38,57 +36,10 @@
 	let webglUnavailable = $state(false);
 
 	let renderer: ChromaKeyGl | null = null;
+	let lifecycle = $state.raw<ChromaKeyVideoLifecycle | null>(null);
 
-	// Render loop: requestVideoFrameCallback fires once per *presented* video frame
-	// (and never while paused), so upload + draw happen only when there is a new
-	// frame — rAF is the fallback for browsers without it.
-	let frameHandle = 0;
-	let loopRunning = false;
-
-	function drawCurrentFrame() {
-		const video = videoElement;
-		if (renderer && video && video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA) {
-			renderer.draw(video, src.chromaKey);
-		}
-	}
-
-	function onFrame() {
-		drawCurrentFrame();
-		if (loopRunning) scheduleNextFrame();
-	}
-
-	function scheduleNextFrame() {
-		const video = videoElement!;
-		frameHandle = video.requestVideoFrameCallback
-			? video.requestVideoFrameCallback(onFrame)
-			: requestAnimationFrame(onFrame);
-	}
-
-	function startLoop() {
-		if (loopRunning) return;
-		loopRunning = true;
-		scheduleNextFrame();
-	}
-
-	function stopLoop() {
-		if (!loopRunning) return;
-		loopRunning = false;
-		const video = videoElement;
-		if (video?.cancelVideoFrameCallback) video.cancelVideoFrameCallback(frameHandle);
-		else cancelAnimationFrame(frameHandle);
-	}
-
-	// Playback control only starts/stops the element; the render loop follows the
-	// element's actual `play`/`pause` events (see the listener effect below), so it
-	// stops correctly no matter who pauses — the `playing` prop OR a host driving
-	// the bound element directly (e.g. the editor's PlaybackControls scrubber).
-	function resumePlayback() {
-		if (!playing || webglUnavailable) return;
-		videoElement?.play().catch(() => {});
-	}
-
-	function pausePlayback() {
-		videoElement?.pause();
+	function snapshotChromaKey(key: ChromaKeyParameters): ChromaKeyParameters {
+		return { ...key, keyColor: [...key.keyColor] };
 	}
 
 	onMount(() => {
@@ -98,83 +49,47 @@
 			return;
 		}
 		const activeRenderer = renderer;
-
-		const maskSource = src.mask?.src;
-		if (maskSource) {
-			const image = new Image();
-			image.src = maskSource;
-			image
-				.decode()
-				.then(() => {
-					if (renderer === activeRenderer) activeRenderer.setMask(image);
-				})
-				.catch(() => {
-					console.warn(`Failed to load chroma-key mask "${maskSource}".`);
-				});
-		}
+		const activeLifecycle = new ChromaKeyVideoLifecycle(videoElement!, activeRenderer);
+		lifecycle = activeLifecycle;
 
 		return () => {
-			stopLoop();
+			activeLifecycle.dispose();
+			if (lifecycle === activeLifecycle) lifecycle = null;
 			activeRenderer.dispose();
-			renderer = null;
+			if (renderer === activeRenderer) renderer = null;
 		};
 	});
 
-	// The render loop tracks the element's real playback state: play starts it,
-	// pause/ended stop it (so a paused instance costs nothing, even on the rAF
-	// fallback that fires regardless of playback). A seek while paused repaints the
-	// single new frame so scrubbing updates the canvas without running the loop.
 	$effect(() => {
-		const video = videoElement;
-		if (!video) return;
-		function onPlay() {
-			startLoop();
-		}
-		function onStop() {
-			stopLoop();
-			drawCurrentFrame();
-		}
-		function onSeeked() {
-			if (!loopRunning) drawCurrentFrame();
-		}
-		video.addEventListener('play', onPlay);
-		video.addEventListener('pause', onStop);
-		video.addEventListener('ended', onStop);
-		video.addEventListener('seeked', onSeeked);
-		return () => {
-			video.removeEventListener('play', onPlay);
-			video.removeEventListener('pause', onStop);
-			video.removeEventListener('ended', onStop);
-			video.removeEventListener('seeked', onSeeked);
-		};
+		const activeLifecycle = lifecycle;
+		const entry = src;
+		const rawVideoUrl = entry.src;
+		const maskUrl = entry.mask?.src;
+		if (!activeLifecycle) return;
+		activeLifecycle.switchSource({
+			rawVideoUrl,
+			resolvedVideoUrl: resolveRetainedSource(rawVideoUrl),
+			maskUrl,
+			chromaKey: untrack(() => snapshotChromaKey(entry.chromaKey))
+		});
 	});
 
-	// Drive playback from `playing` (runs after onMount, so the renderer exists —
-	// or WebGL is known to be unavailable and nothing starts).
 	$effect(() => {
-		if (webglUnavailable) return;
-		if (playing) resumePlayback();
-		else pausePlayback();
+		lifecycle?.setPlaying(playing);
 	});
 
-	// Retune a still frame live: the draw loop only runs during playback, so a
-	// keying change while paused (the editor tuning a bubble on a still frame)
-	// would otherwise leave the canvas stale until the next play/seek. Reading the
-	// keying fields here makes this a reactive dependency; when the loop is already
-	// running its per-frame draw handles it, so only repaint when it isn't.
 	$effect(() => {
 		const key = src.chromaKey;
-		// Touch every keying field so the effect re-runs on any of them.
-		void [
-			key.keyColor,
-			key.colorCutoff,
-			key.colorFeathering,
-			key.maskFeathering,
-			key.sharpening,
-			key.despill,
-			key.despillLuminanceAdd
-		];
-		if (!loopRunning) drawCurrentFrame();
+		const snapshot: ChromaKeyParameters = {
+			keyColor: [key.keyColor[0], key.keyColor[1], key.keyColor[2]],
+			colorCutoff: key.colorCutoff,
+			colorFeathering: key.colorFeathering,
+			maskFeathering: key.maskFeathering,
+			sharpening: key.sharpening,
+			despill: key.despill,
+			despillLuminanceAdd: key.despillLuminanceAdd
+		};
+		lifecycle?.setChromaKey(snapshot);
 	});
 </script>
 
@@ -187,14 +102,7 @@
 		{/if}
 	{:else}
 		<canvas bind:this={canvasElement}></canvas>
-		<video
-			bind:this={videoElement}
-			src={resolveRetainedSource(src.src)}
-			{loop}
-			muted
-			playsinline
-			preload="auto"
-		></video>
+		<video bind:this={videoElement} {loop} muted playsinline preload="auto"></video>
 	{/if}
 </div>
 

package/dist/server/config-loader.d.ts

@@ -1,10 +1,10 @@
-import type { AudioPreset, FigmaImportScale, ImagePreset, VideoPreset } from '../core/index.js';
+import type { AudioPreset, FigmaImportScale, ImagePreset, ResolvedVideoPreset } from '../core/index.js';
 import type { ServerPluginRegistry } from './plugins/contract.js';
 export interface ResolvedPresetPluginConfig {
     presets: Record<string, ImagePreset>;
 }
 export interface ResolvedVideoPluginConfig {
-    presets: Record<string, VideoPreset>;
+    presets: Record<string, ResolvedVideoPreset>;
     /** Absolute path of the ffmpeg binary to use; null = the bundled `ffmpeg-static`. */
     ffmpegPath: string | null;
     /** Absolute path of the ffprobe binary to use; null = the bundled `ffprobe-static`. */

package/dist/server/operations.js

@@ -767,8 +767,12 @@ export class FundusOperations {
         // Per plugin type, the available preset names — straight off the registry
         // Chroma-key-video shares the video preset namespace via its plugin.
         const presetNames = {};
+        const presetCapabilities = {};
         for (const [type, plugin] of Object.entries(this.#registry)) {
-            presetNames[type] = Object.keys(plugin.presets(this.#config)).sort();
+            const presets = plugin.presets(this.#config);
+            const names = Object.keys(presets).sort();
+            presetNames[type] = names;
+            presetCapabilities[type] = Object.fromEntries(names.map((name) => [name, plugin.presetCapabilities?.(presets[name]) ?? {}]));
         }
         const rawIngestionQueue = this.#buildRawIngestionQueue(library, classification);
         return {
@@ -778,6 +782,7 @@ export class FundusOperations {
             importDefaults: { figma: { scale: this.#config.import.figma.defaults.scale } },
             issues,
             presetNames,
+            presetCapabilities,
             manifestMemberships,
             manifestDeliveredBytes,
             rawIngestionQueue

package/dist/server/plugins/chroma-key-video.d.ts

@@ -4,6 +4,6 @@
  * mask/fallback references never reach ffmpeg, they are entry-only data
  * (the descriptor's `processingParameters` keeps them out of the job hash).
  */
-import { type ChromaKeyVideoParameters, type VideoPreset } from '../../core/index.js';
+import { type ChromaKeyVideoParameters, type ResolvedVideoPreset } from '../../core/index.js';
 import { type ServerAssetTypePlugin } from './contract.js';
-export declare const chromaKeyVideoServerPlugin: ServerAssetTypePlugin<ChromaKeyVideoParameters, VideoPreset>;
+export declare const chromaKeyVideoServerPlugin: ServerAssetTypePlugin<ChromaKeyVideoParameters, ResolvedVideoPreset>;

package/dist/server/plugins/chroma-key-video.js

@@ -4,11 +4,11 @@
  * mask/fallback references never reach ffmpeg, they are entry-only data
  * (the descriptor's `processingParameters` keeps them out of the job hash).
  */
-import { chromaKeyVideoPlugin } from '../../core/index.js';
+import { chromaKeyVideoPlugin, isCustomFfmpegVideoPreset } from '../../core/index.js';
 import { probeMedia } from '../processing/media-probe.js';
 import { processVideoFile } from '../processing/video-processing.js';
-import { requireProxyField, resolveNamedPreset } from './contract.js';
-import { videoConfigDefinition } from './video.js';
+import { requireProxyField } from './contract.js';
+import { resolveVideoPreset, videoConfigDefinition } from './video.js';
 export const chromaKeyVideoServerPlugin = {
     descriptor: chromaKeyVideoPlugin,
     configDefinitions: [videoConfigDefinition],
@@ -16,7 +16,8 @@ export const chromaKeyVideoServerPlugin = {
     // the preset map, and the resolution label are video's.
     pluginConfig: (config) => config.plugins.video,
     presets: (config) => config.plugins.video.presets,
-    resolvePreset: (parameters, config) => resolveNamedPreset('video', parameters.preset, config.plugins.video.presets),
+    presetCapabilities: (preset) => ({ maxWidth: !isCustomFfmpegVideoPreset(preset) }),
+    resolvePreset: resolveVideoPreset,
     proxyExtension: (preset) => preset.container,
     process: (job) => processVideoFile({
         sourcePath: job.sourcePath,

package/dist/server/plugins/contract.d.ts

@@ -6,7 +6,7 @@
  * (processor, codegen, check, store, operations) are type-agnostic and consult
  * only the projected server registry (plugins.ts).
  */
-import type { AssetTypePluginDescriptor, ManifestEntryData } from '../../core/index.js';
+import type { AssetTypePluginDescriptor, ManifestEntryData, PresetCapabilitiesDto } from '../../core/index.js';
 import type { ResolvedFundusConfig } from '../config-loader.js';
 /** Output metadata of one processed proxy file (absent fields don't apply). */
 export interface ProxyOutputInfo {
@@ -72,6 +72,8 @@ export interface ServerAssetTypePlugin<TParameters = unknown, TPreset = unknown>
     pluginConfig(config: ResolvedFundusConfig): unknown;
     /** The merged (built-in + host) named presets available to this type. */
     presets(config: ResolvedFundusConfig): Record<string, TPreset>;
+    /** Optional editor behavior exposed for each resolved preset. */
+    presetCapabilities?(preset: TPreset): PresetCapabilitiesDto;
     /**
      * The resolved settings of the preset the validated parameters name —
      * these feed the job hash (a preset edit under an unchanged name

package/dist/server/plugins/video.d.ts

@@ -1,7 +1,9 @@
 /**
  * Video plugin (server part): one ffmpeg transcode per preset.
  */
-import { type VideoParameters, type VideoPreset } from '../../core/index.js';
+import { type VideoParameters, type ResolvedVideoPreset } from '../../core/index.js';
+import type { ResolvedFundusConfig } from '../config-loader.js';
 import { type ServerAssetTypePlugin, type ServerPluginConfigDefinition } from './contract.js';
 export declare const videoConfigDefinition: ServerPluginConfigDefinition;
-export declare const videoServerPlugin: ServerAssetTypePlugin<VideoParameters, VideoPreset>;
+export declare function resolveVideoPreset(parameters: VideoParameters, config: ResolvedFundusConfig): ResolvedVideoPreset;
+export declare const videoServerPlugin: ServerAssetTypePlugin<VideoParameters, ResolvedVideoPreset>;

package/dist/server/plugins/video.js

@@ -1,7 +1,7 @@
 /**
  * Video plugin (server part): one ffmpeg transcode per preset.
  */
-import { VIDEO_BUILT_IN_PRESETS, validateVideoPreset, videoPlugin } from '../../core/index.js';
+import { VIDEO_BUILT_IN_PRESETS, isCustomFfmpegVideoPreset, validateVideoPreset, videoPlugin } from '../../core/index.js';
 import { probeMedia } from '../processing/media-probe.js';
 import { processVideoFile } from '../processing/video-processing.js';
 import { binaryPathOverride, mergePresets } from './config.js';
@@ -29,12 +29,20 @@ export const videoConfigDefinition = {
         })
     })
 };
+export function resolveVideoPreset(parameters, config) {
+    const preset = resolveNamedPreset('video', parameters.preset, config.plugins.video.presets);
+    if (isCustomFfmpegVideoPreset(preset) && parameters.maxWidth !== undefined) {
+        throw new Error(`Video preset "${parameters.preset}" uses "ffmpegArgs" and cannot be combined with "maxWidth".`);
+    }
+    return preset;
+}
 export const videoServerPlugin = {
     descriptor: videoPlugin,
     configDefinitions: [videoConfigDefinition],
     pluginConfig: (config) => config.plugins.video,
     presets: (config) => config.plugins.video.presets,
-    resolvePreset: (parameters, config) => resolveNamedPreset('video', parameters.preset, config.plugins.video.presets),
+    presetCapabilities: (preset) => ({ maxWidth: !isCustomFfmpegVideoPreset(preset) }),
+    resolvePreset: resolveVideoPreset,
     proxyExtension: (preset) => preset.container,
     process: (job) => processVideoFile({
         sourcePath: job.sourcePath,