@remotion/studio
Version:
APIs for interacting with the Remotion Studio
92 lines (91 loc) • 3.61 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.OverrideInputPropsModal = 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 modals_1 = require("../state/modals");
const Button_1 = require("./Button");
const layout_1 = require("./layout");
const DismissableModal_1 = require("./NewComposition/DismissableModal");
const RemTextarea_1 = require("./NewComposition/RemTextarea");
const style = {
padding: 12,
width: 500,
};
const label = {
color: colors_1.LIGHT_TEXT,
fontSize: 14,
marginBottom: 10,
};
const textAreaStyle = {
fontFamily: 'monospace',
minHeight: 200,
};
const codeSnippet = {
fontSize: 14,
color: colors_1.BLUE,
fontFamily: 'monospace',
};
const row = {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
justifyContent: 'space-between',
};
const isValidJSON = (value) => {
try {
JSON.parse(value);
return true;
}
catch (_a) {
return false;
}
};
const Inner = () => {
const [value, setValue] = (0, react_1.useState)(() => {
const override = remotion_1.Internals.getInputPropsOverride();
if (override) {
return JSON.stringify(override, null, 2);
}
return null;
});
const { setSelectedModal } = (0, react_1.useContext)(modals_1.ModalsContext);
const valid = (0, react_1.useMemo)(() => {
if (!value)
return true;
return isValidJSON(value);
}, [value]);
const onChange = (0, react_1.useCallback)((newValue) => {
if (newValue.trim() === '') {
setValue(null);
remotion_1.Internals.setInputPropsOverride(null);
return;
}
setValue(newValue);
if (!isValidJSON(newValue)) {
return;
}
remotion_1.Internals.setInputPropsOverride(JSON.parse(newValue));
}, [setValue]);
const onReset = (0, react_1.useCallback)(() => {
onChange('');
}, [onChange]);
const onReloadPage = (0, react_1.useCallback)(() => {
window.location.reload();
}, []);
const onDone = (0, react_1.useCallback)(() => {
setSelectedModal(null);
}, [setSelectedModal]);
return (jsx_runtime_1.jsxs("div", { style: style, children: [
jsx_runtime_1.jsxs("div", { style: label, children: ["Enter a valid JSON to override the value that", ' ', jsx_runtime_1.jsx("code", { style: codeSnippet, children: "getInputProps()" }),
" returns to preview a composition with different props. The Studio must be reloaded to see the changes."] }), jsx_runtime_1.jsx(RemTextarea_1.RemTextarea, { onChange: (e) => onChange(e.target.value), value: value !== null && value !== void 0 ? value : '', status: valid ? 'ok' : 'error', style: textAreaStyle }), jsx_runtime_1.jsxs("div", { style: row, children: [
jsx_runtime_1.jsx(Button_1.Button, { onClick: onReset, children: "Reset" }), jsx_runtime_1.jsx(layout_1.Spacing, { x: 0.5 }), jsx_runtime_1.jsx(Button_1.Button, { onClick: onReloadPage, children: "Reload page" }), jsx_runtime_1.jsx(layout_1.Flex, {}), jsx_runtime_1.jsx(Button_1.Button, { onClick: onDone, children: "Done" })
] })
] }));
};
const OverrideInputPropsModal = () => {
return (jsx_runtime_1.jsx(DismissableModal_1.DismissableModal, { children: jsx_runtime_1.jsx(Inner, {}) }));
};
exports.OverrideInputPropsModal = OverrideInputPropsModal;