feat: implement bookmarking functionality in the timeline and project storage

- Added bookmark management methods in the project store for toggling and checking bookmarks.
- Updated the timeline component to display bookmark markers and integrate bookmark actions in the context menu.
- Enhanced the storage service to handle bookmarks in project serialization and deserialization.
- Updated project types to include bookmarks as an array of numbers.

Author: genmnz

apps/web/src/components/editor/audio-waveform.tsx

@@ -19,22 +19,21 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
 
   useEffect(() => {
     let mounted = true;
-
+    let ws = wavesurfer.current;
+    
     const initWaveSurfer = async () => {
       if (!waveformRef.current || !audioUrl) return;
 
       try {
-        // Clean up any existing instance
-        if (wavesurfer.current) {
-          try {
-            wavesurfer.current.destroy();
-          } catch (e) {
-            // Silently ignore destroy errors
-          }
+        // Clear any existing instance safely
+        if (ws) {
+          // Instead of immediately destroying, just set to null
+          // We'll destroy it outside this function
           wavesurfer.current = null;
         }
 
-        wavesurfer.current = WaveSurfer.create({
+        // Create a fresh instance
+        const newWaveSurfer = WaveSurfer.create({
           container: waveformRef.current,
           waveColor: "rgba(255, 255, 255, 0.6)",
           progressColor: "rgba(255, 255, 255, 0.9)",
@@ -46,23 +45,36 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
           interact: false,
         });
 
+        // Assign to ref only if component is still mounted
+        if (mounted) {
+          wavesurfer.current = newWaveSurfer;
+        } else {
+          // Component unmounted during initialization, clean up
+          try {
+            newWaveSurfer.destroy();
+          } catch (e) {
+            // Ignore destroy errors
+          }
+          return;
+        }
+
         // Event listeners
-        wavesurfer.current.on("ready", () => {
+        newWaveSurfer.on("ready", () => {
           if (mounted) {
             setIsLoading(false);
             setError(false);
           }
         });
 
-        wavesurfer.current.on("error", (err) => {
+        newWaveSurfer.on("error", (err) => {
           console.error("WaveSurfer error:", err);
           if (mounted) {
             setError(true);
             setIsLoading(false);
           }
         });
 
-        await wavesurfer.current.load(audioUrl);
+        await newWaveSurfer.load(audioUrl);
       } catch (err) {
         console.error("Failed to initialize WaveSurfer:", err);
         if (mounted) {
@@ -72,27 +84,50 @@ const AudioWaveform: React.FC<AudioWaveformProps> = ({
       }
     };
 
-    initWaveSurfer();
-
-    return () => {
-      mounted = false;
-      // Use a safer cleanup approach to avoid AbortError
-      if (wavesurfer.current) {
+    // First safely destroy previous instance if it exists
+    if (ws) {
+      // Use this pattern to safely destroy the previous instance
+      const wsToDestroy = ws;
+      // Detach from ref immediately
+      wavesurfer.current = null;
+      
+      // Wait a tick to destroy so any pending operations can complete
+      requestAnimationFrame(() => {
         try {
-          // Wrap in setTimeout to avoid race conditions with AbortController
-          setTimeout(() => {
-            try {
-              if (wavesurfer.current) {
-                wavesurfer.current.destroy();
-                wavesurfer.current = null;
-              }
-            } catch (e) {
-              console.warn("Error during delayed WaveSurfer cleanup:", e);
-            }
-          }, 0);
+          wsToDestroy.destroy();
         } catch (e) {
-          console.warn("Error during WaveSurfer cleanup:", e);
+          // Ignore errors during destroy
+        }
+        // Only initialize new instance after destroying the old one
+        if (mounted) {
+          initWaveSurfer();
         }
+      });
+    } else {
+      // No previous instance to clean up, initialize directly
+      initWaveSurfer();
+    }
+
+    return () => {
+      // Mark component as unmounted
+      mounted = false;
+      
+      // Store reference to current wavesurfer instance
+      const wsToDestroy = wavesurfer.current;
+      
+      // Immediately clear the ref to prevent accessing it after unmount
+      wavesurfer.current = null;
+      
+      // If we have an instance to clean up, do it safely
+      if (wsToDestroy) {
+        // Delay destruction to avoid race conditions
+        requestAnimationFrame(() => {
+          try {
+            wsToDestroy.destroy();
+          } catch (e) {
+            // Ignore destroy errors - they're expected
+          }
+        });
       }
     };
   }, [audioUrl, height]);

apps/web/src/components/editor/timeline/index.tsx

@@ -19,6 +19,7 @@ import {
   Link,
   ZoomIn,
   ZoomOut,
+  Bookmark,
 } from "lucide-react";
 import {
   Tooltip,
@@ -651,6 +652,30 @@ export function Timeline() {
                     );
                   }).filter(Boolean);
                 })()}
+                
+                {/* Bookmark markers */}
+                {(() => {
+                  const { activeProject } = useProjectStore.getState();
+                  if (!activeProject?.bookmarks?.length) return null;
+                  
+                  return activeProject.bookmarks.map((bookmarkTime, i) => (
+                                          <div
+                      key={`bookmark-${i}`}
+                      className="absolute top-0 h-10 w-0.5 !bg-primary cursor-pointer"
+                      style={{
+                        left: `${bookmarkTime * TIMELINE_CONSTANTS.PIXELS_PER_SECOND * zoomLevel}px`,
+                      }}
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        usePlaybackStore.getState().seek(bookmarkTime);
+                      }}
+                    >
+                      <div className="absolute top-[-1px] left-[-5px] text-primary">
+                        <Bookmark className="h-3 w-3 fill-primary" />
+                      </div>
+                    </div>
+                  ));
+                })()}
               </div>
             </ScrollArea>
           </div>
@@ -773,6 +798,23 @@ export function Timeline() {
                           <ContextMenuItem onClick={(e) => e.stopPropagation()}>
                             Track settings (soon)
                           </ContextMenuItem>
+                          {activeProject?.bookmarks?.length && activeProject.bookmarks.length > 0 && (
+                            <>
+                              <ContextMenuItem disabled>Bookmarks</ContextMenuItem>
+                              {activeProject.bookmarks.map((bookmarkTime, i) => (
+                                <ContextMenuItem 
+                                  key={`bookmark-menu-${i}`}
+                                  onClick={(e) => {
+                                    e.stopPropagation();
+                                    seek(bookmarkTime);
+                                  }}
+                                >
+                                  <Bookmark className="h-3 w-3 mr-2 inline-block" />
+                                  {bookmarkTime.toFixed(1)}s
+                                </ContextMenuItem>
+                              ))}
+                              </>
+                          )}
                         </ContextMenuContent>
                       </ContextMenu>
                     ))}
@@ -828,6 +870,7 @@ function TimelineToolbar({
     toggleRippleEditing,
   } = useTimelineStore();
   const { currentTime, duration, isPlaying, toggle } = usePlaybackStore();
+  const { toggleBookmark, isBookmarked } = useProjectStore();
 
   // Action handlers
   const handleSplitSelected = () => {
@@ -957,6 +1000,13 @@ function TimelineToolbar({
   const handleZoomSliderChange = (values: number[]) => {
     setZoomLevel(values[0]);
   };
+  
+  const handleToggleBookmark = async () => {
+    await toggleBookmark(currentTime);
+  };
+  
+  // Check if the current time is bookmarked
+  const currentBookmarked = isBookmarked(currentTime);
   return (
     <div className="border-b flex items-center justify-between px-2 py-1">
       <div className="flex items-center gap-1 w-full">
@@ -1088,6 +1138,17 @@ function TimelineToolbar({
             </TooltipTrigger>
             <TooltipContent>Delete element (Delete)</TooltipContent>
           </Tooltip>
+          <div className="w-px h-6 bg-border mx-1" />
+          <Tooltip>
+            <TooltipTrigger asChild>
+              <Button variant="text" size="icon" onClick={handleToggleBookmark}>
+                <Bookmark className={`h-4 w-4 ${currentBookmarked ? "fill-primary text-primary" : ""}`} />
+              </Button>
+            </TooltipTrigger>
+            <TooltipContent>
+              {currentBookmarked ? "Remove bookmark" : "Add bookmark"}
+            </TooltipContent>
+          </Tooltip>
         </TooltipProvider>
       </div>
       <div className="flex items-center gap-1">

apps/web/src/lib/storage/storage-service.ts

@@ -63,6 +63,8 @@ class StorageService {
       backgroundColor: project.backgroundColor,
       backgroundType: project.backgroundType,
       blurIntensity: project.blurIntensity,
+      bookmarks: project.bookmarks,
+      fps: project.fps,
     };
 
     await this.projectsAdapter.set(project.id, serializedProject);
@@ -83,6 +85,8 @@ class StorageService {
       backgroundColor: serializedProject.backgroundColor,
       backgroundType: serializedProject.backgroundType,
       blurIntensity: serializedProject.blurIntensity,
+      bookmarks: serializedProject.bookmarks,
+      fps: serializedProject.fps,
     };
   }
 

apps/web/src/lib/storage/types.ts

@@ -37,6 +37,7 @@ export interface StorageConfig {
 export type SerializedProject = Omit<TProject, "createdAt" | "updatedAt"> & {
   createdAt: string;
   updatedAt: string;
+  bookmarks?: number[];
 };
 
 // Extend FileSystemDirectoryHandle with missing async iterator methods

apps/web/src/stores/project-store.ts

@@ -27,6 +27,11 @@ interface ProjectStore {
     options?: { backgroundColor?: string; blurIntensity?: number }
   ) => Promise<void>;
   updateProjectFps: (fps: number) => Promise<void>;
+  
+  // Bookmark methods
+  toggleBookmark: (time: number) => Promise<void>;
+  isBookmarked: (time: number) => boolean;
+  removeBookmark: (time: number) => Promise<void>;
 
   getFilteredAndSortedProjects: (
     searchQuery: string,
@@ -39,6 +44,97 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
   savedProjects: [],
   isLoading: true,
   isInitialized: false,
+  
+  // Implementation of bookmark methods
+  toggleBookmark: async (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject) return;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    const bookmarks = activeProject.bookmarks || [];
+    let updatedBookmarks: number[];
+    
+    // Check if already bookmarked
+    const bookmarkIndex = bookmarks.findIndex(
+      bookmark => Math.abs(bookmark - frameTime) < 0.001
+    );
+    
+    if (bookmarkIndex !== -1) {
+      // Remove bookmark
+      updatedBookmarks = bookmarks.filter((_, i) => i !== bookmarkIndex);
+    } else {
+      // Add bookmark
+      updatedBookmarks = [...bookmarks, frameTime].sort((a, b) => a - b);
+    }
+    
+    const updatedProject = {
+      ...activeProject,
+      bookmarks: updatedBookmarks,
+      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 bookmarks:", error);
+      toast.error("Failed to update bookmarks", {
+        description: "Please try again",
+      });
+    }
+  },
+  
+  isBookmarked: (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject || !activeProject.bookmarks) return false;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    return activeProject.bookmarks.some(
+      bookmark => Math.abs(bookmark - frameTime) < 0.001
+    );
+  },
+  
+  removeBookmark: async (time: number) => {
+    const { activeProject } = get();
+    if (!activeProject || !activeProject.bookmarks) return;
+    
+    // Round time to the nearest frame
+    const fps = activeProject.fps || 30;
+    const frameTime = Math.round(time * fps) / fps;
+    
+    const updatedBookmarks = activeProject.bookmarks.filter(
+      bookmark => Math.abs(bookmark - frameTime) >= 0.001
+    );
+    
+    if (updatedBookmarks.length === activeProject.bookmarks.length) {
+      // No bookmark found to remove
+      return;
+    }
+    
+    const updatedProject = {
+      ...activeProject,
+      bookmarks: updatedBookmarks,
+      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 bookmarks:", error);
+      toast.error("Failed to remove bookmark", {
+        description: "Please try again",
+      });
+    }
+  },
 
   createNewProject: async (name: string) => {
     const newProject: TProject = {
@@ -50,6 +146,7 @@ export const useProjectStore = create<ProjectStore>((set, get) => ({
       backgroundColor: "#000000",
       backgroundType: "color",
       blurIntensity: 8,
+      bookmarks: [],
     };
 
     set({ activeProject: newProject });

apps/web/src/types/project.ts

@@ -9,4 +9,5 @@ export interface TProject {
   backgroundType?: "color" | "blur";
   blurIntensity?: number; // in pixels (4, 8, 18)
   fps?: number;
+  bookmarks?: number[];
 }