@remotion/studio
Version:
APIs for interacting with the Remotion Studio
77 lines (76 loc) • 5.08 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.Timeline = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const calculate_timeline_1 = require("../../helpers/calculate-timeline");
const colors_1 = require("../../helpers/colors");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const is_menu_item_1 = require("../Menu/is-menu-item");
const SplitterContainer_1 = require("../Splitter/SplitterContainer");
const SplitterElement_1 = require("../Splitter/SplitterElement");
const SplitterHandle_1 = require("../Splitter/SplitterHandle");
const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
const TimelineDragHandler_1 = require("./TimelineDragHandler");
const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
const TimelineList_1 = require("./TimelineList");
const TimelinePlayCursorSyncer_1 = require("./TimelinePlayCursorSyncer");
const TimelineScrollable_1 = require("./TimelineScrollable");
const TimelineSlider_1 = require("./TimelineSlider");
const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
const TimelineTracks_1 = require("./TimelineTracks");
const TimelineWidthProvider_1 = require("./TimelineWidthProvider");
const is_collapsed_1 = require("./is-collapsed");
const timeline_refs_1 = require("./timeline-refs");
const container = {
minHeight: '100%',
flex: 1,
display: 'flex',
height: 0,
overflowY: 'auto',
backgroundColor: colors_1.BACKGROUND,
};
const noop = () => undefined;
const Timeline = () => {
var _a;
const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
const videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
const timeline = (0, react_1.useMemo)(() => {
if (!videoConfig) {
return [];
}
return (0, calculate_timeline_1.calculateTimeline)({
sequences,
sequenceDuration: videoConfig.durationInFrames,
});
}, [sequences, videoConfig]);
const durationInFrames = (_a = videoConfig === null || videoConfig === void 0 ? void 0 : videoConfig.durationInFrames) !== null && _a !== void 0 ? _a : 0;
const filtered = (0, react_1.useMemo)(() => {
const withoutHidden = timeline.filter((t) => !(0, is_collapsed_1.isTrackHidden)(t));
const withoutAfter = withoutHidden.filter((t) => {
return t.sequence.from <= durationInFrames && t.sequence.duration > 0;
});
return withoutAfter.filter((t) => t.sequence.showInTimeline);
}, [durationInFrames, timeline]);
const shown = filtered.slice(0, MaxTimelineTracks_1.MAX_TIMELINE_TRACKS);
const hasBeenCut = filtered.length > shown.length;
const inner = (0, react_1.useMemo)(() => {
return {
height: shown.reduce((acc, track) => {
return (acc +
(0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other') +
Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM));
}, 0) +
timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM +
(hasBeenCut ? MaxTimelineTracks_1.MAX_TIMELINE_TRACKS_NOTICE_HEIGHT : 0) +
TimelineTimeIndicators_1.TIMELINE_TIME_INDICATOR_HEIGHT,
display: 'flex',
flex: 1,
minHeight: '100%',
overflowX: 'hidden',
};
}, [hasBeenCut, shown]);
return ((0, jsx_runtime_1.jsx)("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: (0, jsx_runtime_1.jsx)(TimelineWidthProvider_1.TimelineWidthProvider, { children: (0, jsx_runtime_1.jsx)("div", { style: inner, children: (0, jsx_runtime_1.jsxs)(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [(0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "flexer", sticky: (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: (0, jsx_runtime_1.jsx)(TimelineList_1.TimelineList, { timeline: shown }) }), (0, jsx_runtime_1.jsx)(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), (0, jsx_runtime_1.jsx)(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: (0, jsx_runtime_1.jsxs)(TimelineScrollable_1.TimelineScrollable, { children: [(0, jsx_runtime_1.jsx)(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), (0, jsx_runtime_1.jsx)(TimelineInOutPointer_1.TimelineInOutPointer, {}), (0, jsx_runtime_1.jsx)(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), (0, jsx_runtime_1.jsx)(TimelineDragHandler_1.TimelineDragHandler, {}), (0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), (0, jsx_runtime_1.jsx)(TimelineSlider_1.TimelineSlider, {})] }) })] }) }) }) }));
};
exports.Timeline = Timeline;