remotion 3.3.26 → 3.3.28

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> remotion@3.3.25 build /Users/jonathanburger/remotion/packages/core
+> remotion@3.3.27 build /Users/jonathanburger/remotion/packages/core
 > tsc -d
 

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,29 @@
+"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 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') {
+                // eslint-disable-next-line react/no-array-index-key
+                return (0, jsx_runtime_1.jsx)(Comp, { ...defaultProps, ...inputProps }, String(i));
+            }
+            throw new Error('Unknown layer type');
+        }) }));
+};
+exports.LayerMaster = LayerMaster;

package/dist/audio/Audio.d.ts

@@ -5,4 +5,4 @@ export declare const Audio: React.ForwardRefExoticComponent<Pick<Omit<React.Deta
     playbackRate?: number | undefined;
     acceptableTimeShiftInSeconds?: number | undefined;
     allowAmplificationDuringRender?: boolean | undefined;
-} & RemotionMainAudioProps, "id" | "property" | "key" | "is" | "slot" | "style" | "title" | "children" | "dir" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "lang" | "placeholder" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "src" | "volume" | "playbackRate" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;
+} & RemotionMainAudioProps, "id" | "key" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "lang" | "placeholder" | "slot" | "spellCheck" | "style" | "tabIndex" | "title" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChange" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onResize" | "onResizeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "src" | "volume" | "playbackRate" | "allowAmplificationDuringRender" | "controlsList" | "crossOrigin" | "loop" | "mediaGroup" | "muted" | "playsInline" | "preload" | "acceptableTimeShiftInSeconds" | keyof RemotionMainAudioProps> & React.RefAttributes<HTMLAudioElement>>;

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,18 @@
+"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) => {
+    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';
+};
+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';
+};
+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,142 @@
+"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 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.26";
+export declare const VERSION = "3.3.28";

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.26';
+exports.VERSION = '3.3.28';

package/dist/video/video-fragment.js

@@ -27,8 +27,17 @@ const useAppendVideoFragment = ({ actualSrc: initialActualSrc, actualFrom: initi
     return appended;
 };
 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:'));
+};
 const appendVideoFragment = ({ actualSrc, actualFrom, duration, fps, }) => {
     var _a;
+    if (isIOSSafariCase(actualSrc)) {
+        return actualSrc;
+    }
     if (actualSrc.startsWith('data:')) {
         return actualSrc;
     }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "remotion",
-	"version": "3.3.26",
+	"version": "3.3.28",
 	"description": "Render videos in React",
 	"main": "dist/index.js",
 	"types": "dist/index.d.ts",
@@ -68,5 +68,5 @@
 			]
 		}
 	},
-	"gitHead": "8efe8771f7c2b1d22bd50e8c81cc37ae054dfae9"
+	"gitHead": "0caa0bec583b5e4c2b12b7375c365e02c2378eeb"
 }