@remotion/studio 4.0.291 → 4.0.292

package/dist/components/VisualControls/VisualControlHandle.js

@@ -3,32 +3,94 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.VisualControlHandle = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
+const remotion_1 = require("remotion");
+const no_react_1 = require("remotion/no-react");
 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 container = {
-    marginBottom: 10,
-};
-const VisualControlHandle = ({ value, keyName, hook }) => {
+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 } = (0, react_1.useContext)(remotion_1.Internals.NonceContext);
+    const { increaseManualRefreshes } = (0, react_1.useContext)(remotion_1.Internals.SetNonceContext);
+    const [saving, setSaving] = (0, react_1.useState)(false);
     const currentValue = (0, get_current_edited_value_1.getVisualControlEditedValue)({
         handles: state.handles,
-        hook,
         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(hook, keyName, updater(currentValue)),
+        setValue: (updater) => {
+            updateValue(keyName, updater(currentValue));
+            increaseManualRefreshes();
+        },
         unsavedValue: currentValue,
         savedValue: value.valueInCode,
     });
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, children: (0, jsx_runtime_1.jsx)(RevisionContextProvider, { children: (0, jsx_runtime_1.jsx)(ZodSwitch_1.ZodSwitch, { mayPad: true, schema: value.schema, showSaveButton: true, saving: false, saveDisabledByParent: false, onSave: () => undefined, jsonPath: [keyName], value: localValue.value, defaultValue: value.valueInCode, setValue: onChange, onRemove: null }) }) }));
+    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;

package/dist/components/VisualControls/VisualControlHandleHeader.d.ts

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

package/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;

package/dist/components/VisualControls/VisualControlsContent.js

@@ -1,29 +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 = require("react");
+const react_1 = __importStar(require("react"));
 const VisualControls_1 = require("../../visual-controls/VisualControls");
-const layout_1 = require("../layout");
 const is_menu_item_1 = require("../Menu/is-menu-item");
-const ClickableFileName_1 = require("./ClickableFileName");
+const SchemaSeparationLine_1 = require("../RenderModal/SchemaEditor/SchemaSeparationLine");
 const VisualControlHandle_1 = require("./VisualControlHandle");
