remotion 4.0.77 → 4.0.80

package/dist/cjs/use-media-in-timeline.js

@@ -21,7 +21,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 = (0, use_video_config_js_1.useVideoConfig)();
     const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
@@ -31,7 +31,6 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
     const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
     const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
     const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
-    const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
     const nonce = (0, nonce_js_1.useNonce)();
     const duration = parentSequence
@@ -86,6 +85,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
             doesVolumeChange,
             loopDisplay: undefined,
             playbackRate,
+            stack,
         });
         return () => {
             unregisterSequence(id);
@@ -108,6 +108,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         startsAt,
         playbackRate,
         displayName,
+        stack,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/cjs/use-unsafe-video-config.js

@@ -5,9 +5,11 @@ const react_1 = require("react");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const use_video_js_1 = require("./use-video.js");
 const useUnsafeVideoConfig = () => {
-    var _a;
+    var _a, _b, _c;
     const context = (0, react_1.useContext)(SequenceContext_js_1.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 = (0, use_video_js_1.useVideo)();
     return (0, react_1.useMemo)(() => {
         if (!video) {
@@ -16,14 +18,14 @@ 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]);
 };
 exports.useUnsafeVideoConfig = useUnsafeVideoConfig;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.77";
+export declare const VERSION = "4.0.80";

package/dist/cjs/version.js

@@ -2,4 +2,4 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VERSION = void 0;
 // Automatically generated on publish
-exports.VERSION = '4.0.77';
+exports.VERSION = '4.0.80';

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

@@ -4,4 +4,4 @@ import type { OffthreadVideoProps } from './props.js';
  * @description This method imports and displays a video, similar to <Video />. During rendering, it extracts the exact frame from the video and displays it in an <img> tag
  * @see [Documentation](https://www.remotion.dev/docs/offthreadvideo)
  */
-export declare const OffthreadVideo: React.FC<Omit<OffthreadVideoProps, 'loop'>>;
+export declare const OffthreadVideo: React.FC<OffthreadVideoProps>;

package/dist/cjs/video/OffthreadVideo.js

@@ -16,7 +16,7 @@ const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
 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 = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -36,6 +36,6 @@ const OffthreadVideo = (props) => {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_js_1.OffthreadVideoForRendering, { ...otherProps });
     }
     const { transparent, ...withoutTransparent } = otherProps;
-    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...withoutTransparent }));
 };
 exports.OffthreadVideo = OffthreadVideo;

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

@@ -11,4 +11,9 @@ export declare const Video: (props: Omit<React.DetailedHTMLProps<React.VideoHTML
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;
     toneFrequency?: number | undefined;
-} & RemotionMainVideoProps & React.RefAttributes<HTMLVideoElement | null>) => React.ReactElement | null;
+} & RemotionMainVideoProps & {
+    /**
+     * @deprecated For internal use only
+     */
+    stack?: string | undefined;
+} & React.RefAttributes<HTMLVideoElement | null>) => React.ReactElement | null;

package/dist/cjs/video/Video.js

@@ -6,6 +6,7 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const absolute_src_js_1 = require("../absolute-src.js");
 const calculate_loop_js_1 = require("../calculate-loop.js");
+const enable_sequence_stack_traces_js_1 = require("../enable-sequence-stack-traces.js");
 const get_remotion_environment_js_1 = require("../get-remotion-environment.js");
 const index_js_1 = require("../loop/index.js");
 const prefetch_js_1 = require("../prefetch.js");
@@ -18,7 +19,7 @@ const VideoForDevelopment_js_1 = require("./VideoForDevelopment.js");
 const VideoForRendering_js_1 = require("./VideoForRendering.js");
 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 } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -52,7 +53,7 @@ const VideoForwardingFunction = (props, ref) => {
     if (environment.isRendering) {
         return ((0, jsx_runtime_1.jsx)(VideoForRendering_js_1.VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
-    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_js_1.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 = react_1.forwardRef;
 /**
@@ -60,3 +61,4 @@ const forward = react_1.forwardRef;
  * @see [Documentation](https://www.remotion.dev/docs/video)
  */
 exports.Video = forward(VideoForwardingFunction);
+(0, enable_sequence_stack_traces_js_1.addSequenceStackTraces)(exports.Video);

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

@@ -11,4 +11,5 @@ export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.D
     onlyWarnForMediaSeekingError: boolean;
     onDuration: (src: string, durationInSeconds: number) => void;
     _remotionInternalNativeLoopPassed: boolean;
+    _remotionInternalStack: string | null;
 } & RefAttributes<HTMLVideoElement>>;

package/dist/cjs/video/VideoForDevelopment.js

@@ -6,6 +6,7 @@ const react_1 = require("react");
 const use_audio_frame_js_1 = require("../audio/use-audio-frame.js");
 const prefetch_js_1 = require("../prefetch.js");
 const SequenceContext_js_1 = require("../SequenceContext.js");
+const SequenceManager_js_1 = require("../SequenceManager.js");
 const use_media_in_timeline_js_1 = require("../use-media-in-timeline.js");
 const use_media_playback_js_1 = require("../use-media-playback.js");
 const use_media_tag_volume_js_1 = require("../use-media-tag-volume.js");
@@ -14,14 +15,17 @@ const use_video_config_js_1 = require("../use-video-config.js");
 const volume_position_state_js_1 = require("../volume-position-state.js");
 const video_fragment_js_1 = require("./video-fragment.js");
 const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
-    var _a, _b;
+    var _a, _b, _c;
     const videoRef = (0, react_1.useRef)(null);
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
     const { fps, durationInFrames } = (0, use_video_config_js_1.useVideoConfig)();
     const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
+    const [timelineId] = (0, react_1.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.');
     }
@@ -34,8 +38,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,
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,
@@ -48,7 +54,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 : use_media_playback_js_1.DEFAULT_ACCEPTABLE_TIMESHIFT,
     });
@@ -130,7 +136,13 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
             current.preload = 'auto';
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)("video", { ref: videoRef, muted: muted || mediaMuted, playsInline: true, src: actualSrc, loop: _remotionInternalNativeLoopPassed, ...nativeProps }));
+    const actualStyle = (0, react_1.useMemo)(() => {
+        return {
+            ...style,
+            opacity: isSequenceHidden ? 0 : 1,
+        };
+    }, [isSequenceHidden, style]);
+    return ((0, jsx_runtime_1.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
 exports.VideoForDevelopment = (0, react_1.forwardRef)(VideoForDevelopmentRefForwardingFunction);

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

@@ -36,5 +36,9 @@ export type OffthreadVideoProps = {
     allowAmplificationDuringRender?: boolean;
     toneFrequency?: number;
     transparent?: boolean;
+    /**
+     * @deprecated For internal use only
+     */
+    stack?: string;
 } & RemotionMainVideoProps & DeprecatedOffthreadVideoProps;
 export {};