remotion 4.0.439 → 4.0.440

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/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/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/internals.d.ts

@@ -392,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/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/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.439";
+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.439';
+exports.VERSION = '4.0.440';

package/dist/esm/index.mjs

@@ -61,7 +61,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.439";
+var VERSION = "4.0.440";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -3433,6 +3433,76 @@ var useBasicMediaInTimeline = ({
     finalDisplayName: displayName ?? getAssetDisplayName(src)
   };
 };
+var useImageInTimeline = ({
+  src,
+  displayName,
+  id,
+  stack,
+  showInTimeline,
+  premountDisplay,
+  postmountDisplay,
+  loopDisplay
+}) => {
+  const parentSequence = useContext19(SequenceContext);
+  const { registerSequence, unregisterSequence } = useContext19(SequenceManager);
+  const { duration, nonce, rootId, isStudio, finalDisplayName } = useBasicMediaInTimeline({
+    volume: undefined,
+    mediaVolume: 0,
+    mediaType: "image",
+    src,
+    displayName,
+    trimAfter: undefined,
+    trimBefore: undefined,
+    playbackRate: 1
+  });
+  useEffect4(() => {
+    if (!src) {
+      throw new Error("No src passed");
+    }
+    if (!isStudio && window.process?.env?.NODE_ENV !== "test") {
+      return;
+    }
+    if (!showInTimeline) {
+      return;
+    }
+    registerSequence({
+      type: "image",
+      src,
+      id,
+      duration,
+      from: 0,
+      parent: parentSequence?.id ?? 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
+  ]);
+};
 var useMediaInTimeline = ({
   volume,
   mediaVolume,
@@ -5528,7 +5598,8 @@ import {
   useContext as useContext29,
   useImperativeHandle as useImperativeHandle6,
   useLayoutEffect as useLayoutEffect9,
-  useRef as useRef17
+  useRef as useRef17,
+  useState as useState15
 } from "react";
 import { jsx as jsx24 } from "react/jsx-runtime";
 function exponentialBackoff(errorCount) {
@@ -5543,12 +5614,16 @@ var ImgRefForwarding = ({
   delayRenderTimeoutInMilliseconds,
   onImageFrame,
   crossOrigin,
+  showInTimeline,
+  name,
+  stack,
   ...props2
 }, ref) => {
   const imageRef = useRef17(null);
   const errors = useRef17({});
   const { delayPlayback } = useBufferState();
   const sequenceContext = useContext29(SequenceContext);
+  const [timelineId] = useState15(() => String(Math.random()));
   if (!src) {
     throw new Error('No "src" prop was passed to <Img>.');
   }
@@ -5559,6 +5634,16 @@ var ImgRefForwarding = ({
   useImperativeHandle6(ref, () => {
     return imageRef.current;
   }, []);
+  useImageInTimeline({
+    src,
+    displayName: name ?? null,
+    id: timelineId,
+    stack: stack ?? null,
+    showInTimeline: showInTimeline ?? true,
+    premountDisplay: sequenceContext?.premountDisplay ?? null,
+    postmountDisplay: sequenceContext?.postmountDisplay ?? null,
+    loopDisplay: undefined
+  });
   const actualSrc = usePreload(src);
   const retryIn = useCallback13((timeout) => {
     if (!imageRef.current) {
@@ -5681,6 +5766,7 @@ var ImgRefForwarding = ({
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
+addSequenceStackTraces(Img);
 // src/internals.ts
 import { createRef as createRef3 } from "react";
 
@@ -5694,7 +5780,7 @@ import {
   useImperativeHandle as useImperativeHandle7,
   useMemo as useMemo26,
   useRef as useRef18,
-  useState as useState15
+  useState as useState16
 } from "react";
 import { jsx as jsx25 } from "react/jsx-runtime";
 var CompositionManagerProvider = ({
@@ -5704,9 +5790,9 @@ var CompositionManagerProvider = ({
   initialCompositions,
   initialCanvasContent
 }) => {
-  const [folders, setFolders] = useState15([]);
-  const [canvasContent, setCanvasContent] = useState15(initialCanvasContent);
-  const [compositions, setCompositions] = useState15(initialCompositions);
+  const [folders, setFolders] = useState16([]);
+  const [canvasContent, setCanvasContent] = useState16(initialCanvasContent);
+  const [compositions, setCompositions] = useState16(initialCompositions);
   const currentcompositionsRef = useRef18(compositions);
   const updateCompositions = useCallback14((updateComps) => {
     setCompositions((comps) => {
@@ -6005,6 +6091,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",
@@ -6258,7 +6345,7 @@ var useCurrentScale = (options) => {
 };
 
 // src/use-schema.ts
-import { useContext as useContext31, useMemo as useMemo29, useState as useState16 } from "react";
+import { useContext as useContext31, useMemo as useMemo29, useState as useState17 } from "react";
 var useSchema = (schema, currentValue) => {
   const env = useRemotionEnvironment();
   const earlyReturn = useMemo29(() => {
@@ -6273,7 +6360,7 @@ var useSchema = (schema, currentValue) => {
   if (earlyReturn) {
     return earlyReturn;
   }
-  const [overrideId] = useState16(() => String(Math.random()));
+  const [overrideId] = useState17(() => String(Math.random()));
   const {
     visualModeEnabled,
     dragOverrides: overrides,
@@ -6350,7 +6437,7 @@ import {
   useEffect as useEffect14,
   useLayoutEffect as useLayoutEffect10,
   useMemo as useMemo30,
-  useState as useState17
+  useState as useState18
 } from "react";
 
 // src/video/offthread-video-source.ts
@@ -6464,7 +6551,7 @@ var OffthreadVideoForRendering = ({
       toneMapped
     });
   }, [toneMapped, currentTime, src, transparent]);
-  const [imageSrc, setImageSrc] = useState17(null);
+  const [imageSrc, setImageSrc] = useState18(null);
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
   useLayoutEffect10(() => {
     if (!window.remotion_videoEnabled) {
@@ -6575,7 +6662,7 @@ import React30, {
   useImperativeHandle as useImperativeHandle8,
   useMemo as useMemo31,
   useRef as useRef19,
-  useState as useState18
+  useState as useState19
 } from "react";
 
 // src/video/emit-video-frame.ts
@@ -6670,7 +6757,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   const { hidden } = useContext34(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
-  const [timelineId] = useState18(() => String(Math.random()));
+  const [timelineId] = useState19(() => String(Math.random()));
   const isSequenceHidden = hidden[timelineId] ?? false;
   if (typeof acceptableTimeShift !== "undefined") {
     throw new Error("acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.");
@@ -6736,7 +6823,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   useImperativeHandle8(ref, () => {
     return videoRef.current;
   }, []);
-  useState18(() => playbackLogging({
+  useState19(() => playbackLogging({
     logLevel,
     message: `Mounting video with source = ${actualSrc}, v=${VERSION}, user agent=${typeof navigator === "undefined" ? "server" : navigator.userAgent}`,
     tag: "video",

package/dist/esm/no-react.mjs

@@ -695,6 +695,7 @@ var validCodecs = [
   "h265",
   "vp8",
   "vp9",
+  "av1",
   "mp3",
   "aac",
   "wav",

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.439";
+var VERSION = "4.0.440";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.439",
+	"version": "4.0.440",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -35,7 +35,7 @@
 		"react-dom": "19.2.3",
 		"webpack": "5.105.0",
 		"zod": "4.3.6",
-		"@remotion/eslint-config-internal": "4.0.439",
+		"@remotion/eslint-config-internal": "4.0.440",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},