remotion 4.0.126 → 4.0.128

package/dist/cjs/audio/AudioForDevelopment.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "autoPlay" | "controls" | "onEnded" | "nonce" | "onResize" | "onResizeCapture"> & {
+export declare const AudioForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.AudioHTMLAttributes<HTMLAudioElement>, HTMLAudioElement>, "nonce" | "onEnded" | "onResize" | "onResizeCapture" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/cjs/config/input-props.d.ts

@@ -1 +1 @@
-export declare const getInputProps: () => Record<string, unknown>;
+export declare const getInputProps: <T extends Record<string, unknown> = Record<string, unknown>>() => T;

package/dist/cjs/freeze.d.ts

@@ -2,6 +2,7 @@ import React from 'react';
 type FreezeProps = {
     frame: number;
     children: React.ReactNode;
+    active?: boolean | ((f: number) => boolean);
 };
 /**
  * @description This method freezes all of its children to the frame that you specify as a prop

package/dist/cjs/freeze.js

@@ -5,38 +5,58 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const SequenceContext_js_1 = require("./SequenceContext.js");
 const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_current_frame_js_1 = require("./use-current-frame.js");
 const use_video_config_js_1 = require("./use-video-config.js");
 /**
  * @description This method freezes all of its children to the frame that you specify as a prop
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
-const Freeze = ({ frame, children }) => {
+const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
     const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
-    if (typeof frame === 'undefined') {
+    if (typeof frameToFreeze === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
     }
-    if (typeof frame !== 'number') {
-        throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frame}`);
+    if (typeof frameToFreeze !== 'number') {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`);
     }
-    if (Number.isNaN(frame)) {
+    if (Number.isNaN(frameToFreeze)) {
         throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
     }
-    if (!Number.isFinite(frame)) {
-        throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frame}.`);
+    if (!Number.isFinite(frameToFreeze)) {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
     }
-    const context = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
-    const value = (0, react_1.useMemo)(() => {
+    const isActive = (0, react_1.useMemo)(() => {
+        if (typeof active === 'boolean') {
+            return active;
+        }
+        if (typeof active === 'function') {
+            return active(frame);
+        }
+    }, [active, frame]);
+    const timelineContext = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const sequenceContext = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
+    const timelineValue = (0, react_1.useMemo)(() => {
+        if (!isActive) {
+            return timelineContext;
+        }
         return {
-            ...context,
+            ...timelineContext,
             playing: false,
             imperativePlaying: {
                 current: false,
             },
             frame: {
-                [videoConfig.id]: frame,
+                [videoConfig.id]: frameToFreeze,
             },
         };
-    }, [context, frame, videoConfig.id]);
-    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: value, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: null, children: children }) }));
+    }, [timelineContext, frameToFreeze, isActive, videoConfig.id]);
+    const sequenceValue = (0, react_1.useMemo)(() => {
+        if (isActive) {
+            return null;
+        }
+        return sequenceContext;
+    }, [isActive, sequenceContext]);
+    return ((0, jsx_runtime_1.jsx)(timeline_position_state_js_1.TimelineContext.Provider, { value: timelineValue, children: (0, jsx_runtime_1.jsx)(SequenceContext_js_1.SequenceContext.Provider, { value: sequenceValue, children: children }) }));
 };
 exports.Freeze = Freeze;

package/dist/cjs/get-timeline-clip-name.d.ts

@@ -0,0 +1 @@
+export declare const getTimelineClipName: (children: React.ReactNode) => string;

package/dist/cjs/get-timeline-clip-name.js

@@ -0,0 +1,25 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getTimelineClipName = void 0;
+const react_1 = require("react");
+const HIDDEN_NAMES = ['__WEBPACK_DEFAULT_EXPORT__'];
+const getTimelineClipName = (children) => {
+    var _a;
+    const tree = (_a = react_1.Children.map(children, (ch) => {
+        if (!(0, react_1.isValidElement)(ch)) {
+            return null;
+        }
+        // Must be name, not ID
+        const name = typeof ch.type !== 'string' && ch.type.name;
+        if (name && !HIDDEN_NAMES.includes(name)) {
+            return name;
+        }
+        if (ch.props.children) {
+            const chName = (0, exports.getTimelineClipName)(ch.props.children);
+            return chName;
+        }
+        return null;
+    })) === null || _a === void 0 ? void 0 : _a.filter(Boolean);
+    return (tree === null || tree === void 0 ? void 0 : tree.length) ? tree[0] : '';
+};
+exports.getTimelineClipName = getTimelineClipName;

package/dist/cjs/input-props-serialization.d.ts

@@ -12,4 +12,4 @@ export declare const serializeJSONWithDate: ({ data, indent, staticBase, }: {
     indent: number | undefined;
     staticBase: string | null;
 }) => SerializedJSONWithCustomFields;
-export declare const deserializeJSONWithCustomFields: (data: string) => Record<string, unknown>;
+export declare const deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;

package/dist/cjs/interpolate.d.ts

@@ -1,4 +1,4 @@
-export type ExtrapolateType = 'extend' | 'identity' | 'clamp';
+export type ExtrapolateType = 'extend' | 'identity' | 'clamp' | 'wrap';
 /**
  * @description This function allows you to map a range of values to another with a conside syntax
  * @see [Documentation](https://www.remotion.dev/docs/interpolate)

package/dist/cjs/interpolate.js

@@ -14,8 +14,12 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateLeft === 'clamp') {
             result = inputMin;
         }
+        else if (extrapolateLeft === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
         else if (extrapolateLeft === 'extend') {
-            // noop
+            // Noop
         }
     }
     if (result > inputMax) {
@@ -25,8 +29,12 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateRight === 'clamp') {
             result = inputMax;
         }
+        else if (extrapolateRight === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
         else if (extrapolateRight === 'extend') {
-            // noop
+            // Noop
         }
     }
     if (outputMin === outputMax) {

package/dist/cjs/no-react.d.ts

@@ -27,7 +27,7 @@ export declare const NoReactInternals: {
     }) => import("./input-props-serialization").SerializedJSONWithCustomFields;
     bundleName: string;
     bundleMapName: string;
-    deserializeJSONWithCustomFields: (data: string) => Record<string, unknown>;
+    deserializeJSONWithCustomFields: <T = Record<string, unknown>>(data: string) => T;
     DELAY_RENDER_CALLSTACK_TOKEN: string;
     getOffthreadVideoSource: ({ src, transparent, currentTime, toneMapped, }: {
         src: string;

package/dist/cjs/version.d.ts

@@ -1 +1 @@
-export declare const VERSION = "4.0.126";
+export declare const VERSION = "4.0.128";

package/dist/cjs/version.js

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

package/dist/cjs/video/VideoForDevelopment.d.ts

@@ -1,6 +1,6 @@
 import type { ForwardRefExoticComponent, RefAttributes } from 'react';
 import React from 'react';
-export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "autoPlay" | "controls" | "onEnded" | "nonce"> & {
+export declare const VideoForDevelopment: ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.VideoHTMLAttributes<HTMLVideoElement>, HTMLVideoElement>, "nonce" | "onEnded" | "autoPlay" | "controls"> & {
     name?: string | undefined;
     volume?: import("../volume-prop.js").VolumeProp | undefined;
     playbackRate?: number | undefined;

package/dist/cjs/video/video-fragment.js

@@ -6,10 +6,12 @@ const toSeconds = (time, fps) => {
     return Math.round((time / fps) * 100) / 100;
 };
 const isIosSafari = () => {
-    return typeof window === 'undefined'
-        ? false
-        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const isIpadIPodIPhone = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
+    const isAppleWebKit = /AppleWebKit/.test(window.navigator.userAgent);
+    return isIpadIPodIPhone && isAppleWebKit;
 };
 exports.isIosSafari = isIosSafari;
 // https://github.com/remotion-dev/remotion/issues/1655

package/dist/esm/index.mjs

@@ -105,7 +105,7 @@ function truthy(value) {
 }
 
 // Automatically generated on publish
-const VERSION = '4.0.126';
+const VERSION = '4.0.128';
 
 const checkMultipleRemotionVersions = () => {
     if (typeof globalThis === 'undefined') {
@@ -1816,6 +1816,11 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateLeft === 'clamp') {
             result = inputMin;
         }
+        else if (extrapolateLeft === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
+        else ;
     }
     if (result > inputMax) {
         if (extrapolateRight === 'identity') {
@@ -1824,6 +1829,11 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateRight === 'clamp') {
             result = inputMax;
         }
+        else if (extrapolateRight === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
+        else ;
     }
     if (outputMin === outputMax) {
         return outputMin;
@@ -1935,10 +1945,12 @@ const toSeconds = (time, fps) => {
     return Math.round((time / fps) * 100) / 100;
 };
 const isIosSafari = () => {
-    return typeof window === 'undefined'
-        ? false
-        : /iP(ad|od|hone)/i.test(window.navigator.userAgent) &&
-            Boolean(navigator.userAgent.match(/Version\/[\d.]+.*Safari/));
+    if (typeof window === 'undefined') {
+        return false;
+    }
+    const isIpadIPodIPhone = /iP(ad|od|hone)/i.test(window.navigator.userAgent);
+    const isAppleWebKit = /AppleWebKit/.test(window.navigator.userAgent);
+    return isIpadIPodIPhone && isAppleWebKit;
 };
 // https://github.com/remotion-dev/remotion/issues/1655
 const isIOSSafariAndBlob = (actualSrc) => {
@@ -3242,34 +3254,53 @@ class Easing {
  * @description This method freezes all of its children to the frame that you specify as a prop
  * @see [Documentation](https://www.remotion.dev/docs/freeze)
  */
-const Freeze = ({ frame, children }) => {
+const Freeze = ({ frame: frameToFreeze, children, active = true, }) => {
+    const frame = useCurrentFrame();
     const videoConfig = useVideoConfig();
-    if (typeof frame === 'undefined') {
+    if (typeof frameToFreeze === 'undefined') {
         throw new Error(`The <Freeze /> component requires a 'frame' prop, but none was passed.`);
     }
-    if (typeof frame !== 'number') {
-        throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frame}`);
+    if (typeof frameToFreeze !== 'number') {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a number, but is of type ${typeof frameToFreeze}`);
     }
-    if (Number.isNaN(frame)) {
+    if (Number.isNaN(frameToFreeze)) {
         throw new Error(`The 'frame' prop of <Freeze /> must be a real number, but it is NaN.`);
     }
-    if (!Number.isFinite(frame)) {
-        throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frame}.`);
+    if (!Number.isFinite(frameToFreeze)) {
+        throw new Error(`The 'frame' prop of <Freeze /> must be a finite number, but it is ${frameToFreeze}.`);
     }
-    const context = useContext(TimelineContext);
-    const value = useMemo(() => {
+    const isActive = useMemo(() => {
+        if (typeof active === 'boolean') {
+            return active;
+        }
+        if (typeof active === 'function') {
+            return active(frame);
+        }
+    }, [active, frame]);
+    const timelineContext = useContext(TimelineContext);
+    const sequenceContext = useContext(SequenceContext);
+    const timelineValue = useMemo(() => {
+        if (!isActive) {
+            return timelineContext;
+        }
         return {
-            ...context,
+            ...timelineContext,
             playing: false,
             imperativePlaying: {
                 current: false,
             },
             frame: {
-                [videoConfig.id]: frame,
+                [videoConfig.id]: frameToFreeze,
             },
         };
-    }, [context, frame, videoConfig.id]);
-    return (jsx(TimelineContext.Provider, { value: value, children: jsx(SequenceContext.Provider, { value: null, children: children }) }));
+    }, [timelineContext, frameToFreeze, isActive, videoConfig.id]);
+    const sequenceValue = useMemo(() => {
+        if (isActive) {
+            return null;
+        }
+        return sequenceContext;
+    }, [isActive, sequenceContext]);
+    return (jsx(TimelineContext.Provider, { value: timelineValue, children: jsx(SequenceContext.Provider, { value: sequenceValue, children: children }) }));
 };
 
 let warnedServer = false;

package/dist/esm/no-react.mjs

@@ -11,6 +11,11 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateLeft === 'clamp') {
             result = inputMin;
         }
+        else if (extrapolateLeft === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
+        else ;
     }
     if (result > inputMax) {
         if (extrapolateRight === 'identity') {
@@ -19,6 +24,11 @@ function interpolateFunction(input, inputRange, outputRange, options) {
         if (extrapolateRight === 'clamp') {
             result = inputMax;
         }
+        else if (extrapolateRight === 'wrap') {
+            const range = inputMax - inputMin;
+            result = ((((result - inputMin) % range) + range) % range) + inputMin;
+        }
+        else ;
     }
     if (outputMin === outputMax) {
         return outputMin;

package/dist/esm/version.mjs

@@ -1,4 +1,4 @@
 // Automatically generated on publish
-const VERSION = '4.0.126';
+const VERSION = '4.0.128';
 
 export { VERSION };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "remotion",
-  "version": "4.0.126",
+  "version": "4.0.128",
   "description": "Render videos in React",
   "main": "dist/cjs/index.js",
   "types": "dist/cjs/index.d.ts",

package/dist/cjs/use-buffer.d.ts

@@ -1,5 +0,0 @@
-export declare const useBufferState: () => {
-    delayPlayback: () => {
-        unblock: () => void;
-    };
-};

package/dist/cjs/use-buffer.js

@@ -1,28 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.useBufferState = void 0;
-const react_1 = require("react");
-const buffering_1 = require("./buffering");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const useBufferState = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
-    if (!canUseRemotionHooks) {
-        if (typeof window !== 'undefined' && window.remotion_isPlayer) {
-            throw new Error(`useCurrentFrame can only be called inside a component that was passed to <Player>. See: https://www.remotion.dev/docs/player/examples`);
-        }
-        throw new Error(`useCurrentFrame() can only be called inside a component that was registered as a composition. See https://www.remotion.dev/docs/the-fundamentals#defining-compositions`);
-    }
-    const buffer = (0, react_1.useContext)(buffering_1.BufferingContextReact);
-    if (!buffer) {
-        throw new Error('BufferingContextReact was unexpectedly not found. Most likely your Remotion versions are mismatching.');
-    }
-    return (0, react_1.useMemo)(() => ({
-        delayPlayback: () => {
-            const { unblock } = buffer.addBlock({
-                id: String(Math.random()),
-            });
-            return { unblock };
-        },
-    }), [buffer]);
-};
-exports.useBufferState = useBufferState;