feat: add 'Stop All Sounds' button to Player component for improved sound control

src/components/player/Player.tsx

@@ -16,6 +16,7 @@ import {
   type PlayerState,
   playerService,
 } from '@/lib/api/services/player'
+import { soundsService } from '@/lib/api/services/sounds'
 import { PLAYER_EVENTS, playerEvents } from '@/lib/events'
 import { cn } from '@/lib/utils'
 import { formatDuration } from '@/utils/format-duration'
@@ -216,6 +217,16 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
     }
   }, [state.current_sound])
 
+  const handleStopAllSounds = useCallback(async () => {
+    try {
+      await soundsService.stopSounds()
+      toast.success('All sounds stopped')
+    } catch (error) {
+      console.error('Failed to stop all sounds:', error)
+      toast.error('Failed to stop all sounds')
+    }
+  }, [])
+
   const getModeIcon = () => {
     switch (state.mode) {
       case 'continuous':
@@ -529,6 +540,16 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
       {/* Header */}
       <div className="p-4 border-b flex items-center justify-between">
         <h2 className="text-lg font-semibold">Now Playing</h2>
+        <div className="flex items-center gap-2">
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={handleStopAllSounds}
+            className="text-red-600 hover:text-red-700 hover:bg-red-50 dark:text-red-400 dark:hover:text-red-300 dark:hover:bg-red-950/50"
+          >
+            <Square className="h-4 w-4 mr-2 fill-current" />
+            Stop All Sounds
+          </Button>
           <Button
             size="sm"
             variant="ghost"
@@ -538,6 +559,7 @@ export function Player({ className, onPlayerModeChange }: PlayerProps) {
             Exit Fullscreen
           </Button>
         </div>
+      </div>
 
       <div className="flex-1 flex">
         {/* Main Player Area */}