fix: regenerate video thumbnails when loading project

1 files changed, 22 insertions, 1 deletions

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 7d4851c2..8af523ef 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -213,7 +213,28 @@ export const useMediaStore = create<MediaStore>((set, get) => ({
 
     try {
       const mediaItems = await storageService.loadAllMediaItems(projectId);
-      set({ mediaItems });
+      // Regenerate thumbnails for video items
+      const updatedMediaItems = await Promise.all(
+        mediaItems.map(async (item) => {
+          if (item.type === "video" && item.file) {
+            try {
+              const { thumbnailUrl, width, height } = await generateVideoThumbnail(item.file);
+              return {
+                ...item,
+                thumbnailUrl,
+                width: width || item.width,
+                height: height || item.height
+              };
+            } catch (error) {
+              console.error(`Failed to regenerate thumbnail for video ${item.id}:`, error);
+              return item;
+            }
+          }
+          return item;
+        })
+      );
+
+      set({ mediaItems: updatedMediaItems });
     } catch (error) {
       console.error("Failed to load media items:", error);
     } finally {