remotion 4.0.121 → 4.0.123

package/dist/cjs/audio/Audio.d.ts

@@ -14,6 +14,7 @@ export declare const Audio: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     _remotionInternalNativeLoopPassed?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
 } & RemotionMainAudioProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/audio/Audio.js

@@ -22,7 +22,7 @@ const shared_audio_tags_js_1 = require("./shared-audio-tags.js");
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = (0, react_1.useContext)(shared_audio_tags_js_1.SharedAudioContext);
-    const { startFrom, endAt, name, stack, pauseWhenBuffering, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -70,7 +70,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     return ((0, jsx_runtime_1.jsx)(AudioForPreview_js_1.AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.

package/dist/cjs/audio/AudioForDevelopment.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "onEnded" | "nonce" | "onResize" | "onResizeCapture"> & {
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/cjs/audio/AudioForPreview.d.ts

@@ -6,6 +6,7 @@ type AudioForPreviewProps = RemotionAudioProps & {
     pauseWhenBuffering: boolean;
     _remotionInternalNativeLoopPassed: boolean;
     _remotionInternalStack: string | null;
+    showInTimeline: boolean;
 };
 export declare const AudioForPreview: React.ForwardRefExoticComponent<Omit<AudioForPreviewProps, "ref"> & React.RefAttributes<HTMLAudioElement>>;
 export {};

package/dist/cjs/audio/AudioForPreview.js

@@ -24,7 +24,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const [mediaVolume] = (0, volume_position_state_js_1.useMediaVolumeState)();
     const [mediaMuted] = (0, volume_position_state_js_1.useMediaMutedState)();
     const volumePropFrame = (0, use_audio_frame_js_1.useFrameForVolumeProp)();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     const { hidden } = (0, react_1.useContext)(SequenceManager_js_1.SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
@@ -76,7 +76,8 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
         displayName: name !== null && name !== void 0 ? name : null,
         id: timelineId,
-        stack: props._remotionInternalStack,
+        stack: _remotionInternalStack,
+        showInTimeline,
     });
     (0, use_media_playback_js_1.useMediaPlayback)({
         mediaRef: audioRef,

package/dist/cjs/audio/AudioForRendering.d.ts

@@ -10,6 +10,7 @@ export declare const AudioForRendering: ForwardRefExoticComponent<Omit<React.Det
     _remotionInternalNativeLoopPassed?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
 } & {
     onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLAudioElement>>;

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

@@ -14,4 +14,5 @@ export type RemotionAudioProps = Omit<React.DetailedHTMLProps<React.AudioHTMLAtt
     _remotionInternalNativeLoopPassed?: boolean;
     toneFrequency?: number;
     pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
 };

package/dist/cjs/codec.d.ts

@@ -1,4 +1,4 @@
-export declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "gif"];
+export declare const validCodecs: readonly ["h264", "h265", "vp8", "vp9", "mp3", "aac", "wav", "prores", "h264-mkv", "h264-ts", "gif"];
 export type Codec = (typeof validCodecs)[number];
 export type CodecOrUndefined = Codec | undefined;
 export declare const DEFAULT_CODEC: Codec;

package/dist/cjs/codec.js

@@ -11,6 +11,7 @@ exports.validCodecs = [
     'wav',
     'prores',
     'h264-mkv',
+    'h264-ts',
     'gif',
 ];
 exports.DEFAULT_CODEC = 'h264';

package/dist/cjs/get-timeline-clip-name.d.ts

@@ -0,0 +1 @@
+export declare const getTimelineClipName: (children: React.ReactNode) => string;

package/dist/cjs/get-timeline-clip-name.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineClipName = void 0;
+const react_1 = require("react");
+const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
+const getTimelineClipName = (children) => {
+    var _a;
+    const tree = (_a = react_1.Children.map(children, (ch) => {
+        if (!(0, react_1.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 = (0, exports.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] : '';
+};
+exports.getTimelineClipName = getTimelineClipName;

package/dist/cjs/setup-env-variables.js

@@ -2,6 +2,12 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.setupEnvVariables = void 0;
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
+// https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
+// eslint-disable-next-line no-useless-concat
+function getEnvVar() {
+    const parts = ['proc', 'ess', '.', 'en', 'v', '.', 'NOD', 'E_EN', 'V'];
+    return parts.join('');
+}
 const getEnvVariables = () => {
     if ((0, get_remotion_environment_js_1.getRemotionEnvironment)().isRendering) {
         const param = window.remotion_envVariables;
@@ -13,9 +19,7 @@ const getEnvVariables = () => {
     // For the Studio, we already set the environment variables in index-html.ts.
     // We just add NODE_ENV here.
     if (!process.env.NODE_ENV) {
-        // https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
-        // eslint-disable-next-line no-useless-concat
-        throw new Error('process.en' + '' + 'v.NODE_ENV is not set');
+        throw new Error(`${getEnvVar()} is not set`);
     }
     return {
         NODE_ENV: process.env.NODE_ENV,

package/dist/cjs/use-media-in-timeline.d.ts

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
 import type { VolumeProp } from './volume-prop.js';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, }: {
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
@@ -10,4 +10,5 @@ export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src,
     displayName: string | null;
     id: string;
     stack: string | null;
+    showInTimeline: boolean;
 }) => void;

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, id, stack, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, }) => {
     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);
@@ -69,6 +69,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (!(0, get_remotion_environment_js_1.getRemotionEnvironment)().isStudio && process.env.NODE_ENV !== 'test') {
             return;
         }
+        if (!showInTimeline) {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,
@@ -109,6 +112,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         playbackRate,
         displayName,
         stack,
+        showInTimeline,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.121";
+export declare const VERSION = "4.0.123";

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.121';
+exports.VERSION = '4.0.123';

package/dist/cjs/video/OffthreadVideo.js

@@ -16,7 +16,7 @@ const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const OffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, ...otherProps } = props;
+    const { startFrom, endAt, name, pauseWhenBuffering, stack, showInTimeline, ...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, toneMapped, ...withoutTransparent } = otherProps;
-    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...withoutTransparent }));
+    return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, ...withoutTransparent }));
 };
 exports.OffthreadVideo = OffthreadVideo;

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

@@ -12,6 +12,7 @@ export declare const Video: React.ForwardRefExoticComponent<Omit<Omit<React.Deta
     allowAmplificationDuringRender?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
 } & RemotionMainVideoProps & {
     /**
      * @deprecated For internal use only

package/dist/cjs/video/Video.js

@@ -19,7 +19,7 @@ const VideoForPreview_js_1 = require("./VideoForPreview.js");
 const VideoForRendering_js_1 = require("./VideoForRendering.js");
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b;
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, ...otherProps } = props;
+    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_js_1.useVideoConfig)();
     const environment = (0, get_remotion_environment_js_1.getRemotionEnvironment)();
@@ -56,7 +56,7 @@ const VideoForwardingFunction = (props, ref) => {
     }
     return ((0, jsx_runtime_1.jsx)(VideoForPreview_js_1.VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, 
         // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.

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

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "onEnded" | "nonce"> & {
+export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

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

@@ -6,6 +6,7 @@ type VideoForPreviewProps = RemotionVideoProps & {
     pauseWhenBuffering: boolean;
     _remotionInternalNativeLoopPassed: boolean;
     _remotionInternalStack: string | null;
+    showInTimeline: boolean;
 };
 export declare const VideoForPreview: React.ForwardRefExoticComponent<Omit<VideoForPreviewProps, "ref"> & React.RefAttributes<HTMLVideoElement>>;
 export {};

package/dist/cjs/video/VideoForPreview.js

@@ -26,7 +26,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     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, _remotionInternalStack, style, pauseWhenBuffering, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -42,7 +42,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
         displayName: name !== null && name !== void 0 ? name : null,
         id: timelineId,
-        stack: props._remotionInternalStack,
+        stack: _remotionInternalStack,
+        showInTimeline,
     });
     (0, use_sync_volume_with_media_tag_js_1.useSyncVolumeWithMediaTag)({
         volumePropFrame,

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

@@ -8,6 +8,7 @@ export declare const VideoForRendering: ForwardRefExoticComponent<Omit<React.Det
     allowAmplificationDuringRender?: boolean | undefined;
     toneFrequency?: number | undefined;
     pauseWhenBuffering?: boolean | undefined;
+    showInTimeline?: boolean | undefined;
 } & {
     onDuration: (src: string, durationInSeconds: number) => void;
 } & RefAttributes<HTMLVideoElement>>;

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

@@ -16,6 +16,7 @@ export type RemotionVideoProps = Omit<React.DetailedHTMLProps<React.VideoHTMLAtt
     allowAmplificationDuringRender?: boolean;
     toneFrequency?: number;
     pauseWhenBuffering?: boolean;
+    showInTimeline?: boolean;
 };
 type DeprecatedOffthreadVideoProps = {
     /**
@@ -43,5 +44,6 @@ export type OffthreadVideoProps = {
      * @deprecated For internal use only
      */
     stack?: string;
+    showInTimeline?: boolean;
 } & RemotionMainVideoProps & DeprecatedOffthreadVideoProps;
 export {};

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.121';
+const VERSION = '4.0.123';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -429,6 +429,7 @@ const validCodecs = [
     'wav',
     'prores',
     'h264-mkv',
+    'h264-ts',
     'gif',
 ];
 
