Merge branch 'feature#404-page'

README.md

@@ -30,9 +30,9 @@ Practice Japanese Karaoke lyrics reading and typing at the same time with KaraDa
 ## Technical Tasks
 
 * [x] i18n
-* [ ] 404 page
+* [x] 404 page
-* [ ] Previous song / next song buttons
+* [x] Previous song / next song buttons
-* [ ] Update an existing playlist
+* [x] Update an existing playlist
 * [ ] Allow users to correct lyric pronunciations through correction feedback
 * [ ] Correct lyrics timing inconsistencies (i.e. 网易云的歌词因为是业余用户上传的，时间戳不一定准确。但是 waveform 里面可以分析出每句歌词的具体开始结束时间，也许可以自动修正)
 

src/lib/i18n/en.ts

@@ -37,6 +37,7 @@ export default {
       tip: 'Go to NetEase Music App, find a Japanese playlist you like, click share, copy link, and paste it here to start importing!',
       inputLabel: 'NetEase Playlist Link / ID',
       btnStart: 'Start Import',
+      btnUpdate: 'Update Playlist',
       btnView: 'View Playlist'
     }
   },
@@ -47,7 +48,8 @@ export default {
       count: 'Songs: ',
       startPractice: 'Start Practice',
       songList: 'Song List',
-      songs: 'songs'
+      songs: 'songs',
+      updateFromNetease: 'Update from NetEase'
     },
     list: {
       mine: 'My Playlists',

src/lib/i18n/ja.ts

@@ -37,6 +37,7 @@ export default {
       tip: 'NetEase Musicアプリでお気に入りの日本語プレイリストを見つけ、共有をクリックし、リンクをコピーしてここに貼り付けると、インポートを開始できます！',
       inputLabel: 'NetEaseプレイリストリンク / ID',
       btnStart: 'インポート開始',
+      btnUpdate: 'プレイリストを更新',
       btnView: 'プレイリストを表示'
     }
   },
@@ -47,7 +48,8 @@ export default {
       count: '曲数: ',
       startPractice: '練習開始',
       songList: '曲リスト',
-      songs: '曲'
+      songs: '曲',
+      updateFromNetease: 'NetEaseから更新'
     },
     list: {
       mine: 'マイプレイリスト',

src/lib/i18n/zh.ts

@@ -37,6 +37,7 @@ export default {
       tip: '去网易云 APP 找一个你喜欢的日本语歌单，点击分享，再点击复制链接，然后把链接粘贴到这里就可以开始导入了！',
       inputLabel: '网易云歌单链接 / ID',
       btnStart: '开始导入',
+      btnUpdate: '更新歌单',
       btnView: '查看歌单'
     }
   },
