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,14 +540,25 @@ 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>
-        <Button
+        <div className="flex items-center gap-2">
-          size="sm"
+          <Button
-          variant="ghost"
+            size="sm"
-          onClick={() => setDisplayMode('normal')}
+            variant="ghost"
-        >
+            onClick={handleStopAllSounds}
-          <Minimize2 className="h-4 w-4 mr-2" />
+            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"
-          Exit Fullscreen
+          >
-        </Button>
+            <Square className="h-4 w-4 mr-2 fill-current" />
+            Stop All Sounds
+          </Button>
+          <Button
+            size="sm"
+            variant="ghost"
+            onClick={() => setDisplayMode('normal')}
+          >
+            <Minimize2 className="h-4 w-4 mr-2" />
+            Exit Fullscreen
+          </Button>
+        </div>
       </div>
 
       <div className="flex-1 flex">