@remotion/studio 4.0.280 → 4.0.284

package/dist/esm/renderEntry.mjs

@@ -19097,7 +19097,8 @@ var init_TimelineLayerEye = __esm(() => {
     display: "inline-flex",
     justifyContent: "center",
     alignItems: "center",
-    marginRight: 6
+    marginRight: 6,
+    flexShrink: 0
   };
 });
 
@@ -25324,7 +25325,7 @@ var init_MultiRangeSlider = __esm(() => {
 // src/components/RenderModal/FrameRangeSetting.tsx
 import { useCallback as useCallback113 } from "react";
 import { jsx as jsx234, jsxs as jsxs120 } from "react/jsx-runtime";
-var numberWrapper, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
+var INPUT_WIDTH = 40, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
   const minStartFrame = 0;
   const maxEndFrame = durationInFrames - 1;
   const onStartFrameChangedDirectly = useCallback113((newStartFrame) => {
@@ -25333,6 +25334,12 @@ var numberWrapper, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, dur
   const onEndFrameChangedDirectly = useCallback113((newEndFrame) => {
     setEndFrame(newEndFrame);
   }, [setEndFrame]);
+  const onStartFrameChanged = useCallback113((newVal) => {
+    onStartFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onStartFrameChangedDirectly]);
+  const onEndFrameChanged = useCallback113((newVal) => {
+    onEndFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onEndFrameChangedDirectly]);
   return /* @__PURE__ */ jsxs120("div", {
     style: optionRow,
     children: [
@@ -25344,8 +25351,19 @@ var numberWrapper, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, dur
         style: rightRow,
         children: [
           /* @__PURE__ */ jsx234("div", {
-            style: numberWrapper,
-            children: startFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx234(InputDragger, {
+              min: minStartFrame,
+              max: endFrame - 1,
+              name: "Start frame",
+              value: startFrame,
+              step: 1,
+              onTextChange: onStartFrameChanged,
+              onValueChange: onStartFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           }),
           /* @__PURE__ */ jsx234(MultiRangeSlider, {
             min: minStartFrame,
@@ -25356,9 +25374,21 @@ var numberWrapper, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, dur
             onLeftThumbDrag: onStartFrameChangedDirectly,
             onRightThumbDrag: onEndFrameChangedDirectly
           }),
+          " ",
           /* @__PURE__ */ jsx234("div", {
-            style: numberWrapper,
-            children: endFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx234(InputDragger, {
+              min: startFrame + 1,
+              max: maxEndFrame,
+              name: "End frame",
+              value: endFrame,
+              step: 1,
+              onTextChange: onEndFrameChanged,
+              onValueChange: onEndFrameChangedDirectly,
+              status: "ok",
+              rightAlign: true,
+              style: { width: INPUT_WIDTH }
+            })
           })
         ]
       })
@@ -25366,15 +25396,9 @@ var numberWrapper, FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, dur
   });
 };
 var init_FrameRangeSetting = __esm(() => {
-  init_MultiRangeSlider();
+  init_InputDragger();
   init_layout2();
-  numberWrapper = {
-    minWidth: "39px",
-    display: "flex",
-    justifyContent: "flex-end",
-    alignItems: "center",
-    fontSize: "14px"
-  };
+  init_MultiRangeSlider();
 });
 
 // src/components/RenderModal/human-readable-codec.ts

package/dist/visual-controls/VisualControls.d.ts

@@ -0,0 +1,36 @@
+import React from 'react';
+import type { ZodTypeAny } from 'zod';
+export type VisualControlValue = {
+    valueInCode: unknown;
+    unsavedValue: unknown;
+    schema: ZodTypeAny;
+    stack: string;
+};
+export type VisualControlHook = {
+    id: number;
+    stack: string;
+};
+type Handle = Record<string, VisualControlValue>;
+export type Handles = Record<number, Handle>;
+export type VisualControlsContextType = {
+    hooks: VisualControlHook[];
+    handles: Handles;
+};
+export declare const VisualControlsTabActivatedContext: React.Context<boolean>;
+export type SetVisualControlsContextType = {
+    addHook: (hook: VisualControlHook) => void;
+    removeHook: (hook: VisualControlHook) => void;
+    setControl: (hook: VisualControlHook, key: string, value: VisualControlValue) => {
+        same: boolean;
+        currentValue: unknown;
+    };
+    updateHandles: () => void;
+    updateValue: (hook: VisualControlHook, key: string, value: unknown) => void;
+};
+export declare const makeHook: (stack: string) => VisualControlHook;
+export declare const VisualControlsContext: React.Context<VisualControlsContextType>;
+export declare const SetVisualControlsContext: React.Context<SetVisualControlsContextType>;
+export declare const VisualControlsProvider: React.FC<{
+    readonly children: React.ReactNode;
+}>;
+export {};

package/dist/visual-controls/VisualControls.js

@@ -0,0 +1,118 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.VisualControlsProvider = exports.SetVisualControlsContext = exports.VisualControlsContext = exports.makeHook = exports.VisualControlsTabActivatedContext = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_1 = require("react");
+const get_current_edited_value_1 = require("./get-current-edited-value");
+exports.VisualControlsTabActivatedContext = (0, react_1.createContext)(false);
+const makeHook = (stack) => {
+    return { id: Math.random(), stack };
+};
+exports.makeHook = makeHook;
+exports.VisualControlsContext = (0, react_1.createContext)({
+    hooks: [],
+    handles: {},
+});
+exports.SetVisualControlsContext = (0, react_1.createContext)({
+    addHook: () => {
+        throw new Error('addControl is not implemented');
+    },
+    removeHook: () => {
+        throw new Error('removeControl is not implemented');
+    },
+    setControl: () => {
+        throw new Error('addControl is not implemented');
+    },
+    updateHandles: () => {
+        throw new Error('updateHandles is not implemented');
+    },
+    updateValue: () => {
+        throw new Error('updateValue is not implemented');
+    },
+});
+const VisualControlsProvider = ({ children }) => {
+    const [hooks, setHooks] = (0, react_1.useState)([]);
+    const imperativeHandles = (0, react_1.useRef)({});
+    const [handles, setHandles] = (0, react_1.useState)({});
+    const [tabActivated, setTabActivated] = (0, react_1.useState)(false);
+    const addHook = (0, react_1.useCallback)((hook) => {
+        setHooks((prev) => {
+            if (prev.find((c) => c.id === hook.id)) {
+                return prev;
+            }
+            return [...prev, hook];
+        });
+        setTabActivated(true);
+    }, [setHooks]);
+    const removeHook = (0, react_1.useCallback)((hook) => {
+        setHooks((prev) => prev.filter((c) => c !== hook));
+    }, [setHooks]);
+    const state = (0, react_1.useMemo)(() => {
+        return {
+            hooks,
+            handles,
+        };
+    }, [hooks, handles]);
+    const setControl = (0, react_1.useCallback)((hook, key, value) => {
+        var _a, _b, _c, _d, _e, _f;
+        const currentSaved = (_c = (_b = (_a = imperativeHandles.current) === null || _a === void 0 ? void 0 : _a[hook.id]) === null || _b === void 0 ? void 0 : _b[key]) === null || _c === void 0 ? void 0 : _c.valueInCode;
+        const currentUnsaved = (_f = (_e = (_d = imperativeHandles.current) === null || _d === void 0 ? void 0 : _d[hook.id]) === null || _e === void 0 ? void 0 : _e[key]) === null || _f === void 0 ? void 0 : _f.unsavedValue;
+        if (currentSaved === value.valueInCode) {
+            return {
+                same: true,
+                currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
+                    hook,
+                    key,
+                    handles: imperativeHandles.current,
+                }),
+            };
+        }
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [hook.id]: {
+                ...imperativeHandles.current[hook.id],
+                [key]: {
+                    ...value,
+                    unsavedValue: currentUnsaved !== null && currentUnsaved !== void 0 ? currentUnsaved : value.valueInCode,
+                },
+            },
+        };
+        return {
+            same: false,
+            currentValue: (0, get_current_edited_value_1.getVisualControlEditedValue)({
+                hook,
+                key,
+                handles: imperativeHandles.current,
+            }),
+        };
+    }, []);
+    const updateHandles = (0, react_1.useCallback)(() => {
+        setHandles(() => {
+            return imperativeHandles.current;
+        });
+    }, []);
+    const updateValue = (0, react_1.useCallback)((hook, key, value) => {
+        imperativeHandles.current = {
+            ...imperativeHandles.current,
+            [hook.id]: {
+                ...imperativeHandles.current[hook.id],
+                [key]: {
+                    ...imperativeHandles.current[hook.id][key],
+                    unsavedValue: value,
+                },
+            },
+        };
+        updateHandles();
+    }, [updateHandles]);
+    const setState = (0, react_1.useMemo)(() => {
+        return {
+            addHook,
+            removeHook,
+            setControl,
+            updateHandles,
+            updateValue,
+        };
+    }, [addHook, removeHook, setControl, updateHandles, updateValue]);
+    return ((0, jsx_runtime_1.jsx)(exports.VisualControlsTabActivatedContext.Provider, { value: tabActivated, children: (0, jsx_runtime_1.jsx)(exports.VisualControlsContext.Provider, { value: state, children: (0, jsx_runtime_1.jsx)(exports.SetVisualControlsContext.Provider, { value: setState, children: children }) }) }));
+};
+exports.VisualControlsProvider = VisualControlsProvider;

package/dist/visual-controls/get-current-edited-value.d.ts

@@ -0,0 +1,6 @@
+import type { Handles, VisualControlHook } from './VisualControls';
+export declare const getVisualControlEditedValue: ({ handles, hook, key, }: {
+    handles: Handles;
+    hook: VisualControlHook;
+    key: string;
+}) => unknown;

package/dist/visual-controls/get-current-edited-value.js

@@ -0,0 +1,9 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getVisualControlEditedValue = void 0;
+const getVisualControlEditedValue = ({ handles, hook, key, }) => {
+    var _a, _b, _c;
+    // TODO: What if z.null()
+    return (_c = (_b = (_a = handles === null || handles === void 0 ? void 0 : handles[hook.id]) === null || _a === void 0 ? void 0 : _a[key]) === null || _b === void 0 ? void 0 : _b.unsavedValue) !== null && _c !== void 0 ? _c : null;
+};
+exports.getVisualControlEditedValue = getVisualControlEditedValue;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.280",
+  "version": "4.0.284",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -23,20 +23,20 @@
     "source-map": "0.7.3",
     "open": "^8.4.2",
     "zod": "3.22.3",
-    "remotion": "4.0.280",
-    "@remotion/player": "4.0.280",
-    "@remotion/media-utils": "4.0.280",
-    "@remotion/media-parser": "4.0.280",
-    "@remotion/renderer": "4.0.280",
-    "@remotion/studio-shared": "4.0.280",
-    "@remotion/zod-types": "4.0.280"
+    "remotion": "4.0.284",
+    "@remotion/media-parser": "4.0.284",
+    "@remotion/player": "4.0.284",
+    "@remotion/renderer": "4.0.284",
+    "@remotion/studio-shared": "4.0.284",
+    "@remotion/zod-types": "4.0.284",
+    "@remotion/media-utils": "4.0.284"
   },
   "devDependencies": {
     "react": "19.0.0",
     "react-dom": "19.0.0",
     "@types/semver": "^7.3.4",
     "eslint": "9.19.0",
-    "@remotion/eslint-config-internal": "4.0.280"
+    "@remotion/eslint-config-internal": "4.0.284"
   },
   "publishConfig": {
     "access": "public"