@remotion/studio 4.0.476 → 4.0.478

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/editor-guide-selection.d.ts

@@ -0,0 +1,31 @@
+import type { Guide } from '../state/editor-guides';
+export type GuidePointerDownPosition = {
+    readonly guideId: string;
+    readonly clientX: number;
+    readonly clientY: number;
+};
+export type RulerGuideHighlight = {
+    readonly guide: Guide;
+    readonly color: string;
+};
+type SelectedTimelineItem = {
+    readonly type: string;
+    readonly guideId?: string;
+};
+export declare const isGuidePointerUpAClick: ({ pointerDownPosition, guideId, clientX, clientY, }: {
+    readonly pointerDownPosition: GuidePointerDownPosition | null;
+    readonly guideId: string;
+    readonly clientX: number;
+    readonly clientY: number;
+}) => boolean;
+export declare const getEditorGuideColor: ({ selected, active, }: {
+    readonly selected: boolean;
+    readonly active: boolean;
+}) => "#0b84f3" | "#7e1219" | "#d22d3a";
+export declare const getRulerGuideHighlight: ({ guidesList, selectedItems, hoveredGuideId, draggingGuideId, }: {
+    readonly guidesList: readonly Guide[];
+    readonly selectedItems: readonly SelectedTimelineItem[];
+    readonly hoveredGuideId: string | null;
+    readonly draggingGuideId: string | null;
+}) => RulerGuideHighlight | null;
+export {};

package/dist/helpers/editor-guide-selection.js

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRulerGuideHighlight = exports.getEditorGuideColor = exports.isGuidePointerUpAClick = void 0;
+const colors_1 = require("./colors");
+const GUIDE_CLICK_THRESHOLD_PX = 3;
+const isGuidePointerUpAClick = ({ pointerDownPosition, guideId, clientX, clientY, }) => {
+    if (pointerDownPosition === null || pointerDownPosition.guideId !== guideId) {
+        return false;
+    }
+    return (Math.abs(clientX - pointerDownPosition.clientX) <=
+        GUIDE_CLICK_THRESHOLD_PX &&
+        Math.abs(clientY - pointerDownPosition.clientY) <= GUIDE_CLICK_THRESHOLD_PX);
+};
+exports.isGuidePointerUpAClick = isGuidePointerUpAClick;
+const getEditorGuideColor = ({ selected, active, }) => {
+    if (selected) {
+        return colors_1.BLUE;
+    }
+    return active ? colors_1.SELECTED_GUIDE : colors_1.UNSELECTED_GUIDE;
+};
+exports.getEditorGuideColor = getEditorGuideColor;
+const findGuide = (guidesList, guideId) => {
+    var _a;
+    if (guideId === null) {
+        return null;
+    }
+    return (_a = guidesList.find((guide) => guide.id === guideId && guide.show)) !== null && _a !== void 0 ? _a : null;
+};
+const getRulerGuideHighlight = ({ guidesList, selectedItems, hoveredGuideId, draggingGuideId, }) => {
+    var _a;
+    var _b;
+    const selectedGuideId = selectedItems.length === 1 && ((_a = selectedItems[0]) === null || _a === void 0 ? void 0 : _a.type) === 'guide'
+        ? ((_b = selectedItems[0].guideId) !== null && _b !== void 0 ? _b : null)
+        : null;
+    const selectedGuide = findGuide(guidesList, selectedGuideId);
+    if (selectedGuide) {
+        return {
+            guide: selectedGuide,
+            color: colors_1.BLUE,
+        };
+    }
+    const draggingGuide = findGuide(guidesList, draggingGuideId);
+    if (draggingGuide) {
+        return {
+            guide: draggingGuide,
+            color: colors_1.SELECTED_GUIDE,
+        };
+    }
+    const hoveredGuide = findGuide(guidesList, hoveredGuideId);
+    if (hoveredGuide) {
+        return {
+            guide: hoveredGuide,
+            color: colors_1.SELECTED_GUIDE,
+        };
+    }
+    return null;
+};
+exports.getRulerGuideHighlight = getRulerGuideHighlight;

