remotion 4.0.0-webhook.27 → 4.1.0-alpha2

package/dist/cjs/spring/index.js

@@ -0,0 +1,75 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.measureSpring = exports.spring = void 0;
+const validate_frame_js_1 = require("../validate-frame.js");
+const validate_fps_js_1 = require("../validation/validate-fps.js");
+const validation_spring_duration_js_1 = require("../validation/validation-spring-duration.js");
+const measure_spring_js_1 = require("./measure-spring.js");
+const spring_utils_js_1 = require("./spring-utils.js");
+/**
+ * @description Calculates a position based on physical parameters, start and end value, and time.
+ * @see [Documentation](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 {?boolean} reverse Whether the animation plays in reverse or not. Default `false`.
+ * @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`
+ * @param {?number} [config.delay] Delay the animation for this amount of frames. Default `0`
+ */
+function spring({ frame: passedFrame, fps, config = {}, from = 0, to = 1, durationInFrames: passedDurationInFrames, durationRestThreshold, delay = 0, reverse = false, }) {
+    (0, validation_spring_duration_js_1.validateSpringDuration)(passedDurationInFrames);
+    (0, validate_frame_js_1.validateFrame)({
+        frame: passedFrame,
+        durationInFrames: Infinity,
+        allowFloats: true,
+    });
+    (0, validate_fps_js_1.validateFps)(fps, 'to spring()', false);
+    const needsToCalculateNaturalDuration = reverse || typeof passedDurationInFrames !== 'undefined';
+    const naturalDuration = needsToCalculateNaturalDuration
+        ? (0, measure_spring_js_1.measureSpring)({
+            fps,
+            config,
+            from,
+            to,
+            threshold: durationRestThreshold,
+        })
+        : undefined;
+    const naturalDurationGetter = needsToCalculateNaturalDuration
+        ? {
+            get: () => naturalDuration,
+        }
+        : {
+            get: () => {
+                throw new Error('did not calculate natural duration, this is an error with Remotion. Please report');
+            },
+        };
+    const frame = (reverse
+        ? (passedDurationInFrames !== null && passedDurationInFrames !== void 0 ? passedDurationInFrames : naturalDurationGetter.get()) - passedFrame
+        : passedFrame) - delay;
+    const spr = (0, spring_utils_js_1.springCalculation)({
+        fps,
+        frame: passedDurationInFrames === undefined
+            ? frame
+            : frame / (passedDurationInFrames / naturalDurationGetter.get()),
+        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_js_2 = require("./measure-spring.js");
+Object.defineProperty(exports, "measureSpring", { enumerable: true, get: function () { return measure_spring_js_2.measureSpring; } });

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

@@ -0,0 +1,12 @@
+import type { SpringConfig } from './spring-utils.js';
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
+export declare function measureSpring({ fps, config, threshold, from, to, }: {
+    fps: number;
+    config?: Partial<SpringConfig>;
+    threshold?: number;
+    from?: number;
+    to?: number;
+}): number;

package/dist/{spring → cjs/spring}/measure-spring.js

@@ -1,8 +1,12 @@
 "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");
+const validate_fps_js_1 = require("../validation/validate-fps.js");
+const spring_utils_js_1 = require("./spring-utils.js");
+/**
+ * @description The function returns how long it takes for a spring animation to settle
+ * @see [Documentation](https://www.remotion.dev/docs/measure-spring)
+ */
 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}`);
@@ -22,12 +26,12 @@ function measureSpring({ fps, config = {}, threshold = 0.005, from = 0, to = 1,
     if (threshold < 0) {
         throw new TypeError('Threshold is below 0');
     }
-    (0, validate_fps_1.validateFps)(fps, 'to the measureSpring() function', false);
+    (0, validate_fps_js_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)({
+        return (0, spring_utils_js_1.springCalculation)({
             fps,
             frame,
             config,

package/dist/{spring → cjs/spring}/spring-utils.d.ts

@@ -1,11 +1,11 @@
-declare type AnimationNode = {
+type AnimationNode = {
     lastTimestamp: number;
     toValue: number;
     current: number;
     velocity: number;
     prevPosition?: number;
 };
-export declare type SpringConfig = {
+export type SpringConfig = {
     damping: number;
     mass: number;
     stiffness: number;

package/dist/cjs/static-file.d.ts

@@ -0,0 +1,33 @@
+declare const problematicCharacters: {
+    '%3A': string;
+    '%2F': string;
+    '%3F': string;
+    '%23': string;
+    '%5B': string;
+    '%5D': string;
+    '%40': string;
+    '%21': string;
+    '%24': string;
+    '%26': string;
+    '%27': string;
+    '%28': string;
+    '%29': string;
+    '%2A': string;
+    '%2B': string;
+    '%2C': string;
+    '%3B': string;
+};
+type HexCode = keyof typeof problematicCharacters;
+export type HexInfo = {
+    containsHex: false;
+} | {
+    containsHex: true;
+    hexCode: HexCode;
+};
+export declare const includesHexOfUnsafeChar: (path: string) => HexInfo;
+/**
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
+ */
+export declare const staticFile: (path: string) => string;
+export {};

package/dist/cjs/static-file.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.staticFile = exports.includesHexOfUnsafeChar = void 0;
+const problematicCharacters = {
+    '%3A': ':',
+    '%2F': '/',
+    '%3F': '?',
+    '%23': '#',
+    '%5B': '[',
+    '%5D': ']',
+    '%40': '@',
+    '%21': '!',
+    '%24': '$',
+    '%26': '&',
+    '%27': "'",
+    '%28': '(',
+    '%29': ')',
+    '%2A': '*',
+    '%2B': '+',
+    '%2C': ',',
+    '%3B': ';',
+};
+const didWarn = {};
+const warnOnce = (message) => {
+    if (didWarn[message]) {
+        return;
+    }
+    console.warn(message);
+    didWarn[message] = true;
+};
+const includesHexOfUnsafeChar = (path) => {
+    for (const key of Object.keys(problematicCharacters)) {
+        if (path.includes(key)) {
+            return { containsHex: true, hexCode: key };
+        }
+    }
+    return { containsHex: false };
+};
+exports.includesHexOfUnsafeChar = includesHexOfUnsafeChar;
+const trimLeadingSlash = (path) => {
+    if (path.startsWith('/')) {
+        return trimLeadingSlash(path.substring(1));
+    }
+    return path;
+};
+const inner = (path) => {
+    if (typeof window !== 'undefined' && window.remotion_staticBase) {
+        return `${window.remotion_staticBase}/${trimLeadingSlash(path)}`;
+    }
+    return `/${trimLeadingSlash(path)}`;
+};
+/**
+ * @description Reference a file from the public/ folder. If the file does not appear in the autocomplete, type the path manually.
+ * @see [Documentation](https://www.remotion.dev/docs/staticfile)
+ */
+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`);
+    }
+    if (path.startsWith('/Users') ||
+        path.startsWith('/home') ||
+        path.startsWith('/tmp') ||
+        path.startsWith('/etc') ||
+        path.startsWith('/opt') ||
+        path.startsWith('/var') ||
+        path.startsWith('C:') ||
+        path.startsWith('D:') ||
+        path.startsWith('E:')) {
+        throw new TypeError(`staticFile() does not support absolute paths - got "${path}". Instead, pass the name of a file that is inside the public/ folder. See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    if (path.startsWith('public/')) {
+        throw new TypeError(`Do not include the public/ prefix when using staticFile() - got "${path}". See: https://remotion.dev/docs/staticfile-relative-paths`);
+    }
+    const includesHex = (0, exports.includesHexOfUnsafeChar)(path);
+    if (includesHex.containsHex) {
+        warnOnce(`WARNING: You seem to pass an already encoded path (path contains ${includesHex.hexCode}). The encoding gets automatically handled by staticFile()  `);
+    }
+    const preparsed = inner(encodeURIComponent(path));
+    if (!preparsed.startsWith('/')) {
+        return `/${preparsed}`;
+    }
+    return preparsed;
+};
+exports.staticFile = staticFile;

