remotion 4.0.500 → 4.0.501

package/dist/cjs/video/OffthreadVideo.js

@@ -14,7 +14,7 @@ const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const InnerOffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, _remotionInternalStack, showInTimeline, ...otherProps } = props;
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
     const shouldPauseWhenBuffering = (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering);
     if (environment.isClientSideRendering) {
@@ -33,25 +33,25 @@ const InnerOffthreadVideo = (props) => {
     });
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
-        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }) }));
+        return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue, name: name, children: jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)(props, 'Video');
     if (environment.isRendering) {
-        return (jsx_runtime_1.jsx(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, stack: undefined, startFrom: undefined, endAt: undefined }));
+        return (jsx_runtime_1.jsx(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { pauseWhenBuffering: shouldPauseWhenBuffering, ...otherProps, trimAfter: undefined, name: undefined, showInTimeline: showInTimeline, trimBefore: undefined, _remotionInternalStack: undefined, startFrom: undefined, endAt: undefined }));
     }
     const { transparent, toneMapped, onAutoPlayError, onVideoFrame, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, ...propsForPreview } = otherProps;
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: shouldPauseWhenBuffering, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
+    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: shouldPauseWhenBuffering, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, crossOrigin: crossOrigin, ...propsForPreview, _remotionInternalNativeLoopPassed: false }));
 };
 exports.InnerOffthreadVideo = InnerOffthreadVideo;
 /*
  * @description This method imports and displays a video, similar to <Html5Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
-const OffthreadVideo = ({ src, acceptableTimeShiftInSeconds, allowAmplificationDuringRender, audioStreamIndex, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, muted, name, onAutoPlayError, onError, onVideoFrame, pauseWhenBuffering, playbackRate, preservePitch, showInTimeline, style, toneFrequency, toneMapped, transparent, trimAfter, trimBefore, useWebAudioApi, volume, _remotionInternalNativeLoopPassed, endAt, stack, startFrom, imageFormat, ...props }) => {
+const OffthreadVideo = ({ src, acceptableTimeShiftInSeconds, allowAmplificationDuringRender, audioStreamIndex, crossOrigin, delayRenderRetries, delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior, muted, name, onAutoPlayError, onError, onVideoFrame, pauseWhenBuffering, playbackRate, preservePitch, showInTimeline, style, toneFrequency, toneMapped, transparent, trimAfter, trimBefore, useWebAudioApi, volume, _remotionInternalNativeLoopPassed, endAt, _remotionInternalStack, startFrom, imageFormat, ...props }) => {
     if (imageFormat) {
         throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
     }
-    return (jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering), playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, stack: stack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
+    return (jsx_runtime_1.jsx(exports.InnerOffthreadVideo, { acceptableTimeShiftInSeconds: acceptableTimeShiftInSeconds, allowAmplificationDuringRender: allowAmplificationDuringRender !== null && allowAmplificationDuringRender !== void 0 ? allowAmplificationDuringRender : true, audioStreamIndex: audioStreamIndex !== null && audioStreamIndex !== void 0 ? audioStreamIndex : 0, crossOrigin: crossOrigin, delayRenderRetries: delayRenderRetries, delayRenderTimeoutInMilliseconds: delayRenderTimeoutInMilliseconds, loopVolumeCurveBehavior: loopVolumeCurveBehavior !== null && loopVolumeCurveBehavior !== void 0 ? loopVolumeCurveBehavior : 'repeat', muted: muted !== null && muted !== void 0 ? muted : false, name: name, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : null, onError: onError, onVideoFrame: onVideoFrame, pauseWhenBuffering: (0, v5_flag_js_1.resolveV5Default)(pauseWhenBuffering), playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1, preservePitch: preservePitch, toneFrequency: toneFrequency !== null && toneFrequency !== void 0 ? toneFrequency : 1, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, src: src, _remotionInternalStack: _remotionInternalStack, startFrom: startFrom, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, endAt: endAt, style: style, toneMapped: toneMapped !== null && toneMapped !== void 0 ? toneMapped : true, transparent: transparent !== null && transparent !== void 0 ? transparent : false, trimAfter: trimAfter, trimBefore: trimBefore, useWebAudioApi: useWebAudioApi !== null && useWebAudioApi !== void 0 ? useWebAudioApi : false, volume: volume, ...props }));
 };
 exports.OffthreadVideo = OffthreadVideo;
 (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.OffthreadVideo);

package/dist/cjs/video/html5-video.d.ts

@@ -25,7 +25,7 @@ export declare const Html5Video: React.ForwardRefExoticComponent<Omit<import("./
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;
 /**
  * @deprecated This component has been renamed to `Html5Video`.
@@ -53,5 +53,5 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<import("./props
     /**
      * @deprecated For internal use only
      */
