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

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

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",
+      });
+    }
+  },
 }));

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(