remotion 3.3.32 → 3.3.34

package/dist/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "3.3.32";
+export declare const VERSION = "3.3.34";

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.32';
+exports.VERSION = '3.3.34';

package/dist/video/video-fragment.js

@@ -29,9 +29,11 @@ const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initi
 exports.useAppendVideoFragment = useAppendVideoFragment;
 // https://github.com/remotion-dev/remotion/issues/1655
 const isIOSSafariCase = (actualSrc) => {
-    return (/iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-        Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
-        actualSrc.startsWith('blob:'));
+    return typeof window === 'undefined'
+        ? false
+        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
+            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/)) &&
+            actualSrc.startsWith('blob:');
 };
 const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     var _a;
@@ -41,7 +43,7 @@ const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     if (actualSrc.startsWith('data:')) {
         return actualSrc;
     }
-    const existingHash = Boolean(new URL(actualSrc, (_a = window.location.href) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
+    const existingHash = Boolean(new URL(actualSrc, (_a = (typeof window === 'undefined' ? null : window.location.href)) !== null && _a !== void 0 ? _a : 'http://localhost:3000').hash);
     if (existingHash) {
         return actualSrc;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.32",
+	"version": "3.3.34",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -65,5 +65,5 @@
 			]
 		}
 	},
-	"gitHead": "6b4f3514c801ddf2e7f957dd2e633271fbbc75f6"
+	"gitHead": "b078979b3e2f5cc4d240f112b827e7ef951aa318"
 }

package/dist/LayerMaster.d.ts

@@ -1,8 +0,0 @@
-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

@@ -1,39 +0,0 @@
-"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

@@ -1,5 +0,0 @@
-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

@@ -1,92 +0,0 @@
-"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/get-compositions-from-markup.d.ts

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

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

@@ -1,19 +0,0 @@
-"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

@@ -1,24 +0,0 @@
-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

@@ -1,149 +0,0 @@
-"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/video/NativeVideo.d.ts

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

package/dist/video/NativeVideo.js

@@ -1,33 +0,0 @@
-"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

@@ -1,8 +0,0 @@
-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

@@ -1,14 +0,0 @@
-"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;