-const Control = ({ hook }) => {
-    const { handles } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    const handle = handles[hook.id];
-    if (!handle) {
-        return null;
-    }
-    return ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)(ClickableFileName_1.ClickableFileName, { stack: hook.stack }), (0, jsx_runtime_1.jsx)(layout_1.Spacing, { block: true, y: 1 }), Object.entries(handle).map(([key, value]) => {
-                return ((0, jsx_runtime_1.jsx)(VisualControlHandle_1.VisualControlHandle, { keyName: key, value: value, hook: hook }, key));
-            })] }, hook.id));
-};
 const container = {
-    padding: 12,
     overflowY: 'auto',
 };
 const VisualControlsContent = () => {
-    const { hooks: controls } = (0, react_1.useContext)(VisualControls_1.VisualControlsContext);
-    return ((0, jsx_runtime_1.jsx)("div", { style: container, className: is_menu_item_1.VERTICAL_SCROLLBAR_CLASSNAME, children: controls.map((hook) => ((0, jsx_runtime_1.jsx)(Control, { hook: hook }, hook.id))) }));
+    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;

package/dist/components/VisualControls/get-original-stack-trace.d.ts

@@ -1,2 +1,2 @@
-import type { OriginalPosition } from '../../error-overlay/react-overlay/utils/get-source-map';
-export declare const useOriginalFileName: (stack: string) => OriginalPosition | null;
+import type { OriginalFileNameState } from './ClickableFileName';
+export declare const useOriginalFileName: (stack: string) => OriginalFileNameState;

package/dist/components/VisualControls/get-original-stack-trace.js

@@ -4,14 +4,22 @@ 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)(null);
+    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) => {
-            setOriginalFileName(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

package/dist/esm/index.mjs

@@ -202,7 +202,12 @@ var restartStudio = () => {
 import { getRemotionEnvironment as getRemotionEnvironment4 } from "remotion";
 
 // src/components/RenderModal/SchemaEditor/extract-enum-json-paths.ts
-var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
+var extractEnumJsonPaths = ({
+  schema,
+  zodRuntime,
+  currentPath,
+  zodTypes
+}) => {
   const def = schema._def;
   const typeName = def.typeName;
   switch (typeName) {
@@ -210,45 +215,87 @@ var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
       const shape = def.shape();
       const keys = Object.keys(shape);
       return keys.map((key) => {
-        return extractEnumJsonPaths(shape[key], zodRuntime, [
-          ...currentPath,
-          key
-        ]);
+        return extractEnumJsonPaths({
+          schema: shape[key],
+          zodRuntime,
+          currentPath: [...currentPath, key],
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodArray: {
-      return extractEnumJsonPaths(def.type, zodRuntime, [
-        ...currentPath,
-        "[]"
-      ]);
+      return extractEnumJsonPaths({
+        schema: def.type,
+        zodRuntime,
+        currentPath: [...currentPath, "[]"],
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodUnion: {
       return def.options.map((option) => {
-        return extractEnumJsonPaths(option, zodRuntime, currentPath);
+        return extractEnumJsonPaths({
+          schema: option,
+          zodRuntime,
+          currentPath,
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodDiscriminatedUnion: {
       return def.options.map((op) => {
-        return extractEnumJsonPaths(op, zodRuntime, currentPath);
+        return extractEnumJsonPaths({
+          schema: op,
+          zodRuntime,
+          currentPath,
+          zodTypes
+        });
       }).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodLiteral: {
       return [currentPath];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodEffects: {
-      return extractEnumJsonPaths(def.schema, zodRuntime, currentPath);
+      if (zodTypes && schema._def.description === zodTypes.ZodZypesInternals.REMOTION_MATRIX_BRAND) {
+        return [currentPath];
+      }
+      return extractEnumJsonPaths({
+        schema: def.schema,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodIntersection: {
       const { left, right } = def;
-      const leftValue = extractEnumJsonPaths(left, zodRuntime, currentPath);
-      const rightValue = extractEnumJsonPaths(right, zodRuntime, currentPath);
+      const leftValue = extractEnumJsonPaths({
+        schema: left,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
+      const rightValue = extractEnumJsonPaths({
+        schema: right,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return [...leftValue, ...rightValue];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodTuple: {
-      return def.items.map((item, i) => extractEnumJsonPaths(item, zodRuntime, [...currentPath, i])).flat(1);
+      return def.items.map((item, i) => extractEnumJsonPaths({
+        schema: item,
+        zodRuntime,
+        currentPath: [...currentPath, i],
+        zodTypes
+      })).flat(1);
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodRecord: {
-      const values = extractEnumJsonPaths(def.valueType, zodRuntime, [...currentPath, "{}"]);
+      const values = extractEnumJsonPaths({
+        schema: def.valueType,
+        zodRuntime,
+        currentPath: [...currentPath, "{}"],
+        zodTypes
+      });
       return values;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodFunction: {
@@ -262,33 +309,63 @@ var extractEnumJsonPaths = (schema, zodRuntime, currentPath) => {
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodOptional: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodNullable: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodDefault: {
       const defType = def;
-      return extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      return extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodCatch: {
       const defType = def;
-      return extractEnumJsonPaths(defType.innerType, zodRuntime, currentPath);
+      return extractEnumJsonPaths({
+        schema: defType.innerType,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodPromise: {
       return [];
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodBranded: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.type, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.type,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodPipeline: {
       const defType = def;
-      const value = extractEnumJsonPaths(defType.out, zodRuntime, currentPath);
+      const value = extractEnumJsonPaths({
+        schema: defType.out,
+        zodRuntime,
+        currentPath,
+        zodTypes
+      });
       return value;
     }
     case zodRuntime.ZodFirstPartyTypeKind.ZodString:
@@ -319,7 +396,7 @@ import { NoReactInternals } from "remotion/no-react";
 var callUpdateDefaultPropsApi = (compositionId, defaultProps, enumPaths) => {
   return callApi("/api/update-default-props", {
     compositionId,
-    defaultProps: NoReactInternals.serializeJSONWithDate({
+    defaultProps: NoReactInternals.serializeJSONWithSpecialTypes({
       data: defaultProps,
       indent: undefined,
       staticBase: window.remotion_staticBase
@@ -345,8 +422,17 @@ var saveDefaultProps = async ({
     throw new Error('"zod" is required to use saveDefaultProps(), but is not installed.');
   }
   const z = await import("zod");
+  let zodTypes = null;
+  try {
+    zodTypes = await import("@remotion/zod-types");
+  } catch {}
   const { generatedDefaultProps, composition } = calcNewProps(compositionId, defaultProps);
-  const res = await callUpdateDefaultPropsApi(compositionId, generatedDefaultProps, composition.schema ? extractEnumJsonPaths(composition.schema, z, []) : []);
+  const res = await callUpdateDefaultPropsApi(compositionId, generatedDefaultProps, composition.schema ? extractEnumJsonPaths({
+    schema: composition.schema,
+    zodRuntime: z,
+    currentPath: [],
+    zodTypes
+  }) : []);
   if (res.success) {
     return Promise.resolve();
   }
@@ -383,15 +469,52 @@ var updateDefaultProps = ({
   });
   window.dispatchEvent(new CustomEvent(Internals8.PROPS_UPDATED_EXTERNALLY, {
     detail: {
-      resetUnsaved: false
+      resetUnsaved: null
     }
   }));
 };
-// src/api/watch-public-folder.ts
+// src/visual-controls/VisualControls.tsx
+import {
+  createContext,
+  createRef,
+  useCallback,
+  useEffect,
+  useImperativeHandle,
+  useMemo,
+  useRef,
+  useState
+} from "react";
 import { getRemotionEnvironment as getRemotionEnvironment5 } from "remotion";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var VisualControlsTabActivatedContext = createContext(false);
+var VisualControlsContext = createContext({
+  handles: {}
+});
+var visualControlRef = createRef();
+var SetVisualControlsContext = createContext({
+  updateHandles: () => {
+    throw new Error("updateHandles is not implemented");
+  },
+  updateValue: () => {
+    throw new Error("updateValue is not implemented");
+  },
+  visualControl: () => {
+    throw new Error("visualControl is not implemented");
+  }
+});
+
+// src/api/visual-control.ts
+var visualControl = (key, value, schema) => {
+  if (!visualControlRef.current) {
+    throw new Error("visualControlRef is not set");
+  }
+  return visualControlRef.current.globalVisualControl(key, value, schema);
+};
+// src/api/watch-public-folder.ts
+import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
 var WATCH_REMOTION_STATIC_FILES = "remotion_staticFilesChanged";
 var watchPublicFolder = (callback) => {
-  if (!getRemotionEnvironment5().isStudio) {
+  if (!getRemotionEnvironment6().isStudio) {
     console.warn("The watchPublicFolder() API is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -410,9 +533,9 @@ var watchPublicFolder = (callback) => {
   return { cancel };
 };
 // src/api/watch-static-file.ts
-import { getRemotionEnvironment as getRemotionEnvironment6 } from "remotion";
+import { getRemotionEnvironment as getRemotionEnvironment7 } from "remotion";
 var watchStaticFile = (fileName, callback) => {
-  if (!getRemotionEnvironment6().isStudio) {
+  if (!getRemotionEnvironment7().isStudio) {
     console.warn("watchStaticFile() is only available while using the Remotion Studio.");
     return { cancel: () => {
       return;
@@ -477,6 +600,7 @@ export {
   writeStaticFile,
   watchStaticFile,
   watchPublicFolder,
+  visualControl,
   updateDefaultProps,
   toggle,
   seek,