remotion 4.0.466 → 4.0.468

package/dist/cjs/Img.js

@@ -25,7 +25,7 @@ function truncateSrcForLabel(src) {
     }
     return src;
 }
-const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, ref, ...props }) => {
+const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRenderRetries, delayRenderTimeoutInMilliseconds, onImageFrame, crossOrigin, decoding, ref, ...props }) => {
     const imageRef = (0, react_1.useRef)(null);
     const errors = (0, react_1.useRef)({});
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -172,14 +172,14 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             delayRender,
         ]);
     }
-    const { isClientSideRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
+    const { isClientSideRendering, isRendering } = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const crossOriginValue = (0, get_cross_origin_value_js_1.getCrossOriginValue)({
         crossOrigin,
         requestsVideoFrame: false,
         isClientSideRendering,
     });
     // src gets set once we've loaded and decoded the image.
-    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));
+    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
 const ImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
     if (!src) {

package/dist/cjs/Sequence.js

@@ -4,7 +4,6 @@ exports.Sequence = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 /* eslint-disable @typescript-eslint/no-use-before-define */
 const react_1 = require("react");
-const react_2 = require("react");
 const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const nonce_js_1 = require("./nonce.js");
@@ -66,11 +65,34 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         return ((parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting) ||
             Boolean(other._remotionInternalIsPostmounting));
     }, [other._remotionInternalIsPostmounting, parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.postmounting]);
