@remotion/transitions 4.0.489 → 4.0.491

package/dist/TransitionSeries.d.ts

@@ -1,17 +1,19 @@
 import type { FC, PropsWithChildren } from 'react';
+import React from 'react';
 import type { AbsoluteFillLayout, LayoutAndStyle, SequencePropsWithoutDuration } from 'remotion';
 import { NoReactInternals } from 'remotion/no-react';
 import type { TransitionSeriesOverlayProps, TransitionSeriesTransitionProps } from './types.js';
+type TransitionSeriesTransitionComponent = <PresentationProps extends Record<string, unknown>>(props: TransitionSeriesTransitionProps<PresentationProps>) => React.ReactNode;
 type LayoutBasedProps = true extends typeof NoReactInternals.ENABLE_V5_BREAKING_CHANGES ? AbsoluteFillLayout : LayoutAndStyle;
 type SeriesSequenceProps = PropsWithChildren<{
     readonly durationInFrames: number;
     readonly offset?: number;
     readonly className?: string;
-} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze'>>;
+} & LayoutBasedProps & Pick<SequencePropsWithoutDuration, 'name' | 'showInTimeline' | 'freeze' | 'hidden'>>;
 export type DrawFunction = (prevImage: ElementImage | null, nextImage: ElementImage | null, progress: number) => void;
 declare const TransitionSeries: FC<SequencePropsWithoutDuration> & {
-    Sequence: ({ children }: SeriesSequenceProps) => import("react/jsx-runtime").JSX.Element;
-    Transition: <PresentationProps extends Record<string, unknown>>(_props: TransitionSeriesTransitionProps<PresentationProps>) => null;
+    Sequence: FC<SeriesSequenceProps>;
+    Transition: TransitionSeriesTransitionComponent;
     Overlay: FC<TransitionSeriesOverlayProps>;
 };
 export { TransitionSeries };

package/dist/TransitionSeries.js

@@ -1,8 +1,41 @@
 "use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.TransitionSeries = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
+const react_1 = __importStar(require("react"));
 const remotion_1 = require("remotion");
 const no_react_1 = require("remotion/no-react");
 const context_js_1 = require("./context.js");
@@ -10,16 +43,61 @@ const flatten_children_js_1 = require("./flatten-children.js");
 const slide_js_1 = require("./presentations/slide.js");
 const validate_js_1 = require("./validate.js");
 const { SequenceWithoutSchema } = remotion_1.Internals;
-const TransitionSeriesTransition = function (_props) {
+const TransitionSeriesTransitionInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({ ...props, stack });
+    }
     return null;
 };
-const SeriesOverlay = () => {
+const transitionSeriesTransitionSchema = {};
+const TransitionSeriesTransition = remotion_1.Interactive.withSchema({
+    Component: TransitionSeriesTransitionInner,
+    componentName: '<TransitionSeries.Transition>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Transition',
+    schema: transitionSeriesTransitionSchema,
+    supportsEffects: false,
+});
+const SeriesOverlayInner = ({ stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({ ...props, stack });
+    }
     return null;
 };
-const SeriesSequence = ({ children }) => {
+const transitionSeriesOverlaySchema = {};
+const SeriesOverlay = remotion_1.Interactive.withSchema({
+    Component: SeriesOverlayInner,
+    componentName: '<TransitionSeries.Overlay>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Overlay',
+    schema: transitionSeriesOverlaySchema,
+    supportsEffects: false,
+});
+const transitionSeriesSequenceSchema = {
+    durationInFrames: remotion_1.Internals.durationInFramesField,
+    name: remotion_1.Internals.sequenceSchema.name,
+    hidden: remotion_1.Internals.sequenceSchema.hidden,
+    showInTimeline: remotion_1.Internals.sequenceSchema.showInTimeline,
+    freeze: remotion_1.Internals.freezeField,
+    layout: remotion_1.Internals.sequenceSchema.layout,
+};
+const SeriesSequenceInner = ({ offset = 0, className = '', stack = null, _remotionInternalRender = null, ...props }) => {
+    if (_remotionInternalRender) {
+        return _remotionInternalRender({
+            ...props,
+            offset,
+            className: className || undefined,
+            stack,
+        });
+    }
     // eslint-disable-next-line react/jsx-no-useless-fragment
-    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: children });
+    return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: props.children });
 };
