remotion 4.0.362 → 4.0.364

package/dist/cjs/Img.js

@@ -117,25 +117,20 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
                 return;
             }
             current.src = actualSrc;
-            if (current.complete) {
-                onComplete();
-            }
-            else {
-                current
-                    .decode()
-                    .then(onComplete)
-                    .catch((err) => {
-                    // fall back to onload event if decode() fails
-                    // eslint-disable-next-line no-console
-                    console.warn(err);
-                    if (current.complete) {
-                        onComplete();
-                    }
-                    else {
-                        current.addEventListener('load', onComplete);
-                    }
-                });
-            }
+            current
+                .decode()
+                .then(onComplete)
+                .catch((err) => {
+                // fall back to onload event if decode() fails
+                // eslint-disable-next-line no-console
+                console.warn(err);
+                if (current.complete) {
+                    onComplete();
+                }
+                else {
+                    current.addEventListener('load', onComplete);
+                }
+            });
             // If tag gets unmounted, clear pending handles because image is not going to load
             return () => {
                 unmounted = true;
@@ -161,7 +156,7 @@ const ImgRefForwarding = ({ onError, maxRetries = 2, src, pauseWhenLoading, dela
         requestsVideoFrame: false,
     });
     // src gets set once we've loaded and decoded the image.
-    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError }));
+    return ((0, jsx_runtime_1.jsx)("img", { ...props, ref: imageRef, crossOrigin: crossOriginValue, onError: didGetError, decoding: "sync" }));
 };
 /*
  * @description Works just like a regular HTML img tag. When you use the <Img> tag, Remotion will ensure that the image is loaded before rendering the frame.

package/dist/cjs/RemotionRoot.d.ts

@@ -8,4 +8,6 @@ export declare const RemotionRoot: React.FC<{
     readonly onlyRenderComposition: string | null;
     readonly currentCompositionMetadata: BaseMetadata | null;
     readonly audioLatencyHint: AudioContextLatencyCategory;
+    readonly videoEnabled: boolean | null;
+    readonly audioEnabled: boolean | null;
 }>;

package/dist/cjs/RemotionRoot.js

@@ -12,8 +12,9 @@ const prefetch_state_js_1 = require("./prefetch-state.js");
 const random_js_1 = require("./random.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const use_delay_render_js_1 = require("./use-delay-render.js");
+const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const duration_state_js_1 = require("./video/duration-state.js");
-const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, audioLatencyHint, }) => {
+const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposition, currentCompositionMetadata, audioLatencyHint, videoEnabled, audioEnabled, }) => {
     const [remotionRootId] = (0, react_1.useState)(() => String((0, random_js_1.random)(null)));
     const [frame, setFrame] = (0, react_1.useState)(() => (0, timeline_position_state_js_1.getInitialFrameState)());
     const [playing, setPlaying] = (0, react_1.useState)(false);
@@ -100,6 +101,6 @@ const RemotionRoot = ({ children, numberOfAudioTags, logLevel, onlyRenderComposi
     const logging = (0, react_1.useMemo)(() => {
         return { logLevel, mountTime: Date.now() };
     }, [logLevel]);
-    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, onlyRenderComposition: onlyRenderComposition, currentCompositionMetadata: currentCompositionMetadata, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(log_level_context_js_1.LogLevelContext.Provider, { value: logging, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.SetNonceContext.Provider, { value: setNonceContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineContextValue, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: setTimelineContextValue, children: (0, jsx_runtime_1.jsx)(use_media_enabled_js_1.MediaEnabledProvider, { videoEnabled: videoEnabled, audioEnabled: audioEnabled, children: (0, jsx_runtime_1.jsx)(EditorProps_js_1.EditorPropsProvider, { children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PrefetchProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, onlyRenderComposition: onlyRenderComposition, currentCompositionMetadata: currentCompositionMetadata, audioLatencyHint: audioLatencyHint, children: (0, jsx_runtime_1.jsx)(duration_state_js_1.DurationsContextProvider, { children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingProvider, { children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionRoot = RemotionRoot;

package/dist/cjs/delay-render.js

@@ -5,12 +5,12 @@ const cancel_render_js_1 = require("./cancel-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const log_js_1 = require("./log.js");
 const truthy_js_1 = require("./truthy.js");
-if (typeof window !== 'undefined') {
-    window.remotion_renderReady = false;
-}
 let handles = [];
 if (typeof window !== 'undefined') {
-    window.remotion_delayRenderTimeouts = {};
+    window.remotion_renderReady = false;
+    if (!window.remotion_delayRenderTimeouts) {
+        window.remotion_delayRenderTimeouts = {};
+    }
 }
 exports.DELAY_RENDER_CALLSTACK_TOKEN = 'The delayRender was called:';
 exports.DELAY_RENDER_RETRIES_LEFT = 'Retries left: ';

package/dist/cjs/internals.d.ts

@@ -78,6 +78,8 @@ export declare const Internals: {
         readonly onlyRenderComposition: string | null;
         readonly currentCompositionMetadata: import("./CompositionManagerContext.js").BaseMetadata | null;
         readonly audioLatencyHint: AudioContextLatencyCategory;
+        readonly videoEnabled: boolean | null;
+        readonly audioEnabled: boolean | null;
     }>;
     readonly useVideo: () => (import("./video-config.js").VideoConfig & {
         component: import("react").LazyExoticComponent<import("react").ComponentType<Record<string, unknown>>>;
@@ -352,5 +354,7 @@ export declare const Internals: {
     };
     readonly getInputPropsOverride: () => Record<string, unknown> | null;
     readonly setInputPropsOverride: (override: Record<string, unknown> | null) => void;
+    readonly useVideoEnabled: () => boolean;
+    readonly useAudioEnabled: () => boolean;
 };
 export type { CompositionManagerContext, CompProps, LoggingContextValue, MediaVolumeContextValue, RemotionEnvironment, SerializedJSONWithCustomFields, SetMediaVolumeContextValue, SetTimelineContextValue, TCompMetadata, TComposition, TimelineContextValue, TRenderAsset, TSequence, WatchRemotionStaticFilesPayload, };

package/dist/cjs/internals.js

@@ -73,6 +73,7 @@ const timeline_position_state_js_1 = require("./timeline-position-state.js");
 const truthy_js_1 = require("./truthy.js");
 const use_current_scale_js_1 = require("./use-current-scale.js");
 const use_lazy_component_js_1 = require("./use-lazy-component.js");
+const use_media_enabled_js_1 = require("./use-media-enabled.js");
 const use_media_in_timeline_js_1 = require("./use-media-in-timeline.js");
 const use_unsafe_video_config_js_1 = require("./use-unsafe-video-config.js");
 const use_video_js_1 = require("./use-video.js");
@@ -179,4 +180,6 @@ exports.Internals = {
     useBasicMediaInTimeline: use_media_in_timeline_js_1.useBasicMediaInTimeline,
     getInputPropsOverride: input_props_override_js_1.getInputPropsOverride,
     setInputPropsOverride: input_props_override_js_1.setInputPropsOverride,
+    useVideoEnabled: use_media_enabled_js_1.useVideoEnabled,
+    useAudioEnabled: use_media_enabled_js_1.useAudioEnabled,
 };

package/dist/cjs/log.js

@@ -17,7 +17,9 @@ const transformArgs = ({ args, logLevel, tag, }) => {
         !(0, get_remotion_environment_1.getRemotionEnvironment)().isClientSideRendering) {
         arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
     }
-    if (tag) {
+    if (tag &&
+        (0, get_remotion_environment_1.getRemotionEnvironment)().isRendering &&
+        !(0, get_remotion_environment_1.getRemotionEnvironment)().isClientSideRendering) {
         arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
     }
     return arr;

package/dist/cjs/use-enabled-media.d.ts

@@ -0,0 +1,2 @@
+export declare const useVideoEnabled: () => boolean;
+export declare const useAudioEnabled: () => boolean;

package/dist/cjs/use-enabled-media.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useAudioEnabled = exports.useVideoEnabled = void 0;
+const useVideoEnabled = () => {
+    return window.remotion_videoEnabled;
+};
+exports.useVideoEnabled = useVideoEnabled;
+const useAudioEnabled = () => {
+    return window.remotion_audioEnabled;
+};
+exports.useAudioEnabled = useAudioEnabled;

package/dist/cjs/use-media-enabled.d.ts

@@ -0,0 +1,7 @@
+export declare const useVideoEnabled: () => boolean;
+export declare const useAudioEnabled: () => boolean;
+export declare const MediaEnabledProvider: ({ children, videoEnabled, audioEnabled, }: {
+    readonly children: React.ReactNode;
+    readonly videoEnabled: boolean | null;
+    readonly audioEnabled: boolean | null;
+}) => import("react/jsx-runtime").JSX.Element;

package/dist/cjs/use-media-enabled.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.MediaEnabledProvider = exports.useAudioEnabled = exports.useVideoEnabled = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const MediaEnabledContext = (0, react_1.createContext)(null);
+const useVideoEnabled = () => {
+    const context = (0, react_1.useContext)(MediaEnabledContext);
+    if (!context) {
+        return window.remotion_videoEnabled;
+    }
+    if (context.videoEnabled === null) {
+        return window.remotion_videoEnabled;
+    }
+    return context.videoEnabled;
+};
+exports.useVideoEnabled = useVideoEnabled;
+const useAudioEnabled = () => {
+    const context = (0, react_1.useContext)(MediaEnabledContext);
+    if (!context) {
+        return window.remotion_audioEnabled;
+    }
+    if (context.audioEnabled === null) {
+        return window.remotion_audioEnabled;
+    }
+    return context.audioEnabled;
+};
+exports.useAudioEnabled = useAudioEnabled;
+const MediaEnabledProvider = ({ children, videoEnabled, audioEnabled, }) => {
+    const value = (0, react_1.useMemo)(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+    return ((0, jsx_runtime_1.jsx)(MediaEnabledContext.Provider, { value: value, children: children }));
+};
+exports.MediaEnabledProvider = MediaEnabledProvider;

package/dist/cjs/validate-start-from-props.js

@@ -52,7 +52,7 @@ const validateTrimProps = (trimBefore, trimAfter) => {
             throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
         }
     }
-    if (trimAfter < trimBefore) {
+    if (trimAfter <= trimBefore) {
         throw new TypeError('trimAfter prop must be greater than trimBefore prop.');
     }
 };

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.362";
+export declare const VERSION = "4.0.364";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.362';
+exports.VERSION = '4.0.364';

package/dist/esm/index.mjs

@@ -110,7 +110,7 @@ function truthy(value) {
 }
 
 // src/version.ts
-var VERSION = "4.0.362";
+var VERSION = "4.0.364";
 
 // src/multiple-versions-warning.ts
 var checkMultipleRemotionVersions = () => {
@@ -1674,7 +1674,7 @@ var transformArgs = ({
   if (getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
     arr.unshift(Symbol.for(`__remotion_level_${logLevel}`));
   }
-  if (tag) {
+  if (tag && getRemotionEnvironment().isRendering && !getRemotionEnvironment().isClientSideRendering) {
     arr.unshift(Symbol.for(`__remotion_tag_${tag}`));
   }
   return arr;
@@ -1711,12 +1711,12 @@ var Log = {
 };
 
 // src/delay-render.ts
-if (typeof window !== "undefined") {
-  window.remotion_renderReady = false;
-}
 var handles = [];
 if (typeof window !== "undefined") {
-  window.remotion_delayRenderTimeouts = {};
+  window.remotion_renderReady = false;
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
 }
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";
@@ -2697,7 +2697,7 @@ var validateTrimProps = (trimBefore, trimAfter) => {
       throw new TypeError(`trimAfter must be a positive number, instead got ${trimAfter}.`);
     }
   }
-  if (trimAfter < trimBefore) {
+  if (trimAfter <= trimBefore) {
     throw new TypeError("trimAfter prop must be greater than trimBefore prop.");
   }
 };
@@ -5694,18 +5694,14 @@ var ImgRefForwarding = ({
         return;
       }
       current.src = actualSrc;
-      if (current.complete) {
-        onComplete();
-      } else {
-        current.decode().then(onComplete).catch((err) => {
-          console.warn(err);
-          if (current.complete) {
-            onComplete();
-          } else {
-            current.addEventListener("load", onComplete);
-          }
-        });
-      }
+      current.decode().then(onComplete).catch((err) => {
+        console.warn(err);
+        if (current.complete) {
+          onComplete();
+        } else {
+          current.addEventListener("load", onComplete);
+        }
+      });
       return () => {
         unmounted = true;
         current.removeEventListener("load", onComplete);
@@ -5733,7 +5729,8 @@ var ImgRefForwarding = ({
     ...props2,
     ref: imageRef,
     crossOrigin: crossOriginValue,
-    onError: didGetError
+    onError: didGetError,
+    decoding: "sync"
   });
 };
 var Img = forwardRef8(ImgRefForwarding);
@@ -5956,18 +5953,58 @@ var waitForRoot = (fn) => {
 import {
   useEffect as useEffect18,
   useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo25,
+  useMemo as useMemo26,
   useRef as useRef15,
   useState as useState17
 } from "react";
+
+// src/use-media-enabled.tsx
+import { createContext as createContext18, useContext as useContext30, useMemo as useMemo25 } from "react";
 import { jsx as jsx26 } from "react/jsx-runtime";
+var MediaEnabledContext = createContext18(null);
+var useVideoEnabled = () => {
+  const context = useContext30(MediaEnabledContext);
+  if (!context) {
+    return window.remotion_videoEnabled;
+  }
+  if (context.videoEnabled === null) {
+    return window.remotion_videoEnabled;
+  }
+  return context.videoEnabled;
+};
+var useAudioEnabled = () => {
+  const context = useContext30(MediaEnabledContext);
+  if (!context) {
+    return window.remotion_audioEnabled;
+  }
+  if (context.audioEnabled === null) {
+    return window.remotion_audioEnabled;
+  }
+  return context.audioEnabled;
+};
+var MediaEnabledProvider = ({
+  children,
+  videoEnabled,
+  audioEnabled
+}) => {
+  const value = useMemo25(() => ({ videoEnabled, audioEnabled }), [videoEnabled, audioEnabled]);
+  return /* @__PURE__ */ jsx26(MediaEnabledContext.Provider, {
+    value,
+    children
+  });
+};
+
+// src/RemotionRoot.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
 var RemotionRoot = ({
   children,
   numberOfAudioTags,
   logLevel,
   onlyRenderComposition,
   currentCompositionMetadata,
-  audioLatencyHint
+  audioLatencyHint,
+  videoEnabled,
+  audioEnabled
 }) => {
   const [remotionRootId] = useState17(() => String(random(null)));
   const [frame, setFrame] = useState17(() => getInitialFrameState());
@@ -6004,7 +6041,7 @@ var RemotionRoot = ({
       window.remotion_isPlayer = false;
     }, [continueRender2, delayRender2]);
   }
