@remotion/player 4.0.505 → 4.0.507

package/dist/cjs/use-player-methods.js

@@ -0,0 +1,221 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.usePlayerMethods = void 0;
+const react_1 = require("react");
+const remotion_1 = require("remotion");
+const emitter_context_js_1 = require("./emitter-context.js");
+const timeline_imperative_context_js_1 = require("./timeline-imperative-context.js");
+const usePlayerMethods = () => {
+    var _a;
+    const setFrame = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const setTimelinePosition = remotion_1.Internals.Timeline.useTimelineSetFrame();
+    const { setPlaying } = (0, react_1.useContext)(remotion_1.Internals.SetTimelineContext);
+    const timelineImperativeContext = (0, react_1.useContext)((0, timeline_imperative_context_js_1.getTimelineImperativeContext)());
+    const audioContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioContext);
+    const audioTagsContext = (0, react_1.useContext)(remotion_1.Internals.SharedAudioTagsContext);
+    const environment = (0, remotion_1.useRemotionEnvironment)();
+    const video = remotion_1.Internals.useVideo();
+    const config = remotion_1.Internals.useUnsafeVideoConfig();
+    const emitter = (0, react_1.useContext)(emitter_context_js_1.PlayerEventEmitterContext);
+    const playStart = (0, react_1.useRef)(0);
+    const fallbackFrame = (0, react_1.useRef)(null);
+    if (!timelineImperativeContext) {
+        throw new Error('Timeline imperative context is not available. This hook must be used inside a <Player> or the Remotion Studio.');
+    }
+    if (!emitter) {
+        throw new TypeError('Expected Player event emitter context');
+    }
+    const bufferingContext = (0, react_1.useContext)(remotion_1.Internals.BufferingContextReact);
+    if (!bufferingContext) {
+        throw new Error('Missing the buffering context. Most likely you have a Remotion version mismatch.');
+    }
+    const getCurrentFrame = (0, react_1.useCallback)(() => {
+        var _a, _b, _c;
+        if (!video) {
+            return ((_a = fallbackFrame.current) !== null && _a !== void 0 ? _a : (typeof window === 'undefined'
+                ? 0
+                : ((_b = window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0)));
+        }
+        const unclamped = (_c = timelineImperativeContext.frameRef.current[video.id]) !== null && _c !== void 0 ? _c : (environment.isPlayer
+            ? 0
+            : remotion_1.Internals.Timeline.getFrameForComposition(video.id));
+        return remotion_1.Internals.Timeline.clampFrameToCompositionRange(unclamped, video.durationInFrames);
+    }, [environment.isPlayer, timelineImperativeContext, video]);
+    const seek = (0, react_1.useCallback)((newFrame) => {
+        const frameToSeekTo = config
+            ? remotion_1.Internals.TimelinePosition.clampFrameToCompositionRange(newFrame, config.durationInFrames)
+            : Math.max(0, newFrame);
+        fallbackFrame.current = frameToSeekTo;
+        if (video === null || video === void 0 ? void 0 : video.id) {
+            if (timelineImperativeContext.frameRef.current[video.id] !== frameToSeekTo) {
+                timelineImperativeContext.frameRef.current = {
+                    ...timelineImperativeContext.frameRef.current,
+                    [video.id]: frameToSeekTo,
+                };
+            }
+            setTimelinePosition((currentFrames) => currentFrames[video.id] === frameToSeekTo
+                ? currentFrames
+                : { ...currentFrames, [video.id]: frameToSeekTo });
+        }
+        emitter.dispatchSeek(frameToSeekTo);
+    }, [
+        config,
+        emitter,
+        setTimelinePosition,
+        timelineImperativeContext,
+        video === null || video === void 0 ? void 0 : video.id,
+    ]);
+    const play = (0, react_1.useCallback)((e) => {
+        var _a;
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const lastFrameForPlayback = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+        if (getCurrentFrame() === lastFrameForPlayback) {
+            seek(0);
+        }
+        audioContext === null || audioContext === void 0 ? void 0 : audioContext.resume();
+        /**
+         * Play silent audio tags to warm them up for autoplay
+         */
+        if (audioTagsContext && audioTagsContext.numberOfAudioTags > 0 && e) {
+            audioTagsContext.playAllAudios();
+        }
+        /**
+         * Play audios and videos directly here so they can benefit from
+         * being triggered by a click
+         */
+        timelineImperativeContext.audioAndVideoTags.current.forEach((tag) => tag.play('player play() was called and playing audio from a click'));
+        timelineImperativeContext.imperativePlaying.current = true;
+        setPlaying(true);
+        playStart.current = getCurrentFrame();
+        emitter.dispatchPlay();
+    }, [
+        audioContext,
+        audioTagsContext,
+        config === null || config === void 0 ? void 0 : config.durationInFrames,
+        emitter,
+        getCurrentFrame,
+        seek,
+        setPlaying,
+        timelineImperativeContext,
+    ]);
+    const pause = (0, react_1.useCallback)(() => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            timelineImperativeContext.imperativePlaying.current = false;
+            setPlaying(false);
+            emitter.dispatchPause();
+            audioContext === null || audioContext === void 0 ? void 0 : audioContext.suspend();
+        }
+    }, [audioContext, emitter, setPlaying, timelineImperativeContext]);
+    const pauseAndReturnToPlayStart = (0, react_1.useCallback)(() => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            timelineImperativeContext.imperativePlaying.current = false;
+            fallbackFrame.current = playStart.current;
+            if (config) {
+                timelineImperativeContext.frameRef.current = {
+                    ...timelineImperativeContext.frameRef.current,
+                    [config.id]: playStart.current,
+                };
+                setTimelinePosition((currentFrames) => ({
+                    ...currentFrames,
+                    [config.id]: playStart.current,
+                }));
+                setPlaying(false);
+                emitter.dispatchPause();
+            }
+        }
+    }, [
+        config,
+        emitter,
+        setPlaying,
+        setTimelinePosition,
+        timelineImperativeContext,
+    ]);
+    const videoId = video === null || video === void 0 ? void 0 : video.id;
+    const lastFrame = ((_a = config === null || config === void 0 ? void 0 : config.durationInFrames) !== null && _a !== void 0 ? _a : 1) - 1;
+    const frameBack = (0, react_1.useCallback)((frames) => {
+        var _a, _b;
+        if (!videoId) {
+            return null;
+        }
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const previousFrame = (_b = (_a = timelineImperativeContext.frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+        const newFrame = Math.max(0, previousFrame - frames);
+        if (previousFrame === newFrame) {
+            return;
+        }
+        timelineImperativeContext.frameRef.current = {
+            ...timelineImperativeContext.frameRef.current,
+            [videoId]: newFrame,
+        };
+        setFrame((currentFrames) => currentFrames[videoId] === newFrame
+            ? currentFrames
+            : { ...currentFrames, [videoId]: newFrame });
+    }, [setFrame, timelineImperativeContext, videoId]);
+    const frameForward = (0, react_1.useCallback)((frames) => {
+        var _a, _b;
+        if (!videoId) {
+            return null;
+        }
+        if (timelineImperativeContext.imperativePlaying.current) {
+            return;
+        }
+        const previousFrame = (_b = (_a = timelineImperativeContext.frameRef.current[videoId]) !== null && _a !== void 0 ? _a : window.remotion_initialFrame) !== null && _b !== void 0 ? _b : 0;
+        const newFrame = Math.min(lastFrame, previousFrame + frames);
+        if (previousFrame === newFrame) {
+            return;
+        }
+        timelineImperativeContext.frameRef.current = {
+            ...timelineImperativeContext.frameRef.current,
+            [videoId]: newFrame,
+        };
+        setFrame((currentFrames) => currentFrames[videoId] === newFrame
+            ? currentFrames
+            : { ...currentFrames, [videoId]: newFrame });
+    }, [lastFrame, setFrame, timelineImperativeContext, videoId]);
+    const toggle = (0, react_1.useCallback)((e) => {
+        if (timelineImperativeContext.imperativePlaying.current) {
+            pause();
+        }
+        else {
+            play(e);
+        }
+    }, [pause, play, timelineImperativeContext]);
+    const isPlaying = (0, react_1.useCallback)(() => {
+        return timelineImperativeContext.imperativePlaying.current;
+    }, [timelineImperativeContext]);
+    const isBuffering = (0, react_1.useCallback)(() => {
+        return bufferingContext.buffering.current;
+    }, [bufferingContext.buffering]);
+    return (0, react_1.useMemo)(() => {
+        return {
+            frameBack,
+            frameForward,
+            emitter,
+            play,
+            pause,
+            seek,
+            getCurrentFrame,
+            isPlaying,
+            isBuffering,
+            pauseAndReturnToPlayStart,
+            toggle,
+        };
+    }, [
+        emitter,
+        frameBack,
+        frameForward,
+        getCurrentFrame,
+        isBuffering,
+        isPlaying,
+        pause,
+        pauseAndReturnToPlayStart,
+        play,
+        seek,
+        toggle,
+    ]);
+};
+exports.usePlayerMethods = usePlayerMethods;