remotion 3.3.35 → 3.3.37

package/dist/Composition.js

@@ -34,9 +34,11 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
     const video = (0, use_video_1.useVideo)();
     const lazy = (0, use_lazy_component_1.useLazyComponent)(compProps);
     const nonce = (0, nonce_1.useNonce)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const canUseComposition = (0, react_1.useContext)(internals_1.Internals.CanUseRemotionHooks);
     if (canUseComposition) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if (environment === 'player-development' ||
+            environment === 'player-production') {
             throw new Error('<Composition> was mounted inside the `component` that was passed to the <Player>. See https://remotion.dev/docs/wrong-composition-mount for help.');
         }
         throw new Error('<Composition> mounted inside another composition. See https://remotion.dev/docs/wrong-composition-mount for help.');
@@ -81,16 +83,12 @@ const Composition = ({ width, height, fps, durationInFrames, id, defaultProps, .
         nonce,
         parentName,
     ]);
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'preview' &&
-        video &&
-        video.component === lazy) {
+    if (environment === 'preview' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
         return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(exports.ClipComposition, { children: (0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(loading_indicator_1.Loading, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }) }), (0, portal_node_1.portalNode)());
     }
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering' &&
-        video &&
-        video.component === lazy) {
+    if (environment === 'rendering' && video && video.component === lazy) {
         const Comp = lazy;
         const inputProps = (0, input_props_1.getInputProps)();
         return (0, react_dom_1.createPortal)((0, jsx_runtime_1.jsx)(CanUseRemotionHooks_1.CanUseRemotionHooksProvider, { children: (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(Fallback, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }) }), (0, portal_node_1.portalNode)());

package/dist/Img.js

@@ -8,6 +8,7 @@ const get_environment_1 = require("./get-environment");
 const prefetch_1 = require("./prefetch");
 const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
     const imageRef = (0, react_1.useRef)(null);
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     (0, react_1.useImperativeHandle)(ref, () => {
         return imageRef.current;
     }, []);
@@ -22,7 +23,7 @@ const ImgRefForwarding = ({ onError, src, ...props }, ref) => {
         }
     }, [onError]);
     // If image source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/dist/LayerMaster.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+import type { Layer } from './layers';
+export declare const LayerMaster: <T extends object>({ layers, defaultProps, inputProps, fallbackComponent: FallbackComponent, }: {
+    layers: Layer<T>[];
+    defaultProps: T | undefined;
+    inputProps: any;
+    fallbackComponent: React.FC | null;
+}) => JSX.Element;

package/dist/LayerMaster.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.LayerMaster = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const AbsoluteFill_1 = require("./AbsoluteFill");
+const get_environment_1 = require("./get-environment");
+const LayerMaster = ({ layers, defaultProps, inputProps, fallbackComponent: FallbackComponent, }) => {
+    return (
+    // TODO: Same styles as normal
+    (0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: layers.map((layer, i) => {
+            const Comp = layer.component;
+            if (layer.type === 'web') {
+                if (FallbackComponent === null) {
+                    // eslint-disable-next-line react/no-array-index-key
+                    return (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i));
+                }
+                return (
+                // eslint-disable-next-line react/no-array-index-key
+                (0, jsx_runtime_1.jsx)(react_1.Suspense, { fallback: (0, jsx_runtime_1.jsx)(FallbackComponent, {}), children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }) }, String(i)));
+            }
+            // SVG should not support suspense
+            if (layer.type === 'svg') {
+                if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+                    return null;
+                }
+                return ((0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i)) }));
+            }
+            if (layer.type === 'video') {
+                if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+                    return null;
+                }
+                // TODO: AbsoluteFill is different flex direction
+                return ((0, jsx_runtime_1.jsx)(AbsoluteFill_1.AbsoluteFill, { children: (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i)) }));
+            }
+            throw new Error('Unknown layer type');
+        }) }));
+};
+exports.LayerMaster = LayerMaster;

package/dist/Satori.d.ts