@@ -1691,7 +1692,7 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, }) => {
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, displayName, id, stack, showInTimeline, }) => {
     const videoConfig = useVideoConfig();
     const { rootId, audioAndVideoTags } = useContext(TimelineContext);
     const parentSequence = useContext(SequenceContext);
@@ -1739,6 +1740,9 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (!getRemotionEnvironment().isStudio && process.env.NODE_ENV !== 'test') {
             return;
         }
+        if (!showInTimeline) {
+            return;
+        }
         registerSequence({
             type: mediaType,
             src,
@@ -1779,6 +1783,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         playbackRate,
         displayName,
         stack,
+        showInTimeline,
     ]);
     useEffect(() => {
         const tag = {
@@ -2425,7 +2430,7 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
     const [mediaVolume] = useMediaVolumeState();
     const [mediaMuted] = useMediaMutedState();
     const volumePropFrame = useFrameForVolumeProp();
-    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, ...nativeProps } = props;
+    const { volume, muted, playbackRate, shouldPreMountAudioTags, src, onDuration, acceptableTimeShiftInSeconds, _remotionInternalNeedsDurationCalculation, _remotionInternalNativeLoopPassed, _remotionInternalStack, allowAmplificationDuringRender, name, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     const { hidden } = useContext(SequenceVisibilityToggleContext);
     if (!src) {
         throw new TypeError("No 'src' was passed to <Audio>.");
@@ -2477,7 +2482,8 @@ const AudioForDevelopmentForwardRefFunction = (props, ref) => {
         playbackRate: playbackRate !== null && playbackRate !== void 0 ? playbackRate : 1,
         displayName: name !== null && name !== void 0 ? name : null,
         id: timelineId,
-        stack: props._remotionInternalStack,
+        stack: _remotionInternalStack,
+        showInTimeline,
     });
     useMediaPlayback({
         mediaRef: audioRef,
@@ -2746,7 +2752,7 @@ const AudioForRendering = forwardRef(AudioForRenderingRefForwardingFunction);
 const AudioRefForwardingFunction = (props, ref) => {
     var _a, _b, _c;
     const audioContext = useContext(SharedAudioContext);
-    const { startFrom, endAt, name, stack, pauseWhenBuffering, ...otherProps } = props;
+    const { startFrom, endAt, name, stack, pauseWhenBuffering, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -2794,7 +2800,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     }
     return (jsx(AudioForPreview, { _remotionInternalNativeLoopPassed: (_c = props._remotionInternalNativeLoopPassed) !== null && _c !== void 0 ? _c : false, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration, 
         // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop) }));
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, _remotionInternalNeedsDurationCalculation: Boolean(loop), showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description With this component, you can add audio to your video. All audio formats which are supported by Chromium are supported by the component.
@@ -4054,6 +4060,12 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
     return (jsx(NonceContext.Provider, { value: nonceContext, children: jsx(TimelineContext.Provider, { value: timelineContextValue, children: jsx(SetTimelineContext.Provider, { value: setTimelineContextValue, children: jsx(EditorPropsProvider, { children: jsx(PrefetchProvider, { children: jsx(NativeLayersProvider, { children: jsx(CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, children: jsx(DurationsContextProvider, { children: jsx(BufferingProvider, { children: children }) }) }) }) }) }) }) }) }));
 };
 
+// https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
+// eslint-disable-next-line no-useless-concat
+function getEnvVar() {
+    const parts = ['proc', 'ess', '.', 'en', 'v', '.', 'NOD', 'E_EN', 'V'];
+    return parts.join('');
+}
 const getEnvVariables = () => {
     if (getRemotionEnvironment().isRendering) {
         const param = window.remotion_envVariables;
@@ -4065,9 +4077,7 @@ const getEnvVariables = () => {
     // For the Studio, we already set the environment variables in index-html.ts.
     // We just add NODE_ENV here.
     if (!process.env.NODE_ENV) {
-        // https://github.com/remotion-dev/remotion/issues/3412#issuecomment-1910120552
-        // eslint-disable-next-line no-useless-concat
-        throw new Error('process.en' + '' + 'v.NODE_ENV is not set');
+        throw new Error(`${getEnvVar()} is not set`);
     }
     return {
         NODE_ENV: process.env.NODE_ENV,
@@ -4773,7 +4783,7 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
     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, _remotionInternalStack, style, pauseWhenBuffering, ...nativeProps } = props;
+    acceptableTimeShift, acceptableTimeShiftInSeconds, toneFrequency, name, _remotionInternalNativeLoopPassed, _remotionInternalStack, style, pauseWhenBuffering, showInTimeline, ...nativeProps } = props;
     if (typeof acceptableTimeShift !== 'undefined') {
         throw new Error('acceptableTimeShift has been removed. Use acceptableTimeShiftInSeconds instead.');
     }
@@ -4789,7 +4799,8 @@ const VideoForDevelopmentRefForwardingFunction = (props, ref) => {
         playbackRate: (_b = props.playbackRate) !== null && _b !== void 0 ? _b : 1,
         displayName: name !== null && name !== void 0 ? name : null,
         id: timelineId,
-        stack: props._remotionInternalStack,
+        stack: _remotionInternalStack,
+        showInTimeline,
     });
     useSyncVolumeWithMediaTag({
         volumePropFrame,
@@ -4903,7 +4914,7 @@ const VideoForPreview = forwardRef(VideoForDevelopmentRefForwardingFunction);
 const OffthreadVideo = (props) => {
     // Should only destruct `startFrom` and `endAt` from props,
     // rest gets drilled down
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, ...otherProps } = props;
+    const { startFrom, endAt, name, pauseWhenBuffering, stack, showInTimeline, ...otherProps } = props;
     const environment = getRemotionEnvironment();
     const onDuration = useCallback(() => undefined, []);
     if (typeof props.src !== 'string') {
@@ -4923,7 +4934,7 @@ const OffthreadVideo = (props) => {
         return jsx(OffthreadVideoForRendering, { ...otherProps });
     }
     const { transparent, toneMapped, ...withoutTransparent } = otherProps;
-    return (jsx(VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, ...withoutTransparent }));
+    return (jsx(VideoForPreview, { _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: false, onDuration: onDuration, onlyWarnForMediaSeekingError: true, pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true, ...withoutTransparent }));
 };
 
 const roundTo6Commas = (num) => {
@@ -5194,7 +5205,7 @@ const VideoForRendering = forwardRef(VideoForRenderingForwardFunction);
 
 const VideoForwardingFunction = (props, ref) => {
     var _a, _b;
-    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, ...otherProps } = props;
+    const { startFrom, endAt, name, pauseWhenBuffering, stack, _remotionInternalNativeLoopPassed, showInTimeline, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = useVideoConfig();
     const environment = getRemotionEnvironment();
@@ -5231,7 +5242,7 @@ const VideoForwardingFunction = (props, ref) => {
     }
     return (jsx(VideoForPreview, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, 
         // Proposal: Make this default to true in v5
-        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false }));
+        pauseWhenBuffering: pauseWhenBuffering !== null && pauseWhenBuffering !== void 0 ? pauseWhenBuffering : false, onDuration: onDuration, _remotionInternalStack: stack !== null && stack !== void 0 ? stack : null, _remotionInternalNativeLoopPassed: _remotionInternalNativeLoopPassed !== null && _remotionInternalNativeLoopPassed !== void 0 ? _remotionInternalNativeLoopPassed : false, showInTimeline: showInTimeline !== null && showInTimeline !== void 0 ? showInTimeline : true }));
 };
 /**
  * @description allows you to include a video file in your Remotion project. It wraps the native HTMLVideoElement.

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.121';
+const VERSION = '4.0.123';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.121",
+  "version": "4.0.123",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/dist/cjs/use-buffer.d.ts

@@ -1,5 +0,0 @@
-export declare const useBufferState: () => {
-    delayPlayback: () => {
-        unblock: () => void;
-    };
-};

package/dist/cjs/use-buffer.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBufferState = void 0;
-const react_1 = require("react");
-const buffering_1 = require("./buffering");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const useBufferState = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
-    if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
-        }
-        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
-    }
-    const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
-    if (!buffer) {
-        throw new Error('BufferingContextReact was unexpectedly not found. Most likely your Remotion versions are mismatching.');
-    }
-    return (0, react_1.useMemo)(() => ({
-        delayPlayback: () => {
-            const { unblock } = buffer.addBlock({
-                id: String(Math.random()),
-            });
-            return { unblock };
-        },
-    }), [buffer]);
-};
-exports.useBufferState = useBufferState;