@remotion/studio 4.0.200 → 4.0.202

package/.turbo/turbo-build.log

@@ -1,4 +1,4 @@
 
-> @remotion/studio@4.0.199 build /Users/jonathanburger/remotion/packages/studio
+> @remotion/studio@4.0.201 build /Users/jonathanburger/remotion/packages/studio
 > bun --env-file=../.env.bundle bundle.ts
 

package/dist/components/Canvas.js

@@ -243,9 +243,20 @@ const Canvas = ({ canvasContent, size, isRefreshing }) => {
         if (canvasContent.type === 'composition') {
             return;
         }
-        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent);
+        const metadata = await (0, get_asset_metadata_1.getAssetMetadata)(canvasContent, canvasContent.type === 'asset');
         setAssetResolution(metadata);
     }, [canvasContent]);
+    (0, react_1.useEffect)(() => {
+        if (canvasContent.type !== 'asset') {
+            return;
+        }
+        const file = (0, remotion_1.watchStaticFile)(canvasContent.asset, () => {
+            fetchMetadata();
+        });
+        return () => {
+            file.cancel();
+        };
+    }, [canvasContent, fetchMetadata]);
     (0, react_1.useEffect)(() => {
         fetchMetadata();
     }, [fetchMetadata]);

package/dist/components/FilePreview.d.ts

@@ -2,8 +2,8 @@ import React from 'react';
 import type { AssetMetadata } from '../helpers/get-asset-metadata';
 import type { AssetFileType } from './Preview';
 export declare const FilePreview: React.FC<{
-    src: string;
-    fileType: AssetFileType;
-    currentAsset: string;
-    assetMetadata: AssetMetadata | null;
+    readonly src: string;
+    readonly fileType: AssetFileType;
+    readonly currentAsset: string;
+    readonly assetMetadata: AssetMetadata | null;
 }>;

package/dist/components/StaticFilePreview.js

