remotion 3.3.51 → 3.3.52

package/dist/spring/index.js

@@ -0,0 +1,51 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureSpring = exports.spring = void 0;
+const validation_spring_duration_1 = require("../validation/validation-spring-duration");
+const measure_spring_1 = require("./measure-spring");
+const spring_utils_1 = require("./spring-utils");
+/**
+ * Calculates a position based on physical parameters, start and end value, and time.
+ * @link https://www.remotion.dev/docs/spring
+ * @param {number} frame The current time value. Most of the time you want to pass in the return value of useCurrentFrame.
+ * @param {number} fps The framerate at which the animation runs. Pass in the value obtained by `useVideoConfig()`.
+ * @param {?Object} config optional object that allows you to customize the physical properties of the animation.
+ * @param {number} [config.mass=1] The weight of the spring. If you reduce the mass, the animation becomes faster!
+ * @param {number} [config.damping=10] How hard the animation decelerates.
+ * @param {number} [config.stiffness=100] Affects bounciness of the animation.
+ * @param {boolean} [config.overshootClamping=false] Whether to prevent the animation going beyond the target value.
+ * @param {?number} [config.from] The initial value of the animation. Default `0`
+ * @param {?number} [config.to] The end value of the animation. Default `1`
+ * @param {?number} [config.durationInFrames] Stretch the duration of an animation to  a set value.. Default `undefined`
+ * @param {?number} [config.durationThreshold] How close to the end the animation is considered to be done. Default `0.005`
+ */
+function spring({ frame, fps, config = {}, from = 0, to = 1, durationInFrames, durationRestThreshold, }) {
+    (0, validation_spring_duration_1.validateSpringDuration)(durationInFrames);
+    const durationRatio = durationInFrames === undefined
+        ? 1
+        : durationInFrames /
+            (0, measure_spring_1.measureSpring)({
+                fps,
+                config,
+                from,
+                to,
+                threshold: durationRestThreshold,
+            });
+    const spr = (0, spring_utils_1.springCalculation)({
+        fps,
+        frame: frame / durationRatio,
+        config,
+        from,
+        to,
+    });
+    if (!config.overshootClamping) {
+        return spr.current;
+    }
+    if (to >= from) {
+        return Math.min(spr.current, to);
+    }
+    return Math.max(spr.current, to);
+}
+exports.spring = spring;
+var measure_spring_2 = require("./measure-spring");
+Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_2.measureSpring; } });

package/dist/spring/measure-spring.d.ts

@@ -0,0 +1,8 @@
+import type { SpringConfig } from './spring-utils';
+export declare function measureSpring({ fps, config, threshold, from, to, }: {
+    fps: number;
+    config?: Partial<SpringConfig>;
+    threshold?: number;
+    from?: number;
+    to?: number;
+}): number;

package/dist/spring/measure-spring.js

@@ -0,0 +1,64 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureSpring = void 0;
+const validate_fps_1 = require("../validation/validate-fps");
+const spring_utils_1 = require("./spring-utils");
+function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1, }) {
+    if (typeof threshold !== 'number') {
+        throw new TypeError(`threshold must be a number, got ${threshold} of type ${typeof threshold}`);
+    }
+    if (threshold === 0) {
+        return Infinity;
+    }
+    if (threshold === 1) {
+        return 0;
+    }
+    if (isNaN(threshold)) {
+        throw new TypeError('Threshold is NaN');
+    }
+    if (!Number.isFinite(threshold)) {
+        throw new TypeError('Threshold is not finite');
+    }
+    if (threshold < 0) {
+        throw new TypeError('Threshold is below 0');
+    }
+    (0, validate_fps_1.validateFps)(fps, 'to the measureSpring() function', false);
+    const range = Math.abs(from - to);
+    let frame = 0;
+    let finishedFrame = 0;
+    const calc = () => {
+        return (0, spring_utils_1.springCalculation)({
+            fps,
+            frame,
+            config,
+            from,
+            to,
+        });
+    };
+    let animation = calc();
+    const calcDifference = () => {
+        return (Math.abs(animation.current - animation.toValue) /
+            (range === 0 ? 1 : range));
+    };
+    let difference = calcDifference();
+    while (difference >= threshold) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+    }
+    // Since spring is bouncy, just because it's under the threshold we
+    // cannot be sure it's done. We need to animate further until it stays in the
+    // threshold for, say, 20 frames.
+    finishedFrame = frame;
+    for (let i = 0; i < 20; i++) {
+        frame++;
+        animation = calc();
+        difference = calcDifference();
+        if (difference >= threshold) {
+            i = 0;
+            finishedFrame = frame + 1;
+        }
+    }
+    return finishedFrame;
+}
+exports.measureSpring = measureSpring;