package/dist/helpers/editor-ruler.d.ts

@@ -1,6 +1,6 @@
 import type { Size } from '@remotion/player';
-import type { Guide } from '../state/editor-guides';
-export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, canvasHeight, canvasWidth, }: {
+import type { RulerGuideHighlight } from './editor-guide-selection';
+export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, guideHighlight, canvasHeight, canvasWidth, }: {
     scale: number;
     points: {
         position: number;
@@ -11,7 +11,7 @@ export declare const drawMarkingOnRulerCanvas: ({ scale, points, startMarking, o
     markingGaps: number;
     orientation: "horizontal" | "vertical";
     rulerCanvasRef: import("react").RefObject<HTMLCanvasElement | null>;
-    selectedGuide: Guide | null;
+    guideHighlight: RulerGuideHighlight | null;
     canvasWidth: number;
     canvasHeight: number;
 }) => void;

package/dist/helpers/editor-ruler.js

@@ -28,9 +28,10 @@ const drawGradient = ({ orientation, context, originDistance, canvasHeight, canv
     context.fillStyle = grd;
     context.fillRect(startX, startY, endX - startX, endY - startY);
 };
-const drawGuide = ({ selectedGuide, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }) => {
+const drawGuide = ({ guideHighlight, scale, startMarking, context, canvasHeight, canvasWidth, orientation, originOffset, }) => {
+    const { guide, color } = guideHighlight;
     const originDistance = rulerValueToPosition({
-        value: selectedGuide.position,
+        value: guide.position,
         startMarking,
         scale,
     }) +
@@ -43,43 +44,40 @@ const drawGuide = ({ selectedGuide, scale, startMarking, context, canvasHeight,
         originDistance,
         canvasWidth,
     });
-    context.strokeStyle = colors_1.SELECTED_GUIDE;
+    context.strokeStyle = color;
     context.lineWidth = 1;
     context.beginPath();
-    if (orientation === 'horizontal' &&
-        selectedGuide.orientation === 'horizontal') {
+    if (orientation === 'horizontal' && guide.orientation === 'horizontal') {
         return;
     }
-    if (orientation === 'vertical' && selectedGuide.orientation === 'vertical') {
+    if (orientation === 'vertical' && guide.orientation === 'vertical') {
         return;
     }
-    if (orientation === 'vertical' &&
-        selectedGuide.orientation === 'horizontal') {
+    if (orientation === 'vertical' && guide.orientation === 'horizontal') {
         context.moveTo(0, originDistance);
         context.lineTo(canvasWidth, originDistance);
         drawLabel({
             context,
-            label: selectedGuide.position.toString(),
+            label: guide.position.toString(),
             originDistance,
             orientation,
-            color: colors_1.SELECTED_GUIDE,
+            color,
         });
     }
-    else if (orientation === 'horizontal' &&
-        selectedGuide.orientation === 'vertical') {
+    else if (orientation === 'horizontal' && guide.orientation === 'vertical') {
         context.moveTo(originDistance, 0);
         context.lineTo(originDistance, canvasHeight);
         drawLabel({
             context,
-            label: selectedGuide.position.toString(),
+            label: guide.position.toString(),
             originDistance,
             orientation,
-            color: colors_1.SELECTED_GUIDE,
+            color,
         });
     }
     context.stroke();
 };
-const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, selectedGuide, canvasHeight, canvasWidth, }) => {
+const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, markingGaps, orientation, rulerCanvasRef, guideHighlight, canvasHeight, canvasWidth, }) => {
     const canvas = rulerCanvasRef.current;
     if (!canvas)
         return;
@@ -129,15 +127,15 @@ const drawMarkingOnRulerCanvas = ({ scale, points, startMarking, originOffset, m
             color: colors_1.RULER_COLOR,
         });
     });
-    if (selectedGuide && orientation !== selectedGuide.orientation) {
+    if (guideHighlight && orientation !== guideHighlight.guide.orientation) {
         drawGuide({
             canvasHeight,
             canvasWidth,
             context,
-            orientation,
+            guideHighlight,
             originOffset,
             scale,
-            selectedGuide,
+            orientation,
             startMarking,
         });
     }

package/dist/helpers/get-preview-file-type.js

@@ -8,7 +8,7 @@ const getPreviewFileType = (fileName) => {
     }
     const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
     const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
-    const imageExtensions = ['jpg', 'jpeg', 'png', 'gif', 'bmp'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', 'apng', 'gif', 'bmp'];
     const fileExtension = (_a = fileName.split('.').pop()) === null || _a === void 0 ? void 0 : _a.toLowerCase();
     if (fileExtension === undefined) {
         throw new Error('File extension is undefined');

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

@@ -0,0 +1,5 @@
+import type { Size } from '@remotion/player';
+export declare const applyRulerInsetsToCanvasSize: ({ rulersAreVisible, size, }: {
+    readonly rulersAreVisible: boolean;
+    readonly size: Size;
+}) => Size;

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

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.applyRulerInsetsToCanvasSize = void 0;
+const editor_rulers_1 = require("../state/editor-rulers");
+const applyRulerInsetsToCanvasSize = ({ rulersAreVisible, size, }) => {
+    if (!rulersAreVisible) {
+        return size;
+    }
+    return {
+        ...size,
+        left: size.left + editor_rulers_1.RULER_WIDTH,
+        top: size.top + editor_rulers_1.RULER_WIDTH,
+        width: size.width - editor_rulers_1.RULER_WIDTH,
+        height: size.height - editor_rulers_1.RULER_WIDTH,
+    };
+};
+exports.applyRulerInsetsToCanvasSize = applyRulerInsetsToCanvasSize;

package/dist/state/editor-guides.d.ts

@@ -10,8 +10,8 @@ export type GuideState = {
     setEditorShowGuides: (cb: (prevState: boolean) => boolean) => void;
     guidesList: Guide[];
     setGuidesList: (cb: (prevState: Guide[]) => Guide[]) => void;
-    selectedGuideId: string | null;
-    setSelectedGuideId: (cb: (prevState: string | null) => string | null) => void;
+    draggingGuideId: string | null;
+    setDraggingGuideId: (cb: (prevState: string | null) => string | null) => void;
     setHoveredGuideId: (cb: (prevState: string | null) => string | null) => void;
     hoveredGuideId: string | null;
     shouldCreateGuideRef: React.MutableRefObject<boolean>;

package/dist/state/editor-guides.js

@@ -25,8 +25,8 @@ exports.EditorShowGuidesContext = (0, react_1.createContext)({
     setEditorShowGuides: () => undefined,
     guidesList: [],
     setGuidesList: () => undefined,
-    selectedGuideId: null,
-    setSelectedGuideId: () => undefined,
+    draggingGuideId: null,
+    setDraggingGuideId: () => undefined,
     shouldCreateGuideRef: { current: false },
     shouldDeleteGuideRef: { current: false },
     hoveredGuideId: null,

package/package.json

@@ -3,7 +3,7 @@
 		"url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
 	},
 	"name": "@remotion/studio",
-	"version": "4.0.476",
+	"version": "4.0.478",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,15 +25,15 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.476",
-		"@remotion/canvas-capture": "4.0.476",
-		"@remotion/player": "4.0.476",
-		"@remotion/media-utils": "4.0.476",
-		"@remotion/renderer": "4.0.476",
-		"@remotion/web-renderer": "4.0.476",
-		"@remotion/studio-shared": "4.0.476",
-		"@remotion/timeline-utils": "4.0.476",
-		"@remotion/zod-types": "4.0.476",
+		"remotion": "4.0.478",
+		"@remotion/canvas-capture": "4.0.478",
+		"@remotion/player": "4.0.478",
+		"@remotion/media-utils": "4.0.478",
+		"@remotion/renderer": "4.0.478",
+		"@remotion/web-renderer": "4.0.478",
+		"@remotion/studio-shared": "4.0.478",
+		"@remotion/timeline-utils": "4.0.478",
+		"@remotion/zod-types": "4.0.478",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -44,7 +44,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.476",
+		"@remotion/eslint-config-internal": "4.0.478",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},