remotion 4.0.438 → 4.0.440

package/dist/cjs/Composition.js

@@ -93,13 +93,6 @@ const InnerComposition = ({ width, height, fps, durationInFrames, id, defaultPro
         registerComposition,
         unregisterComposition,
     ]);
-    (0, react_1.useEffect)(() => {
-        window.dispatchEvent(new CustomEvent(ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY, {
-            detail: {
-                resetUnsaved: id,
-            },
-        }));
-    }, [defaultProps, id]);
     const resolved = (0, ResolveCompositionConfig_js_1.useResolvedVideoConfig)(id);
     if (environment.isStudio &&
         video &&

package/dist/cjs/CompositionManager.d.ts

@@ -39,6 +39,9 @@ type EnhancedTSequenceData = {
     doesVolumeChange: boolean;
     startMediaFrom: number;
     playbackRate: number;
+} | {
+    type: 'image';
+    src: string;
 };
 export type LoopDisplay = {
     numberOfTimes: number;

package/dist/cjs/CompositionManagerContext.d.ts

@@ -28,7 +28,6 @@ export type CompositionManagerSetters = {
     registerFolder: (name: string, parent: string | null, nonce: NonceHistory) => void;
     unregisterFolder: (name: string, parent: string | null) => void;
     setCanvasContent: React.Dispatch<React.SetStateAction<CanvasContent | null>>;
-    updateCompositionDefaultProps: (id: string, newDefaultProps: Record<string, unknown>) => void;
     onlyRenderComposition: string | null;
 };
 export type CompositionManagerContext = {

package/dist/cjs/CompositionManagerContext.js

@@ -14,6 +14,5 @@ exports.CompositionSetters = (0, react_1.createContext)({
     registerFolder: () => undefined,
     unregisterFolder: () => undefined,
     setCanvasContent: () => undefined,
-    updateCompositionDefaultProps: () => undefined,
     onlyRenderComposition: null,
 });

package/dist/cjs/CompositionManagerProvider.js

@@ -53,20 +53,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             getCompositions: () => currentcompositionsRef.current,
         };
     }, []);
-    const updateCompositionDefaultProps = (0, react_1.useCallback)((id, newDefaultProps) => {
-        setCompositions((comps) => {
-            const updated = comps.map((c) => {
-                if (c.id === id) {
-                    return {
-                        ...c,
-                        defaultProps: newDefaultProps,
-                    };
-                }
-                return c;
-            });
-            return updated;
-        });
-    }, []);
     const compositionManagerSetters = (0, react_1.useMemo)(() => {
         return {
             registerComposition,
@@ -74,7 +60,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
             registerFolder,
             unregisterFolder,
             setCanvasContent,
-            updateCompositionDefaultProps,
             onlyRenderComposition,
         };
     }, [
@@ -82,7 +67,6 @@ const CompositionManagerProvider = ({ children, onlyRenderComposition, currentCo
         registerFolder,
         unregisterComposition,
         unregisterFolder,
-        updateCompositionDefaultProps,
         onlyRenderComposition,
     ]);
     const compositionManagerContextValue = (0, react_1.useMemo)(() => {

package/dist/cjs/EditorProps.d.ts

@@ -8,13 +8,8 @@ export type EditorPropsContextType = {
         defaultProps: Record<string, unknown>;
         newProps: Record<string, unknown> | ((oldProps: Record<string, unknown>) => Record<string, unknown>);
     }) => void;
-    resetUnsaved: (compositionId: string) => void;
 };
 export declare const EditorPropsContext: React.Context<EditorPropsContextType>;
-export declare const editorPropsProviderRef: React.RefObject<{
-    getProps: () => Props;
-    setProps: React.Dispatch<React.SetStateAction<Props>>;
-} | null>;
 export declare const timeValueRef: React.RefObject<{
     goToFrame: () => void;
     seek: (newFrame: number) => void;

package/dist/cjs/EditorProps.js

@@ -33,7 +33,7 @@ var __importStar = (this && this.__importStar) || (function () {
     };
 })();
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.EditorPropsProvider = exports.timeValueRef = exports.editorPropsProviderRef = exports.EditorPropsContext = void 0;
+exports.EditorPropsProvider = exports.timeValueRef = exports.EditorPropsContext = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 exports.EditorPropsContext = (0, react_1.createContext)({
@@ -41,11 +41,7 @@ exports.EditorPropsContext = (0, react_1.createContext)({
     updateProps: () => {
         throw new Error('Not implemented');
     },
-    resetUnsaved: () => {
-        throw new Error('Not implemented');
-    },
 });
-exports.editorPropsProviderRef = react_1.default.createRef();
 exports.timeValueRef = react_1.default.createRef();
 const EditorPropsProvider = ({ children }) => {
     const [props, setProps] = react_1.default.useState({});
@@ -60,25 +56,9 @@ const EditorPropsProvider = ({ children }) => {
             };
         });
     }, []);
-    const resetUnsaved = (0, react_1.useCallback)((compositionId) => {
-        setProps((prev) => {
-            if (prev[compositionId]) {
-                const newProps = { ...prev };
-                delete newProps[compositionId];
-                return newProps;
-            }
-            return prev;
-        });
-    }, []);
-    (0, react_1.useImperativeHandle)(exports.editorPropsProviderRef, () => {
-        return {
-            getProps: () => props,
-            setProps,
-        };
-    }, [props]);
     const ctx = (0, react_1.useMemo)(() => {
-        return { props, updateProps, resetUnsaved };
-    }, [props, resetUnsaved, updateProps]);
+        return { props, updateProps };
+    }, [props, updateProps]);
     return ((0, jsx_runtime_1.jsx)(exports.EditorPropsContext.Provider, { value: ctx, children: children }));
 };
 exports.EditorPropsProvider = EditorPropsProvider;

