Merge pull request #323 from khanguyen74/feature/regenerate-media-items-thumbnail

fix: regenerate video thumbnails when a project is loaded

1 files changed, 23 insertions, 1 deletions

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 7d4851c2..c4ee5f3e 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -213,7 +213,29 @@ 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 {