@@ -36,6 +36,6 @@ const StaticFilePreview = ({ currentAsset, assetMetadata }) => {
     if (!currentAsset) {
         return null;
     }
-    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: staticFileSrc, assetMetadata: assetMetadata }));
+    return ((0, jsx_runtime_1.jsx)(FilePreview_1.FilePreview, { currentAsset: currentAsset, fileType: fileType, src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === 'found' ? assetMetadata.fetchedAt : 0}`, assetMetadata: assetMetadata }));
 };
 exports.StaticFilePreview = StaticFilePreview;

package/dist/components/utils.d.ts

@@ -0,0 +1 @@
+export declare const handleUploadFile: (file: File, assetPath: string) => Promise<void>;

package/dist/components/utils.js

@@ -0,0 +1,32 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.handleUploadFile = void 0;
+const NotificationCenter_1 = require("./Notifications/NotificationCenter");
+const handleUploadFile = async (file, assetPath) => {
+    if (!file) {
+        (0, NotificationCenter_1.showNotification)('Please select a file first!', 3000);
+        return;
+    }
+    try {
+        const url = new URL('/api/add-asset', window.location.origin);
+        url.search = new URLSearchParams({
+            folder: assetPath,
+            file: file.name,
+        }).toString();
+        const response = await fetch(url, {
+            method: 'POST',
+            body: file,
+        });
+        if (response.ok) {
+            (0, NotificationCenter_1.showNotification)(`Added ${file.name} to ${assetPath}`, 3000);
+        }
+        else {
+            const jsonResponse = await response.json();
+            (0, NotificationCenter_1.showNotification)(`Upload failed: ${jsonResponse.error}`, 3000);
+        }
+    }
+    catch (error) {
+        (0, NotificationCenter_1.showNotification)(`Error during upload: ${error}`, 3000);
+    }
+};
+exports.handleUploadFile = handleUploadFile;

package/dist/esm/internals.mjs

@@ -4529,7 +4529,7 @@ var getSrcFromCanvasContent = (canvasContent) => {
   }
   return remotion_outputsBase + canvasContent.path;
 };
-var getAssetMetadata = async (canvasContent) => {
+var getAssetMetadata = async (canvasContent, addTime) => {
   const src = getSrcFromCanvasContent(canvasContent);
   const file2 = await fetch(src, {
     method: "HEAD"
@@ -4544,13 +4544,16 @@ var getAssetMetadata = async (canvasContent) => {
   if (!size) {
     throw new Error("Unexpected error: content-length is null");
   }
+  const fetchedAt = Date.now();
+  const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
   const fileType = getPreviewFileType(src);
   if (fileType === "video") {
-    const resolution = await getVideoMetadata(src);
+    const resolution = await getVideoMetadata(srcWithTime);
     return {
       type: "found",
       size: Number(size),
-      dimensions: { width: resolution.width, height: resolution.height }
+      dimensions: { width: resolution.width, height: resolution.height },
+      fetchedAt
     };
   }
   if (fileType === "image") {
@@ -4560,20 +4563,22 @@ var getAssetMetadata = async (canvasContent) => {
         resolve({
           type: "found",
           size: Number(size),
-          dimensions: { width: img.width, height: img.height }
+          dimensions: { width: img.width, height: img.height },
+          fetchedAt
         });
       };
       img.onerror = () => {
         reject(new Error("Failed to load image"));
       };
-      img.src = src;
+      img.src = srcWithTime;
     });
     return resolution;
   }
   return {
     type: "found",
     dimensions: "none",
-    size: Number(size)
+    size: Number(size),
+    fetchedAt
   };
 };
 
@@ -5029,7 +5034,7 @@ var StaticFilePreview = ({ currentAsset, assetMetadata }) => {
   return jsx48(FilePreview, {
     currentAsset,
     fileType,
-    src: staticFileSrc,
+    src: `${staticFileSrc}?date=${assetMetadata && assetMetadata.type === "found" ? assetMetadata.fetchedAt : 0}`,
     assetMetadata
   });
 };
@@ -8663,7 +8668,7 @@ useEffect as useEffect32,
 useMemo as useMemo48,
 useState as useState34
 } from "react";
-import {Internals as Internals22} from "remotion";
+import {Internals as Internals22, watchStaticFile} from "remotion";
 
 // src/helpers/get-effective-translation.ts
 var getEffectiveXTranslation = ({
@@ -9713,9 +9718,20 @@ var Canvas = ({ canvasContent, size: size2, isRefreshing }) => {
     if (canvasContent.type === "composition") {
       return;
     }
-    const metadata = await getAssetMetadata(canvasContent);
+    const metadata = await getAssetMetadata(canvasContent, canvasContent.type === "asset");
     setAssetResolution(metadata);
   }, [canvasContent]);
+  useEffect32(() => {
+    if (canvasContent.type !== "asset") {
+      return;
+    }
+    const file2 = watchStaticFile(canvasContent.asset, () => {
+      fetchMetadata();
+    });
+    return () => {
+      file2.cancel();
+    };
+  }, [canvasContent, fetchMetadata]);
   useEffect32(() => {
     fetchMetadata();
   }, [fetchMetadata]);

package/dist/helpers/get-asset-metadata.d.ts

@@ -7,5 +7,6 @@ export type AssetMetadata = {
     type: 'found';
     size: number;
     dimensions: Dimensions | 'none' | null;
+    fetchedAt: number;
 };
-export declare const getAssetMetadata: (canvasContent: CanvasContent) => Promise<AssetMetadata>;
+export declare const getAssetMetadata: (canvasContent: CanvasContent, addTime: boolean) => Promise<AssetMetadata>;

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

@@ -14,7 +14,7 @@ const getSrcFromCanvasContent = (canvasContent) => {
     }
     return exports.remotion_outputsBase + canvasContent.path;
 };
-const getAssetMetadata = async (canvasContent) => {
+const getAssetMetadata = async (canvasContent, addTime) => {
     const src = getSrcFromCanvasContent(canvasContent);
     const file = await fetch(src, {
         method: 'HEAD',
@@ -29,13 +29,16 @@ const getAssetMetadata = async (canvasContent) => {
     if (!size) {
         throw new Error('Unexpected error: content-length is null');
     }
+    const fetchedAt = Date.now();
+    const srcWithTime = addTime ? `${src}?date=${fetchedAt}` : src;
     const fileType = (0, Preview_1.getPreviewFileType)(src);
     if (fileType === 'video') {
-        const resolution = await (0, media_utils_1.getVideoMetadata)(src);
+        const resolution = await (0, media_utils_1.getVideoMetadata)(srcWithTime);
         return {
             type: 'found',
             size: Number(size),
             dimensions: { width: resolution.width, height: resolution.height },
+            fetchedAt,
         };
     }
     if (fileType === 'image') {
@@ -46,12 +49,13 @@ const getAssetMetadata = async (canvasContent) => {
                     type: 'found',
                     size: Number(size),
                     dimensions: { width: img.width, height: img.height },
+                    fetchedAt,
                 });
             };
             img.onerror = () => {
                 reject(new Error('Failed to load image'));
             };
-            img.src = src;
+            img.src = srcWithTime;
         });
         return resolution;
     }
@@ -59,6 +63,7 @@ const getAssetMetadata = async (canvasContent) => {
         type: 'found',
         dimensions: 'none',
         size: Number(size),
+        fetchedAt,
     };
 };
 exports.getAssetMetadata = getAssetMetadata;

package/package.json

@@ -3,7 +3,7 @@
     "url": "https://github.com/remotion-dev/remotion/tree/main/packages/studio"
   },
   "name": "@remotion/studio",
-  "version": "4.0.200",
+  "version": "4.0.202",
   "description": "APIs for interacting with the Remotion Studio",
   "main": "dist",
   "sideEffects": false,
@@ -18,18 +18,18 @@
     "memfs": "3.4.3",
     "source-map": "0.7.3",
     "open": "^8.4.2",
-    "remotion": "4.0.200",
-    "@remotion/player": "4.0.200",
-    "@remotion/media-utils": "4.0.200",
-    "@remotion/renderer": "4.0.200",
-    "@remotion/studio-shared": "4.0.200"
+    "remotion": "4.0.202",
+    "@remotion/media-utils": "4.0.202",
+    "@remotion/player": "4.0.202",
+    "@remotion/studio-shared": "4.0.202",
+    "@remotion/renderer": "4.0.202"
   },
   "devDependencies": {
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "@types/semver": "^7.3.4",
     "zod": "3.22.3",
-    "@remotion/zod-types": "4.0.200"
+    "@remotion/zod-types": "4.0.202"
   },
   "publishConfig": {
     "access": "public"