From aef964aa35a82e2219518f6124ce008bef74a151 Mon Sep 17 00:00:00 2001 From: alikia2x Date: Sat, 20 Jul 2024 19:18:35 +0800 Subject: [PATCH] improve: SSR in database page, fix some UI bugs extract: component SongCard used in database pages adjust (UI): now lyrics container won't show scrollbar --- README.md | 20 ++--- package.json | 2 +- src/lib/components/database/songCard.svelte | 62 +++++++++++++++ src/lib/components/lyrics.svelte | 6 +- src/routes/database/+page.server.ts | 17 +++++ src/routes/database/+page.svelte | 75 +++---------------- src/routes/database/page/[id]/+page.server.ts | 18 +++++ src/routes/database/page/[id]/+page.svelte | 34 +++++++++ 8 files changed, 155 insertions(+), 79 deletions(-) create mode 100644 src/lib/components/database/songCard.svelte create mode 100644 src/routes/database/+page.server.ts create mode 100644 src/routes/database/page/[id]/+page.server.ts create mode 100644 src/routes/database/page/[id]/+page.svelte diff --git a/README.md b/README.md index 638f64a..340cce7 100644 --- a/README.md +++ b/README.md @@ -4,11 +4,11 @@ AquaVox 是一个为中文虚拟歌手爱好者献上的产品。 > VOCALOID IS ALIVE. -这是一个**开源、本地优先、有B站良好支持、界面美观优雅**的**音乐播放器**。 +这是一个 **开源、本地优先、有 B 站良好支持、界面美观优雅** 的 **音乐播放器**。 ## 使用 -当前 AquaVox 的公开预览版位于[aquavox.a2x.pub](https://aquavox.a2x.pub)上。 +当前 AquaVox 的公开预览版位于 [aquavox.app](https://aquavox.app) 上。 [![wakatime](https://wakatime.com/badge/user/018f0628-909b-47e4-bcfd-0153235426d9/project/b67c03ef-ee0b-45f2-85ec-d9c60269cc55.svg)](https://wakatime.com/badge/user/018f0628-909b-47e4-bcfd-0153235426d9/project/b67c03ef-ee0b-45f2-85ec-d9c60269cc55) @@ -16,22 +16,22 @@ AquaVox 是一个为中文虚拟歌手爱好者献上的产品。 **开发者寒寒的话：** -AquaVox 这个播放器项目的灵感根本上来自于Apple Music，以其优雅流畅的界面设计而著称。 +AquaVox 这个播放器项目的灵感根本上来自于 Apple Music，以其优雅流畅的界面设计而著称。 -我的中V曲之前基本是在B站听的，而中文虚拟歌手社区也基本上扎根于B站。但在B站听歌也有不少劣势—— -首先自然是B站本身并不是一个音乐软件或播放器，自然在相关的功能上并没有过多开发，“听视频”的功能也仅在移动端可用； -其次，不少人听歌还是有看歌词的需求的，而许多中V曲发布时附上的PV中的歌词，为了美观，歌词并不会以一个常规视频的字幕样式呈现，而是采用了美术字等更为艺术化的表现形式，这使得查看歌词并不方便，更不用说在“听视频”模式下PV根本没有播放的情况。 +我的中 V 曲之前基本是在 B 站听的，而中文虚拟歌手社区也基本上扎根于 B 站。但在 B 站听歌也有不少劣势—— +首先自然是 B 站本身并不是一个音乐软件或播放器，自然在相关的功能上并没有过多开发，“听视频”的功能也仅在移动端可用； +其次，不少人听歌还是有看歌词的需求的，而许多中 V 曲发布时附上的 PV 中的歌词，为了美观，歌词并不会以一个常规视频的字幕样式呈现，而是采用了美术字等更为艺术化的表现形式，这使得查看歌词并不方便，更不用说在“听视频”模式下 PV 根本没有播放的情况。 -而后来，我选择了通过将B站的歌曲导入到Apple Music的方案，而为什么选择AM呢？尽管很多中V曲在网易云等平台上有更丰富的资源，但我依然选择了AM。很大一个原因自然是我对AM播放器界面和交互设计及用户体验的喜爱，但另一方面，网易云的中V曲库其实也并不算全，最终还要使用导入的方法才能将自己所有喜欢的歌囊括其中，那么既然要导入，何不直接将歌曲全部导入AM呢？ +而后来，我选择了通过将 B 站的歌曲导入到 Apple Music 的方案，而为什么选择 AM 呢？尽管很多中 V 曲在网易云等平台上有更丰富的资源，但我依然选择了 AM。很大一个原因自然是我对 AM 播放器界面和交互设计及用户体验的喜爱，但另一方面，网易云的中 V 曲库其实也并不算全，最终还要使用导入的方法才能将自己所有喜欢的歌囊括其中，那么既然要导入，何不直接将歌曲全部导入 AM 呢？ -但很快，我也发现了AM的一个致命问题：自行导入的歌曲没有动态歌词的功能，只能以一个静态的模式查看全部的歌词。而动态歌词的漂亮设计是我很大一部分喜欢Apple Music的原因，但我自己导入的歌曲却无法享受这个功能，不是很令人失望吗？ +但很快，我也发现了 AM 的一个致命问题：自行导入的歌曲没有动态歌词的功能，只能以一个静态的模式查看全部的歌词。而动态歌词的漂亮设计是我很大一部分喜欢 Apple Music 的原因，但我自己导入的歌曲却无法享受这个功能，不是很令人失望吗？ -因此，最后，我还是最终决定自行开发一个播放器，加上所有我喜欢的东西——Apple Music的页面设计和交互、从B站直接获取的曲库、通过网页、PWA和Electron使全平台有一致的体验。 +因此，最后，我还是最终决定自行开发一个播放器，加上所有我喜欢的东西——Apple Music 的页面设计和交互、从 B 站直接获取的曲库、通过网页、PWA 和 Electron 使全平台有一致的体验。 ## “赠品” **开发者寒寒的话：** -在熟虑后，我决定让 AquaVox 不仅是一个播放器。更进一步，我希望它是一个属于整个中文虚拟歌手社区的数据库。从音源、作者（P主及staff）、虚拟歌手、歌曲元信息、动态歌词，在整个链路上成为一个中文虚拟歌手的终极“Archive”。 +在熟虑后，我决定让 AquaVox 不仅是一个播放器。更进一步，我希望它是一个属于整个中文虚拟歌手社区的数据库。从音源、作者（P 主及 staff）、虚拟歌手、歌曲元信息、动态歌词，在整个链路上成为一个中文虚拟歌手的终极“Archive”。 因此，我们需要你的帮助。 diff --git a/package.json b/package.json index 95e943d..475cb43 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "1.12.6", + "version": "1.12.8", "private": false, "scripts": { "dev": "vite dev", diff --git a/src/lib/components/database/songCard.svelte b/src/lib/components/database/songCard.svelte new file mode 100644 index 0000000..a702ce7 --- /dev/null +++ b/src/lib/components/database/songCard.svelte @@ -0,0 +1,62 @@ + + +
+
+
+ + + + + 编辑 + +
+ +
+
+ {songData.name} +
+ + {songData.producer} + +
+ {#if songData.duration} + {formatDuration(songData.duration)} + {/if} +
+ {#if songData.views} + {formatViews(songData.views)}播放 + {/if} +
+
+
+
+
\ No newline at end of file diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte index 4b2f3ee..03a744e 100644 --- a/src/lib/components/lyrics.svelte +++ b/src/lib/components/lyrics.svelte @@ -68,7 +68,7 @@ for (let i = 0; i < scripts.length; i++) { const offset = Math.abs(i - currentPositionIndex); - const blurRadius = Math.min(offset * 1.5, 16); + const blurRadius = Math.min(offset * 1, 16); if (refs[i]) { refs[i].style.filter = `blur(${blurRadius}px)`; } @@ -278,10 +278,10 @@ ); } .no-scrollbar { - scrollbar-width: 10px; + scrollbar-width: none; } .no-scrollbar::-webkit-scrollbar { - width: 10px; + width: 0px; } .current-lyric { position: relative; diff --git a/src/routes/database/+page.server.ts b/src/routes/database/+page.server.ts new file mode 100644 index 0000000..79f69f6 --- /dev/null +++ b/src/routes/database/+page.server.ts @@ -0,0 +1,17 @@ +import { songData } from '$lib/server/cache.js'; +import { loadData } from '$lib/server/database/loadData.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = () => { + loadData(); + const songIDList = songData.keys().slice(0, 20); + const songDataList = []; + for (const songID of songIDList) { + songDataList.push(songData.get(songID)!); + } + return { + songDataList: songDataList + }; +}; + +export const ssr = true; \ No newline at end of file diff --git a/src/routes/database/+page.svelte b/src/routes/database/+page.svelte index 5c3767f..f50e124 100644 --- a/src/routes/database/+page.svelte +++ b/src/routes/database/+page.svelte @@ -1,20 +1,8 @@ @@ -33,57 +21,14 @@ > -
+ gap: 2rem 1rem;" + > {#each songList as song} - -
- - 编辑 - -
- -
-
- {song.name} -
- - {song.producer} - -
- {#if song.duration} - {formatDuration(song.duration)} - {/if} -
- {#if song.views} - {formatViews(song.views)}播放 - {/if} -
-
-
- + {/each}
diff --git a/src/routes/database/page/[id]/+page.server.ts b/src/routes/database/page/[id]/+page.server.ts new file mode 100644 index 0000000..e037184 --- /dev/null +++ b/src/routes/database/page/[id]/+page.server.ts @@ -0,0 +1,18 @@ +import { songData } from '$lib/server/cache.js'; +import { loadData } from '$lib/server/database/loadData.js'; +import type { PageServerLoad } from './$types'; + +export const load: PageServerLoad = ({ params }) => { + const offset = (parseInt(params.id) - 1) * 20; + loadData(); + const songIDList = songData.keys().slice(offset, offset + 20); + const songDataList = []; + for (const songID of songIDList) { + songDataList.push(songData.get(songID)!); + } + return { + songDataList: songDataList + }; +}; + +export const ssr = true; \ No newline at end of file diff --git a/src/routes/database/page/[id]/+page.svelte b/src/routes/database/page/[id]/+page.svelte new file mode 100644 index 0000000..f50e124 --- /dev/null +++ b/src/routes/database/page/[id]/+page.svelte @@ -0,0 +1,34 @@ + + + + AquaVox 音乐数据库 + + +

AquaVox

+ +
+
+

AquaVox 音乐数据库

+ 提交新曲 +
+ +
+ {#each songList as song} + + {/each} +
+