init commit

remotion/node_modules/@remotion/studio/dist/components/OverrideInputProps.js

@@ -0,0 +1,86 @@
+"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 DismissableModal_1 = require("./NewComposition/DismissableModal");
+const RemTextarea_1 = require("./NewComposition/RemTextarea");
+const layout_1 = require("./layout");
+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 ((0, jsx_runtime_1.jsxs)("div", { style: style, children: [(0, jsx_runtime_1.jsxs)("div", { style: label, children: ["Enter a valid JSON to override the value that", ' ', (0, 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."] }), (0, 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 }), (0, jsx_runtime_1.jsxs)("div", { style: row, children: [(0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onReset, children: "Reset" }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { x: 0.5 }), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onReloadPage, children: "Reload page" }), (0, jsx_runtime_1.jsx)(layout_1.Flex, {}), (0, jsx_runtime_1.jsx)(Button_1.Button, { onClick: onDone, children: "Done" })] })] }));
+};
+const OverrideInputPropsModal = () => {
+    return ((0, jsx_runtime_1.jsx)(DismissableModal_1.DismissableModal, { children: (0, jsx_runtime_1.jsx)(Inner, {}) }));
+};
+exports.OverrideInputPropsModal = OverrideInputPropsModal;