refactor: add FPS and remove turbopack (yes, fuck you turbopack)

3 files changed, 33 insertions, 1 deletions

diff --git a/apps/web/src/stores/media-store.ts b/apps/web/src/stores/media-store.ts
index 76cdd638..600b42f2 100644
--- a/apps/web/src/stores/media-store.ts
+++ b/apps/web/src/stores/media-store.ts
@@ -14,6 +14,7 @@ export interface MediaItem {
   duration?: number; // For video/audio duration
   width?: number; // For video/image width
   height?: number; // For video/image height
+  fps?: number; // For video frame rate
   // Text-specific properties
   content?: string; // Text content
   fontSize?: number; // Font size
diff --git a/apps/web/src/stores/project-store.ts b/apps/web/src/stores/project-store.ts
index 913c6810..3cc2a1dc 100644
--- a/apps/web/src/stores/project-store.ts
+++ b/apps/web/src/stores/project-store.ts
@@ -25,6 +25,7 @@ interface ProjectStore {
     type: "color" | "blur",

     options?: { backgroundColor?: string; blurIntensity?: number }

   ) => Promise<void>;

+  updateProjectFps: (fps: number) => Promise<void>;

 }

 

 export const useProjectStore = create<ProjectStore>((set, get) => ({

@@ -293,4 +294,26 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       });

     }

   },

+

+  updateProjectFps: async (fps: number) => {

+    const { activeProject } = get();

+    if (!activeProject) return;

+

+    const updatedProject = {

+      ...activeProject,

+      fps,

+      updatedAt: new Date(),

+    };

+

+    try {

+      await storageService.saveProject(updatedProject);

+      set({ activeProject: updatedProject });

+      await get().loadAllProjects(); // Refresh the list

+    } catch (error) {

+      console.error("Failed to update project FPS:", error);

+      toast.error("Failed to update project FPS", {

+        description: "Please try again",

+      });

+    }

+  },

 }));

diff --git a/apps/web/src/stores/timeline-store.ts b/apps/web/src/stores/timeline-store.ts
index 8c934392..33847baa 100644
--- a/apps/web/src/stores/timeline-store.ts
+++ b/apps/web/src/stores/timeline-store.ts
@@ -370,7 +370,7 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
       } as TimelineElement; // Type assertion since we trust the caller passes valid data
 
       // If this is the first element and it's a media element, automatically set the project canvas size
-      // to match the media's aspect ratio
+      // to match the media's aspect ratio and FPS (for videos)
       if (isFirstElement && newElement.type === "media") {
         const mediaStore = useMediaStore.getState();
         const mediaItem = mediaStore.mediaItems.find(
@@ -386,6 +386,14 @@ export const useTimelineStore = create<TimelineStore>((set, get) => {
             getMediaAspectRatio(mediaItem)
           );
         }
+
+        // Set project FPS from the first video element
+        if (mediaItem && mediaItem.type === "video" && mediaItem.fps) {
+          const projectStore = useProjectStore.getState();
+          if (projectStore.activeProject) {
+            projectStore.updateProjectFps(mediaItem.fps);
+          }
+        }
       }
 
       updateTracksAndSave(