@@ -0,0 +1,5 @@
+import type { PropsWithChildren } from 'react';
+import React from 'react';
+export declare const Satori: React.FC<PropsWithChildren>;
+export declare const SatoriForRendering: React.FC<PropsWithChildren>;
+export declare const SatoriForDevelopment: React.FC<PropsWithChildren>;

package/dist/Satori.js

@@ -0,0 +1,92 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SatoriForDevelopment = exports.SatoriForRendering = exports.Satori = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const satori_1 = __importDefault(require("satori"));
+const _1 = require(".");
+const get_environment_1 = require("./get-environment");
+const NativeLayers_1 = require("./NativeLayers");
+const use_video_config_1 = require("./use-video-config");
+const Satori = ({ children }) => {
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        return (0, jsx_runtime_1.jsx)(exports.SatoriForRendering, { children: children });
+    }
+    return (0, jsx_runtime_1.jsx)(exports.SatoriForDevelopment, { children: children });
+};
+exports.Satori = Satori;
+const SatoriForRendering = ({ children }) => {
+    const { width, height } = (0, use_video_config_1.useVideoConfig)();
+    const { setSatoriStack } = (0, react_1.useContext)(NativeLayers_1.NativeLayersContext);
+    (0, react_1.useLayoutEffect)(() => {
+        const handle = (0, _1.delayRender)();
+        (0, satori_1.default)(children, {
+            width,
+            height,
+            fonts: [],
+        })
+            .then((svg) => {
+            (0, _1.continueRender)(handle);
+            setSatoriStack(svg);
+            console.log({ svg });
+        })
+            .catch((err) => {
+            console.log(err);
+        });
+    }, [children, height, setSatoriStack, width]);
+    return (0, jsx_runtime_1.jsx)(_1.Experimental.Null, {});
+};
+exports.SatoriForRendering = SatoriForRendering;
+const SatoriForDevelopment = ({ children, }) => {
+    const [markup, setMarkup] = react_1.default.useState(null);
+    const { width, height } = (0, use_video_config_1.useVideoConfig)();
+    (0, react_1.useEffect)(() => {
+        (0, satori_1.default)(children, {
+            width,
+            height,
+            fonts: [],
+        })
+            .then((svg) => {
+            setMarkup(svg);
+            console.log({ svg });
+        })
+            .catch((err) => {
+            console.log(err);
+        });
+    }, [children, height, width]);
+    if (!markup) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)("div", { 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+            __html: markup,
+        } }));
+};
+exports.SatoriForDevelopment = SatoriForDevelopment;

package/dist/Sequence.js

@@ -20,6 +20,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         ? parentSequence.cumulatedFrom + parentSequence.relativeFrom
         : 0;
     const nonce = (0, nonce_1.useNonce)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     if (layout !== 'absolute-fill' && layout !== 'none') {
         throw new TypeError(`The layout prop of <Sequence /> expects either "absolute-fill" or "none", but you passed: ${layout}`);
     }
