remotion 3.3.38 → 3.3.39

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/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/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.39";

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.39';

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/package.json

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