@remotion/studio
Version:
APIs for interacting with the Remotion Studio
37 lines (36 loc) • 1.92 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineTracks = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
const TimelineSequence_1 = require("./TimelineSequence");
const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
const is_collapsed_1 = require("./is-collapsed");
const content = {
paddingLeft: timeline_layout_1.TIMELINE_PADDING,
paddingRight: timeline_layout_1.TIMELINE_PADDING,
paddingTop: 1,
};
const timelineContent = {
minHeight: '100%',
};
const TimelineTracks = ({ timeline, hasBeenCut }) => {
const timelineStyle = (0, react_1.useMemo)(() => {
return {
...timelineContent,
width: 100 + '%',
};
}, []);
return ((0, jsx_runtime_1.jsxs)("div", { style: timelineStyle, children: [(0, jsx_runtime_1.jsxs)("div", { style: content, children: [(0, jsx_runtime_1.jsx)(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
if ((0, is_collapsed_1.isTrackHidden)(track)) {
return null;
}
return ((0, jsx_runtime_1.jsx)("div", { style: {
height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type === 'video' ? 'video' : 'other'),
marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
}, children: (0, jsx_runtime_1.jsx)(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }, track.sequence.id));
})] }), hasBeenCut ? (0, jsx_runtime_1.jsx)(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
};
exports.TimelineTracks = TimelineTracks;