remotion 4.0.486 → 4.0.488

package/dist/cjs/interpolate-translate.js

@@ -0,0 +1,70 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.interpolateTranslate = void 0;
+const interpolate_js_1 = require("./interpolate.js");
+const pixelValueRegex = /^([+-]?(?:\d+\.?\d*|\.\d+))px$/;
+const parseTranslate = (value) => {
+    if (typeof value !== 'string') {
+        throw new TypeError(`outputRange must contain only strings, but got ${typeof value}`);
+    }
+    const parts = value.trim().split(/\s+/);
+    if (parts.length < 1 || parts.length > 3 || parts[0] === '') {
+        throw new TypeError(`translate values must contain 1 to 3 pixel values, but got "${value}"`);
+    }
+    return parts.map((part) => {
+        const match = pixelValueRegex.exec(part);
+        if (match === null) {
+            throw new TypeError(`interpolateTranslate() only supports px values, but got "${part}" in "${value}"`);
+        }
+        return Number(match[1]);
+    });
+};
+/*
+ * @description Allows you to map a range of values to CSS translate values using pixel units.
+ * @see [Documentation](https://remotion.dev/docs/interpolate-translate)
+ */
+const interpolateTranslate = (input, inputRange, outputRange, options) => {
+    var _a;
+    if (typeof input === 'undefined') {
+        throw new TypeError('input can not be undefined');
+    }
+    if (typeof inputRange === 'undefined') {
+        throw new TypeError('inputRange can not be undefined');
+    }
+    if (typeof outputRange === 'undefined') {
+        throw new TypeError('outputRange can not be undefined');
+    }
+    if (inputRange.length !== outputRange.length) {
+        throw new TypeError('inputRange (' +
+            inputRange.length +
+            ' values provided) and outputRange (' +
+            outputRange.length +
+            ' values provided) must have the same length');
+    }
+    const parsedOutputRange = outputRange.map((translateValue) => parseTranslate(translateValue));
+    const firstValueLength = (_a = parsedOutputRange[0]) === null || _a === void 0 ? void 0 : _a.length;
+    if (firstValueLength === undefined) {
+        throw new TypeError('outputRange must have at least 1 element');
+    }
+    for (const parsedTranslate of parsedOutputRange) {
+        if (parsedTranslate.length !== firstValueLength) {
+            throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${parsedTranslate.length}`);
+        }
+    }
+    return new Array(firstValueLength)
+        .fill(true)
+        .map((_, index) => {
+        const outputValues = [];
+        for (const translateValue of parsedOutputRange) {
+            const value = translateValue[index];
+            if (value === undefined) {
+                throw new TypeError(`All translate values must have the same number of pixel values, but got ${firstValueLength} and ${translateValue.length}`);
+            }
+            outputValues.push(value);
+        }
+        const interpolatedValue = (0, interpolate_js_1.interpolate)(input, inputRange, outputValues, options);
+        return `${interpolatedValue}px`;
+    })
+        .join(' ');
+};
+exports.interpolateTranslate = interpolateTranslate;

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

@@ -1,4 +1,4 @@
-import type { MutableRefObject } from 'react';
+import type { RefObject } from 'react';
 import { type PlaybackRateContextValue, type TimelineContextValue } from './TimelineContext.js';
 export type PlayableMediaTag = {
     play: (reason: string) => void;
@@ -17,7 +17,7 @@ export declare const useTimelineSetFrame: () => (u: import("react").SetStateActi
 type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,
-    MutableRefObject<boolean>
+    RefObject<boolean>
 ];
 export declare const usePlayingState: () => PlayingReturnType;
 export {};

package/dist/cjs/use-media-playback.js

@@ -5,6 +5,7 @@ const react_1 = require("react");
 const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
 const buffer_until_first_frame_js_1 = require("./buffer-until-first-frame.js");
 const buffering_js_1 = require("./buffering.js");
+const get_media_sync_action_js_1 = require("./get-media-sync-action.js");
 const log_level_context_js_1 = require("./log-level-context.js");
 const log_js_1 = require("./log.js");
 const media_tag_current_time_timestamp_js_1 = require("./media-tag-current-time-timestamp.js");
@@ -144,7 +145,7 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
     }, [mediaRef, playbackRate, preservePitch]);
     (0, react_1.useEffect)(() => {
         var _a, _b;
-        var _c;
+        var _c, _d;
         const tagName = mediaType === 'audio' ? '<Html5Audio>' : '<Html5Video>';
         if (!mediaRef.current) {
             throw new Error(`No ${mediaType} ref found`);
@@ -152,107 +153,94 @@ const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybac
         if (!src) {
             throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
         }
-        const { duration } = mediaRef.current;
-        const shouldBeTime = !Number.isNaN(duration) && Number.isFinite(duration)
-            ? Math.min(duration, desiredUnclampedTime)
-            : desiredUnclampedTime;
-        const mediaTagTime = mediaTagCurrentTime.current.time;
-        const rvcTime = (_c = (_a = rvcCurrentTime.current) === null || _a === void 0 ? void 0 : _a.time) !== null && _c !== void 0 ? _c : null;
-        const isVariableFpsVideo = isVariableFpsVideoMap.current[src];
-        const timeShiftMediaTag = Math.abs(shouldBeTime - mediaTagTime);
-        const timeShiftRvcTag = rvcTime ? Math.abs(shouldBeTime - rvcTime) : null;
-        const mostRecentTimeshift = ((_b = rvcCurrentTime.current) === null || _b === void 0 ? void 0 : _b.lastUpdate) &&
-            rvcCurrentTime.current.time > mediaTagCurrentTime.current.lastUpdate
-            ? timeShiftRvcTag
-            : timeShiftMediaTag;
-        const timeShift = timeShiftRvcTag && !isVariableFpsVideo
-            ? mostRecentTimeshift
-            : timeShiftMediaTag;
-        if (timeShift > acceptableTimeShiftButLessThanDuration &&
-            lastSeekDueToShift.current !== shouldBeTime) {
-            // If scrubbing around, adjust timing
-            // or if time shift is bigger than 0.45sec
+        const { current } = mediaRef;
+        const action = (0, get_media_sync_action_js_1.getMediaSyncAction)({
+            duration: current.duration,
+            currentTime: current.currentTime,
+            paused: current.paused,
+            ended: current.ended,
+            desiredUnclampedTime,
+            mediaTagTime: mediaTagCurrentTime.current.time,
+            mediaTagLastUpdate: mediaTagCurrentTime.current.lastUpdate,
+            rvcTime: (_c = (_a = rvcCurrentTime.current) === null || _a === void 0 ? void 0 : _a.time) !== null && _c !== void 0 ? _c : null,
+            rvcLastUpdate: (_d = (_b = rvcCurrentTime.current) === null || _b === void 0 ? void 0 : _b.lastUpdate) !== null && _d !== void 0 ? _d : null,
+            isVariableFpsVideo: Boolean(isVariableFpsVideoMap.current[src]),
+            acceptableTimeShift: acceptableTimeShiftButLessThanDuration,
+            lastSeekDueToShift: lastSeekDueToShift.current,
+            playing,
+            playbackRate,
+            mediaTagBufferingOrStalled: isMediaTagBuffering || isBuffering(),
+            playerBuffering: buffering.buffering.current,
+            absoluteFrame,
+            onlyWarnForMediaSeekingError,
+            isPremounting,
+            isPostmounting,
+            pauseWhenBuffering,
+        });
+        if (action.type === 'none') {
+            return;
+        }
+        if (action.type === 'seek-due-to-shift') {
             lastSeek.current = (0, seek_js_1.seek)({
-                mediaRef: mediaRef.current,
-                time: shouldBeTime,
+                mediaRef: current,
+                time: action.shouldBeTime,
                 logLevel,
-                why: `because time shift is too big. shouldBeTime = ${shouldBeTime}, isTime = ${mediaTagTime}, requestVideoCallbackTime = ${rvcTime}, timeShift = ${timeShift}${isVariableFpsVideo ? ', isVariableFpsVideo = true' : ''}, isPremounting = ${isPremounting}, isPostmounting = ${isPostmounting}, pauseWhenBuffering = ${pauseWhenBuffering}`,
+                why: action.why,
                 mountTime,
             });
             lastSeekDueToShift.current = lastSeek.current;
-            if (playing) {
-                if (playbackRate > 0) {
-                    bufferUntilFirstFrame(shouldBeTime);
-                }
-                if (mediaRef.current.paused) {
-                    (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
-                        mediaRef,
-                        mediaType,
-                        onAutoPlayError,
-                        logLevel,
-                        mountTime,
-                        reason: 'player is playing but media tag is paused, and just seeked',
-                        isPlayer: env.isPlayer,
-                    });
-                }
+            if (action.bufferUntilFirstFrame) {
+                bufferUntilFirstFrame(action.shouldBeTime);
             }
-            if (!onlyWarnForMediaSeekingError) {
-                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
-            }
-            return;
-        }
-        const seekThreshold = playing ? 0.15 : 0.01;
-        // Only perform a seek if the time is not already the same.
-        // Chrome rounds to 6 digits, so 0.033333333 -> 0.033333,
-        // therefore a threshold is allowed.
-        // Refer to the https://github.com/remotion-dev/video-buffering-example
-        // which is fixed by only seeking conditionally.
-        const makesSenseToSeek = Math.abs(mediaRef.current.currentTime - shouldBeTime) > seekThreshold;
-        const isMediaTagBufferingOrStalled = isMediaTagBuffering || isBuffering();
-        const isSomethingElseBuffering = buffering.buffering.current && !isMediaTagBufferingOrStalled;
-        if (!playing || isSomethingElseBuffering) {
-            if (makesSenseToSeek) {
-                lastSeek.current = (0, seek_js_1.seek)({
-                    mediaRef: mediaRef.current,
-                    time: shouldBeTime,
+            if (action.playReason !== null) {
+                (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
+                    mediaRef,
+                    mediaType,
+                    onAutoPlayError,
                     logLevel,
-                    why: `not playing or something else is buffering. time offset is over seek threshold (${seekThreshold})`,
                     mountTime,
+                    reason: action.playReason,
+                    isPlayer: env.isPlayer,
                 });
             }
+            if (action.warnAboutNonSeekable) {
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(current, 'console-error');
+            }
             return;
         }
-        if (!playing || buffering.buffering.current) {
-            return;
-        }
-        // We now assured we are in playing state and not buffering
-        const pausedCondition = mediaRef.current.paused && !mediaRef.current.ended;
-        const firstFrameCondition = absoluteFrame === 0;
-        if (pausedCondition || firstFrameCondition) {
-            const reason = pausedCondition
-                ? 'media tag is paused'
-                : 'absolute frame is 0';
-            if (makesSenseToSeek) {
+        if (action.type === 'seek-if-not-playing') {
+            if (action.why !== null) {
                 lastSeek.current = (0, seek_js_1.seek)({
-                    mediaRef: mediaRef.current,
-                    time: shouldBeTime,
+                    mediaRef: current,
+                    time: action.shouldBeTime,
                     logLevel,
-                    why: `is over timeshift threshold (threshold = ${seekThreshold}) and ${reason}`,
+                    why: action.why,
                     mountTime,
                 });
             }
-            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
-                mediaRef,
-                mediaType,
-                onAutoPlayError,
+            return;
+        }
+        // action.type === 'play-and-seek'
+        if (action.why !== null) {
+            lastSeek.current = (0, seek_js_1.seek)({
+                mediaRef: current,
+                time: action.shouldBeTime,
                 logLevel,
+                why: action.why,
                 mountTime,
-                reason: `player is playing and ${reason}`,
-                isPlayer: env.isPlayer,
             });
-            if (!isVariableFpsVideo && playbackRate > 0) {
-                bufferUntilFirstFrame(shouldBeTime);
-            }
+        }
+        (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)({
+            mediaRef,
+            mediaType,
+            onAutoPlayError,
+            logLevel,
+            mountTime,
+            reason: action.playReason,
+            isPlayer: env.isPlayer,
+        });
+        if (action.bufferUntilFirstFrame) {
+            bufferUntilFirstFrame(action.shouldBeTime);
         }
     }, [
         absoluteFrame,

package/dist/cjs/use-request-video-callback-time.d.ts

@@ -2,7 +2,7 @@ import type { RefObject } from 'react';
 export declare const useRequestVideoCallbackTime: ({ mediaRef, mediaType, lastSeek, onVariableFpsVideoDetected, }: {
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement | null>;
     mediaType: "audio" | "video";
-    lastSeek: import("react").MutableRefObject<number | null>;
+    lastSeek: RefObject<number | null>;
     onVariableFpsVideoDetected: () => void;
 }) => RefObject<{
     time: number;

package/dist/cjs/version.d.ts

@@ -3,4 +3,4 @@
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-export declare const VERSION = "4.0.486";
+export declare const VERSION = "4.0.488";

package/dist/cjs/version.js

@@ -7,4 +7,4 @@ exports.VERSION = void 0;
  * @see [Documentation](https://remotion.dev/docs/version)
  * @returns {string} The current version of the remotion package
  */
-exports.VERSION = '4.0.486';
+exports.VERSION = '4.0.488';

package/dist/cjs/wrap-in-schema.d.ts

@@ -1,16 +1,16 @@
 import React from 'react';
 import type { SequenceControls } from './CompositionManager.js';
-import { type InteractivitySchema } from './interactivity-schema.js';
+import { type SequenceSchema } from './sequence-field-schema.js';
 export declare const getNestedValue: (obj: Record<string, unknown>, key: string) => unknown;
 export declare const readValuesFromProps: (props: Record<string, unknown>, keys: string[]) => Record<string, unknown>;
-export declare const selectActiveKeys: (schema: InteractivitySchema, values: Record<string, unknown>) => string[];
+export declare const selectActiveKeys: (schema: SequenceSchema, values: Record<string, unknown>) => string[];
 export declare const mergeValues: ({ props, valuesDotNotation, schemaKeys, propsToDelete, }: {
     props: Record<string, unknown>;
     valuesDotNotation: Record<string, unknown>;
     schemaKeys: string[];
     propsToDelete: Set<string>;
 }) => Record<string, unknown>;
-export declare const wrapInSchema: <S extends InteractivitySchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
+export declare const wrapInSchema: <S extends SequenceSchema, Props extends object>({ Component, componentIdentity, schema, supportsEffects, }: {
     Component: React.ComponentType<Props & {
         readonly _experimentalControls: SequenceControls | undefined;
     }>;

package/dist/cjs/wrap-in-schema.js

@@ -38,7 +38,7 @@ const react_1 = __importStar(require("react"));
 const delete_nested_key_js_1 = require("./delete-nested-key.js");
 const use_memoized_effects_js_1 = require("./effects/use-memoized-effects.js");
 const flatten_schema_js_1 = require("./flatten-schema.js");
-const interactivity_schema_js_1 = require("./interactivity-schema.js");
+const sequence_field_schema_js_1 = require("./sequence-field-schema.js");
 const sequence_node_path_js_1 = require("./sequence-node-path.js");
 const SequenceManager_js_1 = require("./SequenceManager.js");
 const use_current_frame_js_1 = require("./use-current-frame.js");
@@ -100,7 +100,7 @@ exports.mergeValues = mergeValues;
 const stackToOverrideMap = {};
 const wrapInSchema = ({ Component, componentIdentity, schema, supportsEffects, }) => {
     // Schema is static for a component, so we move this outside
-    const schemaWithSequenceName = (0, interactivity_schema_js_1.extendSchemaWithSequenceName)(schema);
+    const schemaWithSequenceName = (0, sequence_field_schema_js_1.extendSchemaWithSequenceName)(schema);
     const flatSchema = (0, flatten_schema_js_1.getFlatSchemaWithAllKeys)(schemaWithSequenceName);
     const flatKeys = Object.keys(flatSchema);
     const Wrapped = (0, react_1.forwardRef)((props, ref) => {

package/dist/cjs/wrap-remotion-context.d.ts

@@ -39,7 +39,7 @@ export declare function useRemotionContexts(): {
         listenForResume: (callback: () => void) => {
             remove: () => void;
         };
-        buffering: React.MutableRefObject<boolean>;
+        buffering: React.RefObject<boolean>;
     } | null;
     logLevelContext: import("./log-level-context.js").LoggingContextValue;
 };