remotion
Version:
Render videos in React
69 lines • 2.77 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.useMediaPlayback = void 0;
const react_1 = require("react");
const use_audio_frame_1 = require("./audio/use-audio-frame");
const timeline_position_state_1 = require("./timeline-position-state");
const use_frame_1 = require("./use-frame");
const use_video_config_1 = require("./use-video-config");
const get_current_time_1 = require("./video/get-current-time");
const useMediaPlayback = ({ mediaRef, src, mediaType, playbackRate, }) => {
const frame = use_frame_1.useCurrentFrame();
const absoluteFrame = use_frame_1.useAbsoluteCurrentFrame();
const [playing] = timeline_position_state_1.usePlayingState();
const { fps } = use_video_config_1.useVideoConfig();
const mediaStartsAt = use_audio_frame_1.useMediaStartsAt();
react_1.useEffect(() => {
var _a, _b, _c;
if (playing && !((_a = mediaRef.current) === null || _a === void 0 ? void 0 : _a.ended)) {
(_b = mediaRef.current) === null || _b === void 0 ? void 0 : _b.play();
}
else {
(_c = mediaRef.current) === null || _c === void 0 ? void 0 : _c.pause();
}
}, [mediaRef, playing]);
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 = playbackRate;
const shouldBeTime = get_current_time_1.getMediaTime({
fps,
frame,
src,
playbackRate,
startFrom: -mediaStartsAt,
});
const isTime = mediaRef.current.currentTime;
const timeShift = Math.abs(shouldBeTime - isTime);
if (timeShift > 0.45 && !mediaRef.current.ended) {
console.log('Time has shifted by', timeShift, 'sec. Fixing...');
// If scrubbing around, adjust timing
// or if time shift is bigger than 0.2sec
mediaRef.current.currentTime = shouldBeTime;
}
if (!playing || absoluteFrame === 0) {
mediaRef.current.currentTime = shouldBeTime;
}
if (mediaRef.current.paused && !mediaRef.current.ended && playing) {
mediaRef.current.currentTime = shouldBeTime;
mediaRef.current.play();
}
}, [
absoluteFrame,
fps,
playbackRate,
frame,
mediaRef,
mediaType,
playing,
src,
mediaStartsAt,
]);
};
exports.useMediaPlayback = useMediaPlayback;
//# sourceMappingURL=use-media-playback.js.map