+
@@ -221,6 +226,7 @@
left: 50%;
transform: translate(-50%, 0);
}
+
.control-btn {
display: inline-block;
height: 3.7rem;
@@ -228,11 +234,10 @@
cursor: pointer;
margin: 0 0.5rem;
border-radius: 0.5rem;
- transition: 0.1s;
- }
- .control-btn:hover {
- background-color: rgba(0, 0, 0, 0.1);
+ transition: 0.45s;
+ scale: 1;
}
+
.control-img {
height: 2rem;
width: 2rem;
@@ -240,6 +245,7 @@
left: 50%;
transform: translateX(-50%);
}
+
.switch-song-img {
width: auto !important;
height: 1.7rem !important;
@@ -256,19 +262,21 @@
font-family: sans-serif;
text-align: center;
}
- .song-info-top {
+
+ .song-info-regular {
white-space: nowrap;
overflow: hidden;
position: relative;
+ height: 2.375rem;
}
- .song-info-top.animate {
+ .song-info-regular.animate {
mask-image: linear-gradient(
- 90deg,
- rgba(0, 0, 0, 0) 0%,
- rgba(0, 0, 0, 1) 2rem,
- rgba(0, 0, 0, 1) calc(100% - 5rem),
- rgba(0, 0, 0, 0) 100%
+ 90deg,
+ rgba(0, 0, 0, 0) 0%,
+ rgba(0, 0, 0, 1) 2rem,
+ rgba(0, 0, 0, 1) calc(100% - 5rem),
+ rgba(0, 0, 0, 0) 100%
);
}
@@ -283,12 +291,15 @@
height: 2.5rem;
display: inline-block;
}
+
.song-name.animate {
animation: scroll 10s linear infinite;
}
+
.song-name::-webkit-scrollbar {
display: none;
}
+
@keyframes scroll {
0% {
transform: translateX(100%);
@@ -300,10 +311,12 @@
transform: translateX(-100%);
}
}
+
.song-author {
font-size: 1.2rem;
color: rgba(255, 255, 255, 0.8);
}
+
.progress {
position: absolute;
width: 100%;
@@ -311,6 +324,7 @@
transform: translate(-50%, 0);
height: 2.4rem;
}
+
.progress-bar {
-webkit-appearance: none;
appearance: none;
@@ -325,9 +339,11 @@
cursor: pointer;
transition: 0.3s;
}
+
.progress-bar:hover {
height: 0.7rem;
}
+
.bar {
background-color: white;
position: absolute;
@@ -351,10 +367,18 @@
display: inline-block;
top: 0.2rem;
}
+
.time-current {
left: 0;
}
+
.time-total {
right: 0;
}
+
+ @media (min-width: 768px) {
+ .control-btn {
+ transition: 0.1s
+ }
+ }
diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte
index 03a744e..92cd78f 100644
--- a/src/lib/components/lyrics.svelte
+++ b/src/lib/components/lyrics.svelte
@@ -4,6 +4,7 @@
import progressBarRaw from '$lib/state/progressBarRaw';
import type { LrcJsonData } from 'lrc-parser-ts';
import progressBarSlideValue from '$lib/state/progressBarSlideValue';
+ import nextUpdate from '$lib/state/nextUpdate';
// Component input properties
export let lyrics: string[];
@@ -12,18 +13,25 @@
// Local state and variables
let getLyricIndex: Function;
- const debugMode = false;
+ let debugMode = false;
+ if (localStorage.getItem('debugMode') == null) {
+ localStorage.setItem('debugMode', 'false');
+ }
+ else {
+ debugMode = localStorage.getItem('debugMode')!.toLowerCase() === "true";
+ }
let currentLyricIndex = -1;
let currentPositionIndex = -1;
let currentAnimationIndex = -1;
- let lyricsContainer: HTMLDivElement;
- let nextUpdate = -1;
+ let lyricsContainer: HTMLDivElement | null;
let lastAdjustProgress = 0;
let localProgress = 0;
let lastScroll = 0;
let scrolling = false;
let scriptScrolling = false;
+ let currentLyricTopMargin = 288;
+
// References to lyric elements
let refs: HTMLParagraphElement[] = [];
let _refs: any[] = [];
@@ -38,73 +46,37 @@
else return 'previous-lyric';
}
- // Scroll to corresponding lyric while adjusting progress
- $: {
- if ($userAdjustingProgress == true) {
- const currentLyric = refs[getLyricIndex(progress)];
- scrollToLyric(currentLyric);
- }
- }
-
- // Update the current lyric and apply blur effect based on the progress
- $: {
- (() => {
- if (!lyricsContainer || !originalLyrics.scripts) return;
-
- const scripts = originalLyrics.scripts;
- currentPositionIndex = getLyricIndex(progress);
- const cl = scripts[currentPositionIndex];
-
- if (cl.start <= progress && progress <= cl.end) {
- currentLyricIndex = currentPositionIndex;
- nextUpdate = cl.end;
- } else {
- currentLyricIndex = -1;
- nextUpdate = cl.start;
- }
-
- const currentLyric = refs[currentPositionIndex];
- if ($userAdjustingProgress || scrolling || currentLyric.getBoundingClientRect().top < 0) return;
-
- for (let i = 0; i < scripts.length; i++) {
- const offset = Math.abs(i - currentPositionIndex);
- const blurRadius = Math.min(offset * 1, 16);
- if (refs[i]) {
- refs[i].style.filter = `blur(${blurRadius}px)`;
- }
- }
- })();
- }
-
- // Utility function to create a sleep/delay
- function sleep(ms: number) {
- return new Promise((resolve) => setTimeout(resolve, ms));
- }
-
// Function to move the lyrics up smoothly
async function moveToNextLine(h: number) {
- let pos = currentPositionIndex + 2;
- for (let i = currentPositionIndex + 2; i < refs.length; i++) {
+ console.debug(new Date().getTime() , 'moveToNextLine', h);
+ // the line that's going to process (like a pointer)
+ // by default, it's "the next line" after the lift
+ let processingLineIndex = currentPositionIndex + 2;
+
+ // modify translateY of all lines in viewport one by one to lift them up
+ for (let i = processingLineIndex; i < refs.length; i++) {
const lyric = refs[i];
lyric.style.transition =
- 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
+ `transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease,
+ font-size 200ms ease, scale 250ms ease`;
lyric.style.transform = `translateY(${-h}px)`;
- pos = i;
+ processingLineIndex = i;
await sleep(75);
- if (refs[i - 2].getBoundingClientRect().top > lyricsContainer.getBoundingClientRect().height) break;
+ const twoLinesAhead = refs[i - 2];
+ if (lyricsContainer && twoLinesAhead.getBoundingClientRect().top > lyricsContainer.getBoundingClientRect().height) break;
}
- if (refs.length - pos < 3) {
- for (let i = pos; i < refs.length; i++) {
+ if (refs.length - processingLineIndex < 3) {
+ for (let i = processingLineIndex; i < refs.length; i++) {
const lyric = refs[i];
lyric.style.transition =
'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
lyric.style.transform = `translateY(${-h}px)`;
- pos = i;
+ processingLineIndex = i;
await sleep(75);
}
} else {
- for (let i = pos; i < refs.length; i++) {
+ for (let i = processingLineIndex; i < refs.length; i++) {
refs[i].style.transition =
'transform 0s, filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
const height = refs[i].getBoundingClientRect().height;
@@ -112,37 +84,45 @@
}
}
+ // wait until the animation end
await sleep(650);
+
+ // clear the transition to let the following style changes could be done without animation
for (let i = 0; i < refs.length; i++) {
refs[i].style.transition =
'transform 0s, filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
}
+ // reset the translateY, and immediately scroll down to provide visual stability
for (let i = 0; i < refs.length; i++) {
refs[i].style.transform = `translateY(0px)`;
}
scriptScrolling = true;
- lyricsContainer.scrollTop += h;
- setTimeout(() => {
- scriptScrolling = false;
- }, 500);
+ if (lyricsContainer !== null) {
+ lyricsContainer.scrollTop += h;
+ }
+ await sleep(500);
+ scriptScrolling = false;
}
// Scroll the lyrics container to the given lyric
async function scrollToLyric(currentLyric: HTMLParagraphElement) {
if (!originalLyrics || !originalLyrics.scripts || !lyricsContainer) return;
scriptScrolling = true;
- lyricsContainer.scrollTop += currentLyric.getBoundingClientRect().top - 144;
+ lyricsContainer.scrollTop += currentLyric.getBoundingClientRect().top - currentLyricTopMargin;
+ for (let i = 0; i < refs.length; i++) {
+ refs[i].style.transform = 'translateY(0px)';
+ }
setTimeout(() => {
scriptScrolling = false;
}, 500);
}
// Handle user adjusting progress state changes
- userAdjustingProgress.subscribe((v) => {
+ userAdjustingProgress.subscribe((adjusting) => {
if (!originalLyrics) return;
const scripts = originalLyrics.scripts;
if (!scripts) return;
- if (v) {
+ if (adjusting) {
for (let i = 0; i < scripts.length; i++) {
refs[i].style.filter = `blur(0px)`;
}
@@ -193,73 +173,132 @@
}, 5500);
}
- // Update lyrics position based on progress
+ // Utility function to create a sleep/delay
+ function sleep(ms: number) {
+ return new Promise((resolve) => setTimeout(resolve, ms));
+ }
+
+ // Scroll to corresponding lyric while adjusting progress
+ $: {
+ if ($userAdjustingProgress == true) {
+ const currentLyric = refs[getLyricIndex(progress)];
+ scrollToLyric(currentLyric);
+ }
+ }
+
+ // Update the current lyric and apply blur effect based on the progress
$: {
(() => {
- if ($userAdjustingProgress) {
- nextUpdate = progress;
- return;
- }
+ if (!lyricsContainer || !originalLyrics.scripts) return;
- if (nextUpdate - progress >= 0.05) return;
- if (
- currentPositionIndex < 0 ||
- currentPositionIndex === currentAnimationIndex ||
- currentPositionIndex === lastAdjustProgress ||
- scrolling
- )
- return;
+ const scripts = originalLyrics.scripts;
+ currentPositionIndex = getLyricIndex(progress);
+ const cl = scripts[currentPositionIndex];
+
+ if (cl.start <= progress && progress <= cl.end) {
+ currentLyricIndex = currentPositionIndex;
+ nextUpdate.set(cl.end);
+ } else {
+ currentLyricIndex = -1;
+ nextUpdate.set(cl.start);
+ }
const currentLyric = refs[currentPositionIndex];
+ if ($userAdjustingProgress || scrolling || currentLyric.getBoundingClientRect().top < 0) return;
- if (originalLyrics.scripts && currentLyric.getBoundingClientRect().top < 0) return;
-
- const offsetHeight =
- refs[currentPositionIndex].getBoundingClientRect().height +
- refs[currentPositionIndex].getBoundingClientRect().top -
- 144;
-
- currentLyric.style.transition =
- 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
- currentLyric.style.transform = `translateY(${-offsetHeight}px)`;
-
- for (let i = currentPositionIndex - 1; i >= 0; i--) {
- refs[i].style.transition =
- 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
- const height = refs[i].getBoundingClientRect().height;
- refs[i].style.transform = `translateY(${-offsetHeight}px)`;
+ for (let i = 0; i < scripts.length; i++) {
+ const offset = Math.abs(i - currentPositionIndex);
+ const blurRadius = Math.min(offset * 0.96, 16);
+ if (refs[i]) {
+ refs[i].style.filter = `blur(${blurRadius}px)`;
+ }
}
- if (currentPositionIndex + 1 < refs.length) {
- const nextLyric = refs[currentPositionIndex + 1];
- nextLyric.style.transition =
- 'transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
- nextLyric.style.transform = `translateY(${-offsetHeight}px)`;
- moveToNextLine(offsetHeight);
- }
- currentAnimationIndex = currentPositionIndex;
})();
}
+
+ nextUpdate.subscribe(async (nextUpdate) => {
+ if (
+ currentPositionIndex < 0 ||
+ currentPositionIndex === currentAnimationIndex ||
+ currentPositionIndex === lastAdjustProgress ||
+ $userAdjustingProgress === true ||
+ scrolling
+ ) return;
+
+ const currentLyric = refs[currentPositionIndex];
+
+ if (originalLyrics.scripts && currentLyric.getBoundingClientRect().top < 0) return;
+
+ const offsetHeight =
+ refs[currentPositionIndex].getBoundingClientRect().top -
+ currentLyricTopMargin;
+
+ // prepare current line
+ currentLyric.style.transition = `transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease,
+ opacity 200ms ease, font-size 200ms ease, scale 250ms ease`;
+ currentLyric.style.transform = `translateY(${-offsetHeight}px)`;
+
+ for (let i = currentPositionIndex - 1; i >= 0; i--) {
+ refs[i].style.transition = `transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease,
+ opacity 200ms ease, font-size 200ms ease, scale 250ms ease`;
+ refs[i].style.transform = `translateY(${-offsetHeight}px)`;
+ }
+ if (currentPositionIndex + 1 < refs.length) {
+ const nextLyric = refs[currentPositionIndex + 1];
+ nextLyric.style.transition = `transform .6s cubic-bezier(.28,.01,.29,.99), filter 200ms ease,
+ opacity 200ms ease, font-size 200ms ease, scale 250ms ease`;
+ nextLyric.style.transform = `translateY(${-offsetHeight}px)`;
+ await moveToNextLine(offsetHeight);
+ }
+ currentAnimationIndex = currentPositionIndex;
+ })
+
+ function onKeyDown(e: KeyboardEvent) {
+ if (e.altKey && e.shiftKey && (e.metaKey || e.key === 'OS') && e.key === 'Enter') {
+ debugMode = !debugMode;
+ localStorage.setItem('debugMode', debugMode ? 'true' : 'false');
+ }
+ }
+
+ function extractTranslateValue(s: string): string | null {
+ const regex = /translateY\((-?\d*px)\)/;
+ let arr = regex.exec(s);
+ return arr==null ? null : arr[1];
+ }
+
-{#if lyrics && originalLyrics}
+
{name}
@@ -152,26 +139,49 @@
{formatDuration(duration)}
-
- 
+
- 
+
+
-
+
+
+{/if}
+
+
+{#if lyrics && originalLyrics && originalLyrics.scripts}
{/if}
+
diff --git a/src/lib/state/nextUpdate.ts b/src/lib/state/nextUpdate.ts
new file mode 100644
index 0000000..1ef1ac9
--- /dev/null
+++ b/src/lib/state/nextUpdate.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+const nextUpdate = writable(-1);
+export default nextUpdate;
\ No newline at end of file
diff --git a/src/routes/api/database/search/+server.ts b/src/routes/api/database/search/+server.ts
index ea4400a..52fa9c7 100644
--- a/src/routes/api/database/search/+server.ts
+++ b/src/routes/api/database/search/+server.ts
@@ -1,27 +1,28 @@
import { songNameCache } from '$lib/server/cache.js';
import { loadData } from '$lib/server/database/loadData';
-import { json, error } from '@sveltejs/kit';
+import { error, json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
-export async function GET({ url }) {
- const keyword = url.searchParams.get("keyword");
+export const GET: RequestHandler = async ({ url }) => {
+ const keyword = url.searchParams.get('keyword');
- loadData();
+ await loadData();
if (keyword === null) {
return error(400, {
- "message": "Miss parameter: keyword"
- })
+ 'message': 'Miss parameter: keyword'
+ });
}
const resultList: MusicMetadata[] = [];
- for (const songName of songNameCache.keys()){
+ for (const songName of songNameCache.keys()) {
if (songName.toLocaleLowerCase().includes(keyword.toLocaleLowerCase())) {
resultList.push(songNameCache.get(songName)!);
}
}
- return json({
- "result": resultList
+ return json({
+ 'result': resultList
});
-}
\ No newline at end of file
+};
\ No newline at end of file
diff --git a/src/routes/api/database/song/[id]/+server.ts b/src/routes/api/database/song/[id]/+server.ts
index f8889c0..c546949 100644
--- a/src/routes/api/database/song/[id]/+server.ts
+++ b/src/routes/api/database/song/[id]/+server.ts
@@ -1,19 +1,20 @@
import { getCurrentFormattedDateTime } from '$lib/songUpdateTime';
import { json, error } from '@sveltejs/kit';
import fs from 'fs';
+import type { RequestHandler } from './$types';
-export async function GET({ params }) {
+export const GET: RequestHandler = async ({ params }) => {
const filePath = `./data/song/${params.id}.json`;
if (!fs.existsSync(filePath)) {
return error(404, {
- message: "No correspoding song."
+ message: "No corresponding song."
})
}
const data = fs.readFileSync(filePath);
return json(JSON.parse(data.toString()));
}
-export async function POST({ params, request }) {
+export const POST: RequestHandler = async ({ request, params }) => {
const timeStamp = new Date().getTime();
if (!fs.existsSync("./data/pending/")) {
fs.mkdirSync("./data/pending");
diff --git a/src/routes/api/database/songs/+server.ts b/src/routes/api/database/songs/+server.ts
index 4daa7b3..101b9c7 100644
--- a/src/routes/api/database/songs/+server.ts
+++ b/src/routes/api/database/songs/+server.ts
@@ -1,8 +1,9 @@
import { songData } from '$lib/server/cache.js';
import { loadData } from '$lib/server/database/loadData.js';
import { json } from '@sveltejs/kit';
+import type { RequestHandler } from './$types';
-export async function GET({ url }) {
+export const GET: RequestHandler = async ({ url }) => {
const limit = parseInt(url.searchParams.get("limit") ?? "20");
const offset = parseInt(url.searchParams.get("offset") ?? "0");
loadData();
diff --git a/src/routes/database/edit/[id]/+page.server.ts b/src/routes/database/edit/[id]/+page.server.ts
index b887bcb..0699ca2 100644
--- a/src/routes/database/edit/[id]/+page.server.ts
+++ b/src/routes/database/edit/[id]/+page.server.ts
@@ -1,8 +1,8 @@
-/** @type {import('./$types').PageLoad} */
+import type { PageServerLoad } from './$types';
import fs from 'fs';
-export function load({ params }) {
+export const load: PageServerLoad = ({ params }) => {
const filePath = `./data/song/${params.id}.json`;
if (!fs.existsSync(filePath)) {
return {
+ LyricIndex: {currentLyricIndex} PositionIndex: {currentPositionIndex} + AnimationIndex:{currentAnimationIndex} + NextUpdate: {$nextUpdate} + Progress: {progress.toFixed(2)} + lastAdjustProgress: {lastAdjustProgress} + scrollPosition: {lyricsContainer.scrollTop} +
+