@remotion/studio 4.0.472 → 4.0.473

package/dist/esm/renderEntry.mjs

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

package/dist/helpers/get-asset-metadata.js

@@ -3,7 +3,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.getAssetMetadata = exports.remotion_outputsBase = void 0;
 const media_utils_1 = require("@remotion/media-utils");
 const remotion_1 = require("remotion");
-const Preview_1 = require("../components/Preview");
+const get_preview_file_type_1 = require("./get-preview-file-type");
 exports.remotion_outputsBase = window.remotion_staticBase.replace('static', 'outputs');
 const getSrcFromCanvasContent = (canvasContent) => {
     if (canvasContent.type === 'asset') {
@@ -40,7 +40,7 @@ const getAssetMetadata = async (canvasContent, addTime) => {
         }
         const fetchedAt = Date.now();
         const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
-        const fileType = (0, Preview_1.getPreviewFileType)(src);
+        const fileType = (0, get_preview_file_type_1.getPreviewFileType)(src);
         if (fileType === 'video') {
             const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
             return {

package/dist/helpers/get-preview-file-type.d.ts

@@ -0,0 +1,2 @@
+export type AssetFileType = 'audio' | 'video' | 'image' | 'json' | 'txt' | 'other';
+export declare const getPreviewFileType: (fileName: string | null) => AssetFileType;

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

@@ -0,0 +1,33 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getPreviewFileType = void 0;
+const getPreviewFileType = (fileName) => {
+    var _a;
+    if (!fileName) {
+        return 'other';
+    }
+    const audioExtensions = ['mp3', 'wav', 'ogg', 'aac'];
+    const videoExtensions = ['mp4', 'avi', 'mkv', 'mov', 'webm'];
+    const imageExtensions = ['jpg', 'jpeg', 'png', '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');
+    }
+    if (audioExtensions.includes(fileExtension)) {
+        return 'audio';
+    }
+    if (videoExtensions.includes(fileExtension)) {
+        return 'video';
+    }
+    if (imageExtensions.includes(fileExtension)) {
+        return 'image';
+    }
+    if (fileExtension === 'json') {
+        return 'json';
+    }
+    if (fileExtension === 'txt') {
+        return 'txt';
+    }
+    return 'other';
+};
+exports.getPreviewFileType = getPreviewFileType;

package/dist/helpers/install-required-package.d.ts

@@ -0,0 +1 @@
+export declare const installRequiredPackages: (packageNames: string[]) => Promise<void>;

package/dist/helpers/install-required-package.js

@@ -0,0 +1,39 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.installRequiredPackages = void 0;
+const install_package_1 = require("../api/install-package");
+const NotificationCenter_1 = require("../components/Notifications/NotificationCenter");
+let installQueue = Promise.resolve();
+const getMissingPackages = (packageNames) => {
+    var _a;
+    const uniquePackageNames = Array.from(new Set(packageNames));
+    const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
+    return uniquePackageNames.filter((packageName) => !installedPackages.includes(packageName));
+};
+const addInstalledPackages = (packageNames) => {
+    var _a;
+    const installedPackages = (_a = window.remotion_installedPackages) !== null && _a !== void 0 ? _a : [];
+    window.remotion_installedPackages = Array.from(new Set([...installedPackages, ...packageNames]));
+};
+const formatPackageList = (packageNames) => {
+    if (packageNames.length === 1) {
+        return packageNames[0];
+    }
+    return `${packageNames.length} packages`;
+};
+const installRequiredPackages = async (packageNames) => {
+    const runInstall = async () => {
+        const missingPackages = getMissingPackages(packageNames);
+        if (missingPackages.length === 0) {
+            return;
+        }
+        (0, NotificationCenter_1.showNotification)(`Installing ${formatPackageList(missingPackages)}...`, 3000);
+        await (0, install_package_1.installPackages)(missingPackages);
+        addInstalledPackages(missingPackages);
+        (0, NotificationCenter_1.showNotification)(`Installed ${formatPackageList(missingPackages)}`, 3000);
+    };
+    const queuedInstall = installQueue.then(runInstall, runInstall);
+    installQueue = queuedInstall.catch(() => undefined);
+    await queuedInstall;
+};
+exports.installRequiredPackages = installRequiredPackages;

package/dist/helpers/remote-asset-drag.d.ts

@@ -0,0 +1,4 @@
+export declare const hasRemoteAssetDragData: (dataTransfer: DataTransfer | null) => boolean;
+export declare const getRemoteAssetUrlFromUriList: (uriList: string) => string | null;
+export declare const getRemoteAssetUrlFromHtml: (html: string) => string | null;
+export declare const getRemoteAssetUrlFromDataTransfer: (dataTransfer: DataTransfer | null) => string | null;

package/dist/helpers/remote-asset-drag.js

@@ -0,0 +1,73 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.getRemoteAssetUrlFromDataTransfer = exports.getRemoteAssetUrlFromHtml = exports.getRemoteAssetUrlFromUriList = exports.hasRemoteAssetDragData = void 0;
+const remoteAssetDragTypes = ['text/uri-list', 'text/html', 'text/plain'];
+const isHttpUrl = (value) => {
+    try {
+        const url = new URL(value);
+        return url.protocol === 'http:' || url.protocol === 'https:';
+    }
+    catch (_a) {
+        return false;
+    }
+};
+const decodeHtmlAttribute = (value) => {
+    return value
+        .replace(/&/g, '&')
+        .replace(/"/g, '"')
+        .replace(/'/g, "'")
+        .replace(/&lt;/g, '<')
+        .replace(/&gt;/g, '>');
+};
+const hasRemoteAssetDragData = (dataTransfer) => {
+    return remoteAssetDragTypes.some((type) => {
+        var _a;
+        return Array.from((_a = dataTransfer === null || dataTransfer === void 0 ? void 0 : dataTransfer.types) !== null && _a !== void 0 ? _a : []).includes(type);
+    });
+};
+exports.hasRemoteAssetDragData = hasRemoteAssetDragData;
+const getRemoteAssetUrlFromUriList = (uriList) => {
+    const lines = uriList.split(/\r?\n/g);
+    for (const line of lines) {
+        const trimmed = line.trim();
+        if (trimmed === '' || trimmed.startsWith('#')) {
+            continue;
+        }
+        if (isHttpUrl(trimmed)) {
+            return trimmed;
+        }
+    }
+    return null;
+};
+exports.getRemoteAssetUrlFromUriList = getRemoteAssetUrlFromUriList;
+const getRemoteAssetUrlFromHtml = (html) => {
+    var _a;
+    var _b, _c, _d, _e;
+    const imgSrc = html.match(/<img\b[^>]*\bsrc\s*=\s*(?:"([^"]+)"|'([^']+)'|([^\s>]+))/i);
+    const match = (_d = (_c = (_b = imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[1]) !== null && _b !== void 0 ? _b : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[2]) !== null && _c !== void 0 ? _c : imgSrc === null || imgSrc === void 0 ? void 0 : imgSrc[3]) !== null && _d !== void 0 ? _d : null;
+    if (match) {
+        const decoded = decodeHtmlAttribute(match.trim());
+        if (isHttpUrl(decoded)) {
+            return decoded;
+        }
+    }
+    const fallback = (_e = (_a = html.match(/https?:\/\/[^\s"'<>]+/i)) === null || _a === void 0 ? void 0 : _a[0]) !== null && _e !== void 0 ? _e : null;
+    return fallback && isHttpUrl(fallback) ? decodeHtmlAttribute(fallback) : null;
+};
+exports.getRemoteAssetUrlFromHtml = getRemoteAssetUrlFromHtml;
+const getRemoteAssetUrlFromDataTransfer = (dataTransfer) => {
+    if (!dataTransfer) {
+        return null;
+    }
+    const uriListUrl = (0, exports.getRemoteAssetUrlFromUriList)(dataTransfer.getData('text/uri-list'));
+    if (uriListUrl) {
+        return uriListUrl;
+    }
+    const htmlUrl = (0, exports.getRemoteAssetUrlFromHtml)(dataTransfer.getData('text/html'));
+    if (htmlUrl) {
+        return htmlUrl;
+    }
+    const plainText = dataTransfer.getData('text/plain').trim();
+    return isHttpUrl(plainText) ? plainText : null;
+};
+exports.getRemoteAssetUrlFromDataTransfer = getRemoteAssetUrlFromDataTransfer;

package/dist/helpers/use-asset-drag-events.d.ts

@@ -1,3 +1,6 @@
+export declare const isFileDragEvent: (event: {
+    readonly dataTransfer: DataTransfer;
+}) => boolean;
 declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation }: {
     name: string | null;
     parentFolder: string | null;
@@ -5,7 +8,7 @@ declare function useAssetDragEvents({ name, parentFolder, dropLocation, setDropL
     setDropLocation: React.Dispatch<React.SetStateAction<string | null>>;
 }): {
     isDropDiv: boolean;
-    onDragEnter: () => void;
-    onDragLeave: () => void;
+    onDragEnter: import("react").DragEventHandler<Element>;
+    onDragLeave: import("react").DragEventHandler<Element>;
 };
 export default useAssetDragEvents;

package/dist/helpers/use-asset-drag-events.js

@@ -1,7 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.isFileDragEvent = void 0;
 const react_1 = require("react");
 const no_react_1 = require("remotion/no-react");
+const isFileDragEvent = (event) => {
+    return Array.from(event.dataTransfer.types).includes('Files');
+};
+exports.isFileDragEvent = isFileDragEvent;
 function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation, }) {
     const dragDepthRef = (0, react_1.useRef)(0);
     const combinedParents = (0, react_1.useMemo)(() => {
@@ -10,7 +15,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
     const isDropDiv = (0, react_1.useMemo)(() => {
         return dropLocation === combinedParents;
     }, [combinedParents, dropLocation]);
-    const onDragEnter = (0, react_1.useCallback)(() => {
+    const onDragEnter = (0, react_1.useCallback)((event) => {
+        if (!(0, exports.isFileDragEvent)(event)) {
+            return;
+        }
         if (dragDepthRef.current === 0) {
             setDropLocation((currentDropLocation) => (currentDropLocation === null || currentDropLocation === void 0 ? void 0 : currentDropLocation.includes(combinedParents))
                 ? currentDropLocation
@@ -18,7 +26,10 @@ function useAssetDragEvents({ name, parentFolder, dropLocation, setDropLocation,
         }
         dragDepthRef.current++;
     }, [combinedParents, dragDepthRef, setDropLocation]);
-    const onDragLeave = (0, react_1.useCallback)(() => {
+    const onDragLeave = (0, react_1.useCallback)((event) => {
+        if (!(0, exports.isFileDragEvent)(event)) {
+            return;
+        }
         dragDepthRef.current--;
         if (dragDepthRef.current === 0) {
             setDropLocation((currentPath) => currentPath === combinedParents ? parentFolder : currentPath);

package/dist/hot-middleware-client/client.js

@@ -4,6 +4,7 @@
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.enableHotMiddleware = void 0;
 const studio_shared_1 = require("@remotion/studio-shared");
+const error_origin_1 = require("../error-overlay/error-origin");
 const preview_server_events_1 = require("../helpers/preview-server-events");
 const process_update_1 = require("./process-update");
 function createReporter() {
@@ -63,6 +64,11 @@ function processMessage(obj) {
         case 'built': {
             let applyUpdate = true;
             if (obj.errors.length > 0) {
+                obj.errors.forEach((error) => {
+                    if (typeof error === 'string') {
+                        (0, error_origin_1.markErrorMessageAsLoggedByServer)((0, studio_shared_1.stripAnsi)(error));
+                    }
+                });
                 if (reporter)
                     reporter.problems('errors', obj);
                 applyUpdate = false;

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

@@ -0,0 +1,8 @@
+type State = {
+    editorShowOutlines: boolean;
+    setEditorShowOutlines: (cb: (prevState: boolean) => boolean) => void;
+};
+export declare const persistEditorShowOutlinesOption: (option: boolean) => void;
+export declare const loadEditorShowOutlinesOption: () => boolean;
+export declare const EditorShowOutlinesContext: import("react").Context<State>;
+export {};

package/dist/state/editor-outlines.js

@@ -0,0 +1,18 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EditorShowOutlinesContext = exports.loadEditorShowOutlinesOption = exports.persistEditorShowOutlinesOption = void 0;
+const react_1 = require("react");
+const key = 'remotion.editorShowOutlines';
+const persistEditorShowOutlinesOption = (option) => {
+    localStorage.setItem(key, String(option));
+};
+exports.persistEditorShowOutlinesOption = persistEditorShowOutlinesOption;
+const loadEditorShowOutlinesOption = () => {
+    const item = localStorage.getItem(key);
+    return item !== 'false';
+};
+exports.loadEditorShowOutlinesOption = loadEditorShowOutlinesOption;
+exports.EditorShowOutlinesContext = (0, react_1.createContext)({
+    editorShowOutlines: true,
+    setEditorShowOutlines: () => undefined,
+});

package/dist/state/modals.d.ts

@@ -7,6 +7,7 @@ import type { _InternalTypes } from 'remotion';
 import type { CompType } from '../components/NewComposition/DuplicateComposition';
 import type { QuickSwitcherMode } from '../components/QuickSwitcher/NoResults';
 import type { RenderType } from '../components/RenderModal/RenderModalAdvanced';
+import type { KeyframeSettingsModalState } from '../components/Timeline/KeyframeSettingsModal';
 import type { Bug, UpdateInfo } from '../components/UpdateCheck';
 export type WebRenderModalState = {
     type: 'web-render';
@@ -86,6 +87,16 @@ export type RenderModalState = {
     defaulMetadata: Record<string, string> | null;
     renderDefaults: RenderDefaults;
 };
+export type ConfirmationDialogState = {
+    type: 'confirmation-dialog';
+    id: string;
+    title: string;
+    message: React.ReactNode;
+    confirmLabel: string;
+    cancelLabel: string;
+    onConfirm: () => void;
+    onCancel: () => void;
+};
 export type ModalState = {
     type: 'duplicate-comp';
     compositionId: string;
@@ -106,9 +117,15 @@ export type ModalState = {
     folderName: string;
     parentName: string | null;
     stack: string | null;
+} | {
+    type: 'delete-static-file';
+    relativePath: string;
+} | {
+    type: 'rename-static-file';
+    relativePath: string;
 } | {
     type: 'input-props-override';
-} | RenderModalState | WebRenderModalState | {
+} | KeyframeSettingsModalState | RenderModalState | WebRenderModalState | {
     type: 'render-progress';
     jobId: string;
 } | {
@@ -122,7 +139,7 @@ export type ModalState = {
     type: 'quick-switcher';
     mode: QuickSwitcherMode;
     invocationTimestamp: number;
-};
+} | ConfirmationDialogState;
 export type ModalContextType = {
     selectedModal: ModalState | null;
     setSelectedModal: React.Dispatch<React.SetStateAction<ModalState | 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.472",
+	"version": "4.0.473",
 	"description": "APIs for interacting with the Remotion Studio",
 	"main": "dist",
 	"scripts": {
@@ -25,14 +25,14 @@
 	},
 	"dependencies": {
 		"semver": "7.5.3",
-		"remotion": "4.0.472",
-		"@remotion/player": "4.0.472",
-		"@remotion/media-utils": "4.0.472",
-		"@remotion/renderer": "4.0.472",
-		"@remotion/web-renderer": "4.0.472",
-		"@remotion/studio-shared": "4.0.472",
-		"@remotion/timeline-utils": "4.0.472",
-		"@remotion/zod-types": "4.0.472",
+		"remotion": "4.0.473",
+		"@remotion/player": "4.0.473",
+		"@remotion/media-utils": "4.0.473",
+		"@remotion/renderer": "4.0.473",
+		"@remotion/web-renderer": "4.0.473",
+		"@remotion/studio-shared": "4.0.473",
+		"@remotion/timeline-utils": "4.0.473",
+		"@remotion/zod-types": "4.0.473",
 		"@jridgewell/trace-mapping": "0.3.31",
 		"mediabunny": "1.45.0",
 		"memfs": "3.4.3",
@@ -43,7 +43,7 @@
 		"react": "19.2.3",
 		"react-dom": "19.2.3",
 		"@types/semver": "7.5.3",
-		"@remotion/eslint-config-internal": "4.0.472",
+		"@remotion/eslint-config-internal": "4.0.473",
 		"eslint": "9.19.0",
 		"@typescript/native-preview": "7.0.0-dev.20260217.1"
 	},

package/dist/helpers/detect-file-type.d.ts

@@ -1,69 +0,0 @@
-export type FileDimensions = {
-    readonly width: number;
-    readonly height: number;
-};
-export declare const matchesPattern: (pattern: Uint8Array<ArrayBufferLike>) => (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isRiffAvi: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isRiffWave: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isWebm: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isIsoBaseMedia: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isTransportStream: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isMp3: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isAac: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isFlac: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export declare const isM3u: (data: Uint8Array<ArrayBufferLike>) => boolean;
-export type RiffType = {
-    type: 'riff';
-};
-export type WebmType = {
-    type: 'webm';
-};
-export type IsoBaseMediaType = {
-    type: 'iso-base-media';
-};
-export type TransportStreamType = {
-    type: 'transport-stream';
-};
-export type Mp3Type = {
-    type: 'mp3';
-};
-export type AacType = {
-    type: 'aac';
-};
-export type WavType = {
-    type: 'wav';
-};
-export type GifType = {
-    type: 'gif';
-    dimensions: FileDimensions;
-};
-export type FlacType = {
-    type: 'flac';
-};
-export type M3uType = {
-    type: 'm3u';
-};
-export type PngType = {
-    type: 'png';
-    dimensions: FileDimensions | null;
-};
-export type JpegType = {
-    type: 'jpeg';
-    dimensions: FileDimensions | null;
-};
-export type WebpType = {
-    type: 'webp';
-    dimensions: FileDimensions | null;
-};
-export type BmpType = {
-    type: 'bmp';
-    dimensions: FileDimensions | null;
-};
-export type PdfType = {
-    type: 'pdf';
-};
-export type UnknownType = {
-    type: 'unknown';
-};
-export type FileType = JpegType | WebpType | RiffType | WebmType | WavType | PdfType | AacType | IsoBaseMediaType | TransportStreamType | Mp3Type | GifType | PngType | BmpType | AacType | FlacType | M3uType | UnknownType;
-export declare const detectFileType: (data: Uint8Array<ArrayBufferLike>) => FileType;