From f6ba9a8897c6dc07880d666f5966fe8390ad48c0 Mon Sep 17 00:00:00 2001 From: Azalea <22280294+hykilpikonna@users.noreply.github.com> Date: Sun, 23 Nov 2025 10:09:37 +0800 Subject: [PATCH] [+] Next song button --- src/lib/ui/player/PlayerAppBar.svelte | 34 ++++++++++++++++++-- src/lib/ui/player/SongSwitching.ts | 29 +++++++++++++++++ src/routes/results/[id]/+page.svelte | 27 +++------------- src/routes/song/[id]/+layout.server.ts | 10 ++++++ src/routes/song/[id]/+page.server.ts | 6 ---- src/routes/song/[id]/+page.svelte | 15 ++++++--- src/routes/song/[id]/karaoke/+page.server.ts | 5 ++- src/routes/song/[id]/karaoke/+page.svelte | 5 ++- src/routes/song/[id]/play/+page.server.ts | 5 ++- src/routes/song/[id]/play/+page.svelte | 2 +- 10 files changed, 93 insertions(+), 45 deletions(-) create mode 100644 src/lib/ui/player/SongSwitching.ts create mode 100644 src/routes/song/[id]/+layout.server.ts delete mode 100644 src/routes/song/[id]/+page.server.ts diff --git a/src/lib/ui/player/PlayerAppBar.svelte b/src/lib/ui/player/PlayerAppBar.svelte index 1db357e..791d740 100644 --- a/src/lib/ui/player/PlayerAppBar.svelte +++ b/src/lib/ui/player/PlayerAppBar.svelte @@ -2,12 +2,16 @@ import AppBar from "$lib/ui/appbar/AppBar.svelte" import MenuItem from "$lib/ui/material3/MenuItem.svelte" import { artistAndAlbum } from "$lib/utils" - import type { TypingSettings, UserData, NeteaseSong } from "$lib/types" + import type { TypingSettings, UserData, NeteaseSong, NeteasePlaylist } from "$lib/types" + import { goto } from "$app/navigation" + import { API } from "$lib/client" + import { getNextSong, getNextLoc } from "./SongSwitching" interface Props { song: NeteaseSong settings: TypingSettings loc?: UserData['loc'] + playlist?: NeteasePlaylist showRomajiOnError?: boolean disableHideRepeated?: boolean isKaraoke?: boolean @@ -17,12 +21,30 @@ song, settings = $bindable(), loc = $bindable(), + playlist, showRomajiOnError = true, disableHideRepeated = false, isKaraoke = false }: Props = $props() let isHideRepeated = $derived(settings.hideRepeated && !disableHideRepeated) + + const nextSongId = $derived(getNextSong(playlist, loc)) + async function handleNext() { + if (!loc || !playlist) return + + if (nextSongId) { + const newLoc = getNextLoc(playlist, loc, nextSongId) + loc = newLoc // Update local state + await API.saveUserData({ loc }) + goto(`/song/${nextSongId}`, { replaceState: true }) + } else { + // Playlist finished + loc.isFinished = true + await API.saveUserData({ loc }) + goto(`/playlist/${playlist.id}`) + } + } @@ -40,7 +62,13 @@ onclick={() => settings.hideRepeated = !settings.hideRepeated}>{isHideRepeated ? "显示重复行" : "隐藏重复行"} {#if loc} - - loc.playMode = loc.playMode === 'random' ? 'sequential' : 'random'}>{loc.playMode === 'random' ? "当前：随机播放" : "当前：顺序播放"} + loc!.playMode = loc!.playMode === 'random' ? 'sequential' : 'random'}> + {loc.playMode === 'random' ? "当前：随机播放" : "当前：顺序播放"} + + + {#if nextSongId} + 下首 + {/if} {/if} diff --git a/src/lib/ui/player/SongSwitching.ts b/src/lib/ui/player/SongSwitching.ts new file mode 100644 index 0000000..60c2d71 --- /dev/null +++ b/src/lib/ui/player/SongSwitching.ts @@ -0,0 +1,29 @@ +import type { NeteasePlaylist, UserData } from "$lib/types" + +export function getNextSong(playlist?: NeteasePlaylist, loc?: NonNullable) { + if (!playlist || !loc) return null + if (loc.playMode === 'random') { + const unplayed = playlist.tracks.filter(t => !loc.playedSongIds.includes(t.id)) + if (unplayed.length > 0) { + return unplayed[Math.floor(Math.random() * unplayed.length)].id + } + } else { + const nextIndex = loc.currentSongIndex + 1 + if (nextIndex < playlist.tracks.length) { + return playlist.tracks[nextIndex].id + } + } + return null +} + +export function getNextLoc(playlist: NeteasePlaylist, loc: NonNullable, nextSongId: number): NonNullable { + const nextIndex = playlist.tracks.findIndex(t => t.id === nextSongId) + return { + ...loc, + currentSongIndex: nextIndex, + isFinished: false, + playedSongIds: loc.playedSongIds.includes(nextSongId) + ? loc.playedSongIds + : [...loc.playedSongIds, nextSongId] + } +} diff --git a/src/routes/results/[id]/+page.svelte b/src/routes/results/[id]/+page.svelte index b19abbd..cb12507 100644 --- a/src/routes/results/[id]/+page.svelte +++ b/src/routes/results/[id]/+page.svelte @@ -8,6 +8,7 @@ import Chart from "chart.js/auto" import { API } from "$lib/client" import { getI18n } from "$lib/i18n" + import { getNextSong, getNextLoc } from "$lib/ui/player/SongSwitching" const t = getI18n().results @@ -105,35 +106,15 @@ // Compute next state immediately if (playlist && loc && isCurrentResult) { - if (loc.playMode === 'random') { - const unplayed = playlist.tracks.filter((t: NeteaseSong) => !loc.playedSongIds.includes(t.id)) - if (unplayed.length > 0) { - const nextSong = unplayed[Math.floor(Math.random() * unplayed.length)] - nextSongId = nextSong.id - } else isPlaylistFinished = true - } else { - const nextIndex = loc.currentSongIndex + 1 - if (nextIndex < playlist.tracks.length) { - nextSongId = playlist.tracks[nextIndex].id - } else isPlaylistFinished = true - } + nextSongId = getNextSong(playlist, loc) + if (nextSongId === null) isPlaylistFinished = true } async function handleNext() { if (nextSongId !== null) { if (!data.user.data.loc || !data.playlist) return - const nextIndex = data.playlist.tracks.findIndex((t: NeteaseSong) => t.id === nextSongId) - - const newLoc = { - ...data.user.data.loc, - currentSongIndex: nextIndex, - isFinished: false - } - - if (!newLoc.playedSongIds.includes(nextSongId)) { - newLoc.playedSongIds = [...newLoc.playedSongIds, nextSongId] - } + const newLoc = getNextLoc(data.playlist, data.user.data.loc, nextSongId) data.user.data.loc = newLoc await API.saveUserData({ loc: newLoc }) diff --git a/src/routes/song/[id]/+layout.server.ts b/src/routes/song/[id]/+layout.server.ts new file mode 100644 index 0000000..7b67422 --- /dev/null +++ b/src/routes/song/[id]/+layout.server.ts @@ -0,0 +1,10 @@ +import { getSongRaw, getPlaylist } from "$lib/server/songs" + +export const load = async ({ params, parent }) => { + const { user } = await parent() + const songId = +params.id + const song = await getSongRaw(songId) + const playlist = await user.data?.loc?.currentPlaylistId?.let(getPlaylist) + + return { song, playlist } +} diff --git a/src/routes/song/[id]/+page.server.ts b/src/routes/song/[id]/+page.server.ts deleted file mode 100644 index f51ca31..0000000 --- a/src/routes/song/[id]/+page.server.ts +++ /dev/null @@ -1,6 +0,0 @@ -import { getSongRaw } from "$lib/server/songs" - -export const load = async ({ params }) => { - const song = await getSongRaw(+params.id) - return { song } -} diff --git a/src/routes/song/[id]/+page.svelte b/src/routes/song/[id]/+page.svelte index be9b7ed..3b56631 100644 --- a/src/routes/song/[id]/+page.svelte +++ b/src/routes/song/[id]/+page.svelte @@ -2,15 +2,23 @@ import { API } from "$lib/client" import { onMount } from "svelte" import Button from "$lib/ui/Button.svelte" - import AppBar from "$lib/ui/appbar/AppBar.svelte" + import PlayerAppBar from "$lib/ui/player/PlayerAppBar.svelte" import ProgressList from "$lib/ui/ProgressList.svelte" import { goto } from "$app/navigation" import { artistAndAlbum } from "$lib/utils" import { getI18n } from "$lib/i18n" + import { typingSettingsDefault } from "$lib/types" const t = getI18n().song.mode let { data } = $props() + + let settings = $state(data.user.data?.typingSettings ?? typingSettingsDefault) + $effect(() => { API.saveUserData({ typingSettings: settings }) }) + + let loc = $state(data.user.data.loc) + $effect(() => { API.saveUserData({ loc }) }) + let taskStatus = $state({ lyrics: false, ai: false, @@ -24,7 +32,6 @@ { icon: "i-material-symbols:mic-rounded", label: t.karaoke, url: `/song/${data.song.id}/karaoke`, disabled: !taskStatus.separation }, ]) - let loadStatus = $state<"idle" | "loading" | "done">("idle") let progressItems = $state([]) let progressPercentage = $state(0) @@ -33,7 +40,6 @@ }) async function startLoading() { - loadStatus = "loading" await API.song.prepare(data.song.id) const interval = setInterval(async () => { const res = await API.song.status(data.song.id) @@ -62,7 +68,6 @@ if (state.status === "done") { clearInterval(interval) - loadStatus = "done" progressPercentage = 100 } else if (state.status === "error") { clearInterval(interval) @@ -71,7 +76,7 @@ } - + diff --git a/src/routes/song/[id]/karaoke/+page.server.ts b/src/routes/song/[id]/karaoke/+page.server.ts index a6bca0a..cf69650 100644 --- a/src/routes/song/[id]/karaoke/+page.server.ts +++ b/src/routes/song/[id]/karaoke/+page.server.ts @@ -1,10 +1,9 @@ import type { PageServerLoad } from './$types' -import { getLyricsProcessed, getSongRaw, getSongUrl, checkLyricsProcessed } from "$lib/server/songs.ts" +import { getLyricsProcessed, getSongUrl, checkLyricsProcessed } from "$lib/server/songs.ts" import { redirect } from '@sveltejs/kit' export const load: PageServerLoad = async ({ params }) => { const songId = +params.id - const song = await getSongRaw(songId) const hasLrc = await checkLyricsProcessed(songId) if (!hasLrc) throw redirect(302, `/song/${songId}`) @@ -12,5 +11,5 @@ export const load: PageServerLoad = async ({ params }) => { const lrc = await getLyricsProcessed(songId)! const audioData = await getSongUrl(songId) - return { song, lrc, audioData } + return { lrc, audioData } } diff --git a/src/routes/song/[id]/karaoke/+page.svelte b/src/routes/song/[id]/karaoke/+page.svelte index dbfad3e..dcee018 100644 --- a/src/routes/song/[id]/karaoke/+page.svelte +++ b/src/routes/song/[id]/karaoke/+page.svelte @@ -18,6 +18,9 @@ let settings = $state(data.user.data?.typingSettings ?? typingSettingsDefault) $effect(() => { API.saveUserData({ typingSettings: settings }) }) + let loc = $state(data.user.data.loc) + $effect(() => { API.saveUserData({ loc }) }) + let vocalsVolume = $state(100) // 0-100 // Process lyrics @@ -79,7 +82,7 @@ musicControl?.ready()} onkeydown={() => musicControl?.ready()}/> - +
{#if data.audioData.vocalsUrl} diff --git a/src/routes/song/[id]/play/+page.server.ts b/src/routes/song/[id]/play/+page.server.ts index 3488281..0cdde3a 100644 --- a/src/routes/song/[id]/play/+page.server.ts +++ b/src/routes/song/[id]/play/+page.server.ts @@ -1,15 +1,14 @@ import type { PageServerLoad } from './$types' -import { getLyricsProcessed, getSongRaw, getSongUrl, checkLyricsProcessed } from "$lib/server/songs.ts" +import { getLyricsProcessed, getSongUrl, checkLyricsProcessed } from "$lib/server/songs.ts" import { redirect } from '@sveltejs/kit' export const load: PageServerLoad = async ({ params, url }) => { const songId = +params.id - const song = await getSongRaw(songId) const hasLrc = await checkLyricsProcessed(songId) if (!hasLrc) throw redirect(302, `/song/${songId}`) const lrc = await getLyricsProcessed(songId)! const audioUrl = url.searchParams.get('music') === 'true' ? await getSongUrl(songId) : undefined - return { song, lrc, audioUrl } + return { lrc, audioUrl } } \ No newline at end of file diff --git a/src/routes/song/[id]/play/+page.svelte b/src/routes/song/[id]/play/+page.svelte index 0ee28d8..1572193 100644 --- a/src/routes/song/[id]/play/+page.svelte +++ b/src/routes/song/[id]/play/+page.svelte @@ -157,7 +157,7 @@ musicControl?.ready()} onkeydown={() => musicControl?.ready()}/> - +