@remotion/studio
Version:
APIs for interacting with the Remotion Studio
129 lines (128 loc) • 7.57 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
var desc = Object.getOwnPropertyDescriptor(m, k);
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
desc = { enumerable: true, get: function() { return m[k]; } };
}
Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || (function () {
var ownKeys = function(o) {
ownKeys = Object.getOwnPropertyNames || function (o) {
var ar = [];
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
return ar;
};
return ownKeys(o);
};
return function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
__setModuleDefault(result, mod);
return result;
};
})();
Object.defineProperty(exports, "__esModule", { value: true });
exports.Timeline = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const remotion_1 = require("remotion");
const calculate_timeline_1 = require("../../helpers/calculate-timeline");
const client_id_1 = require("../../helpers/client-id");
const colors_1 = require("../../helpers/colors");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const ExpandedTracksProvider_1 = require("../ExpandedTracksProvider");
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 is_collapsed_1 = require("./is-collapsed");
const MaxTimelineTracks_1 = require("./MaxTimelineTracks");
const timeline_refs_1 = require("./timeline-refs");
const TimelineDragHandler_1 = require("./TimelineDragHandler");
const TimelineInOutPointer_1 = require("./TimelineInOutPointer");
const TimelineList_1 = require("./TimelineList");
const TimelinePinchZoom_1 = require("./TimelinePinchZoom");
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 container = {
minHeight: '100%',
flex: 1,
display: 'flex',
height: 0,
overflowY: 'auto',
backgroundColor: colors_1.BACKGROUND,
};
const noop = () => undefined;
const TimelineInner = () => {
var _a;
const { sequences } = (0, react_1.useContext)(remotion_1.Internals.SequenceManager);
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 videoConfig = remotion_1.Internals.useUnsafeVideoConfig();
const videoConfigIsNull = videoConfig === null;
const timeline = (0, react_1.useMemo)(() => {
if (videoConfigIsNull) {
return [];
}
return (0, calculate_timeline_1.calculateTimeline)({
sequences,
});
}, [sequences, videoConfigIsNull]);
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) => {
var _a;
const isExpanded = visualModeEnabled && ((_a = expandedTracks[track.sequence.id]) !== null && _a !== void 0 ? _a : false);
return (acc +
(0, timeline_layout_1.getTimelineLayerHeight)(track.sequence.type) +
Number(timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM) +
(isExpanded
? (0, timeline_layout_1.getExpandedTrackHeight)(track.sequence.controls) +
timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM
: 0));
}, 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, expandedTracks, visualModeEnabled]);
return (jsx_runtime_1.jsx("div", { ref: timeline_refs_1.timelineVerticalScroll, style: container, className: 'css-reset ' + is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: jsx_runtime_1.jsxs(TimelineWidthProvider_1.TimelineWidthProvider, { children: [
jsx_runtime_1.jsx(TimelinePinchZoom_1.TimelinePinchZoom, {}), jsx_runtime_1.jsx("div", { style: inner, children: jsx_runtime_1.jsxs(SplitterContainer_1.SplitterContainer, { orientation: "vertical", defaultFlex: 0.2, id: "names-to-timeline", maxFlex: 0.5, minFlex: 0.15, children: [
jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "flexer", sticky: jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimePlaceholders, {}), children: jsx_runtime_1.jsx(TimelineList_1.TimelineList, { timeline: shown }) }), jsx_runtime_1.jsx(SplitterHandle_1.SplitterHandle, { onCollapse: noop, allowToCollapse: "none" }), jsx_runtime_1.jsx(SplitterElement_1.SplitterElement, { type: "anti-flexer", sticky: null, children: jsx_runtime_1.jsxs(TimelineScrollable_1.TimelineScrollable, { children: [
jsx_runtime_1.jsx(TimelineTracks_1.TimelineTracks, { timeline: shown, hasBeenCut: hasBeenCut }), jsx_runtime_1.jsx(TimelineInOutPointer_1.TimelineInOutPointer, {}), jsx_runtime_1.jsx(TimelinePlayCursorSyncer_1.TimelinePlayCursorSyncer, {}), jsx_runtime_1.jsx(TimelineDragHandler_1.TimelineDragHandler, {}), jsx_runtime_1.jsx(TimelineTimeIndicators_1.TimelineTimeIndicators, {}), jsx_runtime_1.jsx(TimelineSlider_1.TimelineSlider, {})
] }) })
] }) })
] }) }));
};
exports.Timeline = react_1.default.memo(TimelineInner);