diff --git a/web/src/hooks/useWaveform.ts b/web/src/hooks/useWaveform.ts index 06f812b..45b713d 100644 --- a/web/src/hooks/useWaveform.ts +++ b/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 - if (wasPlayingRef.current) { - ws.play(); - } + // Reset playing state when switching versions + setIsPlaying(false); + wasPlayingRef.current = false; }); ws.on("audioprocess", (time) => { diff --git a/web/src/pages/SongPage.tsx b/web/src/pages/SongPage.tsx index dd163df..b96071f 100644 --- a/web/src/pages/SongPage.tsx +++ b/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(`/songs/${songId}/comments`),