remotion 4.0.493 → 4.0.495

package/dist/cjs/HtmlInCanvas.js

@@ -12,7 +12,6 @@ const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const Sequence_js_1 = require("./Sequence.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
 const use_remotion_environment_js_1 = require("./use-remotion-environment.js");
-const use_video_config_js_1 = require("./use-video-config.js");
 const with_interactivity_schema_js_1 = require("./with-interactivity-schema.js");
 // Memoize the support check across the session — neither the platform
 // capability nor the chrome://flags toggle can change between calls.
@@ -357,8 +356,6 @@ const HtmlInCanvasContent = (0, react_1.forwardRef)(({ width, height, effects, c
 });
 HtmlInCanvasContent.displayName = 'HtmlInCanvasContent';
 const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = [], children, onPaint, onInit, pixelDensity, controls, style, durationInFrames, name, ...sequenceProps }, ref) => {
-    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);
     const actualRef = (0, react_1.useRef)(null);
     const setCanvasRef = (0, react_1.useCallback)((node) => {
@@ -370,7 +367,7 @@ const HtmlInCanvasInner = (0, react_1.forwardRef)(({ width, height, effects = []
             ref.current = node;
         }
     }, [ref]);
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: resolvedDuration, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { durationInFrames: durationInFrames, name: name !== null && name !== void 0 ? name : '<HtmlInCanvas>', _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/remotion/html-in-canvas", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, outlineRef: actualRef, layout: "none", ...sequenceProps, children: jsx_runtime_1.jsx(HtmlInCanvasContent, { ref: setCanvasRef, width: width, height: height, effects: effects, onPaint: onPaint, onInit: onInit, pixelDensity: pixelDensity, controls: controls, style: style, children: children }) }));
 });
 HtmlInCanvasInner.displayName = 'HtmlInCanvas';
 exports.htmlInCanvasSchema = {

package/dist/cjs/Img.js

@@ -187,7 +187,9 @@ const ImgContent = ({ onError, maxRetries = 2, src, pauseWhenLoading, delayRende
         requestsVideoFrame: false,
         isClientSideRendering,
     });
-    // src gets set once we've loaded and decoded the image.
+    // `src` is assigned imperatively to this element in the layout effect above.
+    // The element may paint while `decode()` is pending; `delayRender()` only
+    // blocks frame rendering.
     return (jsx_runtime_1.jsx("img", { ...props, ref: imageCallbackRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: isRendering ? 'sync' : decoding }));
 };
 const NativeImgInner = ({ hidden, name, stack, showInTimeline, src, from, trimBefore, durationInFrames, freeze, controls, outlineRef: refForOutline, ...props }) => {

package/dist/cjs/Interactive.d.ts

@@ -175,6 +175,7 @@ export declare const Interactive: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -182,12 +183,7 @@ export declare const Interactive: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
-        };
-        readonly styleWhilePremounted: {
-            readonly type: "hidden";
-        };
-        readonly styleWhilePostmounted: {
-            readonly type: "hidden";
+            readonly keyframable: false;
         };
     };
     sequenceSchema: {
@@ -268,6 +264,7 @@ export declare const Interactive: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -275,6 +272,7 @@ export declare const Interactive: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";

package/dist/cjs/Interactive.js

@@ -58,6 +58,9 @@ const makeRemotionComponentIdentity = ({ packageName, componentName, }) => {
 const interactiveElementSchema = {
     ...interactivity_schema_js_1.baseSchema,
     ...interactivity_schema_js_1.transformSchema,
+};
+const interactiveTextElementSchema = {
+    ...interactiveElementSchema,
     ...interactivity_schema_js_1.textSchema,
     ...interactivity_schema_js_1.textContentSchema,
 };
@@ -74,7 +77,7 @@ const withSchema = (options) => {
     (0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(Wrapped);
     return Wrapped;
 };
-const makeInteractiveElement = (tag, displayName) => {
+const makeInteractiveElement = (tag, displayName, schema) => {
     const Inner = (0, react_1.forwardRef)((propsWithControls, ref) => {
         const { durationInFrames, from, trimBefore, freeze, hidden, name, showInTimeline, stack, controls, ...props } = propsWithControls;
         const refForOutline = (0, react_1.useRef)(null);
@@ -95,12 +98,18 @@ const makeInteractiveElement = (tag, displayName) => {
             packageName: 'remotion',
             componentName: displayName.slice(1, -1),
         }),
-        schema: interactiveElementSchema,
+        schema,
         supportsEffects: false,
     });
     Wrapped.displayName = displayName;
     return Wrapped;
 };
+const makeInteractiveTextElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveTextElementSchema);
+};
+const makeInteractiveNonTextElement = (tag, displayName) => {
+    return makeInteractiveElement(tag, displayName, interactiveElementSchema);
+};
 /**
  * @description HTML and SVG elements that are registered in the Remotion Studio timeline and can be visually edited.
  */
@@ -112,39 +121,39 @@ exports.Interactive = {
     sequenceSchema: interactivity_schema_js_1.sequenceSchema,
     withSchema,
     _internalMakeRemotionComponentIdentity: makeRemotionComponentIdentity,
-    A: makeInteractiveElement('a', '<Interactive.A>'),
-    Article: makeInteractiveElement('article', '<Interactive.Article>'),
-    Aside: makeInteractiveElement('aside', '<Interactive.Aside>'),
-    Button: makeInteractiveElement('button', '<Interactive.Button>'),
-    Circle: makeInteractiveElement('circle', '<Interactive.Circle>'),
-    Code: makeInteractiveElement('code', '<Interactive.Code>'),
-    Div: makeInteractiveElement('div', '<Interactive.Div>'),
-    Ellipse: makeInteractiveElement('ellipse', '<Interactive.Ellipse>'),
-    Em: makeInteractiveElement('em', '<Interactive.Em>'),
-    Footer: makeInteractiveElement('footer', '<Interactive.Footer>'),
-    G: makeInteractiveElement('g', '<Interactive.G>'),
-    H1: makeInteractiveElement('h1', '<Interactive.H1>'),
-    H2: makeInteractiveElement('h2', '<Interactive.H2>'),
-    H3: makeInteractiveElement('h3', '<Interactive.H3>'),
-    H4: makeInteractiveElement('h4', '<Interactive.H4>'),
-    H5: makeInteractiveElement('h5', '<Interactive.H5>'),
-    H6: makeInteractiveElement('h6', '<Interactive.H6>'),
-    Header: makeInteractiveElement('header', '<Interactive.Header>'),
-    Label: makeInteractiveElement('label', '<Interactive.Label>'),
-    Li: makeInteractiveElement('li', '<Interactive.Li>'),
-    Line: makeInteractiveElement('line', '<Interactive.Line>'),
-    Main: makeInteractiveElement('main', '<Interactive.Main>'),
-    Nav: makeInteractiveElement('nav', '<Interactive.Nav>'),
-    Ol: makeInteractiveElement('ol', '<Interactive.Ol>'),
-    P: makeInteractiveElement('p', '<Interactive.P>'),
-    Path: makeInteractiveElement('path', '<Interactive.Path>'),
-    Pre: makeInteractiveElement('pre', '<Interactive.Pre>'),
-    Rect: makeInteractiveElement('rect', '<Interactive.Rect>'),
-    Section: makeInteractiveElement('section', '<Interactive.Section>'),
-    Small: makeInteractiveElement('small', '<Interactive.Small>'),
-    Span: makeInteractiveElement('span', '<Interactive.Span>'),
-    Strong: makeInteractiveElement('strong', '<Interactive.Strong>'),
-    Svg: makeInteractiveElement('svg', '<Interactive.Svg>'),
-    Text: makeInteractiveElement('text', '<Interactive.Text>'),
-    Ul: makeInteractiveElement('ul', '<Interactive.Ul>'),
+    A: makeInteractiveTextElement('a', '<Interactive.A>'),
+    Article: makeInteractiveTextElement('article', '<Interactive.Article>'),
+    Aside: makeInteractiveTextElement('aside', '<Interactive.Aside>'),
+    Button: makeInteractiveTextElement('button', '<Interactive.Button>'),
+    Circle: makeInteractiveNonTextElement('circle', '<Interactive.Circle>'),
+    Code: makeInteractiveTextElement('code', '<Interactive.Code>'),
+    Div: makeInteractiveTextElement('div', '<Interactive.Div>'),
+    Ellipse: makeInteractiveNonTextElement('ellipse', '<Interactive.Ellipse>'),
+    Em: makeInteractiveTextElement('em', '<Interactive.Em>'),
+    Footer: makeInteractiveTextElement('footer', '<Interactive.Footer>'),
+    G: makeInteractiveNonTextElement('g', '<Interactive.G>'),
+    H1: makeInteractiveTextElement('h1', '<Interactive.H1>'),
+    H2: makeInteractiveTextElement('h2', '<Interactive.H2>'),
+    H3: makeInteractiveTextElement('h3', '<Interactive.H3>'),
+    H4: makeInteractiveTextElement('h4', '<Interactive.H4>'),
+    H5: makeInteractiveTextElement('h5', '<Interactive.H5>'),
+    H6: makeInteractiveTextElement('h6', '<Interactive.H6>'),
+    Header: makeInteractiveTextElement('header', '<Interactive.Header>'),
+    Label: makeInteractiveTextElement('label', '<Interactive.Label>'),
+    Li: makeInteractiveTextElement('li', '<Interactive.Li>'),
+    Line: makeInteractiveNonTextElement('line', '<Interactive.Line>'),
+    Main: makeInteractiveTextElement('main', '<Interactive.Main>'),
+    Nav: makeInteractiveTextElement('nav', '<Interactive.Nav>'),
+    Ol: makeInteractiveTextElement('ol', '<Interactive.Ol>'),
+    P: makeInteractiveTextElement('p', '<Interactive.P>'),
+    Path: makeInteractiveNonTextElement('path', '<Interactive.Path>'),
+    Pre: makeInteractiveTextElement('pre', '<Interactive.Pre>'),
+    Rect: makeInteractiveNonTextElement('rect', '<Interactive.Rect>'),
+    Section: makeInteractiveTextElement('section', '<Interactive.Section>'),
+    Small: makeInteractiveTextElement('small', '<Interactive.Small>'),
+    Span: makeInteractiveTextElement('span', '<Interactive.Span>'),
+    Strong: makeInteractiveTextElement('strong', '<Interactive.Strong>'),
+    Svg: makeInteractiveNonTextElement('svg', '<Interactive.Svg>'),
+    Text: makeInteractiveTextElement('text', '<Interactive.Text>'),
+    Ul: makeInteractiveTextElement('ul', '<Interactive.Ul>'),
 };

package/dist/cjs/Sequence.js

@@ -8,12 +8,11 @@ const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const freeze_js_1 = require("./freeze.js");
 const interactivity_schema_js_1 = require("./interactivity-schema.js");
 const nonce_js_1 = require("./nonce.js");
-const PremountContext_js_1 = require("./PremountContext.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const is_inside_series_js_1 = require("./series/is-inside-series.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
-const use_current_frame_1 = require("./use-current-frame");
+const use_premounting_js_1 = require("./use-premounting.js");
 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");
@@ -343,41 +342,21 @@ const RegularSequenceRefForwardingFunction = ({ from = 0, trimBefore = 0, freeze
 };
 const RegularSequence = (0, react_1.forwardRef)(RegularSequenceRefForwardingFunction);
 const PremountedPostmountedSequenceRefForwardingFunction = (props, ref) => {
-    const parentPremountContext = (0, react_1.useContext)(PremountContext_js_1.PremountContext);
-    const frame = (0, use_current_frame_1.useCurrentFrame)() - parentPremountContext.premountFramesRemaining;
     if (props.layout === 'none') {
         throw new Error('`<Sequence>` with `premountFor` and `postmountFor` props does not support layout="none"');
     }
     const { style: passedStyle, from = 0, durationInFrames = Infinity, premountFor = 0, postmountFor = 0, styleWhilePremounted, styleWhilePostmounted, ...otherProps } = props;
-    const endThreshold = Math.ceil(from + durationInFrames - 1);
-    const premountingActive = frame < from && frame >= from - premountFor;
-    const postmountingActive = frame > endThreshold && frame <= endThreshold + postmountFor;
-    // Determine which freeze frame to use
-    const freezeFrame = premountingActive
-        ? from
-        : postmountingActive
-            ? from + durationInFrames - 1
-            : 0;
-    const isFreezingActive = premountingActive || postmountingActive;
-    const style = (0, react_1.useMemo)(() => {
-        var _a;
-        return {
-            ...passedStyle,
-            opacity: premountingActive || postmountingActive ? 0 : 1,
-            pointerEvents: premountingActive || postmountingActive
-                ? 'none'
-                : ((_a = passedStyle === null || passedStyle === void 0 ? void 0 : passedStyle.pointerEvents) !== null && _a !== void 0 ? _a : undefined),
-            ...(premountingActive ? styleWhilePremounted : {}),
-            ...(postmountingActive ? styleWhilePostmounted : {}),
-        };
-    }, [
-        passedStyle,
-        premountingActive,
-        postmountingActive,
-        styleWhilePremounted,
-        styleWhilePostmounted,
-    ]);
-    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isFreezingActive, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: style, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
+    const { freezeFrame, isPremountingOrPostmounting, postmountingActive, premountingActive, premountingStyle, } = (0, use_premounting_js_1.usePremounting)({
+        from,
+        durationInFrames,
+        premountFor,
+        postmountFor,
+        style: passedStyle !== null && passedStyle !== void 0 ? passedStyle : null,
+        styleWhilePremounted: styleWhilePremounted !== null && styleWhilePremounted !== void 0 ? styleWhilePremounted : null,
+        styleWhilePostmounted: styleWhilePostmounted !== null && styleWhilePostmounted !== void 0 ? styleWhilePostmounted : null,
+        hideWhilePremounted: 'opacity',
+    });
+    return (jsx_runtime_1.jsx(freeze_js_1.Freeze, { frame: freezeFrame, active: isPremountingOrPostmounting, children: jsx_runtime_1.jsx(SequenceInner, { ref: ref, from: from, durationInFrames: durationInFrames, style: premountingStyle !== null && premountingStyle !== void 0 ? premountingStyle : undefined, _remotionInternalPremountDisplay: premountFor, _remotionInternalPostmountDisplay: postmountFor, _remotionInternalIsPremounting: premountingActive, _remotionInternalIsPostmounting: postmountingActive, ...otherProps }) }));
 };
 const PremountedPostmountedSequence = (0, react_1.forwardRef)(PremountedPostmountedSequenceRefForwardingFunction);
 const SequenceRefForwardingFunction = (props, ref) => {

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

@@ -14,6 +14,7 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const with_interactivity_schema_js_1 = require("../with-interactivity-schema.js");
 const canvas_1 = require("./canvas");
 const decode_image_js_1 = require("./decode-image.js");
+const get_current_time_js_1 = require("./get-current-time.js");
 const request_init_1 = require("./request-init");
 const resolve_image_source_1 = require("./resolve-image-source");
 const animatedImageSchema = {
@@ -55,7 +56,7 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
     const [decodeHandle] = (0, react_1.useState)(() => delayRender(`Rendering <AnimatedImage/> with src="${resolvedSrc}"`));
     const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
-    const currentTime = frame / playbackRate / fps;
+    const currentTime = (0, get_current_time_js_1.getCurrentTime)({ frame, playbackRate, fps });
     const currentTimeRef = (0, react_1.useRef)(currentTime);
     currentTimeRef.current = currentTime;
     const requestInitKey = (0, request_init_1.serializeRequestInit)(requestInit);
@@ -168,8 +169,6 @@ const AnimatedImageContent = (0, react_1.forwardRef)(({ src, width, height, onEr
 });
 AnimatedImageContent.displayName = 'AnimatedImageContent';
 const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, loopBehavior, id, className, style, durationInFrames, requestInit, effects = [], controls, ref, ...sequenceProps }) => {
-    const { durationInFrames: videoDuration } = (0, use_video_config_js_1.useVideoConfig)();
-    const resolvedDuration = durationInFrames !== null && durationInFrames !== void 0 ? durationInFrames : videoDuration;
     const actualRef = (0, react_1.useRef)(null);
     const memoizedEffectDefinitions = (0, use_memoized_effects_js_1.useMemoizedEffectDefinitions)(effects);
     (0, react_1.useImperativeHandle)(ref, () => {
@@ -190,7 +189,7 @@ const AnimatedImageInner = ({ src, width, height, onError, fit, playbackRate, lo
         requestInit,
         ...canvasProps,
     };
-    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: resolvedDuration, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
+    return (jsx_runtime_1.jsx(Sequence_js_1.Sequence, { layout: "none", durationInFrames: durationInFrames, name: "<AnimatedImage>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/animatedimage", controls: controls, _remotionInternalEffects: memoizedEffectDefinitions, ...sequenceProps, outlineRef: actualRef, children: jsx_runtime_1.jsx(AnimatedImageContent, { ...animatedImageProps, ref: actualRef, effects: effects, controls: controls }) }));
 };
 exports.AnimatedImage = (0, with_interactivity_schema_js_1.withInteractivitySchema)({
     Component: AnimatedImageInner,

package/dist/cjs/animated-image/get-current-time.d.ts

@@ -0,0 +1,5 @@
+export declare const getCurrentTime: ({ frame, playbackRate, fps, }: {
+    frame: number;
+    playbackRate: number;
+    fps: number;
+}) => number;

package/dist/cjs/animated-image/get-current-time.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCurrentTime = void 0;
+const getCurrentTime = ({ frame, playbackRate, fps, }) => {
+    return (frame * playbackRate) / fps;
+};
+exports.getCurrentTime = getCurrentTime;

package/dist/cjs/interactivity-schema.d.ts

@@ -305,6 +305,7 @@ export declare const premountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -312,7 +313,10 @@ export declare const premountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
+};
+export declare const premountStyleSchema: {
     readonly styleWhilePremounted: {
         readonly type: "hidden";
     };
@@ -328,6 +332,7 @@ export declare const sequencePremountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -335,6 +340,7 @@ export declare const sequencePremountSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
     readonly styleWhilePremounted: {
         readonly type: "hidden";
@@ -386,6 +392,7 @@ export declare const sequenceStyleSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: false;
+        readonly keyframable: false;
     };
     readonly postmountFor: {
         readonly type: "number";
@@ -393,6 +400,7 @@ export declare const sequenceStyleSchema: {
         readonly min: 0;
         readonly step: 1;
         readonly hiddenFromList: true;
+        readonly keyframable: false;
     };
     readonly styleWhilePremounted: {
         readonly type: "hidden";
@@ -541,6 +549,7 @@ export declare const sequenceSchema: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: false;
+                    readonly keyframable: false;
                 };
                 readonly postmountFor: {
                     readonly type: "number";
@@ -548,6 +557,7 @@ export declare const sequenceSchema: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: true;
+                    readonly keyframable: false;
                 };
                 readonly styleWhilePremounted: {
                     readonly type: "hidden";
@@ -657,6 +667,7 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: false;
+                    readonly keyframable: false;
                 };
                 readonly postmountFor: {
                     readonly type: "number";
@@ -664,6 +675,7 @@ export declare const sequenceSchemaWithoutFrom: {
                     readonly min: 0;
                     readonly step: 1;
                     readonly hiddenFromList: true;
+                    readonly keyframable: false;
                 };
                 readonly styleWhilePremounted: {
                     readonly type: "hidden";

package/dist/cjs/interactivity-schema.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountSchema = exports.textContentSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
+exports.sequenceSchemaDefaultLayoutNone = exports.sequenceSchemaWithoutFrom = exports.baseSchemaWithoutFrom = exports.sequenceSchema = exports.baseSchema = exports.freezeField = exports.trimBeforeField = exports.fromField = exports.durationInFramesField = exports.extendSchemaWithSequenceName = exports.sequenceNameField = exports.hiddenField = exports.sequenceStyleSchema = exports.sequencePremountSchema = exports.premountStyleSchema = exports.premountSchema = exports.textContentSchema = exports.textSchema = exports.sequenceVisualStyleSchema = exports.transformSchema = void 0;
 exports.transformSchema = {
     'style.transformOrigin': {
         type: 'transform-origin',
@@ -132,6 +132,7 @@ exports.premountSchema = {
         min: 0,
         step: 1,
         hiddenFromList: false,
+        keyframable: false,
     },
     postmountFor: {
         type: 'number',
@@ -139,7 +140,10 @@ exports.premountSchema = {
         min: 0,
         step: 1,
         hiddenFromList: true,
+        keyframable: false,
     },
+};
+exports.premountStyleSchema = {
     styleWhilePremounted: {
         type: 'hidden',
     },
@@ -147,10 +151,13 @@ exports.premountSchema = {
         type: 'hidden',
     },
 };
-exports.sequencePremountSchema = exports.premountSchema;
+exports.sequencePremountSchema = {
+    ...exports.premountSchema,
+    ...exports.premountStyleSchema,
+};
 exports.sequenceStyleSchema = {
     ...exports.transformSchema,
-    ...exports.premountSchema,
+    ...exports.sequencePremountSchema,
 };
 exports.hiddenField = {
     type: 'boolean',

package/dist/cjs/internals.d.ts

@@ -186,6 +186,7 @@ export declare const Internals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -193,6 +194,7 @@ export declare const Internals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";
@@ -249,6 +251,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -256,6 +259,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
         readonly styleWhilePremounted: {
             readonly type: "hidden";
@@ -309,6 +313,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -316,6 +321,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
         readonly styleWhilePremounted: {
             readonly type: "hidden";
@@ -446,6 +452,7 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: false;
+            readonly keyframable: false;
         };
         readonly postmountFor: {
             readonly type: "number";
@@ -453,7 +460,10 @@ export declare const Internals: {
             readonly min: 0;
             readonly step: 1;
             readonly hiddenFromList: true;
+            readonly keyframable: false;
         };
+    };
+    readonly premountStyleSchema: {
         readonly styleWhilePremounted: {
             readonly type: "hidden";
         };
@@ -512,6 +522,24 @@ export declare const Internals: {
     readonly truthy: typeof truthy;
     readonly SequenceContext: import("react").Context<import("./SequenceContext.js").SequenceContextType | null>;
     readonly PremountContext: import("react").Context<import("./PremountContext.js").PremountContextValue>;
+    readonly usePremounting: ({ from, durationInFrames, premountFor, postmountFor, style, styleWhilePremounted, styleWhilePostmounted, hideWhilePremounted, }: {
+        readonly from: number;
+        readonly durationInFrames: number;
+        readonly premountFor: number | null;
+        readonly postmountFor: number | null;
+        readonly style: import("react").CSSProperties | null;
+        readonly styleWhilePremounted: import("react").CSSProperties | null;
+        readonly styleWhilePostmounted: import("react").CSSProperties | null;
+        readonly hideWhilePremounted: "display-none" | "opacity";
+    }) => {
+        effectivePremountFor: number;
+        effectivePostmountFor: number;
+        premountingActive: boolean;
+        postmountingActive: boolean;
+        isPremountingOrPostmounting: boolean;
+        freezeFrame: number;
+        premountingStyle: import("react").CSSProperties | null;
+    };
     readonly useRemotionContexts: typeof useRemotionContexts;
     readonly RemotionContextProvider: (props: import("./wrap-remotion-context.js").RemotionContextProviderProps) => import("react/jsx-runtime").JSX.Element;
     readonly CSSUtils: typeof CSSUtils;
@@ -724,7 +752,35 @@ export declare const Internals: {
     readonly getComponentsToAddStacksTo: () => unknown[];
     readonly getSequenceComponent: () => unknown;
     readonly getSingleChildComponent: (children: import("react").ReactNode) => unknown;
-    readonly CurrentScaleContext: import("react").Context<import("./use-current-scale.js").CurrentScaleContextType | null>;
+    readonly CurrentScaleContext: import("react").Context<({
+        type: "scale";
+        scale: number;
+    } | ({
+        type: "canvas-size";
+        canvasSize: {
+            width: number;
+            height: number;
+            left: number;
+            top: number;
+            windowSize: {
+                width: number;
+                height: number;
+            };
+            refresh: () => void;
+        };
+    } & {
+        canvasSizeForAuto: {
+            width: number;
+            height: number;
+            left: number;
+            top: number;
+            windowSize: {
+                width: number;
+                height: number;
+            };
+            refresh: () => void;
+        };
+    })) | null>;
     readonly PixelDensityContext: import("react").Context<number | null>;
     readonly PreviewSizeContext: import("react").Context<import("./use-current-scale.js").PreviewSizeCtx>;
     readonly calculateScale: ({ canvasSize, compositionHeight, compositionWidth, previewSize, }: {

package/dist/cjs/internals.js

@@ -96,6 +96,7 @@ const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_pixel_density_js_1 = require("./use-pixel-density.js");
+const use_premounting_js_1 = require("./use-premounting.js");
 const use_schema_js_1 = require("./use-schema.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
@@ -149,6 +150,7 @@ exports.Internals = {
     textSchema: interactivity_schema_js_1.textSchema,
     transformSchema: interactivity_schema_js_1.transformSchema,
     premountSchema: interactivity_schema_js_1.premountSchema,
+    premountStyleSchema: interactivity_schema_js_1.premountStyleSchema,
     flattenActiveSchema: flatten_schema_js_1.flattenActiveSchema,
     getFlatSchemaWithAllKeys: flatten_schema_js_1.getFlatSchemaWithAllKeys,
     RemotionRootContexts: RemotionRoot_js_1.RemotionRootContexts,
@@ -162,6 +164,7 @@ exports.Internals = {
     truthy: truthy_js_1.truthy,
     SequenceContext: SequenceContext_js_1.SequenceContext,
     PremountContext: PremountContext_js_1.PremountContext,
+    usePremounting: use_premounting_js_1.usePremounting,
     useRemotionContexts: wrap_remotion_context_js_1.useRemotionContexts,
     RemotionContextProvider: wrap_remotion_context_js_1.RemotionContextProvider,
     CSSUtils,

package/dist/cjs/no-react.d.ts

@@ -139,6 +139,7 @@ export declare const NoReactInternals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: false;
+                        readonly keyframable: false;
                     };
                     readonly postmountFor: {
                         readonly type: "number";
@@ -146,6 +147,7 @@ export declare const NoReactInternals: {
                         readonly min: 0;
                         readonly step: 1;
                         readonly hiddenFromList: true;
+                        readonly keyframable: false;
                     };
                     readonly styleWhilePremounted: {
                         readonly type: "hidden";

package/dist/cjs/use-current-scale.d.ts

@@ -17,7 +17,14 @@ export type CurrentScaleContextType = {
     type: 'canvas-size';
     canvasSize: Size;
 };
-export declare const CurrentScaleContext: React.Context<CurrentScaleContextType | null>;
+type InternalCurrentScaleContextType = Extract<CurrentScaleContextType, {
+    type: 'scale';
+}> | (Extract<CurrentScaleContextType, {
+    type: 'canvas-size';
+}> & {
+    canvasSizeForAuto: Size;
+});
+export declare const CurrentScaleContext: React.Context<InternalCurrentScaleContextType | null>;
 type Options = {
     dontThrowIfOutsideOfRemotion: boolean;
 };

package/dist/cjs/use-current-scale.js

@@ -83,7 +83,7 @@ const useCurrentScale = (options) => {
         return hasContext.scale;
     }
     return (0, exports.calculateScale)({
-        canvasSize: hasContext.canvasSize,
+        canvasSize: hasContext.canvasSizeForAuto,
         compositionHeight: config.height,
         compositionWidth: config.width,
         previewSize: zoomContext.size.size,