Fix play behaviour in track view

- Version switching now stops playback and resets UI state
- Playback must be started manually after version switch
- Added space key shortcut for play/pause toggle
- UI elements correctly reflect playback state

Fixes: Play/pause controls work correctly after version switching
Improves: User experience with keyboard shortcuts

web/src/hooks/useWaveform.ts

@@ -39,10 +39,9 @@ export function useWaveform(
     ws.on("ready", () => {
       setIsReady(true);
       options.onReady?.(ws.getDuration());
-      // Auto-play if previous version was playing
+      // Reset playing state when switching versions
-      if (wasPlayingRef.current) {
+      setIsPlaying(false);
-        ws.play();
+      wasPlayingRef.current = false;
-      }
     });
 
     ws.on("audioprocess", (time) => {

web/src/pages/SongPage.tsx

@@ -1,4 +1,4 @@
-import { useRef, useState, useCallback } from "react";
+import { useRef, useState, useCallback, useEffect } from "react";
 import { useParams, Link } from "react-router-dom";
 import { useQuery, useMutation, useQueryClient } from "@tanstack/react-query";
 import { api } from "../api/client";
@@ -42,6 +42,23 @@ export function SongPage() {
     peaksUrl: activeVersion ? `/api/v1/versions/${activeVersion}/waveform` : null,
   });
 
+  // Add space key shortcut for play/pause
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.code === "Space") {
+        e.preventDefault();
+        if (isPlaying) {
+          pause();
+        } else {
+          play();
+        }
+      }
+    };
+
+    window.addEventListener("keydown", handleKeyDown);
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isPlaying, play, pause]);
+
   const { data: comments } = useQuery({
     queryKey: ["comments", songId],
     queryFn: () => api.get<SongComment[]>(`/songs/${songId}/comments`),