-    readonly stack?: string | undefined;
+    readonly _remotionInternalStack?: string | undefined;
 }, "ref"> & React.RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/html5-video.js

@@ -20,7 +20,7 @@ const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const VideoForRendering_js_1 = require("./VideoForRendering.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b, _c;
-    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, onVideoFrame, ...otherProps } = props;
+    const { startFrom, endAt, trimBefore, trimAfter, name, pauseWhenBuffering, _remotionInternalStack, _remotionInternalNativeLoopPassed, showInTimeline, onAutoPlayError, onVideoFrame, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
@@ -49,7 +49,7 @@ const VideoForwardingFunction = (props, ref) => {
     });
     if (loop && durationFetched !== undefined) {
         if (!Number.isFinite(durationFetched)) {
-            return (jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, stack: stack, _remotionInternalNativeLoopPassed: true }));
+            return (jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }));
         }
         const mediaDuration = durationFetched * fps;
         return (jsx_runtime_1.jsx(index_js_1.Loop, { durationInFrames: (0, calculate_media_duration_js_1.calculateMediaDuration)({
@@ -57,13 +57,13 @@ const VideoForwardingFunction = (props, ref) => {
                 mediaDurationInFrames: mediaDuration,
                 playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
                 trimBefore: trimBeforeValue,
-            }), layout: "none", name: name, showInTimeline: false, children: jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, stack: stack, _remotionInternalNativeLoopPassed: true }) }));
+            }), layout: "none", name: name, showInTimeline: false, children: jsx_runtime_1.jsx(exports.Html5Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalStack: _remotionInternalStack, _remotionInternalNativeLoopPassed: true }) }));
     }
     if (typeof trimBeforeValue !== 'undefined' ||
         typeof trimAfterValue !== 'undefined') {
         return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", from: 0 - (trimBeforeValue !== null && trimBeforeValue !== void 0 ? trimBeforeValue : 0), showInTimeline: false, durationInFrames: trimAfterValue === undefined
                 ? undefined
-                : trimAfterValue / ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, stack: stack }) }));
+                : trimAfterValue / ((_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1), name: name, children: jsx_runtime_1.jsx(exports.Html5Video, { pauseWhenBuffering: shouldPauseWhenBuffering, onVideoFrame: onVideoFrame, ...otherProps, ref: ref, _remotionInternalStack: _remotionInternalStack }) }));
     }
     (0, validate_media_props_js_1.validateMediaProps)({
         playbackRate: props.playbackRate,
@@ -73,7 +73,7 @@ const VideoForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx_runtime_1.jsx(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, ...otherProps, ref: ref }));
     }
-    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, pauseWhenBuffering: shouldPauseWhenBuffering, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
+    return (jsx_runtime_1.jsx(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onVideoFrame: onVideoFrame !== null && onVideoFrame !== void 0 ? onVideoFrame : null, pauseWhenBuffering: shouldPauseWhenBuffering, onDuration: onDuration, _remotionInternalStack: _remotionInternalStack !== null && _remotionInternalStack !== void 0 ? _remotionInternalStack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, onAutoPlayError: onAutoPlayError !== null && onAutoPlayError !== void 0 ? onAutoPlayError : undefined }));
 };
 /**
  * @description Wraps the native `<video>` element to include video in your component that is synchronized with Remotion's time.

package/dist/cjs/video/props.d.ts

@@ -74,7 +74,7 @@ type OptionalOffthreadVideoProps = {
     /**
      * @deprecated For internal use only
      */