package/dist/spring/spring-utils.d.ts

@@ -0,0 +1,21 @@
+declare type AnimationNode = {
+    lastTimestamp: number;
+    toValue: number;
+    current: number;
+    velocity: number;
+    prevPosition?: number;
+};
+export declare type SpringConfig = {
+    damping: number;
+    mass: number;
+    stiffness: number;
+    overshootClamping: boolean;
+};
+export declare function springCalculation({ from, to, frame, fps, config, }: {
+    from?: number;
+    to?: number;
+    frame: number;
+    fps: number;
+    config?: Partial<SpringConfig>;
+}): AnimationNode;
+export {};

package/dist/spring/spring-utils.js

@@ -0,0 +1,103 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.springCalculation = void 0;
+const defaultSpringConfig = {
+    damping: 10,
+    mass: 1,
+    stiffness: 100,
+    overshootClamping: false,
+};
+const advanceCache = {};
+function advance({ animation, now, config, }) {
+    const { toValue, lastTimestamp, current, velocity } = animation;
+    const deltaTime = Math.min(now - lastTimestamp, 64);
+    const c = config.damping;
+    const m = config.mass;
+    const k = config.stiffness;
+    const cacheKey = [
+        toValue,
+        lastTimestamp,
+        current,
+        velocity,
+        c,
+        m,
+        k,
+        now,
+    ].join('-');
+    if (advanceCache[cacheKey]) {
+        return advanceCache[cacheKey];
+    }
+    const v0 = -velocity;
+    const x0 = toValue - current;
+    const zeta = c / (2 * Math.sqrt(k * m)); // damping ratio
+    const omega0 = Math.sqrt(k / m); // undamped angular frequency of the oscillator (rad/ms)
+    const omega1 = omega0 * Math.sqrt(1 - zeta ** 2); // exponential decay
+    const t = deltaTime / 1000;
+    const sin1 = Math.sin(omega1 * t);
+    const cos1 = Math.cos(omega1 * t);
+    // under damped
+    const underDampedEnvelope = Math.exp(-zeta * omega0 * t);
+    const underDampedFrag1 = underDampedEnvelope *
+        (sin1 * ((v0 + zeta * omega0 * x0) / omega1) + x0 * cos1);
+    const underDampedPosition = toValue - underDampedFrag1;
+    // This looks crazy -- it's actually just the derivative of the oscillation function
+    const underDampedVelocity = zeta * omega0 * underDampedFrag1 -
+        underDampedEnvelope *
+            (cos1 * (v0 + zeta * omega0 * x0) - omega1 * x0 * sin1);
+    // critically damped
+    const criticallyDampedEnvelope = Math.exp(-omega0 * t);
+    const criticallyDampedPosition = toValue - criticallyDampedEnvelope * (x0 + (v0 + omega0 * x0) * t);
+    const criticallyDampedVelocity = criticallyDampedEnvelope *
+        (v0 * (t * omega0 - 1) + t * x0 * omega0 * omega0);
+    const animationNode = {
+        toValue,
+        prevPosition: current,
+        lastTimestamp: now,
+        current: zeta < 1 ? underDampedPosition : criticallyDampedPosition,
+        velocity: zeta < 1 ? underDampedVelocity : criticallyDampedVelocity,
+    };
+    advanceCache[cacheKey] = animationNode;
+    return animationNode;
+}
+const calculationCache = {};
+function springCalculation({ from = 0, to = 1, frame, fps, config = {}, }) {
+    const cacheKey = [
+        from,
+        to,
+        frame,
+        fps,
+        config.damping,
+        config.mass,
+        config.overshootClamping,
+        config.stiffness,
+    ].join('-');
+    if (calculationCache[cacheKey]) {
+        return calculationCache[cacheKey];
+    }
+    let animation = {
+        lastTimestamp: 0,
+        current: from,
+        toValue: to,
+        velocity: 0,
+        prevPosition: 0,
+    };
+    const frameClamped = Math.max(0, frame);
+    const unevenRest = frameClamped % 1;
+    for (let f = 0; f <= Math.floor(frameClamped); f++) {
+        if (f === Math.floor(frameClamped)) {
+            f += unevenRest;
+        }
+        const time = (f / fps) * 1000;
+        animation = advance({
+            animation,
+            now: time,
+            config: {
+                ...defaultSpringConfig,
+                ...config,
+            },
+        });
+    }
+    calculationCache[cacheKey] = animation;
+    return animation;
+}
+exports.springCalculation = springCalculation;

