优化一起听被控端

2026-05-28 00:06:13 +08:00
parent 6b85c4464d
commit c942c8c9ea
7 changed files with 238 additions and 98 deletions
@@ -15,7 +15,14 @@ export async function POST(request: NextRequest) {

    const data = await fetchLxLyric(song);

-    return NextResponse.json({ success: true, data: { lyric: data.lyric || '', tlyric: data.tlyric || '' } });
+    return NextResponse.json(
+      { success: true, data: { lyric: data.lyric || '', tlyric: data.tlyric || '' } },
+      {
+        headers: {
+          'Cache-Control': 'public, max-age=86400',
+        },
+      }
+    );
  } catch (error) {
    console.error('[music-v2] lyric route error:', error);
    return internalError('获取歌词失败', (error as Error).message);
@@ -11,7 +11,7 @@ import MusicSidebarDrawer from '@/components/music/MusicSidebarDrawer';
 import { useWatchRoomContextSafe } from '@/components/WatchRoomProvider';
 import { getSourceDisplayLabel, normalizeSource, SourcePill } from '@/lib/music/shared';
 import type { MusicQuality, MusicSource, Song } from '@/lib/music/types';
-import type { MusicQueueItem, MusicState } from '@/types/watch-room';
+import type { MusicQueueItem, MusicSyncState } from '@/types/watch-room';

 const SPECTRUM_BIN_COUNT = 96;
 const SPECTRUM_IDLE_LEVEL = 0.02;
@@ -50,6 +50,10 @@ interface DbRecord {
  songmid?: string;
 }

+function getMusicQueueItemKey(song: { id: string; platform?: string }, fallbackPlatform = '') {
+  return `${song.platform || fallbackPlatform}:${song.id}`;
+}
+
 function AudioSpectrumCanvas({
  bars,
  compact = false,
@@ -305,7 +309,8 @@ export default function MusicClient({ children: _children }: { children?: React.
  const qualitySwitchRequestRef = useRef(0);
  const currentSongRef = useRef<Song | null>(null);
  const currentSourceRef = useRef(currentSource);
-  const lastMusicQueueSignatureRef = useRef('');
+  const plannedNextSongRef = useRef<Song | null>(null);
+  const plannedNextSongKeyRef = useRef('');

  const isMusicRoomOwner = Boolean(
    watchRoom?.isOwner &&
@@ -327,28 +332,57 @@ export default function MusicClient({ children: _children }: { children?: React.
  const buildMusicRoomState = (
    song: Song,
    options: {
-      queue?: Song[];
-      currentIndex?: number;
      currentTime?: number;
      isPlaying?: boolean;
+      nextSong?: Song | null;
    } = {}
-  ): MusicState => {
+  ): MusicSyncState => {
    const songPlatform = song.platform || currentSourceRef.current;
-    let queue = options.queue && options.queue.length > 0 ? options.queue : playlist;
-    let currentIndex = options.currentIndex ?? queue.findIndex((item) => item.id === song.id && (item.platform || currentSourceRef.current) === songPlatform);
+    const currentSong = { ...song, platform: songPlatform };
+    const playlistSnapshot = playlist
+      .map((item) => ({ ...item, platform: item.platform || songPlatform }))
+      .filter((item) => item.id);
+    const currentKey = getMusicQueueItemKey(currentSong, songPlatform);
+    const playlistKey = playlistSnapshot.map((item) => getMusicQueueItemKey(item)).join('|');
+    const cacheKey = `${currentKey}|${playMode}|${playlistKey}`;

-    if (currentIndex < 0) {
-      queue = [...queue, { ...song, platform: songPlatform }];
-      currentIndex = queue.length - 1;
-    }
+    const resolveNextSong = (): Song | null => {
+      if (typeof options.nextSong !== 'undefined') return options.nextSong || null;
+      if (plannedNextSongKeyRef.current === cacheKey) {
+        return plannedNextSongRef.current;
+      }

-    const currentQueueSong = { ...queue[currentIndex], platform: queue[currentIndex].platform || songPlatform };
+      let currentIndex = playlistSnapshot.findIndex((item) => getMusicQueueItemKey(item) === currentKey);
+      if (currentIndex < 0) {
+        playlistSnapshot.push(currentSong);
+        currentIndex = playlistSnapshot.length - 1;
+      }

+      let nextSong: Song | null = null;
+      if (playMode === 'single') {
+        nextSong = playlistSnapshot[currentIndex] || null;
+      } else if (playMode === 'random') {
+        if (playlistSnapshot.length === 1) {
+          nextSong = playlistSnapshot[0] || null;
+        } else {
+          const candidates = playlistSnapshot.filter((_, index) => index !== currentIndex);
+          nextSong = candidates[Math.floor(Math.random() * candidates.length)] || null;
+        }
+      } else {
+        const nextIndex = currentIndex < playlistSnapshot.length - 1 ? currentIndex + 1 : 0;
+        nextSong = playlistSnapshot[nextIndex] || null;
+      }
+
+      plannedNextSongKeyRef.current = cacheKey;
+      plannedNextSongRef.current = nextSong;
+      return nextSong;
+    };
+
+    const nextSong = resolveNextSong();
    return {
      type: 'music',
-      queue: queue.map(toMusicQueueItem),
-      currentIndex,
-      song: toMusicQueueItem(currentQueueSong),
+      song: toMusicQueueItem(currentSong),
+      nextSong: nextSong ? toMusicQueueItem(nextSong) : null,
      currentTime: options.currentTime ?? audioRef.current?.currentTime ?? currentTimeRef.current ?? 0,
      isPlaying: options.isPlaying ?? isPlaying,
      quality,
@@ -357,14 +391,9 @@ export default function MusicClient({ children: _children }: { children?: React.
    };
  };

-  const emitMusicChange = (song: Song | null, nextQueue?: Song[], nextIndex?: number, playing = true) => {
-    if (!isMusicRoomOwner || !watchRoom || !song) return;
-    watchRoom.changeMusic(buildMusicRoomState(song, {
-      queue: nextQueue,
-      currentIndex: nextIndex,
-      currentTime: audioRef.current?.currentTime || 0,
-      isPlaying: playing,
-    }));
+  const emitMusicChange = (state: MusicSyncState | null) => {
+    if (!isMusicRoomOwner || !watchRoom || !state) return;
+    watchRoom.changeMusic(state);
  };

  const buildStreamUrl = (song: Song, source: MusicSource, songQuality: MusicQuality) => {
@@ -697,17 +726,7 @@ export default function MusicClient({ children: _children }: { children?: React.
  useEffect(() => {
    if (!isMusicRoomOwner || !watchRoom || !currentSong) return;

-    const state = buildMusicRoomState(currentSong);
-    const signature = JSON.stringify({
-      queue: state.queue.map((item) => `${item.platform}:${item.id}`),
-      currentIndex: state.currentIndex,
-      playMode: state.playMode,
-      quality: state.quality,
-    });
-
-    if (signature === lastMusicQueueSignatureRef.current) return;
-    lastMusicQueueSignatureRef.current = signature;
-    watchRoom.updateMusicQueue(state);
+    watchRoom.updateMusicState(buildMusicRoomState(currentSong));
  }, [isMusicRoomOwner, watchRoom, currentSong, playlist, playlistIndex, playMode, quality]);

  useEffect(() => {
@@ -819,9 +838,6 @@ export default function MusicClient({ children: _children }: { children?: React.
          const proxyEnabled = getMusicProxyEnabled();
          setMusicProxyEnabled(proxyEnabled);
          const syncSong = { ...song, platform };
-          const existingQueueIndex = playlist.findIndex(s => s.id === song.id && (s.platform || platform) === platform);
-          const syncQueue = existingQueueIndex >= 0 ? playlist : [...playlist, syncSong];
-          const syncIndex = existingQueueIndex >= 0 ? existingQueueIndex : syncQueue.length - 1;

      // 记录歌曲开始播放的时间
      songStartTimeRef.current = Date.now();
@@ -872,7 +888,10 @@ export default function MusicClient({ children: _children }: { children?: React.
      });

      saveHistoryRecordSafely(record, { ...song, platform }, 0, song.duration || 0);
-      emitMusicChange(syncSong, syncQueue, syncIndex, true);
+      emitMusicChange(buildMusicRoomState(syncSong, {
+        currentTime: 0,
+        isPlaying: true,
+      }));

      if (proxyEnabled) {
        const streamUrl = buildStreamUrl(song, platform, quality);
@@ -4,7 +4,7 @@ import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';

 import { useWatchRoomContext } from '@/components/WatchRoomProvider';
-import type { MusicQueueItem, MusicState } from '@/types/watch-room';
+import type { MusicQueueItem, MusicSyncState } from '@/types/watch-room';

 interface LyricLine {
  time: number;
@@ -73,7 +73,7 @@ function parseLyric(lyricText = '', tlyricText = ''): LyricLine[] {
  })).filter((line) => line.text || line.translation);
 }

-function adjustedTime(state: Pick<MusicState, 'currentTime' | 'updatedAt'>, playing: boolean) {
+function adjustedTime(state: Pick<MusicSyncState, 'currentTime' | 'updatedAt'>, playing: boolean) {
  if (!playing) return state.currentTime;
  return Math.max(0, state.currentTime + (Date.now() - state.updatedAt) / 1000);
 }
@@ -232,9 +232,12 @@ export default function WatchRoomMusicPage() {
  const volumeRef = useRef(100);
  const playbackRequestIdRef = useRef(0);
  const lyricRequestIdRef = useRef(0);
-  const lyricsContainerRef = useRef<HTMLDivElement>(null);
+  const mobileLyricsContainerRef = useRef<HTMLDivElement>(null);
+  const desktopLyricsContainerRef = useRef<HTMLDivElement>(null);
+  const mobileVolumeControlRef = useRef<HTMLDivElement>(null);
+  const desktopVolumeControlRef = useRef<HTMLDivElement>(null);

-  const [state, setState] = useState<MusicState | null>(() => (
+  const [state, setState] = useState<MusicSyncState | null>(() => (
    currentRoom?.currentState?.type === 'music' ? currentRoom.currentState : null
  ));
  const [lyrics, setLyrics] = useState<LyricLine[]>([]);
@@ -283,7 +286,7 @@ export default function WatchRoomMusicPage() {

  useEffect(() => {
    if (currentLyricIndex < 0) return;
-    const container = lyricsContainerRef.current;
+    const container = window.innerWidth < 768 ? mobileLyricsContainerRef.current : desktopLyricsContainerRef.current;
    if (!container) return;
    const active = container.querySelector<HTMLElement>(`[data-lyric-index="${currentLyricIndex}"]`);
    if (!active) return;
@@ -311,6 +314,22 @@ export default function WatchRoomMusicPage() {
    return () => observer.disconnect();
  }, []);

+  useEffect(() => {
+    const handlePointerDown = (event: PointerEvent) => {
+      if (!showVolumeSlider) return;
+      const target = event.target as Node | null;
+      if (!target) return;
+      const insideMobile = mobileVolumeControlRef.current?.contains(target) ?? false;
+      const insideDesktop = desktopVolumeControlRef.current?.contains(target) ?? false;
+      if (!insideMobile && !insideDesktop) {
+        setShowVolumeSlider(false);
+      }
+    };
+
+    document.addEventListener('pointerdown', handlePointerDown);
+    return () => document.removeEventListener('pointerdown', handlePointerDown);
+  }, [showVolumeSlider]);
+
  useEffect(() => {
    volumeRef.current = volume;
    if (audioRef.current) {
@@ -337,7 +356,7 @@ export default function WatchRoomMusicPage() {
    if (audioContextRef.current.state === 'suspended') await audioContextRef.current.resume();
  };

-  const applyPlaybackState = async (nextState: MusicState) => {
+  const applyPlaybackState = async (nextState: MusicSyncState) => {
    const audio = audioRef.current;
    if (!audio) return;
    const requestId = ++playbackRequestIdRef.current;
@@ -415,7 +434,7 @@ export default function WatchRoomMusicPage() {
  useEffect(() => {
    if (!socket) return;

-    const handleState = (nextState: MusicState) => {
+    const handleState = (nextState: MusicSyncState) => {
      setState(nextState);
      setCurrentTime(adjustedTime(nextState, nextState.isPlaying));
      if (Number.isFinite(nextState.song.duration) && nextState.song.duration) {
@@ -491,7 +510,7 @@ export default function WatchRoomMusicPage() {

  const progress = duration > 0 ? Math.min(100, Math.max(0, (currentTime / duration) * 100)) : 0;
  const song = state?.song;
-  const nextSong = state && state.queue.length > 1 ? state.queue[(state.currentIndex + 1) % state.queue.length] : null;
+  const nextSong = state?.nextSong || null;
  const themeRootClass = isDark ? 'bg-zinc-950 text-white' : 'bg-white text-zinc-900';
  const showCoverPanel = mobilePanel === 'cover';
  const showLyricsPanel = mobilePanel === 'lyrics';
@@ -530,26 +549,117 @@ export default function WatchRoomMusicPage() {

        {song ? (
          <>
-            <div className="md:hidden flex items-center justify-center gap-2">
-              <button
-                type="button"
-                onClick={() => setMobilePanel('cover')}
-                className={`rounded-full px-4 py-2 text-sm transition-colors ${showCoverPanel ? 'bg-emerald-500 text-white' : isDark ? 'bg-white/10 text-zinc-300' : 'bg-zinc-100 text-zinc-700'}`}
-              >
-                封面
-              </button>
-              <button
-                type="button"
-                onClick={() => setMobilePanel('lyrics')}
-                className={`rounded-full px-4 py-2 text-sm transition-colors ${showLyricsPanel ? 'bg-emerald-500 text-white' : isDark ? 'bg-white/10 text-zinc-300' : 'bg-zinc-100 text-zinc-700'}`}
-              >
-                歌词
-              </button>
+            <div className="md:hidden">
+              <div className="mx-auto flex w-full max-w-[430px] flex-col gap-3">
+                <div ref={mobileVolumeControlRef} className={`rounded-2xl border px-3 py-3 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}>
+                  <div className="flex items-center gap-3">
+                    <button
+                      type="button"
+                      onClick={() => setMobilePanel(showCoverPanel ? 'lyrics' : 'cover')}
+                      className="flex min-w-0 flex-1 items-center gap-3 text-left"
+                    >
+                      <div className="h-11 w-11 shrink-0 overflow-hidden rounded-lg border border-white/10 bg-zinc-800">
+                        {song.pic ? (
+                          <img src={song.pic} alt={song.name} className="h-full w-full object-cover" />
+                        ) : (
+                          <div className="flex h-full w-full items-center justify-center text-base text-zinc-500">♪</div>
+                        )}
+                      </div>
+                      <div className="min-w-0">
+                        <div className="truncate text-sm font-semibold">{song.name}</div>
+                        <div className={`truncate text-xs ${isDark ? 'text-zinc-500' : 'text-zinc-600'}`}>{song.artist}</div>
+                      </div>
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => setShowVolumeSlider((prev) => !prev)}
+                      className={`relative shrink-0 transition-colors ${isDark ? 'text-zinc-400 hover:text-white' : 'text-zinc-600 hover:text-zinc-900'}`}
+                      title="音量"
+                    >
+                      <svg className="h-4 w-4" fill="currentColor" viewBox="0 0 20 20">
+                        <path fillRule="evenodd" d="M9.383 3.076A1 1 0 0110 4v12a1 1 0 01-1.707.707L4.586 13H2a1 1 0 01-1-1V8a1 1 0 011-1h2.586l3.707-3.707a1 1 0 011.09-.217zM14.657 2.929a1 1 0 011.414 0A9.972 9.972 0 0119 10a9.972 9.972 0 01-2.929 7.071 1 1 0 01-1.414-1.414A7.971 7.971 0 0017 10c0-2.21-.894-4.208-2.343-5.657a1 1 0 010-1.414zm-2.829 2.828a1 1 0 011.415 0A5.983 5.983 0 0115 10a5.984 5.984 0 01-1.757 4.243 1 1 0 01-1.415-1.415A3.984 3.984 0 0013 10a3.983 3.983 0 00-1.172-2.828 1 1 0 010-1.415z" clipRule="evenodd" />
+                      </svg>
+                      <div className={`absolute right-0 top-6 z-20 transition-opacity ${showVolumeSlider ? 'opacity-100' : 'pointer-events-none opacity-0'}`}>
+                        <div className={`rounded-lg border p-3 shadow-xl ${isDark ? 'border-white/10 bg-zinc-900/95' : 'border-zinc-200 bg-white'}`}>
+                          <div className="flex flex-col items-center gap-2">
+                            <span className={`text-xs font-mono ${isDark ? 'text-zinc-400' : 'text-zinc-600'}`}>{volume}</span>
+                            <input
+                              type="range"
+                              min={0}
+                              max={100}
+                              value={volume}
+                              onChange={(e) => setVolume(Number(e.target.value))}
+                              className="h-24 w-2 cursor-pointer appearance-none rounded-full accent-emerald-400"
+                              style={{ writingMode: 'vertical-lr', WebkitAppearance: 'slider-vertical' }}
+                            />
+                          </div>
+                        </div>
+                      </div>
+                    </button>
+                  </div>
+                </div>
+
+                {showCoverPanel ? (
+                  <div className={`rounded-2xl border px-4 py-4 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}>
+                    <div className="flex flex-col gap-4">
+                      <VinylTurntable song={song} isPlaying={Boolean(state?.isPlaying)} />
+                      <AudioSpectrumCanvas bars={bars} compact volume={volume} />
+                      <div className="flex items-center gap-2 text-xs tabular-nums">
+                        <span className={`w-10 ${isDark ? 'text-zinc-500' : 'text-zinc-600'}`}>{formatTime(currentTime)}</span>
+                        <div className={`relative h-1.5 flex-1 overflow-hidden rounded-full ${isDark ? 'bg-white/10' : 'bg-zinc-200'}`}>
+                          <div className="h-full rounded-full bg-emerald-400" style={{ width: `${progress}%` }} />
+                        </div>
+                        <span className={`w-10 text-right ${isDark ? 'text-zinc-500' : 'text-zinc-600'}`}>{formatTime(duration)}</span>
+                      </div>
+                    </div>
+                  </div>
+                ) : (
+                <div
+                  ref={mobileLyricsContainerRef}
+                  className={`rounded-2xl border px-4 py-4 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}
+                >
+                    <div className="max-h-[64vh] overflow-y-auto px-1">
+                      {lyrics.length > 0 ? (
+                        <div className="space-y-3">
+                          {lyrics.map((line, index) => (
+                            <div
+                              key={`${line.time}-${index}`}
+                              data-lyric-index={index}
+                              className={`text-center transition-all duration-300 ${
+                                index === currentLyricIndex
+                                  ? lyricActiveClass
+                                  : index === currentLyricIndex - 1 || index === currentLyricIndex + 1
+                                    ? lyricNearbyClass
+                                    : lyricIdleClass
+                              }`}
+                            >
+                              <div>{line.text || '♪'}</div>
+                              {line.translation && <div className={`mt-1 text-sm font-normal ${isDark ? 'text-zinc-500' : 'text-zinc-400'}`}>{line.translation}</div>}
+                            </div>
+                          ))}
+                        </div>
+                      ) : (
+                        <div className={`flex min-h-[48vh] items-center justify-center ${isDark ? 'text-zinc-500' : 'text-zinc-400'}`}>暂无歌词</div>
+                      )}
+                    </div>
+                    <div className="mt-3">
+                      <AudioSpectrumCanvas bars={bars} compact volume={volume} />
+                    </div>
+                    <div className="mt-4 flex items-center gap-2 text-xs tabular-nums">
+                      <span className={`w-10 ${isDark ? 'text-zinc-500' : 'text-zinc-600'}`}>{formatTime(currentTime)}</span>
+                      <div className={`relative h-1.5 flex-1 overflow-hidden rounded-full ${isDark ? 'bg-white/10' : 'bg-zinc-200'}`}>
+                        <div className="h-full rounded-full bg-emerald-400" style={{ width: `${progress}%` }} />
+                      </div>
+                      <span className={`w-10 text-right ${isDark ? 'text-zinc-500' : 'text-zinc-600'}`}>{formatTime(duration)}</span>
+                    </div>
+                  </div>
+                )}
+              </div>
            </div>

-            <div className="grid flex-1 gap-4 md:grid-cols-[420px_minmax(0,1fr)]">
+            <div className="hidden md:grid flex-1 gap-4 md:grid-cols-[420px_minmax(0,1fr)]">
              <div className={`${showCoverPanel ? 'block' : 'hidden'} min-w-0 md:block`}>
-                <div className={`rounded-lg border p-4 md:p-6 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}>
+                  <div ref={desktopVolumeControlRef} className={`rounded-lg border p-4 md:p-6 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}>
                  <div className="relative">
                    <button
                      type="button"
@@ -596,7 +706,7 @@ export default function WatchRoomMusicPage() {
              </div>

              <div
-                ref={lyricsContainerRef}
+                ref={desktopLyricsContainerRef}
                className={`${showLyricsPanel ? 'block' : 'hidden'} min-h-0 rounded-lg border p-4 md:block md:h-[70vh] md:overflow-y-auto md:p-6 ${isDark ? 'border-white/10 bg-black/20' : 'border-zinc-200 bg-white/80 shadow-sm'}`}
              >
                {lyrics.length > 0 ? (