@remotion/studio
Version:
APIs for interacting with the Remotion Studio
95 lines (94 loc) • 4.24 kB
JavaScript
;
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.TimelineExpandedSection = exports.EXPANDED_SECTION_PADDING_RIGHT = exports.EXPANDED_SECTION_PADDING_LEFT = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const colors_1 = require("../../helpers/colors");
const timeline_layout_1 = require("../../helpers/timeline-layout");
const TimelineFieldRow_1 = require("./TimelineFieldRow");
exports.EXPANDED_SECTION_PADDING_LEFT = 28;
exports.EXPANDED_SECTION_PADDING_RIGHT = 10;
const expandedSectionBase = {
color: 'white',
fontFamily: 'Arial, Helvetica, sans-serif',
fontSize: 12,
display: 'flex',
flexDirection: 'column',
borderBottom: `1px solid ${colors_1.TIMELINE_TRACK_SEPARATOR}`,
};
const separator = {
height: 1,
backgroundColor: colors_1.TIMELINE_TRACK_SEPARATOR,
};
const TimelineExpandedSection = ({ sequence, originalLocation, nestedDepth, nodePath }) => {
var _a;
var _b;
const overrideId = (_b = (_a = sequence.controls) === null || _a === void 0 ? void 0 : _a.overrideId) !== null && _b !== void 0 ? _b : sequence.id;
const schemaFields = (0, react_1.useMemo)(() => (0, timeline_layout_1.getSchemaFields)(sequence.controls), [sequence.controls]);
const validatedLocation = (0, react_1.useMemo)(() => {
var _a;
if (!originalLocation ||
!originalLocation.source ||
!originalLocation.line) {
return null;
}
return {
source: originalLocation.source,
line: originalLocation.line,
column: (_a = originalLocation.column) !== null && _a !== void 0 ? _a : 0,
};
}, [originalLocation]);
const expandedHeight = (0, react_1.useMemo)(() => (0, timeline_layout_1.getExpandedTrackHeight)(sequence.controls), [sequence.controls]);
const style = (0, react_1.useMemo)(() => {
return {
...expandedSectionBase,
height: expandedHeight,
};
}, [expandedHeight]);
const keysToObserve = (0, react_1.useMemo)(() => {
if (!schemaFields) {
return [];
}
return schemaFields.map((f) => f.key);
}, [schemaFields]);
return (jsx_runtime_1.jsx("div", { style: style, children: schemaFields
? schemaFields.map((field, i) => {
return (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [i > 0 ? jsx_runtime_1.jsx("div", { style: separator }) : null, jsx_runtime_1.jsx(TimelineFieldRow_1.TimelineFieldRow, { field: field, overrideId: overrideId, validatedLocation: validatedLocation, nestedDepth: nestedDepth, nodePath: nodePath, keysToObserve: keysToObserve })
] }, field.key));
})
: 'No schema' }));
};
exports.TimelineExpandedSection = TimelineExpandedSection;