@remotion/studio
Version:
APIs for interacting with the Remotion Studio
230 lines (229 loc) • 9.98 kB
JavaScript
"use strict";
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.DataEditor = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
const react_1 = __importStar(require("react"));
const remotion_1 = require("remotion");
const no_react_1 = require("remotion/no-react");
const client_id_1 = require("../../helpers/client-id");
const colors_1 = require("../../helpers/colors");
const get_zod_if_possible_1 = require("../get-zod-if-possible");
const layout_1 = require("../layout");
const ValidationMessage_1 = require("../NewComposition/ValidationMessage");
const SegmentedControl_1 = require("../SegmentedControl");
const get_render_modal_warnings_1 = require("./get-render-modal-warnings");
const RenderModalJSONPropsEditor_1 = require("./RenderModalJSONPropsEditor");
const SchemaEditor_1 = require("./SchemaEditor/SchemaEditor");
const SchemaErrorMessages_1 = require("./SchemaEditor/SchemaErrorMessages");
const zod_schema_type_1 = require("./SchemaEditor/zod-schema-type");
const WarningIndicatorButton_1 = require("./WarningIndicatorButton");
const errorExplanation = {
fontSize: 14,
color: colors_1.LIGHT_TEXT,
fontFamily: 'sans-serif',
lineHeight: 1.5,
};
const explainer = {
display: 'flex',
flex: 1,
flexDirection: 'column',
padding: '0 12px',
justifyContent: 'center',
alignItems: 'center',
textAlign: 'center',
};
const outer = {
display: 'flex',
flexDirection: 'column',
flex: 1,
overflow: 'hidden',
backgroundColor: colors_1.BACKGROUND,
};
const controlContainer = {
flexDirection: 'column',
display: 'flex',
padding: 12,
borderBottom: `1px solid ${colors_1.BORDER_COLOR}`,
};
const tabWrapper = {
display: 'flex',
marginBottom: '4px',
flexDirection: 'row',
alignItems: 'center',
};
const persistanceKey = 'remotion.show-render-modalwarning';
const getPersistedShowWarningState = () => {
const val = localStorage.getItem(persistanceKey);
if (!val) {
return true;
}
return val === 'true';
};
const setPersistedShowWarningState = (val) => {
localStorage.setItem(persistanceKey, String(Boolean(val)));
};
const DataEditor = ({ unresolvedComposition, defaultProps, setDefaultProps, propsEditType, canSaveDefaultProps, }) => {
const [mode, setMode] = (0, react_1.useState)('schema');
const [showWarning, setShowWarningWithoutPersistance] = (0, react_1.useState)(() => getPersistedShowWarningState());
const jsonEditorSetValue = (0, react_1.useCallback)((newProps) => {
setDefaultProps(typeof newProps === 'function' ? newProps : () => newProps, { shouldSave: false });
}, [setDefaultProps]);
const onSave = (0, react_1.useCallback)(() => {
setDefaultProps((p) => p, { shouldSave: true });
}, [setDefaultProps]);
const inJSONEditor = mode === 'json';
const serializedJSON = (0, react_1.useMemo)(() => {
if (!inJSONEditor) {
return null;
}
const value = defaultProps;
return no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
data: value,
indent: 2,
staticBase: window.remotion_staticBase,
});
}, [inJSONEditor, defaultProps]);
const cliProps = (0, remotion_1.getInputProps)();
const z = (0, get_zod_if_possible_1.useZodIfPossible)();
const schema = (0, react_1.useMemo)(() => {
if (!z) {
return 'no-zod';
}
if (!unresolvedComposition.schema) {
return 'no-schema';
}
if (!(typeof unresolvedComposition.schema
.safeParse === 'function')) {
throw new Error('A value which is not a Zod schema was passed to `schema`');
}
return unresolvedComposition.schema;
}, [unresolvedComposition.schema, z]);
const zodValidationResult = (0, react_1.useMemo)(() => {
if (schema === 'no-zod') {
return 'no-zod';
}
if (schema === 'no-schema') {
return 'no-schema';
}
return (0, zod_schema_type_1.zodSafeParse)(schema, defaultProps);
}, [defaultProps, schema]);
const setShowWarning = (0, react_1.useCallback)((val) => {
setShowWarningWithoutPersistance((prevVal) => {
if (typeof val === 'boolean') {
setPersistedShowWarningState(val);
return val;
}
setPersistedShowWarningState(val(prevVal));
return val(prevVal);
});
}, []);
const { previewServerState } = (0, react_1.useContext)(client_id_1.StudioServerConnectionCtx);
const modeItems = (0, react_1.useMemo)(() => {
return [
{
key: 'schema',
label: 'Schema',
onClick: () => {
setMode('schema');
},
selected: mode === 'schema',
},
{
key: 'json',
label: 'JSON',
onClick: () => {
setMode('json');
},
selected: mode === 'json',
},
];
}, [mode]);
const connectionStatus = previewServerState.type;
const warnings = (0, react_1.useMemo)(() => {
return (0, get_render_modal_warnings_1.getRenderModalWarnings)({
canSaveDefaultProps,
cliProps,
isCustomDateUsed: serializedJSON ? serializedJSON.customDateUsed : false,
customFileUsed: serializedJSON ? serializedJSON.customFileUsed : false,
inJSONEditor,
propsEditType,
jsMapUsed: serializedJSON ? serializedJSON.mapUsed : false,
jsSetUsed: serializedJSON ? serializedJSON.setUsed : false,
});
}, [
cliProps,
canSaveDefaultProps,
inJSONEditor,
propsEditType,
serializedJSON,
]);
if (connectionStatus === 'disconnected') {
return (jsx_runtime_1.jsxs("div", { style: explainer, children: [
jsx_runtime_1.jsx(layout_1.Spacing, { y: 5 }), jsx_runtime_1.jsx("div", { style: errorExplanation, children: "The studio server has disconnected. Reconnect to edit the schema." }), jsx_runtime_1.jsx(layout_1.Spacing, { y: 2, block: true })
] }));
}
if (schema === 'no-zod') {
return jsx_runtime_1.jsx(SchemaErrorMessages_1.ZodNotInstalled, {});
}
if (schema === 'no-schema') {
return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
}
if (!z) {
throw new Error('expected zod');
}
if (zodValidationResult === 'no-zod') {
throw new Error('expected zod');
}
if (zodValidationResult === 'no-schema') {
throw new Error('expected schema');
}
const typeName = (0, zod_schema_type_1.getZodSchemaType)(schema);
if (typeName === 'any') {
return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoSchemaDefined, {});
}
if (!unresolvedComposition.defaultProps) {
return jsx_runtime_1.jsx(SchemaErrorMessages_1.NoDefaultProps, {});
}
return (jsx_runtime_1.jsxs("div", { style: outer, children: [
jsx_runtime_1.jsxs("div", { style: controlContainer, children: [
jsx_runtime_1.jsxs("div", { style: tabWrapper, children: [
jsx_runtime_1.jsx(SegmentedControl_1.SegmentedControl, { items: modeItems, needsWrapping: false }), jsx_runtime_1.jsx(layout_1.Flex, {}), warnings.length > 0 ? (jsx_runtime_1.jsx(WarningIndicatorButton_1.WarningIndicatorButton, { setShowWarning: setShowWarning, showWarning: showWarning, warningCount: warnings.length })) : null] }), showWarning && warnings.length > 0
? warnings.map((warning) => (jsx_runtime_1.jsxs(react_1.default.Fragment, { children: [
jsx_runtime_1.jsx(layout_1.Spacing, { y: 1 }), jsx_runtime_1.jsx(ValidationMessage_1.ValidationMessage, { message: warning, align: "flex-start", type: "warning" })
] }, warning)))
: null] }), mode === 'schema' ? (jsx_runtime_1.jsx(SchemaEditor_1.SchemaEditor, { value: defaultProps, setValue: setDefaultProps, schema: schema })) : (jsx_runtime_1.jsx(RenderModalJSONPropsEditor_1.RenderModalJSONPropsEditor, { value: defaultProps !== null && defaultProps !== void 0 ? defaultProps : {}, setValue: jsonEditorSetValue, onSave: onSave, serializedJSON: serializedJSON, defaultProps: unresolvedComposition.defaultProps, schema: schema, compositionId: unresolvedComposition.id }))] }));
};
exports.DataEditor = DataEditor;