@remotion/studio
Version:
APIs for interacting with the Remotion Studio
98 lines (97 loc) • 4.63 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.VisualControlHandle = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = require("react");
const no_react_1 = require("remotion/no-react");
const fast_refresh_context_1 = require("../../fast-refresh-context");
const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
const VisualControls_1 = require("../../visual-controls/VisualControls");
const get_zod_if_possible_1 = require("../get-zod-if-possible");
const layout_1 = require("../layout");
const NotificationCenter_1 = require("../Notifications/NotificationCenter");
const extract_enum_json_paths_1 = require("../RenderModal/SchemaEditor/extract-enum-json-paths");
const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
const actions_1 = require("../RenderQueue/actions");
const get_original_stack_trace_1 = require("./get-original-stack-trace");
const VisualControlHandleHeader_1 = require("./VisualControlHandleHeader");
const VisualControlHandle = ({ value, keyName }) => {
const z = (0, get_zod_if_possible_1.useZodIfPossible)();
if (!z) {
throw new Error('expected zod');
}
const zodTypes = (0, get_zod_if_possible_1.useZodTypesIfPossible)();
const state = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
const { updateValue } = (0, react_1.useContext)(VisualControls_1.SetVisualControlsContext);
const { fastRefreshes, increaseManualRefreshes } = (0, react_1.useContext)(fast_refresh_context_1.FastRefreshContext);
const [_saving, setSaving] = (0, react_1.useState)(false);
const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
handles: state.handles,
key: keyName,
});
const originalFileName = (0, get_original_stack_trace_1.useOriginalFileName)(value.stack);
const disableSave = window.remotion_isReadOnlyStudio || originalFileName.type !== 'loaded';
const saveToFile = (0, react_1.useCallback)((updater) => {
if (disableSave) {
return;
}
if (originalFileName.type !== 'loaded') {
throw new Error('Original file name is not loaded');
}
const val = updater(value.valueInCode);
window.remotion_ignoreFastRefreshUpdate = fastRefreshes + 1;
const enumPaths = (0, extract_enum_json_paths_1.extractEnumJsonPaths)({
schema: value.schema,
zodRuntime: z,
currentPath: [],
zodTypes,
});
setSaving(true);
Promise.resolve()
.then(() => {
return (0, actions_1.applyVisualControlChange)({
fileName: originalFileName.originalFileName.source,
changes: [
{
id: keyName,
newValueSerialized: val === undefined
? ''
: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
data: val,
indent: 2,
staticBase: window.remotion_staticBase,
}).serializedString,
newValueIsUndefined: val === undefined,
enumPaths,
},
],
});
})
.catch((e) => {
(0, NotificationCenter_1.showNotification)(`Could not save visual control: ${e.message}`, 3000);
});
}, [
disableSave,
value.valueInCode,
value.schema,
fastRefreshes,
z,
originalFileName,
keyName,
zodTypes,
]);
(0, react_1.useEffect)(() => {
setSaving(false);
}, [fastRefreshes]);
const setValue = (0, react_1.useCallback)((updater, { shouldSave }) => {
updateValue(keyName, updater(currentValue));
increaseManualRefreshes();
if (shouldSave) {
saveToFile(updater);
}
}, [currentValue, increaseManualRefreshes, keyName, saveToFile, updateValue]);
return (jsx_runtime_1.jsxs(jsx_runtime_1.Fragment, { children: [
jsx_runtime_1.jsx(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), jsx_runtime_1.jsx(layout_1.Spacing, { block: true, y: 0.5 }), jsx_runtime_1.jsx(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, jsonPath: [keyName], value: currentValue, setValue: setValue, onRemove: null })
] }));
};
exports.VisualControlHandle = VisualControlHandle;