remotion 4.0.465 → 4.0.467

package/dist/cjs/CompositionManager.d.ts

@@ -60,6 +60,7 @@ export type TSequence = {
     duration: number;
     id: string;
     displayName: string;
+    documentationLink: string | null;
     parent: string | null;
     rootId: string;
     showInTimeline: boolean;

package/dist/cjs/HtmlInCanvas.js

@@ -235,7 +235,9 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
     const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
     const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: name === undefined
+            ? 'https://www.remotion.dev/docs/remotion/html-in-canvas'
+            : undefined, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, layout: "none", ...sequenceProps, children: (0, jsx_runtime_1.jsx)(HtmlInCanvasContent, { ref: ref, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 const htmlInCanvasSchema = {

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,20 +172,20 @@ 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) {
         throw new Error('No "src" prop was passed to <Img>.');
     }
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from !== null && from !== void 0 ? from : 0, durationInFrames: durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : Infinity, _remotionInternalStack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _remotionInternalIsMedia: { type: 'image', src }, name: name !== null && name !== void 0 ? name : '<Img>', _experimentalControls: controls, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, hidden: hidden, children: (0, jsx_runtime_1.jsx)(ImgContent, { src: src, ...props }) }));
 };
 const imgSchema = {
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,

package/dist/cjs/Sequence.d.ts

@@ -40,6 +40,10 @@ export type SequencePropsWithoutDuration = {
      * @deprecated For internal use only.
      */
     readonly _remotionInternalStack?: string;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalDocumentationLink?: string;
     /**
      * @deprecated For internal use only.
      */

package/dist/cjs/Sequence.js

@@ -18,7 +18,7 @@ const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 const v5_flag_js_1 = require("./v5-flag.js");
 const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
-const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
+const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, hidden = false, _experimentalControls: controls, _remotionInternalEffects, _remotionInternalLoopDisplay: loopDisplay, _remotionInternalStack: stack, _remotionInternalDocumentationLink: documentationLink, _remotionInternalPremountDisplay: premountDisplay, _remotionInternalPostmountDisplay: postmountDisplay, _remotionInternalIsMedia: isMedia, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -97,6 +97,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
     const timelineClipName = (0, react_1.useMemo)(() => {
         return name !== null && name !== void 0 ? name : '';
     }, [name]);
+    const resolvedDocumentationLink = documentationLink !== null && documentationLink !== void 0 ? documentationLink : (name === undefined ? 'https://www.remotion.dev/docs/sequence' : null);
     const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     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
@@ -115,6 +116,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     controls: controls !== null && controls !== void 0 ? controls : null,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
                     displayName: timelineClipName,
+                    documentationLink: resolvedDocumentationLink,
                     duration: actualDurationInFrames,
                     from,
                     id,
@@ -135,6 +137,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     controls: controls !== null && controls !== void 0 ? controls : null,
                     effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
                     displayName: timelineClipName,
+                    documentationLink: resolvedDocumentationLink,
                     doesVolumeChange: isMedia.data.doesVolumeChange,
                     duration: actualDurationInFrames,
                     from,
@@ -162,6 +165,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             duration: actualDurationInFrames,
             id,
             displayName: timelineClipName,
+            documentationLink: resolvedDocumentationLink,
             parent: (_c = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _c !== void 0 ? _c : null,
             type: 'sequence',
             rootId,
@@ -197,6 +201,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         controls,
         _remotionInternalEffects,
         isMedia,
+        resolvedDocumentationLink,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

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

@@ -158,7 +158,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         className,
         style,
     };
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, children: (0, jsx_runtime_1.jsx)(AnimatedImageContent, { ...animatedImageProps, ref: ref, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, wrap_in_schema_js_1.wrapInSchema)(AnimatedImageInner, animatedImageSchema);
 exports.AnimatedImage.displayName = 'AnimatedImage';

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/AudioForPreview.js

@@ -134,6 +134,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         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,
+        documentationLink: name === undefined ? 'https://www.remotion.dev/docs/html5-audio' : null,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

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/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>>;