-  const timelineContextValue = useMemo25(() => {
+  const timelineContextValue = useMemo26(() => {
     return {
       frame,
       playing,
@@ -6015,13 +6052,13 @@ var RemotionRoot = ({
       audioAndVideoTags
     };
   }, [frame, playbackRate, playing, remotionRootId]);
-  const setTimelineContextValue = useMemo25(() => {
+  const setTimelineContextValue = useMemo26(() => {
     return {
       setFrame,
       setPlaying
     };
   }, []);
-  const nonceContext = useMemo25(() => {
+  const nonceContext = useMemo26(() => {
     let counter = 0;
     return {
       getNonce: () => counter++,
@@ -6029,7 +6066,7 @@ var RemotionRoot = ({
       manualRefreshes
     };
   }, [fastRefreshes, manualRefreshes]);
-  const setNonceContext = useMemo25(() => {
+  const setNonceContext = useMemo26(() => {
     return {
       increaseManualRefreshes: () => {
         setManualRefreshes((i) => i + 1);
@@ -6047,29 +6084,33 @@ var RemotionRoot = ({
       }
     }
   }, []);
-  const logging = useMemo25(() => {
+  const logging = useMemo26(() => {
     return { logLevel, mountTime: Date.now() };
   }, [logLevel]);
-  return /* @__PURE__ */ jsx26(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx27(LogLevelContext.Provider, {
     value: logging,
-    children: /* @__PURE__ */ jsx26(NonceContext.Provider, {
+    children: /* @__PURE__ */ jsx27(NonceContext.Provider, {
       value: nonceContext,
-      children: /* @__PURE__ */ jsx26(SetNonceContext.Provider, {
+      children: /* @__PURE__ */ jsx27(SetNonceContext.Provider, {
         value: setNonceContext,
-        children: /* @__PURE__ */ jsx26(TimelineContext.Provider, {
+        children: /* @__PURE__ */ jsx27(TimelineContext.Provider, {
           value: timelineContextValue,
-          children: /* @__PURE__ */ jsx26(SetTimelineContext.Provider, {
+          children: /* @__PURE__ */ jsx27(SetTimelineContext.Provider, {
             value: setTimelineContextValue,
-            children: /* @__PURE__ */ jsx26(EditorPropsProvider, {
-              children: /* @__PURE__ */ jsx26(PrefetchProvider, {
-                children: /* @__PURE__ */ jsx26(CompositionManagerProvider, {
-                  numberOfAudioTags,
-                  onlyRenderComposition,
-                  currentCompositionMetadata,
-                  audioLatencyHint,
-                  children: /* @__PURE__ */ jsx26(DurationsContextProvider, {
-                    children: /* @__PURE__ */ jsx26(BufferingProvider, {
-                      children
+            children: /* @__PURE__ */ jsx27(MediaEnabledProvider, {
+              videoEnabled,
+              audioEnabled,
+              children: /* @__PURE__ */ jsx27(EditorPropsProvider, {
+                children: /* @__PURE__ */ jsx27(PrefetchProvider, {
+                  children: /* @__PURE__ */ jsx27(CompositionManagerProvider, {
+                    numberOfAudioTags,
+                    onlyRenderComposition,
+                    currentCompositionMetadata,
+                    audioLatencyHint,
+                    children: /* @__PURE__ */ jsx27(DurationsContextProvider, {
+                      children: /* @__PURE__ */ jsx27(BufferingProvider, {
+                        children
+                      })
                     })
                   })
                 })
@@ -6110,9 +6151,9 @@ var setupEnvVariables = () => {
 };
 
 // src/use-current-scale.ts
-import React26, { createContext as createContext18 } from "react";
+import React26, { createContext as createContext19 } from "react";
 var CurrentScaleContext = React26.createContext(null);
-var PreviewSizeContext = createContext18({
+var PreviewSizeContext = createContext19({
   setSize: () => {
     return;
   },
@@ -6172,10 +6213,10 @@ import { useCallback as useCallback16 } from "react";
 // src/video/OffthreadVideoForRendering.tsx
 import {
   useCallback as useCallback15,
-  useContext as useContext30,
+  useContext as useContext31,
   useEffect as useEffect19,
   useLayoutEffect as useLayoutEffect9,
-  useMemo as useMemo26,
+  useMemo as useMemo27,
   useState as useState18
 } from "react";
 
@@ -6190,7 +6231,7 @@ var getOffthreadVideoSource = ({
 };
 
 // src/video/OffthreadVideoForRendering.tsx
-import { jsx as jsx27 } from "react/jsx-runtime";
+import { jsx as jsx28 } from "react/jsx-runtime";
 var OffthreadVideoForRendering = ({
   onError,
   volume: volumeProp,
@@ -6214,13 +6255,13 @@ var OffthreadVideoForRendering = ({
   const frame = useCurrentFrame();
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior);
   const videoConfig = useUnsafeVideoConfig();
-  const sequenceContext = useContext30(SequenceContext);
+  const sequenceContext = useContext31(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext30(RenderAssetManager);
+  const { registerRenderAsset, unregisterRenderAsset } = useContext31(RenderAssetManager);
   if (!src) {
     throw new TypeError("No `src` was passed to <OffthreadVideo>.");
   }
-  const id = useMemo26(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const id = useMemo27(() => `offthreadvideo-${random(src)}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -6275,14 +6316,14 @@ var OffthreadVideoForRendering = ({
     sequenceContext?.relativeFrom,
     audioStreamIndex
   ]);
-  const currentTime = useMemo26(() => {
+  const currentTime = useMemo27(() => {
     return getExpectedMediaFrameUncorrected({
       frame,
       playbackRate: playbackRate || 1,
       startFrom: -mediaStartsAt
     }) / videoConfig.fps;
   }, [frame, mediaStartsAt, playbackRate, videoConfig.fps]);
-  const actualSrc = useMemo26(() => {
+  const actualSrc = useMemo27(() => {
     return getOffthreadVideoSource({
       src,
       currentTime,
@@ -6370,7 +6411,7 @@ var OffthreadVideoForRendering = ({
       cancelRender("Failed to load image with src " + imageSrc);
     }
   }, [imageSrc, onError]);
-  const className = useMemo26(() => {
+  const className = useMemo27(() => {
     return [OBJECTFIT_CONTAIN_CLASS_NAME, props2.className].filter(truthy).join(" ");
   }, [props2.className]);
   const onImageFrame = useCallback15((img) => {
@@ -6382,7 +6423,7 @@ var OffthreadVideoForRendering = ({
     return null;
   }
   continueRender2(imageSrc.handle);
-  return /* @__PURE__ */ jsx27(Img, {
+  return /* @__PURE__ */ jsx28(Img, {
     src: imageSrc.src,
     delayRenderRetries,
     delayRenderTimeoutInMilliseconds,
@@ -6396,10 +6437,10 @@ var OffthreadVideoForRendering = ({
 // src/video/VideoForPreview.tsx
 import {
   forwardRef as forwardRef9,
-  useContext as useContext31,
+  useContext as useContext32,
   useEffect as useEffect21,
   useImperativeHandle as useImperativeHandle9,
-  useMemo as useMemo27,
+  useMemo as useMemo28,
   useRef as useRef16,
   useState as useState19
 } from "react";
@@ -6434,14 +6475,14 @@ var useEmitVideoFrame = ({
 };
 
 // src/video/VideoForPreview.tsx
-import { jsx as jsx28 } from "react/jsx-runtime";
+import { jsx as jsx29 } from "react/jsx-runtime";
 var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
-  const context = useContext31(SharedAudioContext);
+  const context = useContext32(SharedAudioContext);
   if (!context) {
     throw new Error("SharedAudioContext not found");
   }
   const videoRef = useRef16(null);
-  const sharedSource = useMemo27(() => {
+  const sharedSource = useMemo28(() => {
     if (!context.audioContext) {
       return null;
     }
@@ -6484,8 +6525,8 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
   }
   const volumePropFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const { fps, durationInFrames } = useVideoConfig();
-  const parentSequence = useContext31(SequenceContext);
-  const { hidden } = useContext31(SequenceVisibilityToggleContext);
+  const parentSequence = useContext32(SequenceContext);
+  const { hidden } = useContext32(SequenceVisibilityToggleContext);
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const [timelineId] = useState19(() => String(Math.random()));
@@ -6619,7 +6660,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
       current.preload = "auto";
     }
   }, []);
-  const actualStyle = useMemo27(() => {
+  const actualStyle = useMemo28(() => {
     return {
       ...style,
       opacity: isSequenceHidden ? 0 : style?.opacity ?? 1
@@ -6629,7 +6670,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
     crossOrigin,
     requestsVideoFrame: Boolean(onVideoFrame)
   });
-  return /* @__PURE__ */ jsx28("video", {
+  return /* @__PURE__ */ jsx29("video", {
     ref: videoRef,
     muted: muted || mediaMuted || isSequenceHidden || userPreferredVolume <= 0,
     playsInline: true,
@@ -6644,7 +6685,7 @@ var VideoForDevelopmentRefForwardingFunction = (props2, ref) => {
 var VideoForPreview = forwardRef9(VideoForDevelopmentRefForwardingFunction);
 
 // src/video/OffthreadVideo.tsx
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 var InnerOffthreadVideo = (props2) => {
   const {
     startFrom,
@@ -6672,13 +6713,13 @@ var InnerOffthreadVideo = (props2) => {
     trimAfter
   });
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx29(Sequence, {
+    return /* @__PURE__ */ jsx30(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx29(InnerOffthreadVideo, {
+      children: /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         trimAfter: undefined,
@@ -6693,7 +6734,7 @@ var InnerOffthreadVideo = (props2) => {
   }
   validateMediaProps(props2, "Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx29(OffthreadVideoForRendering, {
+    return /* @__PURE__ */ jsx30(OffthreadVideoForRendering, {
       pauseWhenBuffering: pauseWhenBuffering ?? false,
       ...otherProps,
       trimAfter: undefined,
@@ -6715,7 +6756,7 @@ var InnerOffthreadVideo = (props2) => {
     delayRenderTimeoutInMilliseconds,
     ...propsForPreview
   } = otherProps;
-  return /* @__PURE__ */ jsx29(VideoForPreview, {
+  return /* @__PURE__ */ jsx30(VideoForPreview, {
     _remotionInternalStack: stack ?? null,
     onDuration,
     onlyWarnForMediaSeekingError: true,
@@ -6764,7 +6805,7 @@ var OffthreadVideo = ({
   if (imageFormat) {
     throw new TypeError(`The \`<OffthreadVideo>\` tag does no longer accept \`imageFormat\`. Use the \`transparent\` prop if you want to render a transparent video.`);
   }
-  return /* @__PURE__ */ jsx29(InnerOffthreadVideo, {
+  return /* @__PURE__ */ jsx30(InnerOffthreadVideo, {
     acceptableTimeShiftInSeconds,
     allowAmplificationDuringRender: allowAmplificationDuringRender ?? true,
     audioStreamIndex: audioStreamIndex ?? 0,
@@ -6837,8 +6878,8 @@ var watchStaticFile = (fileName, callback) => {
 };
 
 // src/wrap-remotion-context.tsx
-import React30, { useMemo as useMemo28 } from "react";
-import { jsx as jsx30 } from "react/jsx-runtime";
+import React30, { useMemo as useMemo29 } from "react";
+import { jsx as jsx31 } from "react/jsx-runtime";
 function useRemotionContexts() {
   const compositionManagerCtx = React30.useContext(CompositionManager);
   const timelineContext = React30.useContext(TimelineContext);
@@ -6852,7 +6893,7 @@ function useRemotionContexts() {
   const sequenceManagerContext = React30.useContext(SequenceManager);
   const bufferManagerContext = React30.useContext(BufferingContextReact);
   const logLevelContext = React30.useContext(LogLevelContext);
-  return useMemo28(() => ({
+  return useMemo29(() => ({
     compositionManagerCtx,
     timelineContext,
     setTimelineContext,
@@ -6882,29 +6923,29 @@ function useRemotionContexts() {
 }
 var RemotionContextProvider = (props2) => {
   const { children, contexts } = props2;
-  return /* @__PURE__ */ jsx30(LogLevelContext.Provider, {
+  return /* @__PURE__ */ jsx31(LogLevelContext.Provider, {
     value: contexts.logLevelContext,
-    children: /* @__PURE__ */ jsx30(CanUseRemotionHooks.Provider, {
+    children: /* @__PURE__ */ jsx31(CanUseRemotionHooks.Provider, {
       value: contexts.canUseRemotionHooksContext,
-      children: /* @__PURE__ */ jsx30(NonceContext.Provider, {
+      children: /* @__PURE__ */ jsx31(NonceContext.Provider, {
         value: contexts.nonceContext,
-        children: /* @__PURE__ */ jsx30(PreloadContext.Provider, {
+        children: /* @__PURE__ */ jsx31(PreloadContext.Provider, {
           value: contexts.preloadContext,
-          children: /* @__PURE__ */ jsx30(CompositionManager.Provider, {
+          children: /* @__PURE__ */ jsx31(CompositionManager.Provider, {
             value: contexts.compositionManagerCtx,
-            children: /* @__PURE__ */ jsx30(SequenceManager.Provider, {
+            children: /* @__PURE__ */ jsx31(SequenceManager.Provider, {
               value: contexts.sequenceManagerContext,
-              children: /* @__PURE__ */ jsx30(RenderAssetManager.Provider, {
+              children: /* @__PURE__ */ jsx31(RenderAssetManager.Provider, {
                 value: contexts.renderAssetManagerContext,
-                children: /* @__PURE__ */ jsx30(ResolveCompositionContext.Provider, {
+                children: /* @__PURE__ */ jsx31(ResolveCompositionContext.Provider, {
                   value: contexts.resolveCompositionContext,
-                  children: /* @__PURE__ */ jsx30(TimelineContext.Provider, {
+                  children: /* @__PURE__ */ jsx31(TimelineContext.Provider, {
                     value: contexts.timelineContext,
-                    children: /* @__PURE__ */ jsx30(SetTimelineContext.Provider, {
+                    children: /* @__PURE__ */ jsx31(SetTimelineContext.Provider, {
                       value: contexts.setTimelineContext,
-                      children: /* @__PURE__ */ jsx30(SequenceContext.Provider, {
+                      children: /* @__PURE__ */ jsx31(SequenceContext.Provider, {
                         value: contexts.sequenceContext,
-                        children: /* @__PURE__ */ jsx30(BufferingContextReact.Provider, {
+                        children: /* @__PURE__ */ jsx31(BufferingContextReact.Provider, {
                           value: contexts.bufferManagerContext,
                           children
                         })
@@ -7008,7 +7049,9 @@ var Internals = {
   InnerOffthreadVideo,
   useBasicMediaInTimeline,
   getInputPropsOverride,
-  setInputPropsOverride
+  setInputPropsOverride,
+  useVideoEnabled,
+  useAudioEnabled
 };
 // src/interpolate-colors.ts
 var NUMBER = "[-+]?\\d*\\.?\\d+";
@@ -7374,7 +7417,7 @@ var validateFrame = ({
   }
 };
 // src/series/index.tsx
-import { Children, forwardRef as forwardRef10, useMemo as useMemo29 } from "react";
+import { Children, forwardRef as forwardRef10, useMemo as useMemo30 } from "react";
 
 // src/series/flatten-children.tsx
 import React31 from "react";
@@ -7390,17 +7433,17 @@ var flattenChildren = (children) => {
 };
 
 // src/series/is-inside-series.tsx
-import React32, { createContext as createContext19 } from "react";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var IsInsideSeriesContext = createContext19(false);
+import React32, { createContext as createContext20 } from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+var IsInsideSeriesContext = createContext20(false);
 var IsInsideSeriesContainer = ({ children }) => {
-  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: true,
     children
   });
 };
 var IsNotInsideSeriesProvider = ({ children }) => {
-  return /* @__PURE__ */ jsx31(IsInsideSeriesContext.Provider, {
+  return /* @__PURE__ */ jsx32(IsInsideSeriesContext.Provider, {
     value: false,
     children
   });
@@ -7413,16 +7456,16 @@ var useRequireToBeInsideSeries = () => {
 };
 
 // src/series/index.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var SeriesSequenceRefForwardingFunction = ({ children }, _ref) => {
   useRequireToBeInsideSeries();
-  return /* @__PURE__ */ jsx32(IsNotInsideSeriesProvider, {
+  return /* @__PURE__ */ jsx33(IsNotInsideSeriesProvider, {
     children
   });
 };
 var SeriesSequence = forwardRef10(SeriesSequenceRefForwardingFunction);
 var Series = (props2) => {
-  const childrenValue = useMemo29(() => {
+  const childrenValue = useMemo30(() => {
     let startFrame = 0;
     const flattenedChildren = flattenChildren(props2.children);
     return Children.map(flattenedChildren, (child, i) => {
@@ -7466,7 +7509,7 @@ var Series = (props2) => {
       }
       const currentStartFrame = startFrame + offset;
       startFrame += durationInFramesProp + offset;
-      return /* @__PURE__ */ jsx32(Sequence, {
+      return /* @__PURE__ */ jsx33(Sequence, {
         name: name || "<Series.Sequence>",
         from: currentStartFrame,
         durationInFrames: durationInFramesProp,
@@ -7477,14 +7520,14 @@ var Series = (props2) => {
     });
   }, [props2.children]);
   if (ENABLE_V5_BREAKING_CHANGES) {
-    return /* @__PURE__ */ jsx32(IsInsideSeriesContainer, {
-      children: /* @__PURE__ */ jsx32(Sequence, {
+    return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
+      children: /* @__PURE__ */ jsx33(Sequence, {
         ...props2,
         children: childrenValue
       })
     });
   }
-  return /* @__PURE__ */ jsx32(IsInsideSeriesContainer, {
+  return /* @__PURE__ */ jsx33(IsInsideSeriesContainer, {
     children: childrenValue
   });
 };
@@ -7831,16 +7874,16 @@ var Still = (props2) => {
   return React34.createElement(Composition, newProps);
 };
 // src/video/Video.tsx
-import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext33 } from "react";
+import { forwardRef as forwardRef12, useCallback as useCallback17, useContext as useContext34 } from "react";
 
 // src/video/VideoForRendering.tsx
 import {
   forwardRef as forwardRef11,
-  useContext as useContext32,
+  useContext as useContext33,
   useEffect as useEffect22,
   useImperativeHandle as useImperativeHandle10,
   useLayoutEffect as useLayoutEffect10,
-  useMemo as useMemo30,
+  useMemo as useMemo31,
   useRef as useRef17
 } from "react";
 
@@ -7969,7 +8012,7 @@ var seekToTimeMultipleUntilRight = ({
 };
 
 // src/video/VideoForRendering.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var VideoForRenderingForwardFunction = ({
   onError,
   volume: volumeProp,
@@ -7990,14 +8033,14 @@ var VideoForRenderingForwardFunction = ({
   const volumePropsFrame = useFrameForVolumeProp(loopVolumeCurveBehavior ?? "repeat");
   const videoConfig = useUnsafeVideoConfig();
   const videoRef = useRef17(null);
-  const sequenceContext = useContext32(SequenceContext);
+  const sequenceContext = useContext33(SequenceContext);
   const mediaStartsAt = useMediaStartsAt();
   const environment = useRemotionEnvironment();
   const logLevel = useLogLevel();
   const mountTime = useMountTime();
   const { delayRender: delayRender2, continueRender: continueRender2 } = useDelayRender();
-  const { registerRenderAsset, unregisterRenderAsset } = useContext32(RenderAssetManager);
-  const id = useMemo30(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
+  const { registerRenderAsset, unregisterRenderAsset } = useContext33(RenderAssetManager);
+  const id = useMemo31(() => `video-${random(props2.src ?? "")}-${sequenceContext?.cumulatedFrom}-${sequenceContext?.relativeFrom}-${sequenceContext?.durationInFrames}`, [
     props2.src,
     sequenceContext?.cumulatedFrom,
     sequenceContext?.relativeFrom,
@@ -8173,7 +8216,7 @@ var VideoForRenderingForwardFunction = ({
       delayRender2
     ]);
   }
-  return /* @__PURE__ */ jsx33("video", {
+  return /* @__PURE__ */ jsx34("video", {
     ref: videoRef,
     disableRemotePlayback: true,
     ...props2
@@ -8182,7 +8225,7 @@ var VideoForRenderingForwardFunction = ({
 var VideoForRendering = forwardRef11(VideoForRenderingForwardFunction);
 
 // src/video/Video.tsx
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var VideoForwardingFunction = (props2, ref) => {
   const {
     startFrom,
@@ -8200,7 +8243,7 @@ var VideoForwardingFunction = (props2, ref) => {
   const { loop, ...propsOtherThanLoop } = props2;
   const { fps } = useVideoConfig();
   const environment = useRemotionEnvironment();
-  const { durations, setDurations } = useContext33(DurationsContext);
+  const { durations, setDurations } = useContext34(DurationsContext);
   if (typeof ref === "string") {
     throw new Error("string refs are not supported");
   }
@@ -8222,14 +8265,14 @@ var VideoForwardingFunction = (props2, ref) => {
   });
   if (loop && durationFetched !== undefined) {
     if (!Number.isFinite(durationFetched)) {
-      return /* @__PURE__ */ jsx34(Html5Video, {
+      return /* @__PURE__ */ jsx35(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
       });
     }
     const mediaDuration = durationFetched * fps;
-    return /* @__PURE__ */ jsx34(Loop, {
+    return /* @__PURE__ */ jsx35(Loop, {
       durationInFrames: calculateMediaDuration({
         trimAfter: trimAfterValue,
         mediaDurationInFrames: mediaDuration,
@@ -8238,7 +8281,7 @@ var VideoForwardingFunction = (props2, ref) => {
       }),
       layout: "none",
       name,
-      children: /* @__PURE__ */ jsx34(Html5Video, {
+      children: /* @__PURE__ */ jsx35(Html5Video, {
         ...propsOtherThanLoop,
         ref,
         _remotionInternalNativeLoopPassed: true
@@ -8246,13 +8289,13 @@ var VideoForwardingFunction = (props2, ref) => {
     });
   }
   if (typeof trimBeforeValue !== "undefined" || typeof trimAfterValue !== "undefined") {
-    return /* @__PURE__ */ jsx34(Sequence, {
+    return /* @__PURE__ */ jsx35(Sequence, {
       layout: "none",
       from: 0 - (trimBeforeValue ?? 0),
       showInTimeline: false,
       durationInFrames: trimAfterValue,
       name,
-      children: /* @__PURE__ */ jsx34(Html5Video, {
+      children: /* @__PURE__ */ jsx35(Html5Video, {
         pauseWhenBuffering: pauseWhenBuffering ?? false,
         ...otherProps,
         ref
@@ -8261,14 +8304,14 @@ var VideoForwardingFunction = (props2, ref) => {
   }
   validateMediaProps({ playbackRate: props2.playbackRate, volume: props2.volume }, "Html5Video");
   if (environment.isRendering) {
-    return /* @__PURE__ */ jsx34(VideoForRendering, {
+    return /* @__PURE__ */ jsx35(VideoForRendering, {
       onDuration,
       onVideoFrame: onVideoFrame ?? null,
       ...otherProps,
       ref
     });
   }
-  return /* @__PURE__ */ jsx34(VideoForPreview, {
+  return /* @__PURE__ */ jsx35(VideoForPreview, {
     onlyWarnForMediaSeekingError: false,
     ...otherProps,
     ref,

package/dist/esm/no-react.mjs

@@ -139,9 +139,9 @@ function truthy(value) {
 // src/delay-render.ts
 if (typeof window !== "undefined") {
   window.remotion_renderReady = false;
-}
-if (typeof window !== "undefined") {
-  window.remotion_delayRenderTimeouts = {};
+  if (!window.remotion_delayRenderTimeouts) {
+    window.remotion_delayRenderTimeouts = {};
+  }
 }
 var DELAY_RENDER_CALLSTACK_TOKEN = "The delayRender was called:";
 var DELAY_RENDER_RETRIES_LEFT = "Retries left: ";

package/dist/esm/version.mjs

@@ -1,5 +1,5 @@
 // src/version.ts
-var VERSION = "4.0.362";
+var VERSION = "4.0.364";
 export {
   VERSION
 };

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/core"
 	},
 	"name": "remotion",
-	"version": "4.0.362",
+	"version": "4.0.364",
 	"description": "Make videos programmatically",
 	"main": "dist/cjs/index.js",
 	"types": "dist/cjs/index.d.ts",
@@ -29,12 +29,12 @@
 		"@testing-library/dom": "10.4.0",
 		"@happy-dom/global-registrator": "14.5.1",
 		"@types/dom-webcodecs": "0.1.11",
-		"happy-dom": "15.10.2",
+		"happy-dom": "20.0.2",
 		"react": "19.0.0",
 		"react-dom": "19.0.0",
 		"webpack": "5.96.1",
 		"zod": "3.22.3",
-		"@remotion/eslint-config-internal": "4.0.362",
+		"@remotion/eslint-config-internal": "4.0.364",
 		"eslint": "9.19.0"
 	},
 	"keywords": [