remotion 4.0.77 → 4.0.80

package/dist/esm/index.mjs

@@ -1,4 +1,4 @@
-import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, Children, isValidElement, useRef, useCallback, createRef, useImperativeHandle, useReducer, Suspense } from 'react';
+import React, { createContext, useState, useMemo, useLayoutEffect, useContext, useEffect, forwardRef, useRef, useCallback, createRef, useImperativeHandle, useReducer, Suspense, Children } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 
@@ -46,6 +46,79 @@ const Clipper = ({ height, width, x, y }) => {
     return null;
 };
 
+/**
+ * @description Provides information about the Remotion Environment
+ * @see [Documentation](https://www.remotion.dev/docs/get-remotion-environment)
+ */
+const getRemotionEnvironment = () => {
+    if (process.env.NODE_ENV === 'production') {
+        // Check if inside a Remotion bundle.
+        // Must be a variable in index-html.ts and be defined before setupEnvVariables()
+        if (typeof window !== 'undefined' &&
+            typeof window.remotion_editorName !== 'undefined' &&
+            typeof window.remotion_projectName !== 'undefined') {
+            return {
+                isStudio: false,
+                isRendering: true,
+                isPlayer: false,
+            };
+        }
+        return {
+            isStudio: false,
+            isRendering: false,
+            isPlayer: typeof window !== 'undefined' && window.remotion_isPlayer,
+        };
+    }
+    // The Vitest framework sets NODE_ENV as test.
+    // Right now we don't need to treat it in a special
+    // way which is good - defaulting to `rendering`.
+    if (process.env.NODE_ENV === 'test') {
+        return {
+            isStudio: false,
+            isRendering: true,
+            isPlayer: false,
+        };
+    }
+    if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        return {
+            isStudio: false,
+            isRendering: false,
+            isPlayer: true,
+        };
+    }
+    return {
+        isStudio: true,
+        isRendering: false,
+        isPlayer: false,
+    };
+};
+
+const originalCreateElement = React.createElement;
+const componentsToAddStacksTo = [];
+const enableSequenceStackTraces = () => {
+    const proxy = new Proxy(originalCreateElement, {
+        apply(target, thisArg, argArray) {
+            if (componentsToAddStacksTo.includes(argArray[0])) {
+                const [first, props, ...rest] = argArray;
+                const newProps = {
+                    ...(props !== null && props !== void 0 ? props : {}),
+                    stack: new Error().stack,
+                };
+                return Reflect.apply(target, thisArg, [first, newProps, ...rest]);
+            }
+            return Reflect.apply(target, thisArg, argArray);
+        },
+    });
+    React.createElement = proxy;
+};
+const addSequenceStackTraces = (component) => {
+    if (!getRemotionEnvironment().isStudio) {
+        return;
+    }
+    componentsToAddStacksTo.push(component);
+    enableSequenceStackTraces();
+};
+
 const IsPlayerContext = createContext(false);
 const IsPlayerContextProvider = ({ children, }) => {
     return jsx(IsPlayerContext.Provider, { value: true, children: children });
@@ -59,7 +132,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.77';
+const VERSION = '4.0.80';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -132,139 +205,6 @@ const AbsoluteFillRefForwarding = (props, ref) => {
  */
 const AbsoluteFill = forwardRef(AbsoluteFillRefForwarding);
 
-const getAbsoluteSrc = (relativeSrc) => {
-    if (typeof window === 'undefined') {
-        return relativeSrc;
-    }
-    return new URL(relativeSrc, window.location.origin).href;
-};
-
-const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
-    let duration = mediaDuration;
-    // Account for endAt
-    if (typeof endAt !== 'undefined') {
-        duration = endAt;
-    }
-    // Account for startFrom
-    if (typeof startFrom !== 'undefined') {
-        duration -= startFrom;
-    }
-    const actualDuration = duration / playbackRate;
-    return Math.floor(actualDuration);
-};
-
-const isErrorLike = (err) => {
-    if (err === null) {
-        return false;
-    }
-    if (typeof err !== 'object') {
-        return false;
-    }
-    if (!('stack' in err)) {
-        return false;
-    }
-    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
-    // @ts-ignore we just asserted
-    if (typeof err.stack !== 'string') {
-        return false;
-    }
-    if (!('message' in err)) {
-        return false;
-    }
-    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
-    // @ts-ignore we just asserted
-    if (typeof err.message !== 'string') {
-        return false;
-    }
-    return true;
-};
-/**
- * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
- * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
- */
-function cancelRender(err) {
-    let error;
-    if (isErrorLike(err)) {
-        error = err;
-    }
-    else if (typeof err === 'string') {
-        error = Error(err);
-    }
-    else {
-        error = Error('Rendering was cancelled');
-    }
-    window.remotion_cancelledError = error.stack;
-    throw error;
-}
-
-/**
- * @description Provides information about the Remotion Environment
- * @see [Documentation](https://www.remotion.dev/docs/get-remotion-environment)
- */
-const getRemotionEnvironment = () => {
-    if (process.env.NODE_ENV === 'production') {
-        // Check if inside a Remotion bundle.
-        // Must be a variable in index-html.ts and be defined before setupEnvVariables()
-        if (typeof window !== 'undefined' &&
-            typeof window.remotion_editorName !== 'undefined' &&
-            typeof window.remotion_projectName !== 'undefined') {
-            return {
-                isStudio: false,
-                isRendering: true,
-                isPlayer: false,
-            };
-        }
-        return {
-            isStudio: false,
-            isRendering: false,
-            isPlayer: typeof window !== 'undefined' && window.remotion_isPlayer,
-        };
-    }
-    // The Vitest framework sets NODE_ENV as test.
-    // Right now we don't need to treat it in a special
-    // way which is good - defaulting to `rendering`.
-    if (process.env.NODE_ENV === 'test') {
-        return {
-            isStudio: false,
-            isRendering: true,
-            isPlayer: false,
-        };
-    }
-    if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-        return {
-            isStudio: false,
-            isRendering: false,
-            isPlayer: true,
-        };
-    }
-    return {
-        isStudio: true,
-        isRendering: false,
-        isPlayer: false,
-    };
-};
-
-const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
-const getTimelineClipName = (children) => {
-    var _a;
-    const tree = (_a = Children.map(children, (ch) => {
-        if (!isValidElement(ch)) {
-            return null;
-        }
-        // Must be name, not ID
-        const name = typeof ch.type !== 'string' && ch.type.name;
-        if (name && !HIDDEN_NAMES.includes(name)) {
-            return name;
-        }
-        if (ch.props.children) {
-            const chName = getTimelineClipName(ch.props.children);
-            return chName;
-        }
-        return null;
-    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
-    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
-};
-
 const NonceContext = createContext({
     getNonce: () => 0,
     fastRefreshes: 0,
@@ -295,8 +235,15 @@ const SequenceManager = React.createContext({
     },
     sequences: [],
 });
+const SequenceVisibilityToggleContext = React.createContext({
+    hidden: {},
+    setHidden: () => {
+        throw new Error('SequenceVisibilityToggle not initialized');
+    },
+});
 const SequenceManagerProvider = ({ children }) => {
     const [sequences, setSequences] = useState([]);
+    const [hidden, setHidden] = useState({});
     const registerSequence = useCallback((seq) => {
         setSequences((seqs) => {
             return [...seqs, seq];
@@ -305,14 +252,20 @@ const SequenceManagerProvider = ({ children }) => {
     const unregisterSequence = useCallback((seq) => {
         setSequences((seqs) => seqs.filter((s) => s.id !== seq));
     }, []);
-    const context = useMemo(() => {
+    const sequenceContext = useMemo(() => {
         return {
             registerSequence,
             sequences,
             unregisterSequence,
         };
     }, [registerSequence, sequences, unregisterSequence]);
-    return (jsx(SequenceManager.Provider, { value: context, children: children }));
+    const hiddenContext = useMemo(() => {
+        return {
+            hidden,
+            setHidden,
+        };
+    }, [hidden]);
+    return (jsx(SequenceManager.Provider, { value: sequenceContext, children: jsx(SequenceVisibilityToggleContext.Provider, { value: hiddenContext, children: children }) }));
 };
 
 const CompositionManager = createContext({
@@ -965,9 +918,11 @@ const CanUseRemotionHooksProvider = ({ children }) => {
 };
 
 const useUnsafeVideoConfig = () => {
-    var _a;
+    var _a, _b, _c;
     const context = useContext(SequenceContext);
-    const ctxDuration = (_a = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _a !== void 0 ? _a : null;
+    const ctxWidth = (_a = context === null || context === void 0 ? void 0 : context.width) !== null && _a !== void 0 ? _a : null;
+    const ctxHeight = (_b = context === null || context === void 0 ? void 0 : context.height) !== null && _b !== void 0 ? _b : null;
+    const ctxDuration = (_c = context === null || context === void 0 ? void 0 : context.durationInFrames) !== null && _c !== void 0 ? _c : null;
     const video = useVideo();
     return useMemo(() => {
         if (!video) {
@@ -976,15 +931,15 @@ const useUnsafeVideoConfig = () => {
         const { id, durationInFrames, fps, height, width, defaultProps, props, defaultCodec, } = video;
         return {
             id,
-            width,
-            height,
+            width: ctxWidth !== null && ctxWidth !== void 0 ? ctxWidth : width,
+            height: ctxHeight !== null && ctxHeight !== void 0 ? ctxHeight : height,
             fps,
             durationInFrames: ctxDuration !== null && ctxDuration !== void 0 ? ctxDuration : durationInFrames,
             defaultProps,
             props,
             defaultCodec,
         };
-    }, [ctxDuration, video]);
+    }, [ctxDuration, ctxHeight, ctxWidth, video]);
 };
 
 /**
@@ -1014,7 +969,8 @@ const useVideoConfig = () => {
     return videoConfig;
 };
 
-const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, showInTimeline = true, loopDisplay, ...other }, ref) => {
+const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity, children, name, height, width, showInTimeline = true, loopDisplay, stack, ...other }, ref) => {
+    var _a;
     const { layout = 'absolute-fill' } = other;
     const [id] = useState(() => String(Math.random()));
     const parentSequence = useContext(SequenceContext);
@@ -1049,25 +1005,30 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         : durationInFrames;
     const actualDurationInFrames = Math.max(0, Math.min(videoConfig.durationInFrames - from, parentSequenceDuration));
     const { registerSequence, unregisterSequence } = useContext(SequenceManager);
+    const { hidden } = useContext(SequenceVisibilityToggleContext);
     const contextValue = useMemo(() => {
-        var _a;
+        var _a, _b, _c;
         return {
             cumulatedFrom,
             relativeFrom: from,
             durationInFrames: actualDurationInFrames,
             parentFrom: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom) !== null && _a !== void 0 ? _a : 0,
             id,
+            height: (_b = height !== null && height !== void 0 ? height : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.height) !== null && _b !== void 0 ? _b : null,
+            width: (_c = width !== null && width !== void 0 ? width : parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.width) !== null && _c !== void 0 ? _c : null,
         };
     }, [
         cumulatedFrom,
         from,
         actualDurationInFrames,
-        parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.relativeFrom,
+        parentSequence,
         id,
+        height,
+        width,
     ]);
     const timelineClipName = useMemo(() => {
-        return name !== null && name !== void 0 ? name : getTimelineClipName(children);
-    }, [children, name]);
+        return name !== null && name !== void 0 ? name : '';
+    }, [name]);
     useEffect(() => {
         var _a;
         if (!getRemotionEnvironment().isStudio) {
@@ -1084,6 +1045,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
             showInTimeline,
             nonce,
             loopDisplay,
+            stack: stack !== null && stack !== void 0 ? stack : null,
         });
         return () => {
             unregisterSequence(id);
@@ -1102,6 +1064,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         showInTimeline,
         nonce,
         loopDisplay,
+        stack,
     ]);
     // Ceil to support floats
     // https://github.com/remotion-dev/remotion/issues/2958
@@ -1115,12 +1078,18 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     const defaultStyle = useMemo(() => {
         return {
             flexDirection: undefined,
+            ...(width ? { width } : {}),
+            ...(height ? { height } : {}),
             ...(styleIfThere !== null && styleIfThere !== void 0 ? styleIfThere : {}),
         };
-    }, [styleIfThere]);
+    }, [height, styleIfThere, width]);
     if (ref !== null && layout === 'none') {
         throw new TypeError('It is not supported to pass both a `ref` and `layout="none"` to <Sequence />.');
     }
+    const isSequenceHidden = (_a = hidden[id]) !== null && _a !== void 0 ? _a : false;
+    if (isSequenceHidden) {
+        return null;
+    }
     return (jsx(SequenceContext.Provider, { value: contextValue, children: content === null ? null : other.layout === 'none' ? (content) : (jsx(AbsoluteFill, { ref: ref, style: defaultStyle, className: other.className, children: content })) }));
 };
 /**
@@ -1129,6 +1098,71 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
  */
 const Sequence = forwardRef(SequenceRefForwardingFunction);
 
+const getAbsoluteSrc = (relativeSrc) => {
+    if (typeof window === 'undefined') {
+        return relativeSrc;
+    }
+    return new URL(relativeSrc, window.location.origin).href;
+};
+
+const calculateLoopDuration = ({ endAt, mediaDuration, playbackRate, startFrom, }) => {
+    let duration = mediaDuration;
+    // Account for endAt
+    if (typeof endAt !== 'undefined') {
+        duration = endAt;
+    }
+    // Account for startFrom
+    if (typeof startFrom !== 'undefined') {
+        duration -= startFrom;
+    }
+    const actualDuration = duration / playbackRate;
+    return Math.floor(actualDuration);
+};
+
+const isErrorLike = (err) => {
+    if (err === null) {
+        return false;
+    }
+    if (typeof err !== 'object') {
+        return false;
+    }
+    if (!('stack' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.stack !== 'string') {
+        return false;
+    }
+    if (!('message' in err)) {
+        return false;
+    }
+    // eslint-disable-next-line @typescript-eslint/prefer-ts-expect-error
+    // @ts-ignore we just asserted
+    if (typeof err.message !== 'string') {
+        return false;
+    }
+    return true;
+};
+/**
+ * @description When you invoke this function, Remotion will stop rendering all the frames without any retries
+ * @see [Documentation](https://www.remotion.dev/docs/cancel-render)
+ */
+function cancelRender(err) {
+    let error;
+    if (isErrorLike(err)) {
+        error = err;
+    }
+    else if (typeof err === 'string') {
+        error = Error(err);
+    }
+    else {
+        error = Error('Rendering was cancelled');
+    }
+    window.remotion_cancelledError = error.stack;
+    throw error;
+}
+
 /**
  * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
  * @see [Documentation](https://remotion.dev/docs/use-current-frame)
@@ -1182,7 +1216,7 @@ const Loop = ({ durationInFrames, times = Infinity, children, name, ...props })
             durationInFrames,
         };
     }, [actualTimes, durationInFrames, from]);
-    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name, loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
+    return (jsx(Sequence, { durationInFrames: durationInFrames, from: from, name: name !== null && name !== void 0 ? name : '<Loop>', loopDisplay: loopDisplay, layout: props.layout, style: style, children: children }));
 };
 
 const PreloadContext = createContext({});
@@ -1536,7 +1570,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, }) => {
     const videoConfig = useVideoConfig();
     const { rootId, audioAndVideoTags } = useContext(TimelineContext);
     const parentSequence = useContext(SequenceContext);
@@ -1546,7 +1580,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
     const [playing] = usePlayingState();
     const startsAt = useMediaStartsAt();
     const { registerSequence, unregisterSequence } = useContext(SequenceManager);
-    const [id] = useState(() => String(Math.random()));
     const [initialVolume] = useState(() => volume);
     const nonce = useNonce();
     const duration = parentSequence
@@ -1601,6 +1634,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             doesVolumeChange,
             loopDisplay: undefined,
             playbackRate,
+            stack,
         });
         return () => {
             unregisterSequence(id);
@@ -1623,6 +1657,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         startsAt,
         playbackRate,
         displayName,
+        stack,
     ]);
     useEffect(() => {
         const tag = {
@@ -2266,6 +2301,7 @@ const useSharedAudio = (aud, audioId) => {
 };
 
 const AudioForDevelopmentForwardRefFunction = (props, ref) => {
+    var _a;
     const [initialShouldPreMountAudioElements] = useState(props.shouldPreMountAudioTags);
     if (props.shouldPreMountAudioTags !== initialShouldPreMountAudioElements) {
         throw new Error('Cannot change the behavior for pre-mounting audio tags dynamically.');
@@ -2273,26 +2309,30 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const [mediaVolume] = useMediaVolumeState();
     const [mediaMuted] = useMediaMutedState();
     const volumePropFrame = useFrameForVolumeProp();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, allowAmplificationDuringRender, name, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, ...nativeProps } = props;
+    const { hidden } = useContext(SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
     }
     const preloadedSrc = usePreload(src);
+    const sequenceContext = useContext(SequenceContext);
+    const [timelineId] = useState(() => String(Math.random()));
+    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
     const propsToPass = useMemo(() => {
         return {
-            muted: muted || mediaMuted,
+            muted: muted || mediaMuted || isSequenceHidden,
             src: preloadedSrc,
             loop: _remotionInternalNativeLoopPassed,
             ...nativeProps,
         };
     }, [
         _remotionInternalNativeLoopPassed,
+        isSequenceHidden,
         mediaMuted,
         muted,
         nativeProps,
         preloadedSrc,
     ]);
-    const sequenceContext = useContext(SequenceContext);
     // Generate a string that's as unique as possible for this asset
     // but at the same time deterministic. We use it to combat strict mode issues.
     const id = useMemo(() => `audio-${random(src !== null && src !== void 0 ? src : '')}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.relativeFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.cumulatedFrom}-${sequenceContext === null || sequenceContext === void 0 ? void 0 : sequenceContext.durationInFrames}-muted:${props.muted}-loop:${props.loop}`, [
@@ -2320,6 +2360,8 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         mediaType: 'audio',
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
         displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        stack: props._remotionInternalStack,
     });
     useMediaPlayback({
         mediaRef: audioRef,
@@ -2587,7 +2629,7 @@ const AudioForRendering = forwardRef(AudioForRenderingRefForwardingFunction);
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b;
     const audioContext = useContext(SharedAudioContext);
-    const { startFrom, endAt, name, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -2632,13 +2674,14 @@ const AudioRefForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx(AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
     }
-    return (jsx(AudioForDevelopment, { _remotionInternalNativeLoopPassed: (_b = props._remotionInternalNativeLoopPassed) !== null && _b !== void 0 ? _b : false, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+    return (jsx(AudioForDevelopment, { _remotionInternalNativeLoopPassed: (_b = props._remotionInternalNativeLoopPassed) !== null && _b !== void 0 ? _b : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
  * @see [Documentation](https://www.remotion.dev/docs/audio)
  */
 const Audio = forwardRef(AudioRefForwardingFunction);
+addSequenceStackTraces(Audio);
 
 const getRegex$1 = () => /^([a-zA-Z0-9-\u4E00-\u9FFF])+$/g;
 const isFolderNameValid = (name) => name.match(getRegex$1());
@@ -3609,6 +3652,7 @@ const Internals = {
     Timeline: TimelinePosition,
     CompositionManager,
     SequenceManager,
+    SequenceVisibilityToggleContext,
     RemotionRoot,
     useVideo,
     getRoot,
@@ -3656,6 +3700,7 @@ const Internals = {
     ClipComposition,
     isIosSafari,
     WATCH_REMOTION_STATIC_FILES,
+    addSequenceStackTraces,
 };
 
 /**
@@ -4116,7 +4161,7 @@ const Series = ({ children }) => {
                 throw new TypeError(`A <Series.Sequence /> component (${debugInfo}) was detected to not have any children. Delete it to fix this error.`);
             }
             const durationInFramesProp = castedChild.props.durationInFrames;
-            const { durationInFrames, children: _children, from, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
+            const { durationInFrames, children: _children, from, name, ...passedProps } = castedChild.props; // `from` is not accepted and must be filtered out if used in JS
             if (i !== flattenedChildren.length - 1 ||
                 durationInFramesProp !== Infinity) {
                 validateDurationInFrames(durationInFramesProp, {
@@ -4136,13 +4181,14 @@ const Series = ({ children }) => {
             }
             const currentStartFrame = startFrame + offset;
             startFrame += durationInFramesProp + offset;
-            return (jsx(Sequence, { from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
+            return (jsx(Sequence, { name: name || '<Series.Sequence>', from: currentStartFrame, durationInFrames: durationInFramesProp, ...passedProps, ref: castedChild.ref, children: child }));
         });
     }, [children]);
     /* eslint-disable react/jsx-no-useless-fragment */
     return jsx(Fragment, { children: childrenValue });
 };
 Series.Sequence = SeriesSequence;
+addSequenceStackTraces(SeriesSequence);
 
 const validateSpringDuration = (dur) => {
     if (typeof dur === 'undefined') {
@@ -4517,14 +4563,17 @@ const OffthreadVideoForRendering = ({ onError, volume: volumeProp, playbackRate,
 };
 
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
     const videoRef = useRef(null);
     const volumePropFrame = useFrameForVolumeProp();
     const { fps, durationInFrames } = useVideoConfig();
     const parentSequence = useContext(SequenceContext);
+    const { hidden } = useContext(SequenceVisibilityToggleContext);
+    const [timelineId] = useState(() => String(Math.random()));
+    const isSequenceHidden = (_a = hidden[timelineId]) !== null && _a !== void 0 ? _a : false;
     const { volume, muted, playbackRate, onlyWarnForMediaSeekingError, src, onDuration, 
     // @ts-expect-error
-    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4537,8 +4586,10 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaVolume,
         mediaType: 'video',
         src,
-        playbackRate: (_a = props.playbackRate) !== null && _a !== void 0 ? _a : 1,
+        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
         displayName: name !== null && name !== void 0 ? name : null,
+        id: timelineId,
+        stack: props._remotionInternalStack,
     });
     useSyncVolumeWithMediaTag({
         volumePropFrame,
@@ -4551,7 +4602,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         mediaRef: videoRef,
         src,
         mediaType: 'video',
-        playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
+        playbackRate: (_c = props.playbackRate) !== null && _c !== void 0 ? _c : 1,
         onlyWarnForMediaSeekingError,
         acceptableTimeshift: acceptableTimeShiftInSeconds !== null && acceptableTimeShiftInSeconds !== void 0 ? acceptableTimeShiftInSeconds : DEFAULT_ACCEPTABLE_TIMESHIFT,
     });
@@ -4633,7 +4684,13 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.preload = 'auto';
         }
     }, []);
-    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, ...nativeProps }));
+    const actualStyle = useMemo(() => {
+        return {
+            ...style,
+            opacity: isSequenceHidden ? 0 : 1,
+        };
+    }, [isSequenceHidden, style]);
+    return (jsx("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, style: actualStyle, ...nativeProps }));
 };
 // Copy types from forwardRef but not necessary to remove ref
 const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction);
@@ -4645,7 +4702,7 @@ const VideoForDevelopment = forwardRef(VideoForDevelopmentRefForwardingFunction)
 const OffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, name, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, ...otherProps } = props;
     const environment = getRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -4665,7 +4722,7 @@ const OffthreadVideo = (props) => {
         return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
     const { transparent, ...withoutTransparent } = otherProps;
-    return (jsx(VideoForDevelopment, { _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
+    return (jsx(VideoForDevelopment, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 
 const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAmplificationDuringRender, playbackRate, onDuration, toneFrequency, name, acceptableTimeShiftInSeconds, ...props }, ref) => {
@@ -4863,7 +4920,7 @@ const VideoForRendering = forwardRef(VideoForRenderingForwardFunction);
 
 const VideoForwardingFunction = (props, ref) => {
     var _a;
-    const { startFrom, endAt, name, _remotionInternalNativeLoopPassed, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, _remotionInternalNativeLoopPassed, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -4897,7 +4954,7 @@ const VideoForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return (jsx(VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
-    return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
+    return (jsx(VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
 };
 const forward = forwardRef;
 /**
@@ -4905,6 +4962,7 @@ const forward = forwardRef;
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
 const Video = forward(VideoForwardingFunction);
+addSequenceStackTraces(Video);
 
 checkMultipleRemotionVersions();
 const Experimental = {
@@ -4946,5 +5004,6 @@ const Config = new Proxy(proxyObj, {
         };
     },
 });
+addSequenceStackTraces(Sequence);
 
 export { AbsoluteFill, Audio, Composition, Config, Easing, Experimental, Folder, FolderContext, Freeze, IFrame, Img, Internals, Loop, OffthreadVideo, Sequence, Series, Still, VERSION, Video, cancelRender, continueRender, delayRender, getInputProps, getRemotionEnvironment, getStaticFiles, interpolate, interpolateColors, measureSpring, prefetch, random, registerRoot, spring, staticFile, useCurrentFrame, useVideoConfig, watchStaticFile };