+    // `cumulatedNegativeFrom` answers: "How many frames of this media have
+    // already elapsed before the first visible frame of this sequence?"
+    //
+    // This is intentionally based on the effective sequence start, not on adding
+    // all negative `from` values. See the asset-calculation tests for:
+    // - "Should calculate startFrom correctly with negative offset (Html5Audio)"
+    // - "same as above, but with <Sequence from={0}> inbetween"
+    // - "same as above, but a positive child offset cancels part of the negative parent offset"
+    //
+    // In particular, <Sequence from={-20}><Sequence from={10}> should have a
+    // 10-frame pre-roll, because the positive child offset cancels part of the
+    // negative parent offset. But <Sequence from={10}><Sequence from={-5}>
+    // should still trim 5 frames from the media once the parent starts.
+    const currentSequenceStart = cumulatedFrom + from;
+    const parentSequenceStart = parentSequence
+        ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
+        : 0;
+    const parentFirstFrame = parentSequence
+        ? parentSequenceStart - parentSequence.cumulatedNegativeFrom
+        : 0;
+    const firstFrame = Math.max(0, parentFirstFrame, currentSequenceStart);
+    const cumulatedNegativeFrom = currentSequenceStart - firstFrame;
     const contextValue = (0, react_1.useMemo)(() => {
         var _a, _b, _c;
         return {
             cumulatedFrom,
             relativeFrom: from,
+            cumulatedNegativeFrom,
             durationInFrames: actualDurationInFrames,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
             id,
@@ -93,6 +115,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         postmounting,
         premountDisplay,
         postmountDisplay,
+        cumulatedNegativeFrom,
     ]);
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
@@ -102,7 +125,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const inheritedStack = (_a = other === null || other === void 0 ? void 0 : other.stack) !== null && _a !== void 0 ? _a : null;
     // Our assumption: Stack doesnt' change. After we symbolicate we assign it a nodePath
     // and if it changes, it would lead to-remounting of the sequence.
-    const stackRef = (0, react_2.useRef)(null);
+    const stackRef = (0, react_1.useRef)(null);
     stackRef.current = stack !== null && stack !== void 0 ? stack : inheritedStack;
     (0, react_1.useEffect)(() => {
         var _a, _b, _c;

package/dist/cjs/SequenceContext.d.ts

@@ -1,6 +1,7 @@
 export declare const SequenceContext: import("react").Context<SequenceContextType | null>;
 export type SequenceContextType = {
     cumulatedFrom: number;
+    cumulatedNegativeFrom: number;
     relativeFrom: number;
     parentFrom: number;
     durationInFrames: number;

package/dist/cjs/animated-image/canvas.js

@@ -36,56 +36,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Canvas = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
+const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
 const run_effect_chain_js_1 = require("../effects/run-effect-chain.js");
 const use_effect_chain_state_js_1 = require("../effects/use-effect-chain-state.js");
-const calcArgs = (fit, frameSize, canvasSize) => {
-    switch (fit) {
-        case 'fill': {
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                0,
-                0,
-                canvasSize.width,
-                canvasSize.height,
-            ];
-        }
-        case 'contain': {
-            const ratio = Math.min(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        case 'cover': {
-            const ratio = Math.max(canvasSize.width / frameSize.width, canvasSize.height / frameSize.height);
-            const centerX = (canvasSize.width - frameSize.width * ratio) / 2;
-            const centerY = (canvasSize.height - frameSize.height * ratio) / 2;
-            return [
-                0,
-                0,
-                frameSize.width,
-                frameSize.height,
-                centerX,
-                centerY,
-                frameSize.width * ratio,
-                frameSize.height * ratio,
-            ];
-        }
-        default:
-            throw new Error('Unknown fit: ' + fit);
-    }
-};
 const CanvasRefForwardingFunction = ({ width, height, fit, className, style, effects }, ref) => {
     const canvasRef = (0, react_1.useRef)(null);
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
@@ -95,7 +48,7 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
         }
         return document.createElement('canvas');
     }, []);
-    const draw = (0, react_1.useCallback)(async (imageData) => {
+    const draw = (0, react_1.useCallback)((imageData) => {
         const canvas = canvasRef.current;
         const canvasWidth = width !== null && width !== void 0 ? width : imageData.displayWidth;
         const canvasHeight = height !== null && height !== void 0 ? height : imageData.displayHeight;
@@ -111,7 +64,7 @@ const CanvasRefForwardingFunction = ({ width, height, fit, className, style, eff
         if (!sourceCtx) {
             throw new Error('Could not get 2d context for source canvas');
         }
-        sourceCtx.drawImage(imageData, ...calcArgs(fit, {
+        sourceCtx.drawImage(imageData, ...(0, calculate_image_fit_js_1.calculateImageFit)(fit, {
             height: imageData.displayHeight,
             width: imageData.displayWidth,
         }, {

package/dist/cjs/animated-image/props.d.ts

@@ -1,3 +1,4 @@
+import type { ImageFit } from '../calculate-image-fit.js';
 import type { EffectsProp } from '../effects/effect-types.js';
 import type { SequenceProps } from '../Sequence.js';
 export type RemotionAnimatedImageLoopBehavior = 'loop' | 'pause-after-finish' | 'clear-after-finish';
@@ -17,4 +18,4 @@ export type AnimatedImageProps = Omit<SequenceProps, 'children' | 'durationInFra
     readonly durationInFrames?: number;
     readonly effects?: EffectsProp;
 };
-export type AnimatedImageFillMode = 'contain' | 'cover' | 'fill';
+export type AnimatedImageFillMode = ImageFit;

package/dist/cjs/audio/AudioForRendering.js

@@ -65,7 +65,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
             mediaFrame: frame,
             playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
             toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1,
-            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom) !== null && _b !== void 0 ? _b : 0)),
+            audioStartFrame: Math.max(0, -((_b = sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom) !== null && _b !== void 0 ? _b : 0)),
             audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0,
         });
         return () => unregisterRenderAsset(id);
@@ -82,7 +82,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
         playbackRate,
         props.playbackRate,
         toneFrequency,
-        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom,
+        sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedNegativeFrom,
         audioStreamIndex,
     ]);
     const { src } = props;

package/dist/cjs/audio/shared-audio-tags.d.ts

@@ -1,6 +1,7 @@
 import { type AudioHTMLAttributes } from 'react';
 import React from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
+import type { RemotionAudioContextState } from './use-audio-context.js';
 /**
  * This functionality of Remotion will keep a certain amount
  * of <audio> tags pre-mounted and by default filled with an empty audio track.
@@ -33,7 +34,6 @@ export type ScheduleAudioNodeResult = {
 export type ScheduleAudioNodeOptions = {
     readonly node: AudioBufferSourceNode;
     readonly mediaTimestamp: number;
-    readonly currentTime: number;
     readonly scheduledTime: number;
     readonly originalUnloopedMediaTimestamp: number;
     readonly duration: number;
@@ -49,6 +49,7 @@ export type AudioSyncAnchorEmitter = {
 };
 type SharedAudioContextValue = {
     audioContext: AudioContext | null;
+    getAudioContextState: () => RemotionAudioContextState | null;
     gainNode: GainNode | null;
     audioSyncAnchor: {
         value: number;
@@ -56,7 +57,7 @@ type SharedAudioContextValue = {
     audioSyncAnchorEmitter: AudioSyncAnchorEmitter;
     scheduleAudioNode: (options: ScheduleAudioNodeOptions) => ScheduleAudioNodeResult;
     resume: () => Promise<void>;
-    suspend: () => void;
+    suspend: () => Promise<void>;
     getIsResumingAudioContext: () => Promise<void> | null;
     unscheduleAudioNode: (node: AudioBufferSourceNode) => void;
 };

package/dist/cjs/audio/shared-audio-tags.js

@@ -77,6 +77,17 @@ const didPropChange = (key, newProp, prevProp) => {
 };
 exports.SharedAudioContext = (0, react_1.createContext)(null);
 exports.SharedAudioTagsContext = (0, react_1.createContext)(null);
+const shouldSaveForLater = (state) => {
+    if (state === 'suspended' ||
+        state === 'running-to-suspended' ||
+        state === 'interrupted') {
+        return true;
+    }
+    if (state === 'running' || state === 'suspended-to-running') {
+        return false;
+    }
+    throw new Error(`Unexpected audio context state: ${state}`);
+};
 const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
     const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
@@ -110,11 +121,18 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
         nodesToResume.current.delete(node);
     }, []);
     const scheduleAudioNode = (0, react_1.useMemo)(() => {
-        return ({ node, mediaTimestamp, currentTime, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
+        return ({ node, mediaTimestamp, scheduledTime, duration, offset, originalUnloopedMediaTimestamp, }) => {
             if (!ctxAndGain) {
                 throw new Error('Audio context not found');
             }
-            const saveForLater = ctxAndGain.audioContext.state === 'suspended' && !isResuming.current;
+            const currentState = ctxAndGain.getState();
+            if (currentState === 'closed') {
+                return {
+                    type: 'not-started',
+                    reason: 'audio context is closed',
+                };
+            }
+            const saveForLater = shouldSaveForLater(currentState);
             if (duration > 0) {
                 if (saveForLater) {
                     nodesToResume.current.set(node, {
@@ -145,7 +163,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
                     : 'color: blue; font-weight: bold', duration < 0
                 ? 'missed ' + Math.abs(offset).toFixed(2) + 's'
                 : Math.abs(timeDiff).toFixed(2) +
-                    (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + currentTime.toFixed(4), 'actualcurrent=' + ctxAndGain.audioContext.currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime
+                    (timeDiff < 0 ? ' delay' : ' ahead'), '', 'current=' + ctxAndGain.audioContext.currentTime.toFixed(4), 'offset=' + offset.toFixed(4), 'latency=' + latency.toFixed(4), 'state=' + ctxAndGain.audioContext.state, originalUnloopedMediaTimestamp !== mediaTime
                 ? 'original_ts=' + originalUnloopedMediaTimestamp.toFixed(4)
                 : '', 'action=' + (saveForLater ? 'schedule' : 'start'), '');
             prev.scheduledEndTime = scheduledEndTime;
@@ -176,7 +194,7 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
             node.start(r.scheduledTime, r.offset, r.duration);
         });
         nodesToResume.current.clear();
-        const resumePromise = ctxAndGain.audioContext.resume();
+        const resumePromise = ctxAndGain.resume();
         isResuming.current = new Promise((resolve) => {
             (0, wait_until_actually_resumed_js_1.waitUntilActuallyResumed)(ctxAndGain.audioContext, logLevel).then(resolve);
             resumePromise.catch((err) => {
@@ -196,18 +214,19 @@ const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }
     }, []);
     const suspend = (0, react_1.useCallback)(() => {
         if (!ctxAndGain) {
-            return;
+            return Promise.resolve();
         }
         if (!audioContextIsPlayingEventually.current) {
-            return;
+            return Promise.resolve();
         }
         audioContextIsPlayingEventually.current = false;
-        ctxAndGain.audioContext.suspend();
+        return ctxAndGain.suspend();
     }, [ctxAndGain]);
     const audioContextValue = (0, react_1.useMemo)(() => {
         var _a, _b;
         return {
             audioContext: (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.audioContext) !== null && _a !== void 0 ? _a : null,
+            getAudioContextState: () => { var _a; return (_a = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.getState()) !== null && _a !== void 0 ? _a : null; },
             gainNode: (_b = ctxAndGain === null || ctxAndGain === void 0 ? void 0 : ctxAndGain.gainNode) !== null && _b !== void 0 ? _b : null,
             audioSyncAnchor,
             audioSyncAnchorEmitter,

package/dist/cjs/audio/use-audio-context.d.ts

@@ -1,4 +1,5 @@
 import type { LogLevel } from '../log';
+export type RemotionAudioContextState = AudioContextState | 'running-to-suspended' | 'suspended-to-running';
 export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, }: {
     logLevel: LogLevel;
     latencyHint: AudioContextLatencyCategory;
@@ -6,4 +7,7 @@ export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEn
 }) => {
     audioContext: AudioContext;
     gainNode: GainNode;
+    getState: () => RemotionAudioContextState;
+    resume: () => Promise<void>;
+    suspend: () => Promise<void>;
 } | null;

package/dist/cjs/audio/use-audio-context.js

@@ -39,9 +39,45 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
         gainNode.connect(audioContext.destination);
         log_1.Log.trace({ logLevel, tag: 'audio' }, 'Creating new audio context');
         audioContext.suspend();
+        // Tracks the state we are transitioning towards while resume()/suspend()
+        // have been called but the native state has not updated yet.
+        let transitionTarget = null;
+        const getState = () => {
+            const nativeState = audioContext.state;
+            if (transitionTarget === 'running' && nativeState !== 'running') {
+                return 'suspended-to-running';
+            }
+            if (transitionTarget === 'suspended' && nativeState !== 'suspended') {
+                return 'running-to-suspended';
+            }
+            return nativeState;
+        };
+        const resume = () => {
+            transitionTarget = 'running';
+            const promise = audioContext.resume();
+            promise.finally(() => {
+                if (transitionTarget === 'running') {
+                    transitionTarget = null;
+                }
+            });
+            return promise;
+        };
+        const suspend = () => {
+            transitionTarget = 'suspended';
+            const promise = audioContext.suspend();
+            promise.finally(() => {
+                if (transitionTarget === 'suspended') {
+                    transitionTarget = null;
+                }
+            });
+            return promise;
+        };
         return {
             audioContext,
             gainNode,
+            getState,
+            resume,
+            suspend,
         };
     }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
     return context;

package/dist/cjs/audio/use-audio-frame.js

@@ -8,8 +8,7 @@ const use_current_frame_js_1 = require("../use-current-frame.js");
 const useMediaStartsAt = () => {
     var _a;
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
-    const startsAt = Math.min(0, (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0);
-    return startsAt;
+    return (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.cumulatedNegativeFrom) !== null && _a !== void 0 ? _a : 0;
 };
 exports.useMediaStartsAt = useMediaStartsAt;
 /**

package/dist/cjs/calculate-image-fit.d.ts

@@ -0,0 +1,8 @@
+export type ImageFit = 'contain' | 'cover' | 'fill';
+export declare const calculateImageFit: (fit: ImageFit, imageSize: {
+    width: number;
+    height: number;
+}, canvasSize: {
+    width: number;
+    height: number;
+}) => [number, number, number, number, number, number, number, number];

package/dist/cjs/calculate-image-fit.js

@@ -0,0 +1,52 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.calculateImageFit = void 0;
+const calculateImageFit = (fit, imageSize, canvasSize) => {
+    switch (fit) {
+        case 'fill': {
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                0,
+                0,
+                canvasSize.width,
+                canvasSize.height,
+            ];
+        }
+        case 'contain': {
+            const ratio = Math.min(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+            const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                centerX,
+                centerY,
+                imageSize.width * ratio,
+                imageSize.height * ratio,
+            ];
+        }
+        case 'cover': {
+            const ratio = Math.max(canvasSize.width / imageSize.width, canvasSize.height / imageSize.height);
+            const centerX = (canvasSize.width - imageSize.width * ratio) / 2;
+            const centerY = (canvasSize.height - imageSize.height * ratio) / 2;
+            return [
+                0,
+                0,
+                imageSize.width,
+                imageSize.height,
+                centerX,
+                centerY,
+                imageSize.width * ratio,
+                imageSize.height * ratio,
+            ];
+        }
+        default:
+            throw new Error('Unknown fit: ' + fit);
+    }
+};
+exports.calculateImageFit = calculateImageFit;

package/dist/cjs/canvas-image/CanvasImage.d.ts

@@ -0,0 +1,18 @@
+import type { EffectsProp } from '../effects/effect-types.js';
+export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "hidden" | "name" | "durationInFrames" | "from" | "showInTimeline"> & {
+    readonly stack?: string;
+} & {
+    readonly src: string;
+    readonly width?: number;
+    readonly height?: number;
+    readonly fit?: import("../calculate-image-fit.js").ImageFit;
+    readonly effects?: EffectsProp;
+    readonly className?: string;
+    readonly style?: React.CSSProperties;
+    readonly id?: string;
+    readonly onError?: (error: Error) => void;
+    readonly pauseWhenLoading?: boolean;
+    readonly maxRetries?: number;
+    readonly delayRenderRetries?: number;
+    readonly delayRenderTimeoutInMilliseconds?: number;
+} & import("react").RefAttributes<HTMLCanvasElement>>;