@remotion/studio
Version:
APIs for interacting with the Remotion Studio
51 lines (50 loc) • 2.92 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineTracks = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const client_id_1 = require("../../helpers/client-id");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
const is_collapsed_1 = require("./is-collapsed");
const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
const TimelineSequence_1 = require("./TimelineSequence");
const TimelineTimeIndicators_1 = require("./TimelineTimeIndicators");
const content = {
paddingLeft: timeline_layout_1.TIMELINE_PADDING,
paddingRight: timeline_layout_1.TIMELINE_PADDING,
paddingTop: 1,
};
const timelineContent = {
minHeight: '100%',
};
const getExpandedPlaceholderStyle = (controls) => ({
height: (0, timeline_layout_1.getExpandedTrackHeight)(controls) + timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
});
const TimelineTracks = ({ timeline, hasBeenCut }) => {
const { expandedTracks } = (0, react_1.useContext)(ExpandedTracksProvider_1.ExpandedTracksContext);
const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
const visualModeEnabled = Boolean(process.env.EXPERIMENTAL_VISUAL_MODE_ENABLED) &&
previewServerState.type === 'connected';
const timelineStyle = (0, react_1.useMemo)(() => {
return {
...timelineContent,
width: 100 + '%',
};
}, []);
return (jsx_runtime_1.jsxs("div", { style: timelineStyle, children: [
jsx_runtime_1.jsxs("div", { style: content, children: [
jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePadding, {}), timeline.map((track) => {
var _a;
if ((0, is_collapsed_1.isTrackHidden)(track)) {
return null;
}
const isExpanded = (_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false;
return (jsx_runtime_1.jsxs("div", { children: [
jsx_runtime_1.jsx("div", { style: {
height: (0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type),
marginBottom: timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
}, children: jsx_runtime_1.jsx(TimelineSequence_1.TimelineSequence, { s: track.sequence }) }), visualModeEnabled && isExpanded ? (jsx_runtime_1.jsx("div", { style: getExpandedPlaceholderStyle(track.sequence.controls) })) : null] }, track.sequence.id));
})] }), hasBeenCut ? jsx_runtime_1.jsx(MaxTimelineTracks_1.MaxTimelineTracksReached, {}) : null] }));
};
exports.TimelineTracks = TimelineTracks;