-    stack: string | undefined;
+    _remotionInternalStack: string | undefined;
     showInTimeline: boolean;
     onAutoPlayError: null | (() => void);
     onVideoFrame: OnVideoFrame | undefined;

package/dist/cjs/with-interactivity-schema.js

@@ -37,6 +37,7 @@ exports.withInteractivitySchema = exports.mergeValues = exports.selectActiveKeys
 const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.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 flatten_schema_js_1 = require("./flatten-schema.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
@@ -125,10 +126,12 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
     const flatKeys = Object.keys(flatSchema);
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {
         var _a;
+        const { _remotionInternalStack: internalStack, ...propsWithoutInternalStack } = props;
+        const cleanProps = propsWithoutInternalStack;
         const env = (0, use_remotion_environment_js_1.useRemotionEnvironment)();
         if (!env.isStudio || env.isRendering) {
             return react_1.default.createElement(Component, {
-                ...props,
+                ...cleanProps,
                 controls: null,
                 ref,
             });
@@ -143,24 +146,28 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const frame = (0, use_current_frame_js_1.useCurrentFrame)();
         // If the parent has passed `controls`, we should not override it.
         // @ts-expect-error
-        if (props.controls) {
+        if (cleanProps.controls) {
+            // @ts-expect-error `controls` is injected by another interactive wrapper.
+            const passedControls = cleanProps.controls;
+            if ((0, enable_sequence_stack_traces_js_1.getStackForControls)(passedControls) === null) {
+                (0, enable_sequence_stack_traces_js_1.setStackForControls)(passedControls, internalStack);
+            }
             return react_1.default.createElement(Component, {
-                ...props,
+                ...cleanProps,
                 ref,
             });
         }
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const [overrideId] = (0, react_1.useState)(() => {
-            const { stack } = props;
-            if (!stack) {
+            if (!internalStack) {
                 return String(Math.random());
             }
-            const existingOverrideId = stackToOverrideMap[stack];
+            const existingOverrideId = stackToOverrideMap[internalStack];
             if (existingOverrideId) {
                 return existingOverrideId;
             }
             const newOverrideId = String(Math.random());
-            stackToOverrideMap[stack] = newOverrideId;
+            stackToOverrideMap[internalStack] = newOverrideId;
             return newOverrideId;
         });
         const nodePath = env.isReadOnlyStudio
@@ -173,10 +180,10 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         const runtimeValues = flatKeys.map((key) => (0, exports.getRuntimeValueForSchemaKey)({
             flatSchema,
             key,
-            props: props,
+            props: cleanProps,
         }));
         // eslint-disable-next-line react-hooks/rules-of-hooks
-        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(props, flatKeys, flatSchema), 
+        const currentRuntimeValueDotNotation = (0, react_1.useMemo)(() => (0, exports.readValuesFromProps)(cleanProps, flatKeys, flatSchema), 
         // eslint-disable-next-line react-hooks/exhaustive-deps
         runtimeValues);
         // eslint-disable-next-line react-hooks/rules-of-hooks
@@ -190,6 +197,7 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
                 componentName,
             };
         }, [currentRuntimeValueDotNotation, overrideId]);
+        (0, enable_sequence_stack_traces_js_1.setStackForControls)(controls, internalStack);
         // 3. Apply drag/code overrides on top of the runtime values.
         // eslint-disable-next-line react-hooks/rules-of-hooks
         const { merged: valuesDotNotation, propsToDelete } = (0, react_1.useMemo)(() => {
@@ -214,7 +222,7 @@ const withInteractivitySchema = ({ Component, componentName, componentIdentity,
         // 5. Apply the active values back onto the props.
         const mergedProps = (0, exports.mergeValues)({
             flatSchema,
-            props: props,
+            props: cleanProps,
             valuesDotNotation,
             schemaKeys: activeKeys,
             propsToDelete,