package/dist/cjs/Img.d.ts

@@ -7,6 +7,12 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
     readonly src: string;
+    readonly showInTimeline?: boolean;
+    readonly name?: string;
+    /**
+     * @deprecated For internal use only
+     */
+    readonly stack?: string;
 };
 export declare const Img: React.ForwardRefExoticComponent<Omit<ImgProps, "ref"> & React.RefAttributes<HTMLImageElement>>;
 export {};

package/dist/cjs/Img.js

@@ -3,20 +3,24 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Img = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-traces.js");
 const get_cross_origin_value_js_1 = require("./get-cross-origin-value.js");
 const prefetch_js_1 = require("./prefetch.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const use_buffer_state_js_1 = require("./use-buffer-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, ...props }, ref) => {
+const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, showInTimeline, name, stack, ...props }, ref) => {
+    var _a, _b;
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
     const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const [timelineId] = (0, react_1.useState)(() => String(Math.random()));
     if (!src) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
@@ -27,6 +31,16 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
+    (0, use_media_in_timeline_js_1.useImageInTimeline)({
+        src,
+        displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        stack: stack !== null && stack !== void 0 ? stack : null,
+        showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true,
+        premountDisplay: (_a = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premountDisplay) !== null && _a !== void 0 ? _a : null,
+        postmountDisplay: (_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmountDisplay) !== null && _b !== void 0 ? _b : null,
+        loopDisplay: undefined,
+    });
     const actualSrc = (0, prefetch_js_1.usePreload)(src);
     const retryIn = (0, react_1.useCallback)((timeout) => {
         if (!imageRef.current) {
@@ -175,3 +189,4 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
  * @see [Documentation](https://remotion.dev/docs/img)
  */
 exports.Img = (0, react_1.forwardRef)(ImgRefForwarding);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/ResolveCompositionConfig.d.ts

@@ -19,6 +19,5 @@ type VideoConfigState = {
     error: Error;
 };
 export declare const needsResolution: (composition: AnyComposition) => boolean;
-export declare const PROPS_UPDATED_EXTERNALLY = "remotion.propsUpdatedExternally";
 export declare const useResolvedVideoConfig: (preferredCompositionId: string | null) => VideoConfigState | null;
 export {};

package/dist/cjs/ResolveCompositionConfig.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useResolvedVideoConfig = exports.PROPS_UPDATED_EXTERNALLY = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
+exports.useResolvedVideoConfig = exports.needsResolution = exports.resolveCompositionsRef = exports.ResolveCompositionContext = void 0;
 const react_1 = require("react");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const input_props_js_1 = require("./config/input-props.js");
@@ -15,7 +15,6 @@ const needsResolution = (composition) => {
     return Boolean(composition.calculateMetadata);
 };
 exports.needsResolution = needsResolution;
-exports.PROPS_UPDATED_EXTERNALLY = 'remotion.propsUpdatedExternally';
 const useResolvedVideoConfig = (preferredCompositionId) => {
     const context = (0, react_1.useContext)(exports.ResolveCompositionContext);
     const { props: allEditorProps } = (0, react_1.useContext)(EditorProps_js_1.EditorPropsContext);

package/dist/cjs/codec.d.ts

@@ -1,4 +1,4 @@
-export declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "h264-ts", "gif"];
+export declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "av1", "mp3", "aac", "wav", "prores", "h264-mkv", "h264-ts", "gif"];
 export type Codec = (typeof validCodecs)[number];
 export type CodecOrUndefined = Codec | undefined;
 export declare const DEFAULT_CODEC: Codec;

package/dist/cjs/codec.js

@@ -6,6 +6,7 @@ exports.validCodecs = [
     'h265',
     'vp8',
     'vp9',
+    'av1',
     'mp3',
     'aac',
     'wav',

package/dist/cjs/index.d.ts

@@ -39,7 +39,7 @@ declare global {
         remotion_ignoreFastRefreshUpdate: number | null;
         remotion_numberOfAudioTags: number;
         remotion_audioLatencyHint: AudioContextLatencyCategory | undefined;
-        remotion_logLevel: LogLevel;
+        remotion_logLevel: LogLevel | undefined;
         remotion_projectName: string;
         remotion_cwd: string;
         remotion_studioServerCommand: string;
@@ -65,7 +65,6 @@ declare global {
         siteVersion: '11';
         remotion_version: string;
         remotion_imported: string | boolean;
-        remotion_unsavedProps: boolean | undefined;
     }
 }
 export type BundleCompositionState = {

package/dist/cjs/internals.d.ts

@@ -315,15 +315,6 @@ export declare const Internals: {
             height: number;
         };
     }) => number;
-    readonly editorPropsProviderRef: import("react").RefObject<{
-        getProps: () => {
-            [x: string]: Record<string, unknown>;
-        };
-        setProps: React.Dispatch<React.SetStateAction<{
-            [x: string]: Record<string, unknown>;
-        }>>;
-    } | null>;
-    readonly PROPS_UPDATED_EXTERNALLY: "remotion.propsUpdatedExternally";
     readonly validateRenderAsset: (artifact: TRenderAsset) => void;
     readonly Log: {
         trace: (options: {
@@ -401,7 +392,7 @@ export declare const Internals: {
     readonly useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
         volume: import("./volume-prop.js").VolumeProp | undefined;
         mediaVolume: number;
-        mediaType: "audio" | "video";
+        mediaType: "audio" | "video" | "image";
         src: string | undefined;
         displayName: string | null;
         trimBefore: number | undefined;

package/dist/cjs/internals.js

@@ -184,8 +184,6 @@ exports.Internals = {
     CurrentScaleContext: use_current_scale_js_1.CurrentScaleContext,
     PreviewSizeContext: use_current_scale_js_1.PreviewSizeContext,
     calculateScale: use_current_scale_js_1.calculateScale,
-    editorPropsProviderRef: EditorProps_js_1.editorPropsProviderRef,
-    PROPS_UPDATED_EXTERNALLY: ResolveCompositionConfig_js_1.PROPS_UPDATED_EXTERNALLY,
     validateRenderAsset: validate_artifact_js_1.validateRenderAsset,
     Log: log_js_1.Log,
     LogLevelContext: log_level_context_js_1.LogLevelContext,

package/dist/cjs/interpolate-colors.js

@@ -13,6 +13,20 @@ const PERCENTAGE = NUMBER + '%';
 function call(...args) {
     return '\\(\\s*(' + args.join(')\\s*,\\s*(') + ')\\s*\\)';
 }
+// Modern CSS Color Level 4 syntax: space-separated values with optional / alpha
+const MODERN_VALUE = '(?:none|[-+]?\\d*\\.?\\d+(?:%|deg|rad|grad|turn)?)';
+function modernColorCall(name) {
+    return new RegExp(name +
+        '\\(\\s*(' +
+        MODERN_VALUE +
+        ')\\s+(' +
+        MODERN_VALUE +
+        ')\\s+(' +
+        MODERN_VALUE +
+        ')(?:\\s*\\/\\s*(' +
+        MODERN_VALUE +
+        '))?\\s*\\)');
+}
 function getMatchers() {
     const cachedMatchers = {
         rgb: undefined,
@@ -24,6 +38,11 @@ function getMatchers() {
         hex5: undefined,
         hex6: undefined,
         hex8: undefined,
+        oklch: undefined,
+        oklab: undefined,
+        lab: undefined,
+        lch: undefined,
+        hwb: undefined,
     };
     if (cachedMatchers.rgb === undefined) {
         cachedMatchers.rgb = new RegExp('rgb' + call(NUMBER, NUMBER, NUMBER));
@@ -35,6 +54,11 @@ function getMatchers() {
             /^#([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})([0-9a-fA-F]{1})$/;
         cachedMatchers.hex6 = /^#([0-9a-fA-F]{6})$/;
         cachedMatchers.hex8 = /^#([0-9a-fA-F]{8})$/;
+        cachedMatchers.oklch = modernColorCall('oklch');
+        cachedMatchers.oklab = modernColorCall('oklab');
+        cachedMatchers.lab = modernColorCall('lab');
+        cachedMatchers.lch = modernColorCall('lch');
+        cachedMatchers.hwb = modernColorCall('hwb');
     }
     return cachedMatchers;
 }
@@ -101,6 +125,106 @@ function parsePercentage(str) {
     }
     return int / 100;
 }
+// Modern CSS Color Level 4 parsing helpers
+function parseModernComponent(str, percentScale) {
+    if (str === 'none')
+        return 0;
+    if (str.endsWith('%')) {
+        return (Number.parseFloat(str) / 100) * percentScale;
+    }
+    return Number.parseFloat(str);
+}
+function parseHueAngle(str) {
+    if (str === 'none')
+        return 0;
+    if (str.endsWith('rad')) {
+        return (Number.parseFloat(str) * 180) / Math.PI;
+    }
+    if (str.endsWith('grad'))
+        return Number.parseFloat(str) * 0.9;
+    if (str.endsWith('turn'))
+        return Number.parseFloat(str) * 360;
+    // 'deg' suffix or plain number = degrees
+    return Number.parseFloat(str);
+}
+function parseModernAlpha(str) {
+    if (str === undefined || str === 'none')
+        return 1;
+    if (str.endsWith('%')) {
+        return Math.max(0, Math.min(1, Number.parseFloat(str) / 100));
+    }
+    return Math.max(0, Math.min(1, Number.parseFloat(str)));
+}
+// sRGB gamma correction
+function linearToSrgb(c) {
+    if (c <= 0.0031308)
+        return 12.92 * c;
+    return 1.055 * c ** (1 / 2.4) - 0.055;
+}
+function clamp01(v) {
+    return Math.max(0, Math.min(1, v));
+}
+function rgbFloatToInt(r, g, b, alpha) {
+    const ri = Math.round(clamp01(r) * 255);
+    const gi = Math.round(clamp01(g) * 255);
+    const bi = Math.round(clamp01(b) * 255);
+    const ai = Math.round(clamp01(alpha) * 255);
+    return ((ri << 24) | (gi << 16) | (bi << 8) | ai) >>> 0;
+}
+// OKLab to sRGB conversion
+function oklabToSrgb(L, a, b) {
+    const l_ = L + 0.3963377774 * a + 0.2158037573 * b;
+    const m_ = L - 0.1055613458 * a - 0.0638541728 * b;
+    const s_ = L - 0.0894841775 * a - 1.291485548 * b;
+    const l = l_ * l_ * l_;
+    const m = m_ * m_ * m_;
+    const s = s_ * s_ * s_;
+    const rLin = 4.0767416621 * l - 3.3077115913 * m + 0.2309699292 * s;
+    const gLin = -1.2684380046 * l + 2.6097574011 * m - 0.3413193965 * s;
+    const bLin = -0.0041960863 * l - 0.7034186147 * m + 1.707614701 * s;
+    return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
+}
+// CIE Lab to sRGB conversion (D65 illuminant)
+function labToSrgb(L, a, b) {
+    const epsilon = 216 / 24389;
+    const kappa = 24389 / 27;
+    // D65 white point
+    const Xn = 0.95047;
+    const Yn = 1.0;
+    const Zn = 1.08883;
+    const fy = (L + 16) / 116;
+    const fx = a / 500 + fy;
+    const fz = fy - b / 200;
+    const fx3 = fx * fx * fx;
+    const fz3 = fz * fz * fz;
+    const xr = fx3 > epsilon ? fx3 : (116 * fx - 16) / kappa;
+    const yr = L > kappa * epsilon ? ((L + 16) / 116) ** 3 : L / kappa;
+    const zr = fz3 > epsilon ? fz3 : (116 * fz - 16) / kappa;
+    const X = xr * Xn;
+    const Y = yr * Yn;
+    const Z = zr * Zn;
+    // XYZ to linear sRGB (D65)
+    const rLin = 3.2404542 * X - 1.5371385 * Y - 0.4985314 * Z;
+    const gLin = -0.969266 * X + 1.8760108 * Y + 0.041556 * Z;
+    const bLin = 0.0556434 * X - 0.2040259 * Y + 1.0572252 * Z;
+    return [linearToSrgb(rLin), linearToSrgb(gLin), linearToSrgb(bLin)];
+}
+// HWB to sRGB conversion
+function hwbToSrgb(h, w, bk) {
+    // h is 0-1 (hue as fraction of 360), w and bk are 0-1
+    if (w + bk >= 1) {
+        const gray = w / (w + bk);
+        return [gray, gray, gray];
+    }
+    // Get pure hue RGB (HSL with S=100%, L=50%)
+    const q = 1; // l=0.5, s=1: q = 0.5*(1+1) = 1
+    const p = 0; // 2*0.5 - 1 = 0
+    const r = hue2rgb(p, q, h + 1 / 3);
+    const g = hue2rgb(p, q, h);
+    const bl = hue2rgb(p, q, h - 1 / 3);
+    const factor = 1 - w - bk;
+    return [r * factor + w, g * factor + w, bl * factor + w];
+}
 exports.colorNames = {
     transparent: 0x00000000,
     // http://www.w3.org/TR/css3-color/#svg-color
@@ -339,6 +463,58 @@ function normalizeColor(color) {
                 0);
         }
     }
+    if (matchers.oklch) {
+        if ((match = matchers.oklch.exec(color))) {
+            const L = parseModernComponent(match[1], 1); // 100% = 1
+            const C = parseModernComponent(match[2], 0.4); // 100% = 0.4
+            const H = parseHueAngle(match[3]);
+            const alpha = parseModernAlpha(match[4]);
+            const hRad = (H * Math.PI) / 180;
+            const [r, g, b] = oklabToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+            return rgbFloatToInt(r, g, b, alpha);
+        }
+    }
+    if (matchers.oklab) {
+        if ((match = matchers.oklab.exec(color))) {
+            const L = parseModernComponent(match[1], 1);
+            const a = parseModernComponent(match[2], 0.4);
+            const b = parseModernComponent(match[3], 0.4);
+            const alpha = parseModernAlpha(match[4]);
+            const [r, g, bl] = oklabToSrgb(L, a, b);
+            return rgbFloatToInt(r, g, bl, alpha);
+        }
+    }
+    if (matchers.lab) {
+        if ((match = matchers.lab.exec(color))) {
+            const L = parseModernComponent(match[1], 100); // 100% = 100
+            const a = parseModernComponent(match[2], 125); // 100% = 125
+            const b = parseModernComponent(match[3], 125);
+            const alpha = parseModernAlpha(match[4]);
+            const [r, g, bl] = labToSrgb(L, a, b);
+            return rgbFloatToInt(r, g, bl, alpha);
+        }
+    }
+    if (matchers.lch) {
+        if ((match = matchers.lch.exec(color))) {
+            const L = parseModernComponent(match[1], 100);
+            const C = parseModernComponent(match[2], 150); // 100% = 150
+            const H = parseHueAngle(match[3]);
+            const alpha = parseModernAlpha(match[4]);
+            const hRad = (H * Math.PI) / 180;
+            const [r, g, bl] = labToSrgb(L, C * Math.cos(hRad), C * Math.sin(hRad));
+            return rgbFloatToInt(r, g, bl, alpha);
+        }
+    }
+    if (matchers.hwb) {
+        if ((match = matchers.hwb.exec(color))) {
+            const H = parseHueAngle(match[1]);
+            const W = parseModernComponent(match[2], 1); // 100% = 1
+            const B = parseModernComponent(match[3], 1);
+            const alpha = parseModernAlpha(match[4]);
+            const [r, g, bl] = hwbToSrgb(H / 360, W, B);
+            return rgbFloatToInt(r, g, bl, alpha);
+        }
+    }
     throw new Error(`invalid color string ${color} provided`);
 }
 const opacity = (c) => {

package/dist/cjs/use-media-in-timeline.d.ts

@@ -3,7 +3,7 @@ import type { VolumeProp } from './volume-prop.js';
 export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType, src, displayName, trimBefore, trimAfter, playbackRate, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
-    mediaType: "audio" | "video";
+    mediaType: "audio" | "video" | "image";
     src: string | undefined;
     displayName: string | null;
     trimBefore: number | undefined;
@@ -18,6 +18,16 @@ export declare const useBasicMediaInTimeline: ({ volume, mediaVolume, mediaType,
     isStudio: boolean;
     finalDisplayName: string;
 };
+export declare const useImageInTimeline: ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
+    src: string | undefined;
+    displayName: string | null;
+    id: string;
+    stack: string | null;
+    showInTimeline: boolean;
+    premountDisplay: number | null;
+    postmountDisplay: number | null;
+    loopDisplay: LoopDisplay | undefined;
+}) => void;
 export declare const useMediaInTimeline: ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;

package/dist/cjs/use-media-in-timeline.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaInTimeline = exports.useBasicMediaInTimeline = void 0;
+exports.useMediaInTimeline = exports.useImageInTimeline = exports.useBasicMediaInTimeline = void 0;
 const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const calculate_media_duration_js_1 = require("./calculate-media-duration.js");
@@ -73,6 +73,69 @@ const useBasicMediaInTimeline = ({ volume, mediaVolume, mediaType, src, displayN
     };
 };
 exports.useBasicMediaInTimeline = useBasicMediaInTimeline;
+const useImageInTimeline = ({ src, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
+    const { duration, nonce, rootId, isStudio, finalDisplayName } = (0, exports.useBasicMediaInTimeline)({
+        volume: undefined,
+        mediaVolume: 0,
+        mediaType: 'image',
+        src,
+        displayName,
+        trimAfter: undefined,
+        trimBefore: undefined,
+        playbackRate: 1,
+    });
+    (0, react_1.useEffect)(() => {
+        var _a, _b, _c;
+        if (!src) {
+            throw new Error('No src passed');
+        }
+        if (!isStudio && ((_b = (_a = window.process) === null || _a === void 0 ? void 0 : _a.env) === null || _b === void 0 ? void 0 : _b.NODE_ENV) !== 'test') {
+            return;
+        }
+        if (!showInTimeline) {
+            return;
+        }
+        registerSequence({
+            type: 'image',
+            src,
+            id,
+            duration,
+            from: 0,
+            parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
+            displayName: finalDisplayName,
+            rootId,
+            showInTimeline: true,
+            nonce: nonce.get(),
+            loopDisplay,
+            stack,
+            premountDisplay,
+            postmountDisplay,
+            controls: null,
+        });
+        return () => {
+            unregisterSequence(id);
+        };
+    }, [
+        duration,
+        id,
+        parentSequence,
+        src,
+        registerSequence,
+        unregisterSequence,
+        nonce,
+        stack,
+        showInTimeline,
+        premountDisplay,
+        postmountDisplay,
+        isStudio,
+        loopDisplay,
+        rootId,
+        finalDisplayName,
+    ]);
+};
+exports.useImageInTimeline = useImageInTimeline;
 const useMediaInTimeline = ({ volume, mediaVolume, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, premountDisplay, postmountDisplay, loopDisplay, }) => {
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();

package/dist/cjs/use-schema.js

@@ -50,7 +50,7 @@ const useSchema = (schema, currentValue) => {
         const overrideValues = (_a = overrides[overrideId]) !== null && _a !== void 0 ? _a : {};
         const propStatus = codeValues[overrideId];
         const currentValueKeys = Object.keys(currentValue);
-        const keysToUpdate = new Set(currentValueKeys).values();
+        const keysToUpdate = [...new Set(currentValueKeys)];
         const merged = {};
         // Apply code values over runtime values, falling back to schema default
         for (const key of keysToUpdate) {

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.438";
+export declare const VERSION = "4.0.440";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.438';
+exports.VERSION = '4.0.440';