@@ -47,7 +48,8 @@ export default {
       count: '歌曲数: ',
       startPractice: '开始练习',
       songList: '歌曲列表',
-      songs: '首歌曲'
+      songs: '首歌曲',
+      updateFromNetease: '从网易云更新歌单'
     },
     list: {
       mine: '我的歌单',

src/lib/server/songs.ts

@@ -226,7 +226,7 @@ export const getSession = (id: string) => sessions.get(id)
  * @returns Import session
  */
 export async function startImport(link: string, userId?: number): Promise<ImportSession> {
-    const meta = await getPlaylistRaw(parsePlaylistRef(link))
+    const meta = await getPlaylistRaw(parsePlaylistRef(link), true)
     const importId = crypto.randomUUID()
     
     const session: ImportSession = {

src/lib/ui/ProgressList.svelte

@@ -27,14 +27,14 @@
 
   <LinearProgress percent={percentage ?? 0}/>
 
-  <div class="vbox p-content scroll-here gap-8px">
+  <div class="vbox p-content scroll-here gap-8px overflow-x-hidden">
     {#each items as item}
       <div class="hbox gap-12px items-center h-40px">
         <span class="{item.icon} text-xl"></span>
-        <div class="vbox">
+        <div class="vbox min-w-0 flex-1">
-          <span class="m3-font-title-medium">{item.title}</span>
+          <span class="m3-font-title-medium truncate">{item.title}</span>
           {#if item.subtitle}
-            <span class="m3-font-body-small mfg-on-surface-variant">{item.subtitle}</span>
+            <span class="m3-font-body-small mfg-on-surface-variant truncate">{item.subtitle}</span>
           {/if}
         </div>
       </div>

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}`)
+    }
+  }
 </script>
 
 <AppBar title={song.name} sub={artistAndAlbum(song)}>
@@ -40,7 +62,13 @@
     onclick={() => settings.hideRepeated = !settings.hideRepeated}>{isHideRepeated ? "显示重复行" : "隐藏重复行"}</MenuItem>
   
   {#if loc}
-    <MenuItem icon={loc.playMode === 'random' ? "i-material-symbols:shuffle-rounded" : "i-material-symbols:repeat-rounded"} onclick={() =>
+    <MenuItem icon={loc.playMode === 'random' ? "i-material-symbols:shuffle-rounded" : "i-material-symbols:repeat-rounded"}
-      loc.playMode = loc.playMode === 'random' ? 'sequential' : 'random'}>{loc.playMode === 'random' ? "当前：随机播放" : "当前：顺序播放"}</MenuItem>
+      onclick={() => loc!.playMode = loc!.playMode === 'random' ? 'sequential' : 'random'}>
+      {loc.playMode === 'random' ? "当前：随机播放" : "当前：顺序播放"}
+    </MenuItem>
+
+    {#if nextSongId}
+      <MenuItem icon="i-material-symbols:skip-next-rounded" onclick={handleNext}>下首</MenuItem>
+    {/if}
   {/if}
 </AppBar>

src/lib/ui/player/SongSwitching.ts

@@ -0,0 +1,29 @@
+import type { NeteasePlaylist, UserData } from "$lib/types"
+
+export function getNextSong(playlist?: NeteasePlaylist, loc?: NonNullable<UserData['loc']>) {
+  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<UserData['loc']>, nextSongId: number): NonNullable<UserData['loc']> {
+  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]
+  }
+}

src/routes/import/netease/+page.svelte

@@ -7,10 +7,12 @@
   import ErrorDialog from "$lib/ui/status/ErrorDialog.svelte"
   import ProgressList from "$lib/ui/ProgressList.svelte"
   import { getI18n } from "$lib/i18n"
+  import { page } from '$app/state'
 
   const t = getI18n().import.netease
 
-  let link = $state('')
+  let link = $state(page.url.searchParams.get('id') ?? '')
+  let isUpdate = $derived(!!page.url.searchParams.get('id'))
 
   interface SongImportStatus {
     song: NeteaseSong
@@ -91,7 +93,7 @@
 
   <div class="py-16px p-content">
     {#if status === 'idle'}
-      <Button big icon="i-material-symbols:download" onclick={startImport}>{t.btnStart}</Button>
+      <Button big icon={isUpdate ? "i-material-symbols:sync" : "i-material-symbols:download"} onclick={startImport}>{isUpdate ? t.btnUpdate : t.btnStart}</Button>
     {:else if status === 'success'}
       <a href="/playlist/{id}">
         <Button big icon="i-material-symbols:right-arrow">{t.btnView}</Button>

src/routes/playlist/[id]/+page.svelte

@@ -6,6 +6,7 @@
   import SongInfo from "$lib/ui/listitem/SongInfo.svelte"
   import { API } from "$lib/client"
   import { getI18n } from "$lib/i18n"
+  import MenuItem from "$lib/ui/material3/MenuItem.svelte";
 
   const t = getI18n().playlist.detail
 
@@ -49,9 +50,10 @@
   {
     icon: isFavorite ? "i-material-symbols:bookmark-rounded" : "i-material-symbols:bookmark-add-outline-rounded", 
     onclick: toggleFavorite
-  },
+  }
-  {icon: "i-material-symbols:more-vert", onclick: () => alert('More clicked')}
+]}>
-]} />
+  <MenuItem icon="i-material-symbols:update" onclick={() => goto(`/import/netease?id=${meta.id}`)}>{t.updateFromNetease}</MenuItem>
+</AppBar>
 
 <div class="hbox px-16px py-8px gap-24px">
   <img src="{meta.coverImgUrl}" alt="" class="size-128px rounded-16px">

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') {
+    nextSongId = getNextSong(playlist, loc)
-      const unplayed = playlist.tracks.filter((t: NeteaseSong) => !loc.playedSongIds.includes(t.id))
+    if (nextSongId === null) isPlaylistFinished = true
-      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
-    }
   }
 
   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 = getNextLoc(data.playlist, data.user.data.loc, nextSongId)
-      
-      const newLoc = {
-        ...data.user.data.loc,
-        currentSongIndex: nextIndex,
-        isFinished: false
-      }
-      
-      if (!newLoc.playedSongIds.includes(nextSongId)) {
-        newLoc.playedSongIds = [...newLoc.playedSongIds, nextSongId]
-      }
 
       data.user.data.loc = newLoc
       await API.saveUserData({ loc: newLoc })

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 }
+}

src/routes/song/[id]/+page.server.ts

@@ -1,6 +0,0 @@
-import { getSongRaw } from "$lib/server/songs"
-
-export const load = async ({ params }) => {
-    const song = await getSongRaw(+params.id)
-    return { song }
-}

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<any[]>([])
   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 @@
   }
 </script>
 
-<AppBar title={data.song.name} sub={artistAndAlbum(data.song)} />
+<PlayerAppBar song={data.song} bind:settings bind:loc playlist={data.playlist} />
 
 <ProgressList percentage={progressPercentage} items={progressItems} />
 

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 }
 }

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 @@
 
 <svelte:window onclick={() => musicControl?.ready()} onkeydown={() => musicControl?.ready()}/>
 
-<PlayerAppBar song={data.song} bind:settings showRomajiOnError={false} isKaraoke={true} disableHideRepeated />
+<PlayerAppBar song={data.song} bind:settings bind:loc showRomajiOnError={false} isKaraoke={true} disableHideRepeated playlist={data.playlist} />
 
 <div class="vbox p-content py-4 gap-2 mfg-on-surface-variant">
   {#if data.audioData.vocalsUrl}

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 }
 }

src/routes/song/[id]/play/+page.svelte

@@ -157,7 +157,7 @@
 
 <svelte:window onclick={() => musicControl?.ready()} onkeydown={() => musicControl?.ready()}/>
 
-<PlayerAppBar song={data.song} bind:settings bind:loc disableHideRepeated={!!data.audioUrl} />
+<PlayerAppBar song={data.song} bind:settings bind:loc disableHideRepeated={!!data.audioUrl} playlist={data.playlist} />
 
 <LinearProgress percent={progress} />