@@ -71,7 +72,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
     }, [children, name]);
     (0, react_1.useEffect)(() => {
         var _a;
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview') {
+        if (environment !== 'preview') {
             return;
         }
         registerSequence({
@@ -103,6 +104,7 @@ const SequenceRefForwardingFunction = ({ from = 0, durationInFrames = Infinity,
         showInTimeline,
         nonce,
         showLoopTimesInTimeline,
+        environment,
     ]);
     const endThreshold = cumulatedFrom + from + durationInFrames - 1;
     const content = absoluteFrame < cumulatedFrom + from

package/dist/audio/Audio.js

@@ -19,6 +19,7 @@ const AudioRefForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_1.useVideoConfig)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<Audio>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -43,7 +44,7 @@ const AudioRefForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Audio, { ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Audio');
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return ((0, jsx_runtime_1.jsx)(AudioForRendering_1.AudioForRendering, { onDuration: onDuration, ...props, ref: ref, onError: onError }));
     }
     return ((0, jsx_runtime_1.jsx)(AudioForDevelopment_1.AudioForDevelopment, { shouldPreMountAudioTags: audioContext !== null && audioContext.numberOfAudioTags > 0, ...props, ref: ref, onError: onError, onDuration: onDuration }));

package/dist/audio/AudioForRendering.js

@@ -20,6 +20,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     const frame = (0, use_current_frame_1.useCurrentFrame)();
     const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
     const id = (0, react_1.useMemo)(() => {
@@ -77,7 +78,7 @@ const AudioForRenderingRefForwardingFunction = (props, ref) => {
     ]);
     const { src, onDuration } = props;
     // If audio source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/dist/get-compositions-from-markup.d.ts

@@ -0,0 +1,3 @@
+import type { ComponentType } from 'react';
+import type { TCompMetadata } from './CompositionManager';
+export declare const getCompositionsFromMarkup: (Comp: ComponentType) => TCompMetadata[];

package/dist/get-compositions-from-markup.js

@@ -0,0 +1,19 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getCompositionsFromMarkup = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const server_1 = require("react-dom/server");
+const Composition_1 = require("./Composition");
+const getCompositionsFromMarkup = (Comp) => {
+    // TODO: Is this still necessary?
+    process.env.REMOTION_SERVER_RENDERING = 'true';
+    const str = (0, server_1.renderToString)((0, jsx_runtime_1.jsx)(Composition_1.GetCompositionsFromMarkupModeProvider, { children: (0, jsx_runtime_1.jsx)(Comp, {}) }));
+    const matches = str.matchAll(/<div>(.*?)<\/div>/g);
+    const metadata = [];
+    for (const match of matches) {
+        const json = JSON.parse(match[1]);
+        metadata.push(json);
+    }
+    return metadata;
+};
+exports.getCompositionsFromMarkup = getCompositionsFromMarkup;

package/dist/get-environment.d.ts

@@ -1,2 +1,3 @@
 export declare type RemotionEnvironment = 'preview' | 'rendering' | 'player-development' | 'player-production';
 export declare const getRemotionEnvironment: () => RemotionEnvironment;
+export declare const useRemotionEnvironment: () => RemotionEnvironment;

package/dist/get-environment.js

@@ -1,6 +1,7 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.getRemotionEnvironment = void 0;
+exports.useRemotionEnvironment = exports.getRemotionEnvironment = void 0;
+const is_player_1 = require("./is-player");
 const getRemotionEnvironment = () => {
     if (process.env.NODE_ENV === 'production') {
         if (typeof window !== 'undefined' && window.remotion_isPlayer) {
@@ -20,3 +21,14 @@ const getRemotionEnvironment = () => {
     return 'preview';
 };
 exports.getRemotionEnvironment = getRemotionEnvironment;
+const useRemotionEnvironment = () => {
+    const isPlayer = (0, is_player_1.useIsPlayer)();
+    if (isPlayer) {
+        if (process.env.NODE_ENV === 'production') {
+            return 'player-production';
+        }
+        return 'player-development';
+    }
+    return (0, exports.getRemotionEnvironment)();
+};
+exports.useRemotionEnvironment = useRemotionEnvironment;

package/dist/index.d.ts

@@ -85,4 +85,5 @@ export declare const Experimental: {
         y: number;
     }>;
     Null: import("react").FC<{}>;
+    useIsPlayer: () => boolean;
 };

package/dist/index.js

@@ -17,6 +17,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.Experimental = exports.useCurrentFrame = exports.staticFile = exports.Series = exports.Sequence = exports.registerRoot = exports.random = exports.prefetch = exports.Loop = exports.interpolateColors = exports.getStaticFiles = exports.getInputProps = exports.Config = void 0;
 require("./asset-types");
 const Clipper_1 = require("./Clipper");
+const is_player_1 = require("./is-player");
 const multiple_versions_warning_1 = require("./multiple-versions-warning");
 const Null_1 = require("./Null");
 (0, multiple_versions_warning_1.checkMultipleRemotionVersions)();
@@ -64,4 +65,5 @@ __exportStar(require("./video-config"), exports);
 exports.Experimental = {
     Clipper: Clipper_1.Clipper,
     Null: Null_1.Null,
+    useIsPlayer: is_player_1.useIsPlayer,
 };

package/dist/internals.d.ts

@@ -86,6 +86,11 @@ export declare const Internals: {
     DurationsContextProvider: import("react").FC<{
         children: import("react").ReactNode;
     }>;
+    IsPlayerContextProvider: import("react").FC<{
+        children?: import("react").ReactNode;
+    }>;
+    useIsPlayer: () => boolean;
+    useRemotionEnvironment: () => RemotionEnvironment;
 };
 declare type WebpackConfiguration = Configuration;
 declare type WebpackOverrideFn = (currentConfiguration: WebpackConfiguration) => WebpackConfiguration;

package/dist/internals.js

@@ -32,6 +32,7 @@ const CSSUtils = __importStar(require("./default-css"));
 const delay_render_1 = require("./delay-render");
 const get_environment_1 = require("./get-environment");
 const get_preview_dom_element_1 = require("./get-preview-dom-element");
+const is_player_1 = require("./is-player");
 const portal_node_1 = require("./portal-node");
 const prefetch_state_1 = require("./prefetch-state");
 const register_root_1 = require("./register-root");
@@ -92,4 +93,7 @@ exports.Internals = {
     enableLegacyRemotionConfig: config_1.enableLegacyRemotionConfig,
     PrefetchProvider: prefetch_state_1.PrefetchProvider,
     DurationsContextProvider: duration_state_1.DurationsContextProvider,
+    IsPlayerContextProvider: is_player_1.IsPlayerContextProvider,
+    useIsPlayer: is_player_1.useIsPlayer,
+    useRemotionEnvironment: get_environment_1.useRemotionEnvironment,
 };

package/dist/is-player.d.ts

@@ -0,0 +1,3 @@
+import type { PropsWithChildren } from 'react';
+export declare const IsPlayerContextProvider: React.FC<PropsWithChildren>;
+export declare const useIsPlayer: () => boolean;

package/dist/is-player.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useIsPlayer = exports.IsPlayerContextProvider = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const IsPlayerContext = (0, react_1.createContext)(false);
+const IsPlayerContextProvider = ({ children, }) => {
+    return (0, jsx_runtime_1.jsx)(IsPlayerContext.Provider, { value: true, children: children });
+};
+exports.IsPlayerContextProvider = IsPlayerContextProvider;
+const useIsPlayer = () => {
+    return (0, react_1.useContext)(IsPlayerContext);
+};
+exports.useIsPlayer = useIsPlayer;

package/dist/layers.d.ts

@@ -0,0 +1,24 @@
+import type { ComponentType, LazyExoticComponent } from 'react';
+import React from 'react';
+export declare type LooseComponentType<T> = ComponentType<T> | ((props: T) => React.ReactNode);
+export declare type InputLayer<T> = {
+    component: LooseComponentType<T>;
+    type: 'web' | 'svg' | 'video';
+};
+export declare type CompProps<T> = {
+    lazyComponent: () => Promise<{
+        default: LooseComponentType<T>;
+    }>;
+} | {
+    component: LooseComponentType<T>;
+} | {
+    layers: InputLayer<T>[];
+};
+export declare type Layer<T> = {
+    component: LazyExoticComponent<ComponentType<T>>;
+    type: 'web' | 'svg' | 'video';
+};
+export declare type SmallLayer = Pick<Layer<unknown>, 'type'>;
+export declare const convertComponentTypesToLayers: <T>(compProps: CompProps<T>) => Layer<T>[];
+export declare const convertComponentTypesToLayersWithCache: <T>(compProps: CompProps<T>, prevCompProps: CompProps<T> | null, prevReturnValue: Layer<T>[] | null) => Layer<T>[];
+export declare const useLayers: <T>(compProps: CompProps<T>) => Layer<T>[];

package/dist/layers.js

@@ -0,0 +1,149 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useLayers = exports.convertComponentTypesToLayersWithCache = exports.convertComponentTypesToLayers = void 0;
+const react_1 = __importStar(require("react"));
+const inputLayersToLayers = (layers) => {
+    return layers.map((layer) => {
+        if (layer.type === 'web') {
+            return {
+                component: react_1.default.lazy(() => Promise.resolve({ default: layer.component })),
+                type: 'web',
+            };
+        }
+        // No lazy for Video allowed!
+        if (layer.type === 'video') {
+            return {
+                component: layer.component,
+                type: 'video',
+            };
+        }
+        // No lazy for SVG allowed!
+        return {
+            component: layer.component,
+            type: 'svg',
+        };
+    });
+};
+const convertComponentTypesToLayers = (compProps) => {
+    if ('component' in compProps) {
+        // In SSR, suspense is not yet supported, we cannot use React.lazy
+        if (typeof document === 'undefined') {
+            return [
+                {
+                    component: compProps.component,
+                    type: 'web',
+                },
+            ];
+        }
+        return [
+            {
+                component: react_1.default.lazy(() => Promise.resolve({ default: compProps.component })),
+                type: 'web',
+            },
+        ];
+    }
+    if ('lazyComponent' in compProps) {
+        return [
+            {
+                component: react_1.default.lazy(compProps.lazyComponent),
+                type: 'web',
+            },
+        ];
+    }
+    if ('layers' in compProps) {
+        return inputLayersToLayers(compProps.layers);
+    }
+    throw new Error('Unknown component type');
+};
+exports.convertComponentTypesToLayers = convertComponentTypesToLayers;
+const convertComponentTypesToLayersWithCache = (compProps, prevCompProps, prevReturnValue) => {
+    if ('component' in compProps) {
+        if (prevCompProps &&
+            'component' in prevCompProps &&
+            compProps.component === prevCompProps.component &&
+            prevReturnValue) {
+            return prevReturnValue;
+        }
+        return [
+            {
+                type: 'web',
+                component: react_1.default.lazy(() => Promise.resolve({ default: compProps.component })),
+            },
+        ];
+    }
+    if ('lazyComponent' in compProps) {
+        if (prevCompProps &&
+            'lazyComponent' in prevCompProps &&
+            compProps.lazyComponent === prevCompProps.lazyComponent &&
+            prevReturnValue) {
+            return prevReturnValue;
+        }
+        return [
+            {
+                type: 'web',
+                component: react_1.default.lazy(compProps.lazyComponent),
+            },
+        ];
+    }
+    if ('layers' in compProps) {
+        const isTheSame = () => {
+            if (!prevCompProps) {
+                return false;
+            }
+            if (!('layers' in prevCompProps)) {
+                return false;
+            }
+            if (compProps.layers.length !== prevCompProps.layers.length) {
+                return false;
+            }
+            for (let i = 0; i < compProps.layers.length; i++) {
+                if (compProps.layers[i].component !== prevCompProps.layers[i].component) {
+                    return false;
+                }
+                if (compProps.layers[i].type !== prevCompProps.layers[i].type) {
+                    return false;
+                }
+            }
+            return true;
+        };
+        if (isTheSame()) {
+            return prevReturnValue;
+        }
+        return inputLayersToLayers(compProps.layers);
+    }
+    throw new Error('Unknown component type');
+};
+exports.convertComponentTypesToLayersWithCache = convertComponentTypesToLayersWithCache;
+const useLayers = (compProps) => {
+    var _a, _b;
+    const prevCompProps = (0, react_1.useRef)();
+    const prevLayers = (0, react_1.useRef)();
+    const layers = (0, exports.convertComponentTypesToLayersWithCache)(compProps, (_a = prevCompProps.current) !== null && _a !== void 0 ? _a : null, (_b = prevLayers.current) !== null && _b !== void 0 ? _b : null);
+    prevCompProps.current = compProps;
+    prevLayers.current = layers;
+    return layers;
+};
+exports.useLayers = useLayers;

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

@@ -37,6 +37,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
         : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
@@ -66,8 +67,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         if (!src) {
             throw new Error('No src passed');
         }
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
-            process.env.NODE_ENV !== 'test') {
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
             return;
         }
         registerSequence({
@@ -107,6 +107,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, pla
         mediaType,
         startsAt,
         playbackRate,
+        environment,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {

package/dist/use-video-config.js

@@ -3,6 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.useVideoConfig = void 0;
 const react_1 = require("react");
 const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
+const is_player_1 = require("./is-player");
 const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 /**
  * Get some info about the context of the video that you are making.
@@ -12,8 +13,10 @@ const use_unsafe_video_config_1 = require("./use-unsafe-video-config");
 const useVideoConfig = () => {
     const videoConfig = (0, use_unsafe_video_config_1.useUnsafeVideoConfig)();
     const context = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
+    const isPlayer = (0, is_player_1.useIsPlayer)();
     if (!videoConfig) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
+        if ((typeof window !== 'undefined' && window.remotion_isPlayer) ||
+            isPlayer) {
             throw new Error('No video config found. You are probably calling useVideoConfig() from outside the component passed to <Player />. See https://www.remotion.dev/docs/player/examples for how to set up the Player correctly.');
         }
         throw new Error('No video config found. You are probably calling useVideoConfig() from a component which has not been registered as a <Composition />. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions for more information.');

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.35";
+export declare const VERSION = "3.3.37";

package/dist/version.js

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

package/dist/video/NativeVideo.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import type { RemotionMainVideoProps } from './props';
+export declare const NativeVideo: React.FC<{
+    src: string;
+} & RemotionMainVideoProps>;

package/dist/video/NativeVideo.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeVideo = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_environment_1 = require("../get-environment");
+const Sequence_1 = require("../Sequence");
+const validate_media_props_1 = require("../validate-media-props");
+const validate_start_from_props_1 = require("../validate-start-from-props");
+const NativeVideoForRendering_1 = require("./NativeVideoForRendering");
+const VideoForDevelopment_1 = require("./VideoForDevelopment");
+const NativeVideo = (props) => {
+    const { startFrom, endAt, ...otherProps } = props;
+    const onDuration = (0, react_1.useCallback)(() => undefined, []);
+    if (typeof props.src !== 'string') {
+        throw new TypeError(`The \`<NativeVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
+    }
+    if (typeof startFrom !== 'undefined' || typeof endAt !== 'undefined') {
+        (0, validate_start_from_props_1.validateStartFromProps)(startFrom, endAt);
+        const startFromFrameNo = startFrom !== null && startFrom !== void 0 ? startFrom : 0;
+        const endAtFrameNo = endAt !== null && endAt !== void 0 ? endAt : Infinity;
+        return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.NativeVideo, { ...otherProps }) }));
+    }
+    (0, validate_media_props_1.validateMediaProps)(props, 'Video');
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+        throw new Error('Cannot render in the browser');
+    }
+    if ((0, get_environment_1.getRemotionEnvironment)() === 'server-rendering') {
+        return (0, jsx_runtime_1.jsx)(NativeVideoForRendering_1.NativeVideoForRendering, { ...otherProps });
+    }
+    return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));
+};
+exports.NativeVideo = NativeVideo;

package/dist/video/NativeVideoForRendering.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+export declare type NativeVideoLayerInfo = {
+    src: string;
+    frame: number;
+};
+export declare const NativeVideoForRendering: React.FC<{
+    src: string;
+}>;

package/dist/video/NativeVideoForRendering.js

@@ -0,0 +1,14 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.NativeVideoForRendering = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const use_current_frame_1 = require("../use-current-frame");
+const NativeVideoForRendering = ({ src }) => {
+    const frame = (0, use_current_frame_1.useCurrentFrame)();
+    return ((0, jsx_runtime_1.jsx)("div", { 
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML: {
+            __html: JSON.stringify({ src, frame }),
+        } }));
+};
+exports.NativeVideoForRendering = NativeVideoForRendering;

package/dist/video/OffthreadVideo.js

@@ -12,6 +12,7 @@ const OffthreadVideoForRendering_1 = require("./OffthreadVideoForRendering");
 const VideoForDevelopment_1 = require("./VideoForDevelopment");
 const OffthreadVideo = (props) => {
     const { startFrom, endAt, ...otherProps } = props;
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const onDuration = (0, react_1.useCallback)(() => undefined, []);
     if (typeof props.src !== 'string') {
         throw new TypeError(`The \`<OffthreadVideo>\` tag requires a string for \`src\`, but got ${JSON.stringify(props.src)} instead.`);
@@ -24,7 +25,7 @@ const OffthreadVideo = (props) => {
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
     (0, validate_offthreadvideo_image_format_1.validateOffthreadVideoImageFormat)(props.imageFormat);
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return (0, jsx_runtime_1.jsx)(OffthreadVideoForRendering_1.OffthreadVideoForRendering, { ...otherProps });
     }
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onDuration: onDuration, onlyWarnForMediaSeekingError: true, ...otherProps }));

package/dist/video/Video.js

@@ -17,6 +17,7 @@ const VideoForwardingFunction = (props, ref) => {
     const { startFrom, endAt, ...otherProps } = props;
     const { loop, ...propsOtherThanLoop } = props;
     const { fps } = (0, use_video_config_1.useVideoConfig)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { durations, setDurations } = (0, react_1.useContext)(duration_state_1.DurationsContext);
     if (typeof ref === 'string') {
         throw new Error('string refs are not supported');
@@ -40,7 +41,7 @@ const VideoForwardingFunction = (props, ref) => {
         return ((0, jsx_runtime_1.jsx)(Sequence_1.Sequence, { layout: "none", from: 0 - startFromFrameNo, showInTimeline: false, durationInFrames: endAtFrameNo, children: (0, jsx_runtime_1.jsx)(exports.Video, { ...otherProps, ref: ref }) }));
     }
     (0, validate_media_props_1.validateMediaProps)(props, 'Video');
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         return ((0, jsx_runtime_1.jsx)(VideoForRendering_1.VideoForRendering, { onDuration: onDuration, ...otherProps, ref: ref }));
     }
     return ((0, jsx_runtime_1.jsx)(VideoForDevelopment_1.VideoForDevelopment, { onlyWarnForMediaSeekingError: false, ...otherProps, ref: ref, onDuration: onDuration }));

package/dist/video/VideoForRendering.js

@@ -25,6 +25,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     const videoRef = (0, react_1.useRef)(null);
     const sequenceContext = (0, react_1.useContext)(Sequence_1.SequenceContext);
     const mediaStartsAt = (0, use_audio_frame_1.useMediaStartsAt)();
+    const environment = (0, get_environment_1.useRemotionEnvironment)();
     const { registerAsset, unregisterAsset } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
     // Generate a string that's as unique as possible for this asset
     // but at the same time the same on all threads
@@ -169,7 +170,7 @@ const VideoForRenderingForwardFunction = ({ onError, volume: volumeProp, allowAm
     ]);
     const { src } = props;
     // If video source switches, make new handle
-    if ((0, get_environment_1.getRemotionEnvironment)() === 'rendering') {
+    if (environment === 'rendering') {
         // eslint-disable-next-line react-hooks/rules-of-hooks
         (0, react_1.useLayoutEffect)(() => {
             if (process.env.NODE_ENV === 'test') {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.35",
+	"version": "3.3.37",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -65,5 +65,5 @@
 			]
 		}
 	},
-	"gitHead": "92344ca937e4c51b8484f79528e3c38d598f7053"
+	"gitHead": "ead6bdacc14a9953cae738159c49bf3daf09e9b0"
 }