@remotion/studio 4.0.498 → 4.0.499

package/dist/esm/renderEntry.mjs

@@ -212,7 +212,7 @@ var renderContent = (Root) => {
     renderToDOM(/* @__PURE__ */ jsx("div", {
       children: /* @__PURE__ */ jsx(DelayedSpinner, {})
     }));
-    import("./chunk-7a6q9hk2.js").then(({ StudioInternals }) => {
+    import("./chunk-pk1zwsn1.js").then(({ StudioInternals }) => {
       window.remotion_isStudio = true;
       window.remotion_isReadOnlyStudio = true;
       window.remotion_inputProps = "{}";

package/dist/helpers/get-effective-translation.d.ts

@@ -13,7 +13,19 @@ export declare const getEffectiveTranslation: ({ canvasSize, scale, compositionH
     x: number;
     y: number;
 };
-export declare const getCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+export declare const getUnboundedCenterPointWhileScrolling: ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }: {
+    size: Size;
+    clientX: number;
+    clientY: number;
+    compositionWidth: number;
+    compositionHeight: number;
+    scale: number;
+    translation: Translation;
+}) => {
+    centerX: number;
+    centerY: number;
+};
+export declare const getCenterPointWhileScrolling: (options: {
     size: Size;
     clientX: number;
     clientY: number;

package/dist/helpers/get-effective-translation.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
+exports.applyZoomAroundFocalPoint = exports.getCenterPointWhileScrolling = exports.getUnboundedCenterPointWhileScrolling = exports.getEffectiveTranslation = void 0;
 const remotion_1 = require("remotion");
 const smooth_zoom_1 = require("./smooth-zoom");
 const studio_fit_padding_1 = require("./studio-fit-padding");
@@ -33,16 +33,22 @@ const getEffectiveTranslation = ({ canvasSize, scale, compositionHeight, composi
     };
 };
 exports.getEffectiveTranslation = getEffectiveTranslation;
-const getCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
+const getUnboundedCenterPointWhileScrolling = ({ size, clientX, clientY, compositionWidth, compositionHeight, scale, translation, }) => {
     const mouseLeft = clientX - size.left;
     const mouseTop = clientY - size.top;
     const contentLeftPoint = size.width / 2 - (compositionWidth * scale) / 2 - translation.x;
     const contentTopPoint = size.height / 2 - (compositionHeight * scale) / 2 - translation.y;
-    const offsetFromVideoLeft = Math.min(compositionWidth, Math.max(0, (mouseLeft - contentLeftPoint) / scale));
-    const offsetFromVideoTop = Math.min(compositionHeight, Math.max(0, (mouseTop - contentTopPoint) / scale));
     return {
-        centerX: offsetFromVideoLeft,
-        centerY: offsetFromVideoTop,
+        centerX: (mouseLeft - contentLeftPoint) / scale,
+        centerY: (mouseTop - contentTopPoint) / scale,
+    };
+};
+exports.getUnboundedCenterPointWhileScrolling = getUnboundedCenterPointWhileScrolling;
+const getCenterPointWhileScrolling = (options) => {
+    const { centerX, centerY } = (0, exports.getUnboundedCenterPointWhileScrolling)(options);
+    return {
+        centerX: Math.min(options.compositionWidth, Math.max(0, centerX)),
+        centerY: Math.min(options.compositionHeight, Math.max(0, centerY)),
     };
 };
 exports.getCenterPointWhileScrolling = getCenterPointWhileScrolling;

package/dist/helpers/ruler-canvas-size.d.ts

@@ -3,3 +3,10 @@ export declare const applyRulerInsetsToCanvasSize: ({ rulersAreVisible, size, }:
     readonly rulersAreVisible: boolean;
     readonly size: Size;
 }) => Size;
+export declare const getRulerCanvasSize: ({ orientation, size, }: {
+    readonly orientation: "horizontal" | "vertical";
+    readonly size: Size;
+}) => {
+    height: number;
+    width: number;
+};

package/dist/helpers/ruler-canvas-size.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.applyRulerInsetsToCanvasSize = void 0;
+exports.getRulerCanvasSize = exports.applyRulerInsetsToCanvasSize = void 0;
 const editor_rulers_1 = require("../state/editor-rulers");
 const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     if (!rulersAreVisible) {
@@ -15,3 +15,16 @@ const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
     };
 };
 exports.applyRulerInsetsToCanvasSize = applyRulerInsetsToCanvasSize;
+const getRulerCanvasSize = ({ orientation, size, }) => {
+    if (orientation === 'vertical') {
+        return {
+            height: size.height,
+            width: editor_rulers_1.RULER_WIDTH,
+        };
+    }
+    return {
+        height: editor_rulers_1.RULER_WIDTH,
+        width: size.width,
+    };
+};
+exports.getRulerCanvasSize = getRulerCanvasSize;

package/dist/helpers/use-image-metadata.d.ts

@@ -3,6 +3,7 @@ export type ImageMetadata = {
     readonly width: number;
     readonly height: number;
 };
+export declare const getCachedImageMetadata: (src: string) => ImageMetadata | null;
 export declare const getImageMetadataFromData: (data: Uint8Array<ArrayBufferLike>) => ImageMetadata | null;
 export declare const getImageMetadata: (src: string) => Promise<ImageMetadata | null>;
 export declare const useImageMetadata: (src: string | null) => ImageMetadata | null;

package/dist/helpers/use-image-metadata.js

@@ -1,10 +1,15 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = void 0;
+exports.useImageMetadata = exports.getImageMetadata = exports.getImageMetadataFromData = exports.getCachedImageMetadata = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
 const react_1 = require("react");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedImageMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedImageMetadata = getCachedImageMetadata;
 const formatImageType = (fileType) => {
     if (fileType === 'webp') {
         return 'WebP';
@@ -58,11 +63,9 @@ const getImageMetadata = (src) => {
 };
 exports.getImageMetadata = getImageMetadata;
 const useImageMetadata = (src) => {
-    var _a;
-    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [imageMetadata, setImageMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedImageMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedImageMetadata)(src) : null;
         setImageMetadata(cached);
         if (!src || cached) {
             return;

package/dist/helpers/use-media-metadata.d.ts

@@ -12,5 +12,6 @@ export type MediaMetadata = {
     hasVideoTrack: boolean | null;
     hasAudioTrack: boolean | null;
 };
+export declare const getCachedMediaMetadata: (src: string) => MediaMetadata | null;
 export declare const getMediaMetadata: (src: string) => Promise<MediaMetadata | null>;
 export declare const useMediaMetadata: (src: string | null) => MediaMetadata | null;

package/dist/helpers/use-media-metadata.js

@@ -1,12 +1,17 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.useMediaMetadata = exports.getMediaMetadata = void 0;
+exports.useMediaMetadata = exports.getMediaMetadata = exports.getCachedMediaMetadata = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const mediabunny_1 = require("mediabunny");
 const react_1 = require("react");
 const get_duration_or_compute_1 = require("./get-duration-or-compute");
 const cache = new Map();
 const pendingRequests = new Map();
+const getCachedMediaMetadata = (src) => {
+    var _a;
+    return (_a = cache.get(src)) !== null && _a !== void 0 ? _a : null;
+};
+exports.getCachedMediaMetadata = getCachedMediaMetadata;
 const safeCall = async (fn) => {
     try {
         return await fn();
@@ -116,11 +121,9 @@ const getMediaMetadata = (src) => {
 };
 exports.getMediaMetadata = getMediaMetadata;
 const useMediaMetadata = (src) => {
-    var _a;
-    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null);
+    const [mediaMetadata, setMediaMetadata] = (0, react_1.useState)(src ? (0, exports.getCachedMediaMetadata)(src) : null);
     (0, react_1.useEffect)(() => {
-        var _a;
-        const cached = src ? ((_a = cache.get(src)) !== null && _a !== void 0 ? _a : null) : null;
+        const cached = src ? (0, exports.getCachedMediaMetadata)(src) : null;
         setMediaMetadata(cached);
         if (!src || cached) {
             return;

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.498",
+	"version": "4.0.499",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -24,27 +24,28 @@
 		"react-dom": ">=16.8.0"
 	},
 	"dependencies": {
+		"@remotion/drag-and-drop": "4.0.499",
 		"semver": "7.5.3",
-		"remotion": "4.0.498",
-		"@remotion/canvas-capture": "4.0.498",
-		"@remotion/player": "4.0.498",
-		"@remotion/media-utils": "4.0.498",
-		"@remotion/renderer": "4.0.498",
-		"@remotion/web-renderer": "4.0.498",
-		"@remotion/studio-shared": "4.0.498",
-		"@remotion/timeline-utils": "4.0.498",
-		"@remotion/zod-types": "4.0.498",
+		"remotion": "4.0.499",
+		"@remotion/canvas-capture": "4.0.499",
+		"@remotion/player": "4.0.499",
+		"@remotion/media-utils": "4.0.499",
+		"@remotion/renderer": "4.0.499",
+		"@remotion/web-renderer": "4.0.499",
+		"@remotion/studio-shared": "4.0.499",
+		"@remotion/timeline-utils": "4.0.499",
+		"@remotion/zod-types": "4.0.499",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.50.8",
 		"memfs": "3.4.3",
 		"open": "8.4.2",
-		"zod": "4.3.6"
+		"zod": "4.4.3"
 	},
 	"devDependencies": {
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.498",
+		"@remotion/eslint-config-internal": "4.0.499",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},