From eb0088d11016fd1fa732f319111e8e863d96371b Mon Sep 17 00:00:00 2001
From: saopig1 <saopig@duck.com>
Date: Mon, 30 Mar 2026 14:50:14 +0800
Subject: [PATCH] fix: edge case bugs + toggle lyrics from player bar and
 lyrics button

Bugs fixed:
- play-at: stop current playback before jumping to queue index
- playNext retry: use break instead of return to ensure stateChange emits
- sendVoiceData: skip if disconnecting to avoid errors during teardown

UI: player-left and lyrics button now toggle lyrics page (open/close)

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 src/bot/instance.ts           |  2 +-
 src/ts-protocol/client.ts     |  3 +--
 src/web/api/player.ts         |  1 +
 web/src/components/Player.vue | 19 +++++++++++++++----
 4 files changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/bot/instance.ts b/src/bot/instance.ts
index 6768432..097974d 100644
--- a/src/bot/instance.ts
+++ b/src/bot/instance.ts
@@ -491,7 +491,7 @@ export class BotInstance extends EventEmitter {
           for (let i = 0; i < 3; i++) {
             const retry = this.queue.next();
             if (!retry) break;
-            if (await this.resolveAndPlay(retry)) return;
+            if (await this.resolveAndPlay(retry)) break;
           }
           this.player.stop();
         }
diff --git a/src/ts-protocol/client.ts b/src/ts-protocol/client.ts
index e922f13..761dd27 100644
--- a/src/ts-protocol/client.ts
+++ b/src/ts-protocol/client.ts
@@ -154,8 +154,7 @@ export class TS3Client extends EventEmitter {
   }
 
   sendVoiceData(opusFrame: Buffer): void {
-    if (!this.client) return;
-    // Codec 5 = CODEC_OPUS_MUSIC
+    if (!this.client || this.disconnecting) return;
     this.client.sendVoice(opusFrame, 5);
   }
 
diff --git a/src/web/api/player.ts b/src/web/api/player.ts
index 1e5c3a2..5daaba7 100644
--- a/src/web/api/player.ts
+++ b/src/web/api/player.ts
@@ -152,6 +152,7 @@ export function createPlayerRouter(
         return;
       }
       const queue = bot.getQueueManager();
+      bot.getPlayer().stop(); // Stop current playback first
       const song = queue.playAt(index);
       if (!song) {
         res.status(400).json({ error: "Invalid queue index" });
diff --git a/web/src/components/Player.vue b/web/src/components/Player.vue
index a8b91bf..8126932 100644
--- a/web/src/components/Player.vue
+++ b/web/src/components/Player.vue
@@ -24,13 +24,13 @@
         </div>
       </div>
 
-      <RouterLink to="/lyrics" class="player-left">
+      <div class="player-left" @click="toggleLyrics">
         <CoverArt :url="currentSong.coverUrl" :size="40" />
         <div class="song-info">
           <div class="song-name">{{ currentSong.name }}</div>
           <div class="song-artist">{{ currentSong.artist }}</div>
         </div>
-      </RouterLink>
+      </div>
 
       <div class="player-center">
         <span class="time-display time-current">{{ formatTime(currentElapsed) }}</span>
@@ -63,9 +63,9 @@
         <button class="control-btn" :class="{ active: showQueue }" @click="showQueue = !showQueue">
           <Icon icon="mdi:playlist-music" />
         </button>
-        <RouterLink to="/lyrics" class="control-btn lyrics-btn">
+        <button class="control-btn lyrics-btn" :class="{ active: route.path === '/lyrics' }" @click="toggleLyrics">
           <Icon icon="mdi:microphone" />
-        </RouterLink>
+        </button>
       </div>
     </div>
   </div>
@@ -74,16 +74,27 @@
 <script setup lang="ts">
 import { computed, ref, onMounted, onUnmounted } from 'vue';
 import { Icon } from '@iconify/vue';
+import { useRoute, useRouter } from 'vue-router';
 import { usePlayerStore } from '../stores/player.js';
 import CoverArt from './CoverArt.vue';
 import Queue from './Queue.vue';
 
+const route = useRoute();
+const router = useRouter();
 const showQueue = ref(false);
 
 const store = usePlayerStore();
 const activeBot = computed(() => store.activeBot);
 const currentSong = computed(() => store.currentSong);
 
+function toggleLyrics() {
+  if (route.path === '/lyrics') {
+    router.back();
+  } else {
+    router.push('/lyrics');
+  }
+}
+
 // Progress — use manual timer instead of relying on reactive getters
 const currentElapsed = ref(0);
 const progressPercent = ref(0);