+const SeriesSequence = remotion_1.Interactive.withSchema({
+    Component: SeriesSequenceInner,
+    componentName: '<TransitionSeries.Sequence>',
+    componentIdentity: 'dev.remotion.transitions.TransitionSeries.Sequence',
+    schema: transitionSeriesSequenceSchema,
+    supportsEffects: false,
+});
 const transitionSeriesSchema = {
     name: remotion_1.Internals.sequenceSchema.name,
     hidden: remotion_1.Internals.sequenceSchema.hidden,
@@ -67,20 +145,23 @@ const TransitionSeriesChildren = ({ children, }) => {
         drawIfSynced(index);
     }, [drawIfSynced]);
     const childrenValue = (0, react_1.useMemo)(() => {
-        let transitionOffsets = 0;
-        let startFrame = 0;
-        // Collect overlay render info to emit after the main loop
-        const overlayRenders = [];
-        // Track sequence durations for overlay validation
-        const sequenceDurations = [];
-        let pendingOverlayValidation = false;
-        const mainChildren = react_1.Children.map(flattedChildren, (child, i) => {
-            var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+        const renderChildren = (state) => {
+            const { index: i, transitionOffsets, startFrame, overlayRenders, sequenceDurations, pendingOverlayValidation, } = state;
+            if (i === flattedChildren.length) {
+                return overlayRenders.map((info) => {
+                    var _a, _b;
+                    return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = info.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = info.controls) !== null && _b !== void 0 ? _b : undefined, layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+                });
+            }
+            const child = flattedChildren[i];
             const current = child;
+            const renderNext = (overrides = {}) => {
+                return renderChildren({ ...state, ...overrides, index: i + 1 });
+            };
             if (typeof current === 'string') {
                 // Don't throw if it's just some accidential whitespace
                 if (current.trim() === '') {
-                    return null;
+                    return renderNext();
                 }
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence /> components as its children, but you passed a string "${current}"`);
             }
@@ -108,49 +189,58 @@ const TransitionSeriesChildren = ({ children, }) => {
                 if (nextIsTransition) {
                     throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i} and ${i + 1})`);
                 }
-                const overlayProps = current.props;
-                (0, validate_js_1.validateDurationInFrames)(overlayProps.durationInFrames, {
-                    component: `of a <TransitionSeries.Overlay /> component`,
-                    allowFloats: false,
-                });
-                const overlayOffset = (_a = overlayProps.offset) !== null && _a !== void 0 ? _a : 0;
-                if (Number.isNaN(overlayOffset)) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
-                }
-                if (!Number.isFinite(overlayOffset)) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
-                }
-                if (overlayOffset % 1 !== 0) {
-                    throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
-                }
-                // Find the previous sequence (the cut point is at startFrame + transitionOffsets)
-                const cutPoint = startFrame + transitionOffsets;
-                const halfDuration = overlayProps.durationInFrames / 2;
-                const overlayFrom = cutPoint - halfDuration + overlayOffset;
-                if (overlayFrom < 0) {
-                    throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
-                }
-                // Validate: overlay must not exceed the previous sequence duration
-                const prevSeqIdx = sequenceDurations.length - 1;
-                if (prevSeqIdx >= 0) {
-                    const overlayStartInPrev = halfDuration - overlayOffset;
-                    if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
-                        throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
-                    }
-                }
-                // We'll validate the next sequence side after we process it
-                pendingOverlayValidation = true;
-                // Store overlay info for deferred rendering
-                overlayRenders.push({
-                    cutPoint,
-                    overlayFrom,
-                    durationInFrames: overlayProps.durationInFrames,
-                    overlayOffset,
-                    halfDuration,
-                    children: overlayProps.children,
-                    index: i,
+                const castedOverlay = current;
+                return react_1.default.cloneElement(castedOverlay, {
+                    _remotionInternalRender: (overlayProps) => {
+                        var _a;
+                        (0, validate_js_1.validateDurationInFrames)(overlayProps.durationInFrames, {
+                            component: `of a <TransitionSeries.Overlay /> component`,
+                            allowFloats: false,
+                        });
+                        const overlayOffset = (_a = overlayProps.offset) !== null && _a !== void 0 ? _a : 0;
+                        if (Number.isNaN(overlayOffset)) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must not be NaN, but got NaN.`);
+                        }
+                        if (!Number.isFinite(overlayOffset)) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be finite, but got ${overlayOffset}.`);
+                        }
+                        if (overlayOffset % 1 !== 0) {
+                            throw new TypeError(`The "offset" property of a <TransitionSeries.Overlay /> must be an integer, but got ${overlayOffset}.`);
+                        }
+                        // Find the previous sequence (the cut point is at startFrame + transitionOffsets)
+                        const cutPoint = startFrame + transitionOffsets;
+                        const halfDuration = overlayProps.durationInFrames / 2;
+                        const overlayFrom = cutPoint - halfDuration + overlayOffset;
+                        if (overlayFrom < 0) {
+                            throw new TypeError(`A <TransitionSeries.Overlay /> extends before frame 0. The overlay starts at frame ${overlayFrom}. Reduce the duration or adjust the offset.`);
+                        }
+                        // Validate: overlay must not exceed the previous sequence duration
+                        const prevSeqIdx = sequenceDurations.length - 1;
+                        if (prevSeqIdx >= 0) {
+                            const overlayStartInPrev = halfDuration - overlayOffset;
+                            if (overlayStartInPrev > sequenceDurations[prevSeqIdx]) {
+                                throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the previous sequence. The overlay needs ${overlayStartInPrev} frames before the cut, but the previous sequence is only ${sequenceDurations[prevSeqIdx]} frames long.`);
+                            }
+                        }
+                        // Store overlay info for deferred rendering and validate the other
+                        // side once the next sequence has resolved its interactive props.
+                        const overlayRender = {
+                            cutPoint,
+                            overlayFrom,
+                            durationInFrames: overlayProps.durationInFrames,
+                            overlayOffset,
+                            halfDuration,
+                            children: overlayProps.children,
+                            index: i,
+                            controls: overlayProps.controls,
+                            stack: overlayProps.stack,
+                        };
+                        return renderNext({
+                            overlayRenders: [...overlayRenders, overlayRender],
+                            pendingOverlayValidation: true,
+                        });
+                    },
                 });
-                return null;
             }
             if (current.type === TransitionSeriesTransition) {
                 if (prevIsTransition) {
@@ -159,7 +249,15 @@ const TransitionSeriesChildren = ({ children, }) => {
                 if (prevIsOverlay) {
                     throw new TypeError(`A <TransitionSeries.Overlay /> component must not be followed by a <TransitionSeries.Transition /> component (nth children = ${i - 1} and ${i})`);
                 }
-                return null;
+                const castedTransition = current;
+                return react_1.default.cloneElement(castedTransition, {
+                    _remotionInternalRender: (transitionProps) => {
+                        var _a, _b;
+                        const transitionDuration = transitionProps.timing.getDurationInFrames({ fps });
+                        const transitionFrom = startFrame + transitionOffsets - transitionDuration;
+                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [transitionDuration > 0 ? (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: transitionFrom, durationInFrames: transitionDuration, name: "<TS.Transition>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", _remotionInternalStack: (_a = transitionProps.stack) !== null && _a !== void 0 ? _a : undefined, controls: (_b = transitionProps.controls) !== null && _b !== void 0 ? _b : undefined, layout: "none" })) : null, renderNext()] }));
+                    },
+                });
             }
             if (current.type !== SeriesSequence) {
                 throw new TypeError(`The <TransitionSeries /> component only accepts a list of <TransitionSeries.Sequence />, <TransitionSeries.Transition />, and <TransitionSeries.Overlay /> components as its children, but got ${current} instead`);
@@ -175,127 +273,144 @@ const TransitionSeriesChildren = ({ children, }) => {
                     ? nextPrev
                     : null;
             const castedChildAgain = current;
-            const debugInfo = `index = ${i}, duration = ${castedChildAgain.props.durationInFrames}`;
-            const durationInFramesProp = castedChildAgain.props.durationInFrames;
-            const { durationInFrames, children: _children, from: _from, ...passedProps } = castedChildAgain.props;
-            (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
-                component: `of a <TransitionSeries.Sequence /> component`,
-                allowFloats: true,
-            });
-            const offset = (_b = castedChildAgain.props.offset) !== null && _b !== void 0 ? _b : 0;
-            if (Number.isNaN(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
-            }
-            if (!Number.isFinite(offset)) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            if (offset % 1 !== 0) {
-                throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
-            }
-            const currentStartFrame = startFrame + offset;
-            let duration = 0;
-            if (prev) {
-                duration = prev.props.timing.getDurationInFrames({
-                    fps,
-                });
-                transitionOffsets -= duration;
-            }
-            let actualStartFrame = currentStartFrame + transitionOffsets;
-            startFrame += durationInFramesProp + offset;
-            // Handle the case where the first item is a transition
-            if (actualStartFrame < 0) {
-                startFrame -= actualStartFrame;
-                actualStartFrame = 0;
-            }
-            // Track sequence durations for overlay validation
-            sequenceDurations.push(durationInFramesProp);
-            // Validate: check if a preceding overlay extends beyond this sequence
-            if (pendingOverlayValidation) {
-                pendingOverlayValidation = false;
-                const lastOverlay = overlayRenders[overlayRenders.length - 1];
-                const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
-                if (framesAfterCut > durationInFramesProp) {
-                    throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
-                }
-            }
-            const nextProgress = next
-                ? next.props.timing.getProgress({
-                    frame: frame -
-                        actualStartFrame -
-                        durationInFrames +
-                        next.props.timing.getDurationInFrames({ fps }),
-                    fps,
-                })
-                : null;
-            const prevProgress = prev
-                ? prev.props.timing.getProgress({
-                    frame: frame - actualStartFrame,
-                    fps,
-                })
-                : null;
-            if (next &&
-                durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
-                throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-            }
-            if (prev &&
-                durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
-                throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
-            }
-            if (next && prev && nextProgress !== null && prevProgress !== null) {
-                const nextPresentation = (_c = next.props.presentation) !== null && _c !== void 0 ? _c : (0, slide_js_1.slide)();
-                const prevPresentation = (_d = prev.props.presentation) !== null && _d !== void 0 ? _d : (0, slide_js_1.slide)();
-                const UppercaseNextPresentation = nextPresentation.component;
-                const UppercasePrevPresentation = prevPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_e = nextPresentation.props) !== null && _e !== void 0 ? _e : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
-                            throw new Error('Should not call when exiting');
-                        }, onUnmount: () => {
-                            throw new Error('Should not call when exiting');
-                        }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => {
-                                    onPrevElementImage(elementImage, nextProgress, draw, i + 1);
-                                    onNextElementImage(elementImage, prevProgress, draw, i - 1);
+            return react_1.default.cloneElement(castedChildAgain, {
+                _remotionInternalRender: (resolvedProps) => {
+                    var _a, _b, _c, _d, _e, _f, _g, _h;
+                    const durationInFramesProp = resolvedProps.durationInFrames;
+                    const debugInfo = `index = ${i}, duration = ${durationInFramesProp}`;
+                    const { durationInFrames, children: sequenceChildren, offset: offsetProp, controls, stack, from: _from, ...passedProps } = resolvedProps;
+                    (0, validate_js_1.validateDurationInFrames)(durationInFramesProp, {
+                        component: `of a <TransitionSeries.Sequence /> component`,
+                        allowFloats: true,
+                    });
+                    const offset = offsetProp !== null && offsetProp !== void 0 ? offsetProp : 0;
+                    if (Number.isNaN(offset)) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must not be NaN, but got NaN (${debugInfo}).`);
+                    }
+                    if (!Number.isFinite(offset)) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+                    }
+                    if (offset % 1 !== 0) {
+                        throw new TypeError(`The "offset" property of a <TransitionSeries.Sequence /> must be finite, but got ${offset} (${debugInfo}).`);
+                    }
+                    let resolvedTransitionOffsets = transitionOffsets;
+                    let resolvedStartFrame = startFrame;
+                    let resolvedPendingOverlayValidation = pendingOverlayValidation;
+                    const currentStartFrame = resolvedStartFrame + offset;
+                    let duration = 0;
+                    if (prev) {
+                        duration = prev.props.timing.getDurationInFrames({
+                            fps,
+                        });
+                        resolvedTransitionOffsets -= duration;
+                    }
+                    let actualStartFrame = currentStartFrame + resolvedTransitionOffsets;
+                    resolvedStartFrame += durationInFramesProp + offset;
+                    // Handle the case where the first item is a transition
+                    if (actualStartFrame < 0) {
+                        resolvedStartFrame -= actualStartFrame;
+                        actualStartFrame = 0;
+                    }
+                    // Track resolved durations so later sequences and overlay validation use
+                    // the live Studio override instead of the original JSX value.
+                    const nextSequenceDurations = [
+                        ...sequenceDurations,
+                        durationInFramesProp,
+                    ];
+                    // Validate: check if a preceding overlay extends beyond this sequence
+                    if (resolvedPendingOverlayValidation) {
+                        resolvedPendingOverlayValidation = false;
+                        const lastOverlay = overlayRenders[overlayRenders.length - 1];
+                        if (!lastOverlay) {
+                            throw new Error('Expected an overlay to validate');
+                        }
+                        const framesAfterCut = lastOverlay.halfDuration + lastOverlay.overlayOffset;
+                        if (framesAfterCut > durationInFramesProp) {
+                            throw new TypeError(`A <TransitionSeries.Overlay /> extends beyond the next sequence. The overlay needs ${framesAfterCut} frames after the cut, but the next sequence is only ${durationInFramesProp} frames long.`);
+                        }
+                    }
+                    const renderSequenceAndRest = (sequence) => {
+                        return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [sequence, renderNext({
+                                    transitionOffsets: resolvedTransitionOffsets,
+                                    startFrame: resolvedStartFrame,
+                                    sequenceDurations: nextSequenceDurations,
+                                    pendingOverlayValidation: resolvedPendingOverlayValidation,
+                                })] }));
+                    };
+                    const nextProgress = next
+                        ? next.props.timing.getProgress({
+                            frame: frame -
+                                actualStartFrame -
+                                durationInFrames +
+                                next.props.timing.getDurationInFrames({ fps }),
+                            fps,
+                        })
+                        : null;
+                    const prevProgress = prev
+                        ? prev.props.timing.getProgress({
+                            frame: frame - actualStartFrame,
+                            fps,
+                        })
+                        : null;
+                    if (next &&
+                        durationInFramesProp < next.props.timing.getDurationInFrames({ fps })) {
+                        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the next <TransitionSeries.Transition />. The transition is ${next.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+                    }
+                    if (prev &&
+                        durationInFramesProp < prev.props.timing.getDurationInFrames({ fps })) {
+                        throw new Error(`The duration of a <TransitionSeries.Sequence /> must not be shorter than the duration of the previous <TransitionSeries.Transition />. The transition is ${prev.props.timing.getDurationInFrames({ fps })} frames long, but the sequence is only ${durationInFramesProp} frames long (${debugInfo})`);
+                    }
+                    if (next && prev && nextProgress !== null && prevProgress !== null) {
+                        const nextPresentation = (_a = next.props.presentation) !== null && _a !== void 0 ? _a : (0, slide_js_1.slide)();
+                        const prevPresentation = (_b = prev.props.presentation) !== null && _b !== void 0 ? _b : (0, slide_js_1.slide)();
+                        const UppercaseNextPresentation = nextPresentation.component;
+                        const UppercasePrevPresentation = prevPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_c = nextPresentation.props) !== null && _c !== void 0 ? _c : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: () => {
+                                    throw new Error('Should not call when exiting');
                                 }, onUnmount: () => {
-                                    onPrevElementImage(null, null, null, i + 1);
+                                    throw new Error('Should not call when exiting');
+                                }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_d = prevPresentation.props) !== null && _d !== void 0 ? _d : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => {
+                                            onPrevElementImage(elementImage, nextProgress, draw, i + 1);
+                                            onNextElementImage(elementImage, prevProgress, draw, i - 1);
+                                        }, onUnmount: () => {
+                                            onPrevElementImage(null, null, null, i + 1);
+                                            onNextElementImage(null, null, null, i - 1);
+                                        }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: sequenceChildren }) }) }) }) }, i));
+                    }
+                    if (prevProgress !== null && prev) {
+                        const prevPresentation = (_e = prev.props.presentation) !== null && _e !== void 0 ? _e : (0, slide_js_1.slide)();
+                        const UppercasePrevPresentation = prevPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_f = prevPresentation.props) !== null && _f !== void 0 ? _f : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
                                     onNextElementImage(null, null, null, i - 1);
