@remotion/studio
Version:
APIs for interacting with the Remotion Studio
54 lines (53 loc) • 2.52 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineListItem = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const colors_1 = require("../../helpers/colors");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const TimelineLayerEye_1 = require("./TimelineLayerEye");
const TimelineStack_1 = require("./TimelineStack");
const SPACING = 5;
const space = {
width: SPACING,
flexShrink: 0,
};
const TimelineListItem = ({ nestedDepth, sequence, isCompact }) => {
const { hidden, setHidden } = (0, react_1.useContext)(remotion_1.Internals.SequenceVisibilityToggleContext);
const padder = (0, react_1.useMemo)(() => {
return {
width: Number(SPACING * 1.5) * nestedDepth,
flexShrink: 0,
};
}, [nestedDepth]);
const isItemHidden = (0, react_1.useMemo)(() => {
var _a;
return (_a = hidden[sequence.id]) !== null && _a !== void 0 ? _a : false;
}, [hidden, sequence.id]);
const onToggleVisibility = (0, react_1.useCallback)((type) => {
setHidden((prev) => {
return {
...prev,
[sequence.id]: type !== 'enable',
};
});
}, [sequence.id, setHidden]);
const outer = (0, react_1.useMemo)(() => {
return {
height: (0, timeline_layout_1.getTimelineLayerHeight)(sequence.type === 'video' ? 'video' : 'other') +
timeline_layout_1.TIMELINE_ITEM_BORDER_BOTTOM,
color: 'white',
fontFamily: 'Arial, Helvetica, sans-serif',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
wordBreak: 'break-all',
textAlign: 'left',
paddingLeft: SPACING,
borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
};
}, [sequence.type]);
return ((0, jsx_runtime_1.jsxs)("div", { style: outer, children: [(0, jsx_runtime_1.jsx)(TimelineLayerEye_1.TimelineLayerEye, { type: sequence.type === 'audio' ? 'speaker' : 'eye', hidden: isItemHidden, onInvoked: onToggleVisibility }), (0, jsx_runtime_1.jsx)("div", { style: padder }), sequence.parent && nestedDepth > 0 ? (0, jsx_runtime_1.jsx)("div", { style: space }) : null, (0, jsx_runtime_1.jsx)(TimelineStack_1.TimelineStack, { sequence: sequence, isCompact: isCompact })] }));
};
exports.TimelineListItem = TimelineListItem;