init commit

remotion/node_modules/@remotion/studio/dist/components/VisualControls/ClickableFileName.d.ts

@@ -0,0 +1,13 @@
+import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
+export type OriginalFileNameState = {
+    type: 'loaded';
+    originalFileName: OriginalPosition;
+} | {
+    type: 'error';
+    error: Error;
+} | {
+    type: 'loading';
+};
+export declare const ClickableFileName: ({ originalFileName, }: {
+    readonly originalFileName: OriginalFileNameState;
+}) => import("react/jsx-runtime").JSX.Element;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/ClickableFileName.js

@@ -0,0 +1,43 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ClickableFileName = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const colors_1 = require("../../helpers/colors");
+const open_in_editor_1 = require("../../helpers/open-in-editor");
+const Fieldset_1 = require("../RenderModal/SchemaEditor/Fieldset");
+const source_attribution_1 = require("../Timeline/TimelineStack/source-attribution");
+const container = {
+    paddingLeft: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING,
+    paddingTop: Fieldset_1.SCHEMA_EDITOR_FIELDSET_PADDING / 2,
+};
+const ClickableFileName = ({ originalFileName, }) => {
+    const [titleHovered, setTitleHovered] = (0, react_1.useState)(false);
+    const hoverEffect = titleHovered && originalFileName.type === 'loaded';
+    const onTitlePointerEnter = (0, react_1.useCallback)(() => {
+        setTitleHovered(true);
+    }, []);
+    const onTitlePointerLeave = (0, react_1.useCallback)(() => {
+        setTitleHovered(false);
+    }, []);
+    const style = (0, react_1.useMemo)(() => {
+        return {
+            fontSize: 12,
+            cursor: originalFileName.type === 'loaded' ? 'pointer' : undefined,
+            borderBottom: hoverEffect ? '1px solid #fff' : 'none',
+            color: hoverEffect ? '#fff' : colors_1.LIGHT_COLOR,
+        };
+    }, [originalFileName, hoverEffect]);
+    const onClick = (0, react_1.useCallback)(async () => {
+        if (originalFileName.type !== 'loaded') {
+            return;
+        }
+        await (0, open_in_editor_1.openOriginalPositionInEditor)(originalFileName.originalFileName);
+    }, [originalFileName]);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)("span", { style: style, onClick: onClick, onPointerEnter: onTitlePointerEnter, onPointerLeave: onTitlePointerLeave, children: originalFileName.type === 'loaded'
+                ? (0, source_attribution_1.getOriginalSourceAttribution)(originalFileName.originalFileName)
+                : originalFileName.type === 'loading'
+                    ? 'Loading...'
+                    : 'Error loading' }) }));
+};
+exports.ClickableFileName = ClickableFileName;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlHandle.d.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { type VisualControlValue } from '../../visual-controls/VisualControls';
+export declare const VisualControlHandle: React.FC<{
+    readonly value: VisualControlValue;
+    readonly keyName: string;
+}>;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlHandle.js

@@ -0,0 +1,95 @@
+"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 VisualControls_1 = require("../../visual-controls/VisualControls");
+const get_current_edited_value_1 = require("../../visual-controls/get-current-edited-value");
+const NotificationCenter_1 = require("../Notifications/NotificationCenter");
+const ZodSwitch_1 = require("../RenderModal/SchemaEditor/ZodSwitch");
+const extract_enum_json_paths_1 = require("../RenderModal/SchemaEditor/extract-enum-json-paths");
+const local_state_1 = require("../RenderModal/SchemaEditor/local-state");
+const actions_1 = require("../RenderQueue/actions");
+const get_zod_if_possible_1 = require("../get-zod-if-possible");
+const layout_1 = require("../layout");
+const VisualControlHandleHeader_1 = require("./VisualControlHandleHeader");
+const get_original_stack_trace_1 = require("./get-original-stack-trace");
+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 { localValue, RevisionContextProvider, onChange } = (0, local_state_1.useLocalState)({
+        schema: value.schema,
+        setValue: (updater) => {
+            updateValue(keyName, updater(currentValue));
+            increaseManualRefreshes();
+        },
+        unsavedValue: currentValue,
+        savedValue: value.valueInCode,
+    });
+    const disableSave = window.remotion_isReadOnlyStudio || originalFileName.type !== 'loaded';
+    const onSave = (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: no_react_1.NoReactInternals.serializeJSONWithSpecialTypes({
+                            data: val,
+                            indent: 2,
+                            staticBase: window.remotion_staticBase,
+                        }).serializedString,
+                        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]);
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandleHeader_1.VisualControlHandleHeader, { originalFileName: originalFileName }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 0.5 }), (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: !disableSave, saving: saving, saveDisabledByParent: false, onSave: onSave, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) })] }));
+};
+exports.VisualControlHandle = VisualControlHandle;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlHandleHeader.d.ts

@@ -0,0 +1,4 @@
+import type { OriginalFileNameState } from './ClickableFileName';
+export declare const VisualControlHandleHeader: React.FC<{
+    readonly originalFileName: OriginalFileNameState;
+}>;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlHandleHeader.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlHandleHeader = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const ClickableFileName_1 = require("./ClickableFileName");
+const VisualControlHandleHeader = ({ originalFileName }) => {
+    return (0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { originalFileName: originalFileName });
+};
+exports.VisualControlHandleHeader = VisualControlHandleHeader;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlsContent.d.ts

@@ -0,0 +1 @@
+export declare const VisualControlsContent: () => import("react/jsx-runtime").JSX.Element;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/VisualControlsContent.js

@@ -0,0 +1,53 @@
+"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.VisualControlsContent = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = __importStar(require("react"));
+const VisualControls_1 = require("../../visual-controls/VisualControls");
+const is_menu_item_1 = require("../Menu/is-menu-item");
+const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
+const VisualControlHandle_1 = require("./VisualControlHandle");
+const container = {
+    overflowY: 'auto',
+};
+const VisualControlsContent = () => {
+    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
+    const entries = Object.entries(handles);
+    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: entries.map(([key, value], i) => {
+            return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [(0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value }), i === entries.length - 1 ? null : (0, jsx_runtime_1.jsx)(SchemaSeparationLine_1.SchemaSeparationLine, {})] }, key));
+        }) }));
+};
+exports.VisualControlsContent = VisualControlsContent;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/get-original-stack-trace.d.ts

@@ -0,0 +1,2 @@
+import type { OriginalFileNameState } from './ClickableFileName';
+export declare const useOriginalFileName: (stack: string) => OriginalFileNameState;

remotion/node_modules/@remotion/studio/dist/components/VisualControls/get-original-stack-trace.js

@@ -0,0 +1,31 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useOriginalFileName = void 0;
+const react_1 = require("react");
+const get_stack_1 = require("../Timeline/TimelineStack/get-stack");
+const useOriginalFileName = (stack) => {
+    const [originalFileName, setOriginalFileName] = (0, react_1.useState)({ type: 'loading' });
+    (0, react_1.useEffect)(() => {
+        if (!stack) {
+            return;
+        }
+        (0, get_stack_1.getOriginalLocationFromStack)(stack, 'visual-control')
+            .then((frame) => {
+            if (frame === null) {
+                setOriginalFileName({
+                    type: 'error',
+                    error: new Error('No frame found'),
+                });
+            }
+            else {
+                setOriginalFileName({ type: 'loaded', originalFileName: frame });
+            }
+        })
+            .catch((err) => {
+            // eslint-disable-next-line no-console
+            console.error('Could not get original location of Sequence', err);
+        });
+    }, [stack]);
+    return originalFileName;
+};
+exports.useOriginalFileName = useOriginalFileName;