@remotion/studio 4.0.282 → 4.0.284

package/.turbo/turbo-make.log

@@ -1,6 +1,6 @@
 
 
-> @remotion/studio@4.0.282 make /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.284 make /Users/jonathanburger/remotion/packages/studio
 > tsc -d && bun --env-file=../.env.bundle bundle.ts
 
-[54.39ms] Generated.
+[139.47ms] Generated.

package/dist/components/RenderModal/FrameRangeSetting.js

@@ -3,15 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.FrameRangeSetting = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
-const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const InputDragger_1 = require("../NewComposition/InputDragger");
 const layout_1 = require("./layout");
-const numberWrapper = {
-    minWidth: '39px',
-    display: 'flex',
-    justifyContent: 'flex-end',
-    alignItems: 'center',
-    fontSize: '14px',
-};
+const MultiRangeSlider_1 = require("./MultiRangeSlider");
+const INPUT_WIDTH = 40;
 const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
     const minStartFrame = 0;
     const maxEndFrame = durationInFrames - 1;
@@ -21,6 +16,12 @@ const FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames
     const onEndFrameChangedDirectly = (0, react_1.useCallback)((newEndFrame) => {
         setEndFrame(newEndFrame);
     }, [setEndFrame]);
-    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: startFrame }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), (0, jsx_runtime_1.jsx)("div", { style: numberWrapper, children: endFrame })] })] }));
+    const onStartFrameChanged = (0, react_1.useCallback)((newVal) => {
+        onStartFrameChangedDirectly(parseInt(newVal, 10));
+    }, [onStartFrameChangedDirectly]);
+    const onEndFrameChanged = (0, react_1.useCallback)((newVal) => {
+        onEndFrameChangedDirectly(parseInt(newVal, 10));
+    }, [onEndFrameChangedDirectly]);
+    return ((0, jsx_runtime_1.jsxs)("div", { style: layout_1.optionRow, children: [(0, jsx_runtime_1.jsx)("div", { style: layout_1.label, children: "Frame range" }), (0, jsx_runtime_1.jsxs)("div", { style: layout_1.rightRow, children: [(0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, jsx_runtime_1.jsx)(InputDragger_1.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 } }) }), (0, jsx_runtime_1.jsx)(MultiRangeSlider_1.MultiRangeSlider, { min: minStartFrame, max: maxEndFrame, start: startFrame, end: endFrame, step: 1, onLeftThumbDrag: onStartFrameChangedDirectly, onRightThumbDrag: onEndFrameChangedDirectly }), ' ', (0, jsx_runtime_1.jsx)("div", { style: { width: INPUT_WIDTH }, children: (0, jsx_runtime_1.jsx)(InputDragger_1.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 } }) })] })] }));
 };
 exports.FrameRangeSetting = FrameRangeSetting;

package/dist/esm/internals.mjs

@@ -18426,7 +18426,8 @@ var container35 = {
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
-  marginRight: 6
+  marginRight: 6,
+  flexShrink: 0
 };
 var layerPointedDown = null;
 var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
@@ -24446,13 +24447,7 @@ var MultiRangeSlider = ({
 
 // src/components/RenderModal/FrameRangeSetting.tsx
 import { jsx as jsx234, jsxs as jsxs120 } from "react/jsx-runtime";
-var numberWrapper = {
-  minWidth: "39px",
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
-  fontSize: "14px"
-};
+var INPUT_WIDTH = 40;
 var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
   const minStartFrame = 0;
   const maxEndFrame = durationInFrames - 1;
@@ -24462,6 +24457,12 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
   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: [
@@ -24473,8 +24474,19 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
         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,
@@ -24485,9 +24497,21 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
             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 }
+            })
           })
         ]
       })

package/dist/esm/previewEntry.mjs

@@ -18708,7 +18708,8 @@ var container35 = {
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
-  marginRight: 6
+  marginRight: 6,
+  flexShrink: 0
 };
 var layerPointedDown = null;
 var TimelineLayerEye = ({ onInvoked, hidden, type }) => {
@@ -24728,13 +24729,7 @@ var MultiRangeSlider = ({
 
 // src/components/RenderModal/FrameRangeSetting.tsx
 import { jsx as jsx235, jsxs as jsxs120 } from "react/jsx-runtime";
-var numberWrapper = {
-  minWidth: "39px",
-  display: "flex",
-  justifyContent: "flex-end",
-  alignItems: "center",
-  fontSize: "14px"
-};
+var INPUT_WIDTH = 40;
 var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames, setStartFrame }) => {
   const minStartFrame = 0;
   const maxEndFrame = durationInFrames - 1;
@@ -24744,6 +24739,12 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
   const onEndFrameChangedDirectly = useCallback114((newEndFrame) => {
     setEndFrame(newEndFrame);
   }, [setEndFrame]);
+  const onStartFrameChanged = useCallback114((newVal) => {
+    onStartFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onStartFrameChangedDirectly]);
+  const onEndFrameChanged = useCallback114((newVal) => {
+    onEndFrameChangedDirectly(parseInt(newVal, 10));
+  }, [onEndFrameChangedDirectly]);
   return /* @__PURE__ */ jsxs120("div", {
     style: optionRow,
     children: [
@@ -24755,8 +24756,19 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
         style: rightRow,
         children: [
           /* @__PURE__ */ jsx235("div", {
-            style: numberWrapper,
-            children: startFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx235(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__ */ jsx235(MultiRangeSlider, {
             min: minStartFrame,
@@ -24767,9 +24779,21 @@ var FrameRangeSetting = ({ startFrame, endFrame, setEndFrame, durationInFrames,
             onLeftThumbDrag: onStartFrameChangedDirectly,
             onRightThumbDrag: onEndFrameChangedDirectly
           }),
+          " ",
           /* @__PURE__ */ jsx235("div", {
-            style: numberWrapper,
-            children: endFrame
+            style: { width: INPUT_WIDTH },
+            children: /* @__PURE__ */ jsx235(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 }
+            })
           })
         ]
       })

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/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.282",
+  "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.282",
-    "@remotion/player": "4.0.282",
-    "@remotion/media-parser": "4.0.282",
-    "@remotion/media-utils": "4.0.282",
-    "@remotion/studio-shared": "4.0.282",
-    "@remotion/zod-types": "4.0.282",
-    "@remotion/renderer": "4.0.282"
+    "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.282"
+    "@remotion/eslint-config-internal": "4.0.284"
   },
   "publishConfig": {
     "access": "public"