@remotion/studio
Version:
APIs for interacting with the Remotion Studio
106 lines (105 loc) • 4.8 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimelineFieldRow = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const remotion_1 = require("remotion");
const call_api_1 = require("../call-api");
const TimelineExpandedSection_1 = require("./TimelineExpandedSection");
const TimelineListItem_1 = require("./TimelineListItem");
const TimelineSchemaField_1 = require("./TimelineSchemaField");
const FIELD_ROW_PADDING_LEFT = 24;
const fieldRowBase = {
display: 'flex',
alignItems: 'center',
gap: 8,
paddingRight: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_RIGHT,
};
const fieldName = {
fontSize: 12,
color: 'rgba(255, 255, 255, 0.8)',
userSelect: 'none',
};
const fieldLabelRow = {
flex: '0 0 50%',
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
gap: 6,
};
const TimelineFieldRow = ({ field, overrideId, validatedLocation, nestedDepth, nodePath, keysToObserve, }) => {
var _a, _b, _c, _d;
const { setDragOverrides, clearDragOverrides, dragOverrides, codeValues: allPropStatuses, } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
const propStatuses = ((_a = allPropStatuses[overrideId]) !== null && _a !== void 0 ? _a : null);
const propStatus = (_b = propStatuses === null || propStatuses === void 0 ? void 0 : propStatuses[field.key]) !== null && _b !== void 0 ? _b : null;
const dragOverrideValue = (0, react_1.useMemo)(() => {
var _a;
return ((_a = dragOverrides[overrideId]) !== null && _a !== void 0 ? _a : {})[field.key];
}, [dragOverrides, overrideId, field.key]);
const effectiveValue = remotion_1.Internals.getEffectiveVisualModeValue({
codeValue: propStatus,
runtimeValue: field.currentValue,
dragOverrideValue,
defaultValue: field.fieldSchema.default,
shouldResortToDefaultValueIfUndefined: true,
});
const { setCodeValues } = (0, react_1.useContext)(remotion_1.Internals.VisualModeOverridesContext);
const onSave = (0, react_1.useCallback)((key, value) => {
if (!propStatuses || !validatedLocation || !nodePath) {
return Promise.reject(new Error('Cannot save'));
}
const status = propStatuses[key];
if (!status || !status.canUpdate) {
return Promise.reject(new Error('Cannot save'));
}
const defaultValue = field.fieldSchema.default !== undefined
? JSON.stringify(field.fieldSchema.default)
: null;
return (0, call_api_1.callApi)('/api/save-sequence-props', {
fileName: validatedLocation.source,
nodePath,
key,
value: JSON.stringify(value),
defaultValue,
observedKeys: keysToObserve,
}).then((data) => {
if (data.success) {
if (data.newStatus.canUpdate) {
setCodeValues(overrideId, data.newStatus.props);
}
else {
setCodeValues(overrideId, null);
}
return;
}
return Promise.reject(new Error(data.reason));
});
}, [
field.fieldSchema.default,
keysToObserve,
nodePath,
overrideId,
propStatuses,
setCodeValues,
validatedLocation,
]);
const onDragValueChange = (0, react_1.useCallback)((key, value) => {
setDragOverrides(overrideId, key, value);
}, [setDragOverrides, overrideId]);
const onDragEnd = (0, react_1.useCallback)(() => {
clearDragOverrides(overrideId);
}, [clearDragOverrides, overrideId]);
const style = (0, react_1.useMemo)(() => {
return {
...fieldRowBase,
height: field.rowHeight,
paddingLeft: TimelineExpandedSection_1.EXPANDED_SECTION_PADDING_LEFT +
FIELD_ROW_PADDING_LEFT +
TimelineListItem_1.SPACING * 3 * nestedDepth,
};
}, [field.rowHeight, nestedDepth]);
return (jsx_runtime_1.jsxs("div", { style: style, children: [
jsx_runtime_1.jsx("div", { style: fieldLabelRow, children: jsx_runtime_1.jsx("span", { style: fieldName, children: (_c = field.description) !== null && _c !== void 0 ? _c : field.key }) }), jsx_runtime_1.jsx(TimelineSchemaField_1.TimelineFieldValue, { field: field, propStatus: propStatus, onSave: onSave, onDragValueChange: onDragValueChange, onDragEnd: onDragEnd, canUpdate: (_d = propStatus === null || propStatus === void 0 ? void 0 : propStatus.canUpdate) !== null && _d !== void 0 ? _d : false, effectiveValue: effectiveValue, codeValue: propStatus })
] }));
};
exports.TimelineFieldRow = TimelineFieldRow;