package/dist/{timeline-position-state.d.ts → cjs/timeline-position-state.d.ts}

@@ -1,9 +1,9 @@
 import type { MutableRefObject } from 'react';
-export declare type PlayableMediaTag = {
+export type PlayableMediaTag = {
     play: () => void;
     id: string;
 };
-export declare type TimelineContextValue = {
+export type TimelineContextValue = {
     frame: number;
     playing: boolean;
     rootId: string;
@@ -12,7 +12,7 @@ export declare type TimelineContextValue = {
     setPlaybackRate: (u: React.SetStateAction<number>) => void;
     audioAndVideoTags: MutableRefObject<PlayableMediaTag[]>;
 };
-export declare type SetTimelineContextValue = {
+export type SetTimelineContextValue = {
     setFrame: (u: React.SetStateAction<number>) => void;
     setPlaying: (u: React.SetStateAction<boolean>) => void;
 };
@@ -20,7 +20,7 @@ export declare const TimelineContext: import("react").Context<TimelineContextVal
 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 [
+type PlayingReturnType = readonly [
     boolean,
     (u: React.SetStateAction<boolean>) => void,
     MutableRefObject<boolean>

package/dist/{timeline-position-state.js → cjs/timeline-position-state.js}

@@ -2,6 +2,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.usePlayingState = exports.useTimelineSetFrame = exports.useTimelinePosition = exports.SetTimelineContext = exports.TimelineContext = void 0;
 const react_1 = require("react");
+const use_video_js_1 = require("./use-video.js");
 exports.TimelineContext = (0, react_1.createContext)({
     frame: 0,
     playing: false,
@@ -24,8 +25,15 @@ exports.SetTimelineContext = (0, react_1.createContext)({
     },
 });
 const useTimelinePosition = () => {
+    const videoConfig = (0, use_video_js_1.useVideo)();
     const state = (0, react_1.useContext)(exports.TimelineContext);
-    return state.frame;
+    // A dynamically calculated duration using calculateMetadata()
+    // may lead to the frame being bigger than the duration.
+    // If we have the config, we clamp the frame to the duration.
+    if (!videoConfig) {
+        return state.frame;
+    }
+    return Math.min(videoConfig.durationInFrames - 1, state.frame);
 };
 exports.useTimelinePosition = useTimelinePosition;
 const useTimelineSetFrame = () => {

package/dist/cjs/truthy.d.ts

@@ -0,0 +1,3 @@
+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/cjs/use-current-frame.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
+ */
+export declare const useCurrentFrame: () => number;

package/dist/{use-current-frame.js → cjs/use-current-frame.js}

@@ -2,24 +2,23 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useCurrentFrame = void 0;
 const react_1 = require("react");
-const CanUseRemotionHooks_1 = require("./CanUseRemotionHooks");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
+const CanUseRemotionHooks_js_1 = require("./CanUseRemotionHooks.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
 /**
- * Get the current frame of the video.
- * Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
- * @link https://www.remotion.dev/docs/use-current-frame
+ * @description Get the current frame of the video. Frames are 0-indexed, meaning the first frame is 0, the last frame is the duration of the composition in frames minus one.
+ * @see [Documentation](https://remotion.dev/docs/use-current-frame)
  */
 const useCurrentFrame = () => {
-    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_1.CanUseRemotionHooks);
+    const canUseRemotionHooks = (0, react_1.useContext)(CanUseRemotionHooks_js_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 frame = (0, timeline_position_state_1.useTimelinePosition)();
-    const context = (0, react_1.useContext)(Sequence_1.SequenceContext);
+    const frame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const context = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const contextOffset = context
         ? context.cumulatedFrom + context.relativeFrom
         : 0;

package/dist/cjs/use-lazy-component.d.ts

@@ -0,0 +1,7 @@
+import type { ComponentPropsWithRef, ComponentType, ExoticComponent } from 'react';
+import type { CompProps } from './Composition.js';
+type LazyExoticComponent<T extends ComponentType<any>> = ExoticComponent<ComponentPropsWithRef<T>> & {
+    readonly _result: T;
+};
+export declare const useLazyComponent: <Props>(compProps: CompProps<Props>) => LazyExoticComponent<ComponentType<Props>>;
+export {};

package/dist/{use-media-in-timeline.d.ts → cjs/use-media-in-timeline.d.ts}

@@ -1,9 +1,10 @@
 import type { RefObject } from 'react';
-import type { VolumeProp } from './volume-prop';
-export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, }: {
+import type { VolumeProp } from './volume-prop.js';
+export declare const useMediaInTimeline: ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }: {
     volume: VolumeProp | undefined;
     mediaVolume: number;
     mediaRef: RefObject<HTMLAudioElement | HTMLVideoElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
+    playbackRate: number;
 }) => void;

package/dist/{use-media-in-timeline.js → cjs/use-media-in-timeline.js}

@@ -2,16 +2,16 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useMediaInTimeline = void 0;
 const react_1 = require("react");
-const use_audio_frame_1 = require("./audio/use-audio-frame");
-const CompositionManager_1 = require("./CompositionManager");
-const get_asset_file_name_1 = require("./get-asset-file-name");
-const get_environment_1 = require("./get-environment");
-const nonce_1 = require("./nonce");
-const play_and_handle_not_allowed_error_1 = require("./play-and-handle-not-allowed-error");
-const Sequence_1 = require("./Sequence");
-const timeline_position_state_1 = require("./timeline-position-state");
-const use_video_config_1 = require("./use-video-config");
-const volume_prop_1 = require("./volume-prop");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const get_asset_file_name_js_1 = require("./get-asset-file-name.js");
+const get_environment_js_1 = require("./get-environment.js");
+const nonce_js_1 = require("./nonce.js");
+const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.js");
+const SequenceContext_js_1 = require("./SequenceContext.js");
+const SequenceManager_js_1 = require("./SequenceManager.js");
+const timeline_position_state_js_1 = require("./timeline-position-state.js");
+const use_video_config_js_1 = require("./use-video-config.js");
+const volume_prop_js_1 = require("./volume-prop.js");
 const didWarn = {};
 const warnOnce = (message) => {
     if (didWarn[message]) {
@@ -20,34 +20,36 @@ const warnOnce = (message) => {
     console.warn(message);
     didWarn[message] = true;
 };
-const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, }) => {
-    const videoConfig = (0, use_video_config_1.useVideoConfig)();
-    const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_1.TimelineContext);
-    const parentSequence = (0, react_1.useContext)(Sequence_1.SequenceContext);
+const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, playbackRate, }) => {
+    const videoConfig = (0, use_video_config_js_1.useVideoConfig)();
+    const { rootId, audioAndVideoTags } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const parentSequence = (0, react_1.useContext)(SequenceContext_js_1.SequenceContext);
     const actualFrom = parentSequence
         ? parentSequence.relativeFrom + parentSequence.cumulatedFrom
         : 0;
-    const [playing] = (0, timeline_position_state_1.usePlayingState)();
-    const startsAt = (0, use_audio_frame_1.useMediaStartsAt)();
-    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(CompositionManager_1.CompositionManager);
+    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const startsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const { registerSequence, unregisterSequence } = (0, react_1.useContext)(SequenceManager_js_1.SequenceManager);
     const [id] = (0, react_1.useState)(() => String(Math.random()));
     const [initialVolume] = (0, react_1.useState)(() => volume);
-    const nonce = (0, nonce_1.useNonce)();
+    const nonce = (0, nonce_js_1.useNonce)();
     const duration = parentSequence
         ? Math.min(parentSequence.durationInFrames, videoConfig.durationInFrames)
         : videoConfig.durationInFrames;
     const doesVolumeChange = typeof volume === 'function';
+    const environment = (0, get_environment_js_1.useRemotionEnvironment)();
     const volumes = (0, react_1.useMemo)(() => {
         if (typeof volume === 'number') {
             return volume;
         }
-        return new Array(Math.max(0, duration + startsAt))
+        return new Array(Math.floor(Math.max(0, duration + startsAt)))
             .fill(true)
             .map((_, i) => {
-            return (0, volume_prop_1.evaluateVolume)({
+            return (0, volume_prop_js_1.evaluateVolume)({
                 frame: i + startsAt,
                 volume,
                 mediaVolume,
+                allowAmplificationDuringRender: false,
             });
         })
             .join(',');
@@ -65,8 +67,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         if (!src) {
             throw new Error('No src passed');
         }
-        if ((0, get_environment_1.getRemotionEnvironment)() !== 'preview' &&
-            process.env.NODE_ENV !== 'test') {
+        if (environment !== 'preview' && process.env.NODE_ENV !== 'test') {
             return;
         }
         registerSequence({
@@ -76,14 +77,15 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
             duration,
             from: 0,
             parent: (_a = parentSequence === null || parentSequence === void 0 ? void 0 : parentSequence.id) !== null && _a !== void 0 ? _a : null,
-            displayName: (0, get_asset_file_name_1.getAssetDisplayName)(src),
+            displayName: (0, get_asset_file_name_js_1.getAssetDisplayName)(src),
             rootId,
             volume: volumes,
             showInTimeline: true,
             nonce,
             startMediaFrom: 0 - startsAt,
             doesVolumeChange,
-            showLoopTimesInTimeline: undefined,
+            loopDisplay: undefined,
+            playbackRate,
         });
         return () => {
             unregisterSequence(id);
@@ -104,6 +106,8 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
         mediaRef,
         mediaType,
         startsAt,
+        playbackRate,
+        environment,
     ]);
     (0, react_1.useEffect)(() => {
         const tag = {
@@ -113,7 +117,7 @@ const useMediaInTimeline = ({ volume, mediaVolume, mediaRef, src, mediaType, })
                     // Don't play if for example in a <Freeze> state.
                     return;
                 }
-                return (0, play_and_handle_not_allowed_error_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+                return (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
             },
         };
         audioAndVideoTags.current.push(tag);

package/dist/{use-media-playback.d.ts → cjs/use-media-playback.d.ts}

@@ -1,8 +1,10 @@
 import type { RefObject } from 'react';
-export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, }: {
+export declare const DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+export declare const useMediaPlayback: ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }: {
     mediaRef: RefObject<HTMLVideoElement | HTMLAudioElement>;
     src: string | undefined;
     mediaType: 'audio' | 'video';
     playbackRate: number;
     onlyWarnForMediaSeekingError: boolean;
+    acceptableTimeshift: number;
 }) => void;

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

@@ -0,0 +1,86 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useMediaPlayback = exports.DEFAULT_ACCEPTABLE_TIMESHIFT = void 0;
+const react_1 = require("react");
+const use_audio_frame_js_1 = require("./audio/use-audio-frame.js");
+const play_and_handle_not_allowed_error_js_1 = require("./play-and-handle-not-allowed-error.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");
+const get_current_time_js_1 = require("./video/get-current-time.js");
+const warn_about_non_seekable_media_js_1 = require("./warn-about-non-seekable-media.js");
+exports.DEFAULT_ACCEPTABLE_TIMESHIFT = 0.45;
+const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate: localPlaybackRate, onlyWarnForMediaSeekingError, acceptableTimeshift, }) => {
+    const { playbackRate: globalPlaybackRate } = (0, react_1.useContext)(timeline_position_state_js_1.TimelineContext);
+    const frame = (0, use_current_frame_js_1.useCurrentFrame)();
+    const absoluteFrame = (0, timeline_position_state_js_1.useTimelinePosition)();
+    const [playing] = (0, timeline_position_state_js_1.usePlayingState)();
+    const { fps } = (0, use_video_config_js_1.useVideoConfig)();
+    const mediaStartsAt = (0, use_audio_frame_js_1.useMediaStartsAt)();
+    const playbackRate = localPlaybackRate * globalPlaybackRate;
+    (0, react_1.useEffect)(() => {
+        var _a;
+        if (!playing) {
+            (_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.pause();
+        }
+    }, [mediaRef, mediaType, playing]);
+    (0, react_1.useEffect)(() => {
+        const tagName = mediaType === 'audio' ? '<Audio>' : '<Video>';
+        if (!mediaRef.current) {
+            throw new Error(`No ${mediaType} ref found`);
+        }
+        if (!src) {
+            throw new Error(`No 'src' attribute was passed to the ${tagName} element.`);
+        }
+        mediaRef.current.playbackRate = Math.max(0, playbackRate);
+        const shouldBeTime = (0, get_current_time_js_1.getMediaTime)({
+            fps,
+            frame,
+            src,
+            playbackRate: localPlaybackRate,
+            startFrom: -mediaStartsAt,
+            mediaType,
+        });
+        const isTime = mediaRef.current.currentTime;
+        const timeShift = Math.abs(shouldBeTime - isTime);
+        if (timeShift > acceptableTimeshift && !mediaRef.current.ended) {
+            // If scrubbing around, adjust timing
+            // or if time shift is bigger than 0.2sec
+            mediaRef.current.currentTime = shouldBeTime;
+            if (!onlyWarnForMediaSeekingError) {
+                (0, warn_about_non_seekable_media_js_1.warnAboutNonSeekableMedia)(mediaRef.current, onlyWarnForMediaSeekingError ? 'console-warning' : 'console-error');
+            }
+        }
+        // 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) > 0.00001;
+        if (!playing || absoluteFrame === 0) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+        }
+        if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
+            if (makesSenseToSeek) {
+                mediaRef.current.currentTime = shouldBeTime;
+            }
+            (0, play_and_handle_not_allowed_error_js_1.playAndHandleNotAllowedError)(mediaRef, mediaType);
+        }
+    }, [
+        absoluteFrame,
+        fps,
+        playbackRate,
+        frame,
+        mediaRef,
+        mediaType,
+        playing,
+        src,
+        mediaStartsAt,
+        localPlaybackRate,
+        onlyWarnForMediaSeekingError,
+        acceptableTimeshift,
+    ]);
+};
+exports.useMediaPlayback = useMediaPlayback;

package/dist/{use-sync-volume-with-media-tag.d.ts → cjs/use-sync-volume-with-media-tag.d.ts}

@@ -1,6 +1,6 @@
 import type { RefObject } from 'react';
-import type { VolumeProp } from './volume-prop';
-export declare type UseSyncVolumeWithMediaTagOptions = {
+import type { VolumeProp } from './volume-prop.js';
+export type UseSyncVolumeWithMediaTagOptions = {
     volumePropFrame: number;
     actualVolume: number;
     volume?: VolumeProp;

package/dist/{use-sync-volume-with-media-tag.js → cjs/use-sync-volume-with-media-tag.js}

@@ -2,16 +2,17 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.useSyncVolumeWithMediaTag = void 0;
 const react_1 = require("react");
-const is_approximately_the_same_1 = require("./is-approximately-the-same");
-const volume_prop_1 = require("./volume-prop");
+const is_approximately_the_same_js_1 = require("./is-approximately-the-same.js");
+const volume_prop_js_1 = require("./volume-prop.js");
 const useSyncVolumeWithMediaTag = ({ volumePropFrame, actualVolume, volume, mediaVolume, mediaRef, }) => {
     (0, react_1.useEffect)(() => {
-        const userPreferredVolume = (0, volume_prop_1.evaluateVolume)({
+        const userPreferredVolume = (0, volume_prop_js_1.evaluateVolume)({
             frame: volumePropFrame,
             volume,
             mediaVolume,
+            allowAmplificationDuringRender: false,
         });
-        if (!(0, is_approximately_the_same_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
+        if (!(0, is_approximately_the_same_js_1.isApproximatelyTheSame)(userPreferredVolume, actualVolume) &&
             mediaRef.current) {
             mediaRef.current.volume = userPreferredVolume;
         }

package/dist/{use-unsafe-video-config.d.ts → cjs/use-unsafe-video-config.d.ts}

@@ -1,2 +1,2 @@
-import type { VideoConfig } from './video-config';
+import type { VideoConfig } from './video-config.js';
 export declare const useUnsafeVideoConfig: () => VideoConfig | null;