remotion 4.0.227 → 4.0.228

package/README.md

@@ -26,11 +26,11 @@ Remotion is a framework for **creating videos programmatically using React.**
 <table>
 <tr>
 <td align="center">
-<img style="width: 290px" src="packages/docs/static/img/fireship-quick.gif" />
+<img style="width: 290px" src="https://remotion-assets.s3.eu-central-1.amazonaws.com/fireship-quick.gif" />
 <p>"This video was made with code" <em>- Fireship</em> <a href="https://youtu.be/deg8bOoziaE">Watch</a> • <a href="https://github.com/wcandillon/remotion-fireship">Source</a></p>
 </td>
 <td align="center">
-<img style="width: 240px" src="packages/docs/static/img/unwrapped-2023.gif" />
+<img style="width: 240px" src="https://remotion-assets.s3.eu-central-1.amazonaws.com/unwrapped-2023.gif" />
 <p>GitHub Unwrapped - Personalized Year in Review <a href="https://www.githubunwrapped.com">Try</a> • <a href="https://github.com/remotion-dev/github-unwrapped-2023">Source</a></p>
 </td>
 <td align="center">

package/dist/cjs/Clipper.d.ts

@@ -1,7 +1,5 @@
 import type React from 'react';
-export declare const Clipper: React.FC<{
-    readonly width: number;
-    readonly height: number;
-    readonly x: number;
-    readonly y: number;
-}>;
+/**
+ * @deprecated <Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
+export declare const Clipper: React.FC<{}>;

package/dist/cjs/Clipper.js

@@ -1,24 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Clipper = void 0;
-const react_1 = require("react");
-const NativeLayers_js_1 = require("./NativeLayers.js");
-const Clipper = ({ height, width, x, y }) => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    (0, react_1.useEffect)(() => {
-        setClipRegion((c) => {
-            if (c === 'hide') {
-                throw new Error('Cannot render <Clipper>, because another <Null> is already rendered');
-            }
-            if (c === null) {
-                return { height, width, x, y };
-            }
-            throw new Error('Cannot render <Clipper>, because another component clipping the region was already rendered (most likely <Clipper>)');
-        });
-        return () => {
-            setClipRegion(null);
-        };
-    }, [height, setClipRegion, width, x, y]);
-    return null;
+/**
+ * @deprecated <Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
+const Clipper = () => {
+    throw new Error('<Clipper> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.');
 };
 exports.Clipper = Clipper;

package/dist/cjs/Composition.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, PropsWithChildren } from 'react';
+import type { ComponentType } from 'react';
 import React from 'react';
 import type { AnyZodObject } from 'zod';
 import type { Codec } from './codec.js';
@@ -47,7 +47,6 @@ export type StillProps<Schema extends AnyZodObject, Props extends Record<string,
     id: string;
     schema?: Schema;
 } & StillCalculateMetadataOrExplicit<Schema, Props> & CompProps<Props> & PropsIfHasProps<Schema, Props>;
-export declare const ClipComposition: React.FC<PropsWithChildren>;
 export type CompositionProps<Schema extends AnyZodObject, Props extends Record<string, unknown>> = {
     readonly id: string;
     readonly schema?: Schema;

package/dist/cjs/Composition.js

@@ -1,14 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Composition = exports.ClipComposition = void 0;
+exports.Composition = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_dom_1 = require("react-dom");
-const AbsoluteFill_js_1 = require("./AbsoluteFill.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const Folder_js_1 = require("./Folder.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const delay_render_js_1 = require("./delay-render.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
@@ -21,21 +19,6 @@ const use_lazy_component_js_1 = require("./use-lazy-component.js");
 const use_video_js_1 = require("./use-video.js");
 const validate_composition_id_js_1 = require("./validation/validate-composition-id.js");
 const validate_default_props_js_1 = require("./validation/validate-default-props.js");
-const ClipComposition = ({ children }) => {
-    const { clipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    const style = (0, react_1.useMemo)(() => {
-        return {
-            display: 'flex',
-            flexDirection: 'row',
-            opacity: clipRegion === 'hide' ? 0 : 1,
-            clipPath: clipRegion && clipRegion !== 'hide'
-                ? `polygon(${clipRegion.x}px ${clipRegion.y}px, ${clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.height + clipRegion.y}px, ${clipRegion.width + clipRegion.x}px ${clipRegion.y}px)`
-                : undefined,
-        };
-    }, [clipRegion]);
-    return (0, jsx_runtime_1.jsx)(AbsoluteFill_js_1.AbsoluteFill, { style: style, children: children });
-};
-exports.ClipComposition = ClipComposition;
 const Fallback = () => {
     (0, react_1.useEffect)(() => {
         const fallback = (0, delay_render_js_1.delayRender)('Waiting for Root component to unsuspend');
@@ -110,7 +93,7 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, s
         if (resolved === null || resolved.type !== 'success') {
             return null;
         }
-        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }) }), (0, portal_node_js_1.portalNode)());
+        return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_js_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...((_a = resolved.result.props) !== null && _a !== void 0 ? _a : {}) }) }) }), (0, portal_node_js_1.portalNode)());
     }
     if (environment.isRendering && video && video.component === lazy) {
         const Comp = lazy;

package/dist/cjs/Null.d.ts

@@ -1 +1,4 @@
+/**
+ * @deprecated <Null /> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
 export declare const Null: React.FC;

package/dist/cjs/Null.js

@@ -1,25 +1,10 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.Null = void 0;
-const react_1 = require("react");
-const NativeLayers_js_1 = require("./NativeLayers.js");
+/**
+ * @deprecated <Null /> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.
+ */
 const Null = () => {
-    const { setClipRegion } = (0, react_1.useContext)(NativeLayers_js_1.NativeLayersContext);
-    (0, react_1.useEffect)(() => {
-        setClipRegion((c) => {
-            if (c === null) {
-                return 'hide';
-            }
-            // Rendering multiple <Null> is fine, because they are all hidden
-            if (c === 'hide') {
-                return 'hide';
-            }
-            throw new Error('Cannot render <Null>, because another component clipping the region was already rendered (most likely <Clipper>)');
-        });
-        return () => {
-            setClipRegion(null);
-        };
-    }, [setClipRegion]);
-    return null;
+    throw new Error('<Null> has been removed as of Remotion v4.0.228. The native clipping APIs were experimental and subject to removal at any time. We removed them because they were sparingly used and made rendering often slower rather than faster.');
 };
 exports.Null = Null;