-                                }, bothEnteringAndExiting: true, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }) }) }, i));
-            }
-            if (prevProgress !== null && prev) {
-                const prevPresentation = (_g = prev.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
-                const UppercasePrevPresentation = prevPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercasePrevPresentation, { passedProps: (_h = prevPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "entering", presentationProgress: prevProgress, presentationDurationInFrames: prev.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onNextElementImage(elementImage, prevProgress, draw, i - 1), onUnmount: () => {
-                            onNextElementImage(null, null, null, i - 1);
-                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: child }) }) }, i));
-            }
-            if (nextProgress !== null && next) {
-                const nextPresentation = (_j = next.props.presentation) !== null && _j !== void 0 ? _j : (0, slide_js_1.slide)();
-                const UppercaseNextPresentation = nextPresentation.component;
-                return (jsx_runtime_1.jsx(SequenceWithoutSchema
-                // eslint-disable-next-line react/no-array-index-key
-                , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                        ? undefined
-                        : 'https://www.remotion.dev/docs/transitions/transitionseries', children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_k = nextPresentation.props) !== null && _k !== void 0 ? _k : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
-                            onPrevElementImage(null, null, null, i + 1);
-                        }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: child }) }) }, i));
-            }
-            return (jsx_runtime_1.jsx(SequenceWithoutSchema
-            // eslint-disable-next-line react/no-array-index-key
-            , { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
-                    ? undefined
-                    : 'https://www.remotion.dev/docs/transitions/transitionseries', children: child }, i));
-        });
-        // Now render overlay sequences
-        const overlayElements = overlayRenders.map((overlayInfo) => {
-            const info = overlayInfo;
-            return (jsx_runtime_1.jsx(SequenceWithoutSchema, { from: Math.round(info.overlayFrom), durationInFrames: info.durationInFrames, name: "<TS.Overlay>", _remotionInternalDocumentationLink: "https://www.remotion.dev/docs/transitions/transitionseries", layout: "absolute-fill", children: info.children }, `overlay-${info.index}`));
+                                }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInEnteringProgressContext, { presentationProgress: prevProgress, children: sequenceChildren }) }) }, i));
+                    }
+                    if (nextProgress !== null && next) {
+                        const nextPresentation = (_g = next.props.presentation) !== null && _g !== void 0 ? _g : (0, slide_js_1.slide)();
+                        const UppercaseNextPresentation = nextPresentation.component;
+                        return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                                ? undefined
+                                : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: jsx_runtime_1.jsx(UppercaseNextPresentation, { passedProps: (_h = nextPresentation.props) !== null && _h !== void 0 ? _h : {}, presentationDirection: "exiting", presentationProgress: nextProgress, presentationDurationInFrames: next.props.timing.getDurationInFrames({ fps }), onElementImage: (elementImage, draw) => onPrevElementImage(elementImage, nextProgress, draw, i + 1), onUnmount: () => {
+                                    onPrevElementImage(null, null, null, i + 1);
+                                }, bothEnteringAndExiting: false, children: jsx_runtime_1.jsx(context_js_1.WrapInExitingProgressContext, { presentationProgress: nextProgress, children: sequenceChildren }) }) }, i));
+                    }
+                    return renderSequenceAndRest(jsx_runtime_1.jsx(SequenceWithoutSchema, { from: actualStartFrame, durationInFrames: durationInFramesProp, ...passedProps, name: passedProps.name || '<TS.Sequence>', _remotionInternalDocumentationLink: passedProps.name
+                            ? undefined
+                            : 'https://www.remotion.dev/docs/transitions/transitionseries', _remotionInternalStack: stack !== null && stack !== void 0 ? stack : undefined, controls: controls !== null && controls !== void 0 ? controls : undefined, children: sequenceChildren }, i));
+                },
+            });
+        };
+        return renderChildren({
+            index: 0,
+            transitionOffsets: 0,
+            startFrame: 0,
+            overlayRenders: [],
+            sequenceDurations: [],
+            pendingOverlayValidation: false,
         });
-        return [...(mainChildren || []), ...overlayElements];
     }, [flattedChildren, fps, frame, onPrevElementImage, onNextElementImage]);
     // eslint-disable-next-line react/jsx-no-useless-fragment
     return jsx_runtime_1.jsx(jsx_runtime_1.Fragment, { children: childrenValue });
@@ -328,4 +443,3 @@ exports.TransitionSeries = TransitionSeries;
 TransitionSeries.Sequence = SeriesSequence;
 TransitionSeries.Transition = TransitionSeriesTransition;
 TransitionSeries.Overlay = SeriesOverlay;
-remotion_1.Internals.addSequenceStackTraces(TransitionSeries);