remotion 4.0.468 → 4.0.470

package/dist/cjs/CompositionManager.d.ts

@@ -70,6 +70,7 @@ export type TSequence = {
     premountDisplay: number | null;
     postmountDisplay: number | null;
     controls: SequenceControls | null;
+    refForOutline: React.RefObject<HTMLElement | null> | null;
     effects: readonly EffectDefinition<unknown>[];
 } & EnhancedTSequenceData;
 export type AudioOrVideoAsset = {

package/dist/cjs/Img.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
+import type { EffectsProp } from './effects/effect-types.js';
 import type { SequenceProps } from './Sequence.js';
-export declare function truncateSrcForLabel(src: string): string;
 type NativeImgProps = Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, 'src'>;
 export type ImgProps = NativeImgProps & {
     readonly maxRetries?: number;
@@ -9,6 +9,7 @@ export type ImgProps = NativeImgProps & {
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
     readonly src: string;
+    readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
     /**
@@ -16,6 +17,37 @@ export type ImgProps = NativeImgProps & {
      */
     readonly stack?: string;
 } & Pick<SequenceProps, 'durationInFrames' | 'from' | 'hidden'>;
+export declare const imgSchema: {
+    readonly hidden: import("./sequence-field-schema.js").SequenceFieldSchema;
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "number";
+        readonly min: 0.05;
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+    };
+};
 export declare const Img: React.ComponentType<NativeImgProps & {
     readonly maxRetries?: number;
     readonly pauseWhenLoading?: boolean;
@@ -23,6 +55,7 @@ export declare const Img: React.ComponentType<NativeImgProps & {
     readonly delayRenderTimeoutInMilliseconds?: number;
     readonly onImageFrame?: (imageElement: HTMLImageElement) => void;
     readonly src: string;
+    readonly effects?: EffectsProp;
     readonly showInTimeline?: boolean;
     readonly name?: string;
     /**

package/dist/cjs/Img.js

@@ -1,15 +1,16 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Img = void 0;
-exports.truncateSrcForLabel = truncateSrcForLabel;
+exports.Img = exports.imgSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const index_js_1 = require("./canvas-image/index.js");
 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 sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
+const truncate_src_for_label_js_1 = require("./truncate-src-for-label.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_remotion_environment_js_1 = require("./use-remotion-environment.js");
@@ -17,14 +18,6 @@ const wrap_in_schema_js_1 = require("./wrap-in-schema.js");
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-// Data URLs like the ones from canvas.toDataURL() can be many megabytes, which makes the delayRender() label
-// unreadable and bloats log output
-function truncateSrcForLabel(src) {
-    if (src.startsWith('data:') && src.length > 100) {
-        return src.slice(0, 60) + '...[' + src.length + ' chars total]';
-    }
-    return src;
-}
 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)({});
@@ -74,13 +67,13 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         if (((_g = errors.current[(_f = imageRef.current) === null || _f === void 0 ? void 0 : _f.src]) !== null && _g !== void 0 ? _g : 0) <= maxRetries) {
             const backoff = exponentialBackoff((_j = errors.current[(_h = imageRef.current) === null || _h === void 0 ? void 0 : _h.src]) !== null && _j !== void 0 ? _j : 0);
             // eslint-disable-next-line no-console
-            console.warn(`Could not load image with source ${truncateSrcForLabel((_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src)}, retrying again in ${backoff}ms`);
+            console.warn(`Could not load image with source ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_k = imageRef.current) === null || _k === void 0 ? void 0 : _k.src)}, retrying again in ${backoff}ms`);
             retryIn(backoff);
             return;
         }
         try {
             cancelRender('Error loading image with src: ' +
-                truncateSrcForLabel((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
+                (0, truncate_src_for_label_js_1.truncateSrcForLabel)((_l = imageRef.current) === null || _l === void 0 ? void 0 : _l.src));
         }
         catch (_m) {
             // cancelRender() intentionally throws after storing the error in scope.
@@ -103,7 +96,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
             if (!current) {
                 return;
             }
-            const newHandle = delayRender('Loading <Img> with src=' + truncateSrcForLabel(actualSrc), {
+            const newHandle = delayRender('Loading <Img> with src=' + (0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc), {
                 retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
                 timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
             });
@@ -121,7 +114,7 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
                 if (((_b = errors.current[(_a = imageRef.current) === null || _a === void 0 ? void 0 : _a.src]) !== null && _b !== void 0 ? _b : 0) > 0) {
                     delete errors.current[(_c = imageRef.current) === null || _c === void 0 ? void 0 : _c.src];
                     // eslint-disable-next-line no-console
-                    console.info(`Retry successful - ${truncateSrcForLabel((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)} is now loaded`);
+                    console.info(`Retry successful - ${(0, truncate_src_for_label_js_1.truncateSrcForLabel)((_d = imageRef.current) === null || _d === void 0 ? void 0 : _d.src)} is now loaded`);
                 }
                 if (current) {
                     onImageFrame === null || onImageFrame === void 0 ? void 0 : onImageFrame(current);
@@ -181,19 +174,79 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
     // 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: isRendering ? 'sync' : decoding }));
 };
-const ImgInner = ({ hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, ...props }) => {
+const NativeImgInner = ({ 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, _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 = {
+const CanvasImageWithPrivateProps = index_js_1.CanvasImage;
+exports.imgSchema = {
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
     hidden: sequence_field_schema_js_1.hiddenField,
 };
+const imgCanvasFallbackIncompatibleProps = new Set([
+    'alt',
+    'crossOrigin',
+    'decoding',
+    'fetchPriority',
+    'loading',
+    'onError',
+    'onImageFrame',
+    'onLoad',
+    'sizes',
+    'srcSet',
+    'useMap',
+]);
+const getIncompatiblePropNames = (props) => Object.keys(props).filter((key) => props[key] !== undefined && imgCanvasFallbackIncompatibleProps.has(key));
+const formatPropList = (props) => {
+    return props.map((prop) => `"${prop}"`).join(', ');
+};
+const validateCanvasImageFallbackProps = ({ props, ref, width, height, }) => {
+    if (typeof width === 'string' || typeof height === 'string') {
+        throw new Error('The "width" and "height" props must be numbers on <Img> when effects are passed, because <Img> renders a <CanvasImage>. Use numeric props or CSS dimensions in "style".');
+    }
+    const conflictingProps = getIncompatiblePropNames(props);
+    if (ref !== null && ref !== undefined) {
+        conflictingProps.unshift('ref');
+    }
+    if (conflictingProps.length === 0) {
+        return;
+    }
+    throw new Error(`The ${formatPropList(conflictingProps)} prop${conflictingProps.length === 1 ? '' : 's'} cannot be used on <Img> when effects are passed, because <Img> renders a <canvas> instead of a native <img>. Remove ${conflictingProps.length === 1 ? 'this prop' : 'these props'}.`);
+};
+const getFitFromObjectFit = (style) => {
+    const objectFit = style === null || style === void 0 ? void 0 : style.objectFit;
+    if (objectFit === 'fill' ||
+        objectFit === 'contain' ||
+        objectFit === 'cover') {
+        return objectFit;
+    }
+    return undefined;
+};
+const ImgInner = ({ effects = [], ref, hidden, name, stack, showInTimeline, src, from, durationInFrames, _experimentalControls: controls, width, height, className, style, id, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...props }) => {
+    var _a;
+    if (effects.length === 0) {
+        return ((0, jsx_runtime_1.jsx)(NativeImgInner, { ...props, ref: ref, hidden: hidden, name: name, stack: stack, showInTimeline: showInTimeline, src: src, from: from, durationInFrames: durationInFrames, _experimentalControls: controls, width: width, height: height, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds }));
+    }
+    if (!src) {
+        throw new Error('No "src" prop was passed to <Img>.');
+    }
+    validateCanvasImageFallbackProps({
+        props,
+        ref,
+        width,
+        height,
+    });
+    const canvasWidth = typeof width === 'number' ? width : undefined;
+    const canvasHeight = typeof height === 'number' ? height : undefined;
+    const canvasProps = props;
+    const canvasFit = (_a = getFitFromObjectFit(style)) !== null && _a !== void 0 ? _a : 'fill';
+    return ((0, jsx_runtime_1.jsx)(CanvasImageWithPrivateProps, { src: src, width: canvasWidth, height: canvasHeight, fit: canvasFit, effects: effects, className: className, style: style, id: id, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, from: from, durationInFrames: durationInFrames, hidden: hidden, name: name !== null && name !== void 0 ? name : '<Img>', showInTimeline: showInTimeline, stack: stack, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/img' : undefined, _experimentalControls: controls, ...canvasProps }));
+};
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.
  * @see [Documentation](https://remotion.dev/docs/img)
  */
-exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, imgSchema);
+exports.Img = (0, wrap_in_schema_js_1.wrapInSchema)(ImgInner, exports.imgSchema);
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Img);

package/dist/cjs/RemotionRoot.d.ts

@@ -5,6 +5,7 @@ export declare const RemotionRootContexts: React.FC<{
     readonly numberOfAudioTags: number;
     readonly logLevel: LogLevel;
     readonly audioLatencyHint: AudioContextLatencyCategory;
+    readonly previewSampleRate: number | null;
     readonly videoEnabled: boolean;
     readonly audioEnabled: boolean;
     readonly frameState: Record<string, number> | null;

package/dist/cjs/RemotionRoot.js

@@ -13,7 +13,7 @@ const SequenceManager_js_1 = require("./SequenceManager.js");
 const TimelineContext_js_1 = require("./TimelineContext.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, videoEnabled, audioEnabled, frameState, }) => {
+const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLatencyHint, previewSampleRate, videoEnabled, audioEnabled, frameState, }) => {
     const nonceContext = (0, react_1.useMemo)(() => {
         let counter = 0;
         return {
@@ -23,6 +23,6 @@ const RemotionRootContexts = ({ children, numberOfAudioTags, logLevel, audioLate
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(TimelineContext_js_1.TimelineContextProvider, { frameState: frameState, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManagerProvider, { children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioContextProvider, { audioLatencyHint: audioLatencyHint, audioEnabled: audioEnabled, previewSampleRate: previewSampleRate, children: (0, jsx_runtime_1.jsx)(shared_audio_tags_js_1.SharedAudioTagsContextProvider, { numberOfAudioTags: numberOfAudioTags, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRootContexts = RemotionRootContexts;

package/dist/cjs/Sequence.d.ts

@@ -62,6 +62,10 @@ export type SequencePropsWithoutDuration = {
         type: 'image';
         src: string;
     };
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalRefForOutline?: React.RefObject<HTMLElement | null> | null;
 } & LayoutAndStyle;
 export type SequenceProps = {
     readonly durationInFrames?: number;

package/dist/cjs/Sequence.js

@@ -17,7 +17,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, _remotionInternalDocumentationLink: documentationLink, _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, _remotionInternalRefForOutline: refForOutline, ...other }, ref) => {
     var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = (0, react_1.useState)(() => String(Math.random()));
@@ -152,6 +152,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     showInTimeline,
                     src: isMedia.src,
                     getStack: () => stackRef.current,
+                    refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                 });
             }
             else {
@@ -177,6 +178,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
                     getStack: () => stackRef.current,
                     startMediaFrom: isMedia.data.startMediaFrom,
                     volume: isMedia.data.volumes,
+                    refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
                 });
             }
             return () => {
@@ -200,6 +202,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
             postmountDisplay: postmountDisplay !== null && postmountDisplay !== void 0 ? postmountDisplay : null,
             controls: controls !== null && controls !== void 0 ? controls : null,
             effects: _remotionInternalEffects !== null && _remotionInternalEffects !== void 0 ? _remotionInternalEffects : [],
+            refForOutline: refForOutline !== null && refForOutline !== void 0 ? refForOutline : null,
         });
         return () => {
             unregisterSequence(id);
@@ -225,6 +228,7 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, durationInFrames = Inf
         _remotionInternalEffects,
         isMedia,
         resolvedDocumentationLink,
+        refForOutline,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958

package/dist/cjs/audio/AudioForPreview.js

@@ -135,6 +135,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         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,
+        refForOutline: null,
     });
     // putting playback before useVolume
     // because volume looks at playbackrate

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

@@ -1,5 +1,4 @@
-import { type AudioHTMLAttributes } from 'react';
-import React from 'react';
+import React, { type AudioHTMLAttributes } from 'react';
 import type { SharedElementSourceNode } from './shared-element-source-node.js';
 import type { RemotionAudioContextState } from './use-audio-context.js';
 /**
@@ -85,6 +84,7 @@ export declare const SharedAudioContextProvider: React.FC<{
     readonly children: React.ReactNode;
     readonly audioLatencyHint: AudioContextLatencyCategory;
     readonly audioEnabled: boolean;
+    readonly previewSampleRate: number | null;
 }>;
 export declare const SharedAudioTagsContextProvider: React.FC<{
     readonly numberOfAudioTags: number;

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

@@ -88,12 +88,20 @@ const shouldSaveForLater = (state) => {
     }
     throw new Error(`Unexpected audio context state: ${state}`);
 };
-const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled }) => {
+const SharedAudioContextProvider = ({ children, audioLatencyHint, audioEnabled, previewSampleRate }) => {
     const logLevel = (0, log_level_context_js_1.useLogLevel)();
+    const sampleRate = previewSampleRate !== null && previewSampleRate !== void 0 ? previewSampleRate : 48000;
+    (0, react_1.useEffect)(() => {
+        if (typeof window === 'undefined') {
+            return;
+        }
+        window.remotion_sampleRate = sampleRate;
+    }, [sampleRate]);
     const ctxAndGain = (0, use_audio_context_js_1.useSingletonAudioContext)({
         logLevel,
         latencyHint: audioLatencyHint,
         audioEnabled,
+        sampleRate,
     });
     const audioContextIsPlayingEventually = (0, react_1.useRef)(false);
     const isResuming = (0, react_1.useRef)(null);

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

@@ -1,9 +1,10 @@
 import type { LogLevel } from '../log';
 export type RemotionAudioContextState = AudioContextState | 'running-to-suspended' | 'suspended-to-running';
-export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, }: {
+export declare const useSingletonAudioContext: ({ logLevel, latencyHint, audioEnabled, sampleRate, }: {
     logLevel: LogLevel;
     latencyHint: AudioContextLatencyCategory;
     audioEnabled: boolean;
+    sampleRate: number;
 }) => {
     audioContext: AudioContext;
     gainNode: GainNode;

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

@@ -15,8 +15,12 @@ const warnOnce = (logLevel) => {
         log_1.Log.warn({ logLevel, tag: null }, 'AudioContext is not supported in this browser');
     }
 };
-const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
+const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, sampleRate, }) => {
     const env = (0, use_remotion_environment_1.useRemotionEnvironment)();
+    const initialSampleRate = (0, react_1.useRef)(sampleRate);
+    if (sampleRate !== initialSampleRate.current) {
+        throw new Error(`Changing the AudioContext sample rate dynamically is not supported. The sample rate was initialized with ${initialSampleRate.current} Hz, but ${sampleRate} Hz was passed later.`);
+    }
     const context = (0, react_1.useMemo)(() => {
         if (env.isRendering) {
             return null;
@@ -33,7 +37,7 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
             // By default, this can end up being 44100Hz.
             // Playing a 48000Hz file in a 44100Hz context, such as https://remotion.media/video.mp4 in a @remotion/media tag
             // we observe some issues that seem to go away when we set the sample rate to 48000 with Sony LinkBuds Bluetooth headphones.
-            sampleRate: 48000,
+            sampleRate,
         });
         const gainNode = audioContext.createGain();
         gainNode.connect(audioContext.destination);
@@ -79,7 +83,7 @@ const useSingletonAudioContext = ({ logLevel, latencyHint, audioEnabled, }) => {
             resume,
             suspend,
         };
-    }, [logLevel, latencyHint, env.isRendering, audioEnabled]);
+    }, [logLevel, latencyHint, env.isRendering, audioEnabled, sampleRate]);
     return context;
 };
 exports.useSingletonAudioContext = useSingletonAudioContext;

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

@@ -1,7 +1,49 @@
 import type { EffectsProp } from '../effects/effect-types.js';
+import type { CanvasImageCanvasProps } from './props.js';
+export declare const canvasImageSchema: {
+    readonly hidden: import("../sequence-field-schema.js").SequenceFieldSchema;
+    readonly 'style.translate': {
+        readonly type: "translate";
+        readonly step: 1;
+        readonly default: "0px 0px";
+        readonly description: "Offset";
+    };
+    readonly 'style.scale': {
+        readonly type: "number";
+        readonly min: 0.05;
+        readonly max: 100;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Scale";
+    };
+    readonly 'style.rotate': {
+        readonly type: "rotation";
+        readonly step: 1;
+        readonly default: "0deg";
+        readonly description: "Rotation";
+    };
+    readonly 'style.opacity': {
+        readonly type: "number";
+        readonly min: 0;
+        readonly max: 1;
+        readonly step: 0.01;
+        readonly default: 1;
+        readonly description: "Opacity";
+    };
+    readonly fit: {
+        readonly type: "enum";
+        readonly default: "fill";
+        readonly description: "Fit";
+        readonly variants: {
+            readonly fill: {};
+            readonly contain: {};
+            readonly cover: {};
+        };
+    };
+};
 export declare const CanvasImage: import("react").ComponentType<Pick<import("../Sequence.js").SequenceProps, "hidden" | "name" | "durationInFrames" | "from" | "showInTimeline"> & {
     readonly stack?: string;
-} & {
+} & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number;
     readonly height?: number;
@@ -15,4 +57,5 @@ export declare const CanvasImage: import("react").ComponentType<Pick<import("../
     readonly maxRetries?: number;
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
+    readonly _remotionInternalDocumentationLink?: string;
 } & import("react").RefAttributes<HTMLCanvasElement>>;

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

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.CanvasImage = void 0;
+exports.CanvasImage = exports.canvasImageSchema = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const calculate_image_fit_js_1 = require("../calculate-image-fit.js");
@@ -8,15 +8,15 @@ 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 use_memoized_effects_js_1 = require("../effects/use-memoized-effects.js");
 const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
-const Img_js_1 = require("../Img.js");
 const prefetch_js_1 = require("../prefetch.js");
 const sequence_field_schema_js_1 = require("../sequence-field-schema.js");
 const Sequence_js_1 = require("../Sequence.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
+const truncate_src_for_label_js_1 = require("../truncate-src-for-label.js");
 const use_buffer_state_js_1 = require("../use-buffer-state.js");
 const use_delay_render_js_1 = require("../use-delay-render.js");
 const wrap_in_schema_js_1 = require("../wrap-in-schema.js");
-const canvasImageSchema = {
+exports.canvasImageSchema = {
     fit: {
         type: 'enum',
         default: 'fill',
@@ -65,14 +65,14 @@ const loadImage = ({ src, signal, }) => {
                 const imageWidth = image.naturalWidth || image.width;
                 const imageHeight = image.naturalHeight || image.height;
                 if (imageWidth <= 0 || imageHeight <= 0) {
-                    settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+                    settle(() => reject(new Error(`Could not determine dimensions for <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(src)}"`)));
                     return;
                 }
                 settle(() => resolve({ element: image, width: imageWidth, height: imageHeight }));
             });
         };
         image.onerror = () => {
-            settle(() => reject(new Error(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(src)}"`)));
+            settle(() => reject(new Error(`Could not load <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(src)}"`)));
         };
         signal.addEventListener('abort', onAbort, { once: true });
         if (signal.aborted) {
@@ -86,7 +86,7 @@ const loadImage = ({ src, signal, }) => {
 function exponentialBackoff(errorCount) {
     return 1000 * 2 ** (errorCount - 1);
 }
-const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, }, ref) => {
+const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit = 'fill', effects, controls, onError, className, style, id, pauseWhenLoading, maxRetries = 2, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...canvasProps }, ref) => {
     var _a;
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const { delayPlayback } = (0, use_buffer_state_js_1.useBufferState)();
@@ -119,7 +119,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         }
         const isPremounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.premounting);
         const isPostmounting = Boolean(sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.postmounting);
-        const handle = delayRender(`Rendering <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}"`, {
+        const handle = delayRender(`Rendering <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}"`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });
@@ -182,7 +182,7 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
                 if (errorCount <= maxRetries) {
                     const backoff = exponentialBackoff(errorCount);
                     // eslint-disable-next-line no-console
-                    console.warn(`Could not load <CanvasImage> with src="${(0, Img_js_1.truncateSrcForLabel)(actualSrc)}", retrying in ${backoff}ms`);
+                    console.warn(`Could not load <CanvasImage> with src="${(0, truncate_src_for_label_js_1.truncateSrcForLabel)(actualSrc)}", retrying in ${backoff}ms`);
                     timeoutId = setTimeout(() => {
                         if (!cancelled) {
                             attemptLoad();
@@ -228,20 +228,20 @@ const CanvasImageContent = (0, react_1.forwardRef)(({ src, width, height, fit =
         sourceCanvas,
         width,
     ]);
-    return ((0, jsx_runtime_1.jsx)("canvas", { ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
+    return ((0, jsx_runtime_1.jsx)("canvas", { ...canvasProps, ref: canvasRef, width: width, height: height, className: className, style: style, id: id }));
 });
 CanvasImageContent.displayName = 'CanvasImageContent';
-const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls: controls, }, ref) => {
+const CanvasImageInner = (0, react_1.forwardRef)(({ src, width, height, fit, effects = [], className, style, id, onError, pauseWhenLoading, maxRetries, delayRenderRetries, delayRenderTimeoutInMilliseconds, durationInFrames, from, hidden, name, showInTimeline, stack, _experimentalControls: controls, _remotionInternalDocumentationLink, ...canvasProps }, ref) => {
     if (!src) {
         throw new Error('No "src" prop was passed to <CanvasImage>.');
     }
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    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, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, children: (0, jsx_runtime_1.jsx)(CanvasImageContent, { ref: ref, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds }) }));
+    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, hidden: hidden, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, name: name !== null && name !== void 0 ? name : '<CanvasImage>', _remotionInternalDocumentationLink: _remotionInternalDocumentationLink !== null && _remotionInternalDocumentationLink !== void 0 ? _remotionInternalDocumentationLink : 'https://www.remotion.dev/docs/canvasimage', _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, _remotionInternalIsMedia: { type: 'image', src }, _remotionInternalStack: stack, children: (0, jsx_runtime_1.jsx)(CanvasImageContent, { ref: ref, src: src, width: width, height: height, fit: fit, effects: effects, controls: controls, className: className, style: style, id: id, onError: onError, pauseWhenLoading: pauseWhenLoading, maxRetries: maxRetries, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, ...canvasProps }) }));
 });
 /*
  * @description Renders a static image to a `<canvas>` and applies Remotion effects.
  * @see [Documentation](https://www.remotion.dev/docs/canvasimage)
  */
-exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, canvasImageSchema);
+exports.CanvasImage = (0, wrap_in_schema_js_1.wrapInSchema)(CanvasImageInner, exports.canvasImageSchema);
 exports.CanvasImage.displayName = 'CanvasImage';
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.CanvasImage);

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

@@ -8,7 +8,8 @@ type CanvasImageSequenceProps = Pick<SequenceProps, 'durationInFrames' | 'from'
      */
     readonly stack?: string;
 };
-export type CanvasImageProps = CanvasImageSequenceProps & {
+export type CanvasImageCanvasProps = Omit<React.CanvasHTMLAttributes<HTMLCanvasElement>, 'children' | 'height' | 'onError' | 'width'>;
+export type CanvasImageProps = CanvasImageSequenceProps & CanvasImageCanvasProps & {
     readonly src: string;
     readonly width?: number;
     readonly height?: number;
@@ -22,5 +23,9 @@ export type CanvasImageProps = CanvasImageSequenceProps & {
     readonly maxRetries?: number;
     readonly delayRenderRetries?: number;
     readonly delayRenderTimeoutInMilliseconds?: number;
+    /**
+     * @deprecated For internal use only.
+     */
+    readonly _remotionInternalDocumentationLink?: string;
 };
 export {};

package/dist/cjs/effects/Solid.js

@@ -32,8 +32,9 @@ const solidSchema = {
         description: 'Height',
     },
     ...sequence_field_schema_js_1.sequenceVisualStyleSchema,
+    hidden: sequence_field_schema_js_1.hiddenField,
 };
-const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, ref, }) => {
+const SolidInner = ({ color, width, height, effects = [], className, style, overrideId, reference, }) => {
     const { delayRender, continueRender, cancelRender } = (0, use_delay_render_js_1.useDelayRender)();
     const [outputCanvas, setOutputCanvas] = (0, react_1.useState)(null);
     const memoizedEffects = (0, use_memoized_effects_js_1.useMemoizedEffects)({
@@ -52,13 +53,13 @@ const SolidInner = ({ color, width, height, effects = [], className, style, over
     const chainState = (0, use_effect_chain_state_js_1.useEffectChainState)();
     const canvasRef = (0, react_1.useCallback)((canvas) => {
         setOutputCanvas(canvas);
-        if (typeof ref === 'function') {
-            ref(canvas);
+        if (typeof reference === 'function') {
+            reference(canvas);
         }
-        else if (ref) {
-            ref.current = canvas;
+        else if (reference) {
+            reference.current = canvas;
         }
-    }, [ref]);
+    }, [reference]);
     // Fill source and run effect chain on every frame / color change.
     (0, react_1.useEffect)(() => {
         if (!outputCanvas || !sourceCanvas) {
@@ -118,7 +119,11 @@ const SolidOuter = (0, react_1.forwardRef)(({ effects = [], _experimentalControl
     var _a;
     props;
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
-    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { ref: ref, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects }) }));
+    const actualRef = (0, react_1.useRef)(null);
+    (0, react_1.useImperativeHandle)(ref, () => {
+        return actualRef.current;
+    }, []);
+    return ((0, jsx_runtime_1.jsx)(Sequence_js_1.Sequence, { layout: "none", from: from, hidden: hidden, showInTimeline: showInTimeline, _experimentalControls: controls, _remotionInternalEffects: memoizedEffectDefinitions, durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<Solid>', _remotionInternalRefForOutline: actualRef, _remotionInternalDocumentationLink: name === undefined ? 'https://www.remotion.dev/docs/solid' : undefined, ...props, children: (0, jsx_runtime_1.jsx)(SolidInner, { reference: actualRef, overrideId: (_a = controls === null || controls === void 0 ? void 0 : controls.overrideId) !== null && _a !== void 0 ? _a : null, color: color, height: height, width: width, className: className, style: style, effects: effects }) }));
 });
 exports.Solid = (0, wrap_in_schema_js_1.wrapInSchema)(SolidOuter, solidSchema);
 exports.Solid.displayName = 'Solid';

package/dist/cjs/effects/effect-types.d.ts

@@ -11,8 +11,8 @@ export type EffectApplyParams<P, S> = {
     readonly gpuDevice: AnyGpuDevice | null;
     /**
      * When `true`, WebGL `texImage2D` uploads use `UNPACK_FLIP_Y_WEBGL` so DOM-style
-     * 2D frame canvases match clip-space UVs. Set by `runEffectChain` — `false` for
-     * prior WebGL outputs and `ImageBitmap` bridges from WebGL.
+     * canvas sources match clip-space UVs. Set by `runEffectChain` — `false` for
+     * `ImageBitmap` bridges from WebGL, which are already oriented for upload.
      */
     readonly flipSourceY: boolean;
 };