From da4566c7895606ab232d814ec06a750045f4d955 Mon Sep 17 00:00:00 2001
From: JSC <jschoisy@carea5.com>
Date: Sat, 20 Sep 2025 15:50:47 +0200
Subject: [PATCH] feat: add 'Stop All Sounds' button to Player component for
 improved sound control

---
 src/components/player/Player.tsx | 38 +++++++++++++++++++++++++-------
 1 file changed, 30 insertions(+), 8 deletions(-)

diff --git a/src/components/player/Player.tsx b/src/components/player/Player.tsx
index 8d541b8..b9e9a4f 100644
--- a/src/components/player/Player.tsx
+++ b/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
-          size="sm"
-          variant="ghost"
-          onClick={() => setDisplayMode('normal')}
-        >
-          <Minimize2 className="h-4 w-4 mr-2" />
-          Exit Fullscreen
-        </Button>
+        <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"
+            onClick={() => setDisplayMode('normal')}
+          >
+            <Minimize2 className="h-4 w-4 mr-2" />
+            Exit Fullscreen
+          </Button>
+        </div>
       </div>
 
       <div className="flex-1 flex">