@remotion/studio
Version:
APIs for interacting with the Remotion Studio
87 lines (86 loc) • 3.88 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelinePlayCursorSyncer = void 0;
const react_1 = require("react");
const remotion_1 = require("remotion");
const timeline_zoom_1 = require("../../state/timeline-zoom");
const imperative_state_1 = require("./imperative-state");
const timeline_refs_1 = require("./timeline-refs");
const timeline_scroll_logic_1 = require("./timeline-scroll-logic");
let lastTimelinePositionWhileScrolling = null;
const TimelinePlayCursorSyncer = () => {
var _a, _b;
const video = remotion_1.Internals.useVideo();
const timelineContext = remotion_1.Internals.useTimelineContext();
const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
const compositionId = canvasContent && canvasContent.type === 'composition'
? canvasContent.compositionId
: null;
const zoom = compositionId
? ((_a = zoomMap[compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
: null;
if (zoom && video) {
(0, imperative_state_1.setCurrentFrame)(timelinePosition);
(0, imperative_state_1.setCurrentZoom)(zoom);
(0, imperative_state_1.setCurrentDuration)(video.durationInFrames);
(0, imperative_state_1.setCurrentFps)(video.fps);
}
const playing = (_b = timelineContext.playing) !== null && _b !== void 0 ? _b : false;
/**
* While playing (forwards or backwards), jump one viewport width to the left or right when the cursor goes out of the viewport.
*/
(0, react_1.useEffect)(() => {
if (!video) {
return;
}
if (!playing) {
return;
}
(0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
direction: timelineContext.playbackRate > 0 ? 'page-right' : 'page-left',
durationInFrames: video.durationInFrames,
frame: timelinePosition,
});
}, [playing, timelineContext, timelinePosition, video]);
/**
* Restore state if `enter` is being pressed
*/
(0, react_1.useEffect)(() => {
const { current } = timeline_refs_1.scrollableRef;
if (!current) {
return;
}
if (playing) {
lastTimelinePositionWhileScrolling = {
scrollLeft: current.scrollLeft,
frame: (0, imperative_state_1.getCurrentFrame)(),
zoomLevel: (0, imperative_state_1.getCurrentZoom)(),
durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
};
}
else if (lastTimelinePositionWhileScrolling !== null) {
if ((0, timeline_scroll_logic_1.isCursorInViewport)({
frame: (0, imperative_state_1.getCurrentFrame)(),
durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
})) {
return;
}
if (lastTimelinePositionWhileScrolling.zoomLevel === (0, imperative_state_1.getCurrentZoom)() &&
lastTimelinePositionWhileScrolling.durationInFrames ===
(0, imperative_state_1.getCurrentDuration)()) {
current.scrollLeft = lastTimelinePositionWhileScrolling.scrollLeft;
}
else {
(0, timeline_scroll_logic_1.ensureFrameIsInViewport)({
direction: 'center',
durationInFrames: (0, imperative_state_1.getCurrentDuration)(),
frame: lastTimelinePositionWhileScrolling.frame,
});
}
}
}, [playing]);
return null;
};
exports.TimelinePlayCursorSyncer = TimelinePlayCursorSyncer;