From 2f4f8f0d48001e4cdfe52c942ff97d5fb37265b1 Mon Sep 17 00:00:00 2001
From: Azalea <22280294+hykilpikonna@users.noreply.github.com>
Date: Sun, 23 Nov 2025 14:31:15 +0800
Subject: [PATCH] [+] Pause/play button

---
 src/lib/ui/player/MusicControl.ts         | 12 ++++++++++++
 src/routes/song/[id]/karaoke/+page.svelte | 12 ++++++++++++
 2 files changed, 24 insertions(+)

diff --git a/src/lib/ui/player/MusicControl.ts b/src/lib/ui/player/MusicControl.ts
index 87fe94c..3630002 100644
--- a/src/lib/ui/player/MusicControl.ts
+++ b/src/lib/ui/player/MusicControl.ts
@@ -132,4 +132,16 @@ export class MusicControl {
     Tone.getTransport().stop()
     Tone.getTransport().cancel()
   }
+
+  togglePlay() {
+    if (Tone.getTransport().state === 'started') {
+      Tone.getTransport().pause()
+    } else {
+      Tone.getTransport().start()
+    }
+  }
+
+  get isPlaying() {
+    return Tone.getTransport().state === 'started'
+  }
 }
diff --git a/src/routes/song/[id]/karaoke/+page.svelte b/src/routes/song/[id]/karaoke/+page.svelte
index 1e56255..1689336 100644
--- a/src/routes/song/[id]/karaoke/+page.svelte
+++ b/src/routes/song/[id]/karaoke/+page.svelte
@@ -9,6 +9,7 @@
   import Lyrics from "$lib/ui/player/Lyrics.svelte"
   import PlayerAppBar from "$lib/ui/player/PlayerAppBar.svelte"
   import { getI18n } from "$lib/i18n"
+    import { Layer } from "m3-svelte";
 
   const t = getI18n().song.karaoke
 
@@ -27,6 +28,7 @@
     data.user.data.vocalsVolume = vocalsVolume
   })
   let speed = $state(1)
+  let isPlaying = $state(false)
 
   // Process lyrics
   const isHideRepeated = $derived(settings.hideRepeated)
@@ -77,6 +79,7 @@
       }
       
       if (nextLi !== -1 && nextLi !== li) li = nextLi
+      isPlaying = musicControl.isPlaying
     }, 100)
 
     return () => {
@@ -111,3 +114,12 @@
 </div>
 
 <Lyrics lines={processedLrc} currentLineIndex={li} {settings} {states} />
+
+<button
+  class="fixed bottom-6 right-6 z-5 size-64px cbox rounded-full surface-variant mbg-surface-container mfg-on-surface-variant shadow-lg hover:shadow-xl transition-all active:scale-90"
+  onclick={() => { musicControl?.togglePlay(); isPlaying = musicControl?.isPlaying ?? false }}
+  aria-label="Play/Pause"
+>
+  <Layer />
+  <div class={isPlaying ? "i-material-symbols:pause-rounded text-3xl" : "i-material-symbols:play-arrow-rounded text-3xl"}></div>
+</button>