remotion 3.3.38 → 3.3.40

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/audio/shared-audio-tags.d.ts

@@ -20,7 +20,11 @@ declare type AudioElem = {
 declare type SharedContext = {
     registerAudio: (aud: RemotionAudioProps, audioId: string) => AudioElem;
     unregisterAudio: (id: number) => void;
-    updateAudio: (id: number, aud: RemotionAudioProps) => void;
+    updateAudio: (options: {
+        id: number;
+        aud: RemotionAudioProps;
+        audioId: string;
+    }) => void;
     playAllAudios: () => void;
     numberOfAudioTags: number;
 };

package/dist/audio/shared-audio-tags.js

@@ -133,7 +133,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.filter((a) => a.id !== id);
         rerenderAudios();
     }, [refs, rerenderAudios]);
-    const updateAudio = (0, react_1.useCallback)((id, aud) => {
+    const updateAudio = (0, react_1.useCallback)(({ aud, audioId, id, }) => {
         var _a;
         let changed = false;
         audios.current = (_a = audios.current) === null || _a === void 0 ? void 0 : _a.map((prevA) => {
@@ -146,6 +146,7 @@ const SharedAudioContextProvider = ({ children, numberOfAudioTags }) => {
                 return {
                     ...prevA,
                     props: aud,
+                    audioId,
                 };
             }
             return prevA;
@@ -205,9 +206,9 @@ const useSharedAudio = (aud, audioId) => {
     if (typeof document !== 'undefined') {
         effectToUse(() => {
             if (ctx && ctx.numberOfAudioTags > 0) {
-                ctx.updateAudio(elem.id, aud);
+                ctx.updateAudio({ id: elem.id, aud, audioId });
             }
-        }, [aud, ctx, elem.id]);
+        }, [aud, ctx, elem.id, audioId]);
         effectToUse(() => {
             return () => {
                 if (ctx && ctx.numberOfAudioTags > 0) {

package/dist/config.d.ts

@@ -12,7 +12,11 @@ declare type FfmpegExecutable = string | null;
 declare type Loop = number | null;
 declare type CodecOrUndefined = 'h264' | 'h265' | 'vp8' | 'vp9' | 'mp3' | 'aac' | 'wav' | 'prores' | 'h264-mkv' | 'gif' | undefined;
 declare type Crf = number | undefined;
-export declare type ConfigType = {
+declare type FlatConfig = ObjectConfig['Bundling'] & ObjectConfig['Log'] & ObjectConfig['Preview'] & ObjectConfig['Puppeteer'] & ObjectConfig['Output'] & ObjectConfig['Rendering'];
+declare type ObjectConfig = {
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Preview.` with `Config.`
+     */
     readonly Preview: {
         /**
          * Change the maximum amount of tracks that are shown in the timeline.
@@ -46,6 +50,9 @@ export declare type ConfigType = {
          */
         readonly setShouldOpenBrowser: (should: boolean) => void;
     };
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Bundling.` with `Config.`
+     */
     readonly Bundling: {
         /**
          * Specify the entry point so you don't have to specify it in the
@@ -76,6 +83,9 @@ export declare type ConfigType = {
          */
         readonly setPublicDir: (publicDir: string | null) => void;
     };
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Log.` with `Config.`
+     */
     readonly Log: {
         /**
          * Set the log level.
@@ -86,6 +96,9 @@ export declare type ConfigType = {
          */
         readonly setLevel: (newLogLevel: 'verbose' | 'info' | 'warn' | 'error') => void;
     };
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Puppeteer.` with `Config.`
+     */
     readonly Puppeteer: {
         /**
          * Specify executable path for the browser to use.
@@ -96,6 +109,12 @@ export declare type ConfigType = {
          * Set how many milliseconds a frame may take to render before it times out.
          * Default: `30000`
          */
+        readonly setDelayRenderTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
+        /**
+         * @deprecated Renamed to `setDelayRenderTimeoutInMilliseconds`.
+         * Set how many milliseconds a frame may take to render before it times out.
+         * Default: `30000`
+         */
         readonly setTimeoutInMilliseconds: (newPuppeteerTimeout: number) => void;
         /**
          * Setting deciding whether to disable CORS and other Chrome security features.
@@ -118,6 +137,9 @@ export declare type ConfigType = {
          */
         readonly setChromiumOpenGlRenderer: (renderer: 'swangle' | 'angle' | 'egl' | 'swiftshader') => void;
     };
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Rendering.` with `Config.`
+     */
     readonly Rendering: {
         /**
          * Set a custom location for a .env file.
@@ -184,6 +206,9 @@ export declare type ConfigType = {
          */
         readonly setEnforceAudioTrack: (enforceAudioTrack: boolean) => void;
     };
+    /**
+     * @deprecated New flat config format: You can now replace `Config.Output.` with `Config.`
+     */
     readonly Output: {
         /**
          * Set the output file location string. Default: `out/{composition}.{codec}`
@@ -254,6 +279,7 @@ export declare type ConfigType = {
         readonly setVideoBitrate: (bitrate: string | null) => void;
     };
 };
+export declare type ConfigType = ObjectConfig & FlatConfig;
 export type { Concurrency, WebpackConfiguration, WebpackOverrideFn };
 export declare const Config: ConfigType;
 export declare const enableLegacyRemotionConfig: () => void;

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/internals.d.ts

@@ -57,7 +57,11 @@ export declare const Internals: {
             audioId: string;
         };
         unregisterAudio: (id: number) => void;
-        updateAudio: (id: number, aud: import("./audio").RemotionAudioProps) => void;
+        updateAudio: (options: {
+            id: number;
+            aud: import("./audio").RemotionAudioProps;
+            audioId: string;
+        }) => void;
         playAllAudios: () => void;
         numberOfAudioTags: number;
     } | null>;

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/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.38";
+export declare const VERSION = "3.3.40";

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.38';
+exports.VERSION = '3.3.40';

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/warn-about-non-seekable-media.js

@@ -18,7 +18,7 @@ const warnAboutNonSeekableMedia = (ref, type) => {
     }
     const range = { start: ref.seekable.start(0), end: ref.seekable.end(0) };
     if (range.start === 0 && range.end === 0) {
-        const msg = `The media does not support seeking. Remotion cannot properly render it. Please see https://remotion.dev/docs/non-seekable-media for assistance. Source: ${ref.src}`;
+        const msg = `The media ${ref.src} cannot be seeked. This could be one of two reasons: 1) The media resource was replaced while the video is playing but it was not loaded yet. 2) The media does not support seeking. Please see https://remotion.dev/docs/non-seekable-media for assistance.`;
         if (type === 'console-error') {
             console.error(msg);
         }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.38",
+	"version": "3.3.40",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -65,5 +65,5 @@
 			]
 		}
 	},
-	"gitHead": "ac58695e452e58deb5c010f09bcc94d036930e6c"
+	"gitHead": "be5f606a81761f7f8e1e191ebabd5f8d225d8c09"
 }