package/dist/static-file.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Reference a file from the public/ folder.
+ * If the file does not appear in the autocomplete, type the path manually.
+ */
+export declare const staticFile: (path: string) => string;

package/dist/static-file.js

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticFile = void 0;
+const trimLeadingSlash = (path) => {
+    if (path.startsWith('/')) {
+        return trimLeadingSlash(path.substr(1));
+    }
+    return path;
+};
+const inner = (path) => {
+    if (typeof window !== 'undefined' && window.remotion_staticBase) {
+        return `${window.remotion_staticBase}/${trimLeadingSlash(path)}`;
+    }
+    return `/${trimLeadingSlash(path)}`;
+};
+/**
+ * Reference a file from the public/ folder.
+ * If the file does not appear in the autocomplete, type the path manually.
+ */
+const staticFile = (path) => {
+    if (path.startsWith('http://') || path.startsWith('https://')) {
+        throw new TypeError(`staticFile() does not support remote URLs - got "${path}". Instead, pass the URL without wrapping it in staticFile(). See: https://remotion.dev/docs/staticfile-remote-urls`);
+    }
+    if (path.startsWith('..') || path.startsWith('./')) {
+        throw new TypeError(`staticFile() does not support relative paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    const preparsed = inner(path);
+    if (!preparsed.startsWith('/')) {
+        return `/${preparsed}`;
+    }
+    return preparsed;
+};
+exports.staticFile = staticFile;

package/dist/timeline-position-state.d.ts

@@ -0,0 +1,29 @@
+import type { MutableRefObject } from 'react';
+export declare type PlayableMediaTag = {
+    play: () => void;
+    id: string;
+};
+export declare type TimelineContextValue = {
+    frame: number;
+    playing: boolean;
+    rootId: string;
+    playbackRate: number;
+    imperativePlaying: MutableRefObject<boolean>;
+    setPlaybackRate: (u: React.SetStateAction<number>) => void;
+    audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
+};
+export declare type SetTimelineContextValue = {
+    setFrame: (u: React.SetStateAction<number>) => void;
+    setPlaying: (u: React.SetStateAction<boolean>) => void;
+};
+export declare const TimelineContext: import("react").Context<TimelineContextValue>;
+export declare const SetTimelineContext: import("react").Context<SetTimelineContextValue>;
+export declare const useTimelinePosition: () => number;
+export declare const useTimelineSetFrame: () => (u: React.SetStateAction<number>) => void;
+declare type PlayingReturnType = readonly [
+    boolean,
+    (u: React.SetStateAction<boolean>) => void,
+    MutableRefObject<boolean>
+];
+export declare const usePlayingState: () => PlayingReturnType;
+export {};

package/dist/timeline-position-state.js

@@ -0,0 +1,41 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.SetTimelineContext = exports.TimelineContext = void 0;
+const react_1 = require("react");
+exports.TimelineContext = (0, react_1.createContext)({
+    frame: 0,
+    playing: false,
+    playbackRate: 1,
+    rootId: '',
+    imperativePlaying: {
+        current: false,
+    },
+    setPlaybackRate: () => {
+        throw new Error('default');
+    },
+    audioAndVideoTags: { current: [] },
+});
+exports.SetTimelineContext = (0, react_1.createContext)({
+    setFrame: () => {
+        throw new Error('default');
+    },
+    setPlaying: () => {
+        throw new Error('default');
+    },
+});
+const useTimelinePosition = () => {
+    const state = (0, react_1.useContext)(exports.TimelineContext);
+    return state.frame;
+};
+exports.useTimelinePosition = useTimelinePosition;
+const useTimelineSetFrame = () => {
+    const { setFrame } = (0, react_1.useContext)(exports.SetTimelineContext);
+    return setFrame;
+};
+exports.useTimelineSetFrame = useTimelineSetFrame;
+const usePlayingState = () => {
+    const { playing, imperativePlaying } = (0, react_1.useContext)(exports.TimelineContext);
+    const { setPlaying } = (0, react_1.useContext)(exports.SetTimelineContext);
+    return (0, react_1.useMemo)(() => [playing, setPlaying, imperativePlaying], [imperativePlaying, playing, setPlaying]);
+};
+exports.usePlayingState = usePlayingState;

package/dist/truthy.d.ts

@@ -0,0 +1,3 @@
+declare type Truthy<T> = T extends false | '' | 0 | null | undefined ? never : T;
+export declare function truthy<T>(value: T): value is Truthy<T>;
+export {};

package/dist/truthy.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.truthy = void 0;
+function truthy(value) {
+    return Boolean(value);
+}
+exports.truthy = truthy;