package/dist/cjs/RemotionRoot.js

@@ -5,7 +5,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const EditorProps_js_1 = require("./EditorProps.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const buffering_js_1 = require("./buffering.js");
 const delay_render_js_1 = require("./delay-render.js");
 const nonce_js_1 = require("./nonce.js");
@@ -87,6 +86,6 @@ const RemotionRoot = ({ children, numberOfAudioTags }) => {
             }
         }
     }, []);
-    return ((0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: nonceContext, 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)(NativeLayers_js_1.NativeLayersProvider, { children: (0, jsx_runtime_1.jsx)(CompositionManager_js_1.CompositionManagerProvider, { numberOfAudioTags: numberOfAudioTags, 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)(nonce_js_1.NonceContext.Provider, { value: nonceContext, 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, 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/audio/Audio.js

@@ -50,6 +50,9 @@ const AudioRefForwardingFunction = (props, ref) => {
     }, [setDurations]);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
     if (loop && durationFetched !== undefined) {
+        if (!Number.isFinite(durationFetched)) {
+            return ((0, jsx_runtime_1.jsx)(exports.Audio, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+        }
         const duration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { layout: "none", durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
                 endAt,

package/dist/cjs/index.d.ts

@@ -3,7 +3,6 @@ import './asset-types.js';
 import type { Codec } from './codec.js';
 import type { TRenderAsset } from './CompositionManager.js';
 import type { StaticFile } from './get-static-files.js';
-import type { ClipRegion } from './NativeLayers.js';
 import type { VideoConfig } from './video-config.js';
 export type VideoConfigWithSerializedProps = Omit<VideoConfig, 'defaultProps' | 'props'> & {
     serializedDefaultPropsWithCustomSchema: string;
@@ -43,7 +42,6 @@ declare global {
         remotion_inputProps: string;
         remotion_envVariables: string;
         remotion_collectAssets: () => TRenderAsset[];
-        remotion_getClipRegion: () => ClipRegion | null;
         remotion_isPlayer: boolean;
         remotion_isStudio: boolean;
         remotion_isReadOnlyStudio: boolean;
@@ -88,7 +86,6 @@ export { Img, ImgProps } from './Img.js';
 export * from './internals.js';
 export { interpolateColors } from './interpolate-colors.js';
 export { Loop } from './loop/index.js';
-export { ClipRegion } from './NativeLayers.js';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, random, RandomSeed, } from './no-react';
 export { prefetch, PrefetchOnProgress } from './prefetch.js';
 export { registerRoot } from './register-root.js';
@@ -111,12 +108,7 @@ export declare const Experimental: {
      * @description This is a special component that will cause Remotion to only partially capture the frame of the video.
      * @see [Documentation](https://www.remotion.dev/docs/clipper)
      */
-    Clipper: import("react").FC<{
-        readonly width: number;
-        readonly height: number;
-        readonly x: number;
-        readonly y: number;
-    }>;
+    Clipper: import("react").FC<{}>;
     /**
      * @description This is a special component, that, when rendered, will skip rendering the frame altogether.
      * @see [Documentation](https://www.remotion.dev/docs/null)

package/dist/cjs/internals.d.ts

@@ -123,12 +123,6 @@ export declare const Internals: {
         [x: string]: number;
     }) => void;
     readonly useTimelineSetFrame: () => ((u: React.SetStateAction<Record<string, number>>) => void);
-    readonly NativeLayersProvider: import("react").FC<{
-        children?: import("react").ReactNode | undefined;
-    }>;
-    readonly ClipComposition: import("react").FC<{
-        children?: import("react").ReactNode | undefined;
-    }>;
     readonly isIosSafari: () => boolean;
     readonly WATCH_REMOTION_STATIC_FILES: "remotion_staticFilesChanged";
     readonly addSequenceStackTraces: (component: unknown) => void;

package/dist/cjs/internals.js

@@ -28,7 +28,6 @@ const shared_audio_tags_js_1 = require("./audio/shared-audio-tags.js");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffering_js_1 = require("./buffering.js");
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
-const Composition_js_1 = require("./Composition.js");
 const CompositionManager_js_1 = require("./CompositionManager.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
 const CSSUtils = __importStar(require("./default-css.js"));
@@ -37,7 +36,6 @@ const enable_sequence_stack_traces_js_1 = require("./enable-sequence-stack-trace
 const get_preview_dom_element_js_1 = require("./get-preview-dom-element.js");
 const get_remotion_environment_js_1 = require("./get-remotion-environment.js");
 const is_player_js_1 = require("./is-player.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const nonce_js_1 = require("./nonce.js");
 const portal_node_js_1 = require("./portal-node.js");
 const prefetch_state_js_1 = require("./prefetch-state.js");
@@ -113,8 +111,6 @@ exports.Internals = {
     RenderAssetManager: RenderAssetManager_js_1.RenderAssetManager,
     persistCurrentFrame: timeline_position_state_js_1.persistCurrentFrame,
     useTimelineSetFrame: timeline_position_state_js_1.useTimelineSetFrame,
-    NativeLayersProvider: NativeLayers_js_1.NativeLayersProvider,
-    ClipComposition: Composition_js_1.ClipComposition,
     isIosSafari: video_fragment_js_1.isIosSafari,
     WATCH_REMOTION_STATIC_FILES: watch_static_file_js_1.WATCH_REMOTION_STATIC_FILES,
     addSequenceStackTraces: enable_sequence_stack_traces_js_1.addSequenceStackTraces,

package/dist/cjs/no-react.d.ts

@@ -1,6 +1,5 @@
 export type { ArtifactAsset, AudioOrVideoAsset, TRenderAsset, } from './CompositionManager';
 export { EasingFunction, ExtrapolateType, interpolate, InterpolateOptions, } from './interpolate';
-export type { ClipRegion } from './NativeLayers';
 export { random, RandomSeed } from './random.js';
 export type { VideoConfig } from './video-config';
 import { processColor } from './interpolate-colors';

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.227";
+export declare const VERSION = "4.0.228";

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.227';
+exports.VERSION = '4.0.228';

package/dist/cjs/video/Video.js

@@ -37,6 +37,9 @@ const VideoForwardingFunction = (props, ref) => {
     const onVideoFrame = (0, react_1.useCallback)(() => { }, []);
     const durationFetched = (_a = durations[(0, absolute_src_js_1.getAbsoluteSrc)(preloadedSrc)]) !== null && _a !== void 0 ? _a : durations[(0, absolute_src_js_1.getAbsoluteSrc)(props.src)];
     if (loop && durationFetched !== undefined) {
+        if (!Number.isFinite(durationFetched)) {
+            return ((0, jsx_runtime_1.jsx)(exports.Video, { ...propsOtherThanLoop, ref: ref, _remotionInternalNativeLoopPassed: true }));
+        }
         const mediaDuration = durationFetched * fps;
         return ((0, jsx_runtime_1.jsx)(index_js_1.Loop, { durationInFrames: (0, calculate_loop_js_1.calculateLoopDuration)({
                 endAt,

package/dist/cjs/video/VideoForRendering.js

@@ -106,7 +106,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
             startFrom: -mediaStartsAt,
             fps: videoConfig.fps,
         });
-        const handle = (0, delay_render_js_1.delayRender)(`Rendering <Video /> with src="${props.src}"`, {
+        const handle = (0, delay_render_js_1.delayRender)(`Rendering <Video /> with src="${props.src}" at time ${currentTime}`, {
             retries: delayRenderRetries !== null && delayRenderRetries !== void 0 ? delayRenderRetries : undefined,
             timeoutInMilliseconds: delayRenderTimeoutInMilliseconds !== null && delayRenderTimeoutInMilliseconds !== void 0 ? delayRenderTimeoutInMilliseconds : undefined,
         });

package/dist/cjs/video/seek-until-right.js

@@ -1,10 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.seekToTimeMultipleUntilRight = exports.seekToTime = void 0;
+const is_approximately_the_same_1 = require("../is-approximately-the-same");
 const roundTo6Commas = (num) => {
     return Math.round(num * 100000) / 100000;
 };
 const seekToTime = (element, desiredTime) => {
+    if ((0, is_approximately_the_same_1.isApproximatelyTheSame)(element.currentTime, desiredTime)) {
+        return {
+            wait: Promise.resolve(desiredTime),
+            cancel: () => { },
+        };
+    }
     element.currentTime = desiredTime;
     let cancel;
     let cancelSeeked = null;

package/dist/cjs/wrap-remotion-context.d.ts

@@ -6,7 +6,6 @@ export declare function useRemotionContexts(): {
     sequenceContext: import("./SequenceContext.js").SequenceContextType | null;
     nonceContext: import("./nonce.js").TNonceContext;
     canUseRemotionHooksContext: boolean;
-    nativeLayersContext: import("./NativeLayers.js").TNativeLayersContext;
     preloadContext: {
         [x: string]: string;
     };

package/dist/cjs/wrap-remotion-context.js

@@ -32,7 +32,6 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = __importStar(require("react"));
 const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
 const CompositionManagerContext_js_1 = require("./CompositionManagerContext.js");
-const NativeLayers_js_1 = require("./NativeLayers.js");
 const RenderAssetManager_js_1 = require("./RenderAssetManager.js");
 const ResolveCompositionConfig_js_1 = require("./ResolveCompositionConfig.js");
 const SequenceContext_js_1 = require("./SequenceContext.js");
@@ -48,7 +47,6 @@ function useRemotionContexts() {
     const sequenceContext = react_1.default.useContext(SequenceContext_js_1.SequenceContext);
     const nonceContext = react_1.default.useContext(nonce_js_1.NonceContext);
     const canUseRemotionHooksContext = react_1.default.useContext(CanUseRemotionHooks_js_1.CanUseRemotionHooks);
-    const nativeLayersContext = react_1.default.useContext(NativeLayers_js_1.NativeLayersContext);
     const preloadContext = react_1.default.useContext(prefetch_state_js_1.PreloadContext);
     const resolveCompositionContext = react_1.default.useContext(ResolveCompositionConfig_js_1.ResolveCompositionContext);
     const renderAssetManagerContext = react_1.default.useContext(RenderAssetManager_js_1.RenderAssetManager);
@@ -61,7 +59,6 @@ function useRemotionContexts() {
         sequenceContext,
         nonceContext,
         canUseRemotionHooksContext,
-        nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
         renderAssetManagerContext,
@@ -74,7 +71,6 @@ function useRemotionContexts() {
         setTimelineContext,
         timelineContext,
         canUseRemotionHooksContext,
-        nativeLayersContext,
         preloadContext,
         resolveCompositionContext,
         renderAssetManagerContext,
@@ -84,6 +80,6 @@ function useRemotionContexts() {
 }
 const RemotionContextProvider = (props) => {
     const { children, contexts } = props;
-    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(NativeLayers_js_1.NativeLayersContext.Provider, { value: contexts.nativeLayersContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }) }));
+    return ((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_js_1.CanUseRemotionHooks.Provider, { value: contexts.canUseRemotionHooksContext, children: (0, jsx_runtime_1.jsx)(nonce_js_1.NonceContext.Provider, { value: contexts.nonceContext, children: (0, jsx_runtime_1.jsx)(prefetch_state_js_1.PreloadContext.Provider, { value: contexts.preloadContext, children: (0, jsx_runtime_1.jsx)(CompositionManagerContext_js_1.CompositionManager.Provider, { value: contexts.compositionManagerCtx, children: (0, jsx_runtime_1.jsx)(SequenceManager_js_1.SequenceManager.Provider, { value: contexts.sequenceManagerContext, children: (0, jsx_runtime_1.jsx)(RenderAssetManager_js_1.RenderAssetManager.Provider, { value: contexts.renderAssetManagerContext, children: (0, jsx_runtime_1.jsx)(ResolveCompositionConfig_js_1.ResolveCompositionContext.Provider, { value: contexts.resolveCompositionContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: contexts.timelineContext, children: (0, jsx_runtime_1.jsx)(timeline_position_state_js_1.SetTimelineContext.Provider, { value: contexts.setTimelineContext, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: contexts.sequenceContext, children: (0, jsx_runtime_1.jsx)(buffering_js_1.BufferingContextReact.Provider, { value: contexts.bufferManagerContext, children: children }) }) }) }) }) }) }) }) }) }) }));
 };
 exports.RemotionContextProvider = RemotionContextProvider;