@remotion/studio
Version:
APIs for interacting with the Remotion Studio
97 lines (96 loc) • 4.35 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineSlider = exports.redrawTimelineSliderFast = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const get_left_of_timeline_slider_1 = require("../../helpers/get-left-of-timeline-slider");
const timeline_zoom_1 = require("../../state/timeline-zoom");
const imperative_state_1 = require("./imperative-state");
const timeline_refs_1 = require("./timeline-refs");
const TimelineSliderHandle_1 = require("./TimelineSliderHandle");
const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
const container = {
position: 'absolute',
bottom: 0,
top: 0,
pointerEvents: 'none',
};
const line = {
height: '100vh',
width: 1,
position: 'fixed',
backgroundColor: '#f02c00',
};
exports.redrawTimelineSliderFast = (0, react_1.createRef)();
const TimelineSlider = () => {
const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
if (videoConfig === null || timelineWidth === null) {
return null;
}
return jsx_runtime_1.jsx(Inner, {});
};
exports.TimelineSlider = TimelineSlider;
const Inner = () => {
var _a;
const videoConfig = (0, remotion_1.useVideoConfig)();
const timelinePosition = remotion_1.Internals.Timeline.useTimelinePosition();
const ref = (0, react_1.useRef)(null);
const timelineWidth = (0, react_1.useContext)(TimelineWidthProvider_1.TimelineWidthContext);
const { zoom: zoomMap } = (0, react_1.useContext)(timeline_zoom_1.TimelineZoomCtx);
const { canvasContent } = (0, react_1.useContext)(remotion_1.Internals.CompositionManager);
if (timelineWidth === null) {
throw new Error('Unexpectedly did not have timeline width');
}
const zoomLevel = (canvasContent === null || canvasContent === void 0 ? void 0 : canvasContent.type) === 'composition'
? ((_a = zoomMap[canvasContent.compositionId]) !== null && _a !== void 0 ? _a : timeline_zoom_1.TIMELINE_MIN_ZOOM)
: timeline_zoom_1.TIMELINE_MIN_ZOOM;
(0, react_1.useLayoutEffect)(() => {
var _a;
const el = ref.current;
const measuredWidth = (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth;
if (!el || measuredWidth === undefined || measuredWidth === 0) {
return;
}
el.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(timelinePosition, videoConfig.durationInFrames, measuredWidth)}px)`;
}, [
timelinePosition,
videoConfig.durationInFrames,
timelineWidth,
zoomLevel,
]);
(0, react_1.useImperativeHandle)(exports.redrawTimelineSliderFast, () => {
return {
draw: (frame, width) => {
var _a;
var _b;
const { current } = ref;
if (!current) {
throw new Error('unexpectedly did not have ref to timelineslider');
}
current.style.transform = `translateX(${(0, get_left_of_timeline_slider_1.getXPositionOfItemInTimelineImperatively)(frame, (0, imperative_state_1.getCurrentDuration)(), (_b = width !== null && width !== void 0 ? width : (_a = timeline_refs_1.sliderAreaRef.current) === null || _a === void 0 ? void 0 : _a.clientWidth) !== null && _b !== void 0 ? _b : 0)}px)`;
},
};
}, []);
(0, react_1.useEffect)(() => {
const currentRef = ref.current;
if (!currentRef) {
return;
}
const { current } = timeline_refs_1.timelineVerticalScroll;
if (!current) {
return;
}
const onScroll = () => {
currentRef.style.top = current.scrollTop + 'px';
};
current.addEventListener('scroll', onScroll);
return () => {
current.removeEventListener('scroll', onScroll);
};
}, []);
return (jsx_runtime_1.jsxs("div", { ref: ref, style: container, children: [
jsx_runtime_1.jsx("div", { style: line }), jsx_runtime_1.jsx(TimelineSliderHandle_1.TimelineSliderHandle, {})
] }));
};