From 7b87a649ac8c1ec3f15ae4747b58dc611b769d45 Mon Sep 17 00:00:00 2001
From: Alikia2x <ziwen243@outlook.com>
Date: Sun, 19 May 2024 17:21:07 +0800
Subject: [PATCH] feature: Apple Music-style lyrics scrolling

---
 package.json                              |  32 +-
 pnpm-lock.yaml                            | 584 +++++++++++++++-------
 src/index.test.js                         |   4 +
 src/lib/components/background.svelte      |   1 +
 src/lib/components/interactiveBox.svelte  | 103 ++--
 src/lib/components/lyrics.svelte          | 317 ++++++------
 src/lib/formatDuration.ts                 |   2 +-
 src/lib/formatText.ts                     |   2 +-
 src/lib/lyrics/lyricSearcher.ts           |  33 ++
 src/lib/state/progressBarRaw.ts           |   3 +
 src/lib/state/userAdjustingProgress.ts    |   3 +
 src/routes/+page.svelte                   |   2 +-
 src/routes/import/[id]/lyric/+page.svelte |   2 +-
 src/routes/play/[id]/+page.svelte         |  39 +-
 14 files changed, 706 insertions(+), 421 deletions(-)
 create mode 100644 src/lib/lyrics/lyricSearcher.ts
 create mode 100644 src/lib/state/progressBarRaw.ts
 create mode 100644 src/lib/state/userAdjustingProgress.ts

diff --git a/package.json b/package.json
index 739b4b1..344f62e 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "aquavox",
-	"version": "1.9.1",
+	"version": "1.10.0",
 	"private": false,
 	"scripts": {
 		"dev": "vite dev",
@@ -14,26 +14,26 @@
 		"go": "PORT=4173 node build"
 	},
 	"devDependencies": {
-		"@iconify/svelte": "^4.0.1",
-		"@sveltejs/adapter-auto": "^3.0.0",
+		"@iconify/svelte": "^4.0.2",
+		"@sveltejs/adapter-auto": "^3.2.0",
 		"@sveltejs/adapter-node": "^5.0.1",
-		"@sveltejs/kit": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@types/eslint": "^8.56.0",
+		"@sveltejs/kit": "^2.5.9",
+		"@sveltejs/vite-plugin-svelte": "^3.1.0",
+		"@types/eslint": "^8.56.10",
 		"@types/uuid": "^9.0.8",
 		"autoprefixer": "^10.4.19",
-		"eslint": "^8.56.0",
+		"eslint": "^8.57.0",
 		"eslint-config-prettier": "^9.1.0",
-		"eslint-plugin-svelte": "^2.35.1",
+		"eslint-plugin-svelte": "^2.39.0",
 		"postcss": "^8.4.38",
-		"prettier": "^3.1.1",
-		"prettier-plugin-svelte": "^3.1.2",
-		"svelte": "^4.2.7",
-		"svelte-check": "^3.6.0",
+		"prettier": "^3.2.5",
+		"prettier-plugin-svelte": "^3.2.3",
+		"svelte": "^4.2.17",
+		"svelte-check": "^3.7.1",
 		"tailwindcss": "^3.4.3",
-		"typescript": "^5.0.0",
-		"vite": "^5.0.3",
-		"vitest": "^1.2.0"
+		"typescript": "^5.4.5",
+		"vite": "^5.2.11",
+		"vitest": "^1.6.0"
 	},
 	"type": "module",
 	"dependencies": {
@@ -42,9 +42,9 @@
 		"jotai": "^2.8.0",
 		"jotai-svelte": "^0.0.2",
 		"localforage": "^1.10.0",
+		"lrc-parser-ts": "^1.0.3",
 		"music-metadata-browser": "^2.5.10",
 		"rollup-plugin-node-polyfills": "^0.2.1",
-		"srt-parser-2": "^1.2.3",
 		"uuid": "^9.0.1"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 80296fe..35dbc36 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7,7 +7,7 @@ settings:
 dependencies:
   '@esbuild-plugins/node-globals-polyfill':
     specifier: ^0.2.3
-    version: 0.2.3(esbuild@0.20.2)
+    version: 0.2.3(esbuild@0.21.3)
   bezier-easing:
     specifier: ^2.1.0
     version: 2.1.0
@@ -20,37 +20,37 @@ dependencies:
   localforage:
     specifier: ^1.10.0
     version: 1.10.0
+  lrc-parser-ts:
+    specifier: ^1.0.3
+    version: 1.0.3
   music-metadata-browser:
     specifier: ^2.5.10
     version: 2.5.10
   rollup-plugin-node-polyfills:
     specifier: ^0.2.1
     version: 0.2.1
-  srt-parser-2:
-    specifier: ^1.2.3
-    version: 1.2.3
   uuid:
     specifier: ^9.0.1
     version: 9.0.1
 
 devDependencies:
   '@iconify/svelte':
-    specifier: ^4.0.1
-    version: 4.0.1(svelte@4.2.15)
+    specifier: ^4.0.2
+    version: 4.0.2(svelte@4.2.17)
   '@sveltejs/adapter-auto':
-    specifier: ^3.0.0
-    version: 3.2.0(@sveltejs/kit@2.5.7)
+    specifier: ^3.2.0
+    version: 3.2.0(@sveltejs/kit@2.5.9)
   '@sveltejs/adapter-node':
     specifier: ^5.0.1
-    version: 5.0.1(@sveltejs/kit@2.5.7)
+    version: 5.0.1(@sveltejs/kit@2.5.9)
   '@sveltejs/kit':
-    specifier: ^2.0.0
-    version: 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10)
+    specifier: ^2.5.9
+    version: 2.5.9(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11)
   '@sveltejs/vite-plugin-svelte':
-    specifier: ^3.0.0
-    version: 3.1.0(svelte@4.2.15)(vite@5.2.10)
+    specifier: ^3.1.0
+    version: 3.1.0(svelte@4.2.17)(vite@5.2.11)
   '@types/eslint':
-    specifier: ^8.56.0
+    specifier: ^8.56.10
     version: 8.56.10
   '@types/uuid':
     specifier: ^9.0.8
@@ -59,41 +59,41 @@ devDependencies:
     specifier: ^10.4.19
     version: 10.4.19(postcss@8.4.38)
   eslint:
-    specifier: ^8.56.0
+    specifier: ^8.57.0
     version: 8.57.0
   eslint-config-prettier:
     specifier: ^9.1.0
     version: 9.1.0(eslint@8.57.0)
   eslint-plugin-svelte:
-    specifier: ^2.35.1
-    version: 2.38.0(eslint@8.57.0)(svelte@4.2.15)
+    specifier: ^2.39.0
+    version: 2.39.0(eslint@8.57.0)(svelte@4.2.17)
   postcss:
     specifier: ^8.4.38
     version: 8.4.38
   prettier:
-    specifier: ^3.1.1
+    specifier: ^3.2.5
     version: 3.2.5
   prettier-plugin-svelte:
-    specifier: ^3.1.2
-    version: 3.2.3(prettier@3.2.5)(svelte@4.2.15)
+    specifier: ^3.2.3
+    version: 3.2.3(prettier@3.2.5)(svelte@4.2.17)
   svelte:
-    specifier: ^4.2.7
-    version: 4.2.15
+    specifier: ^4.2.17
+    version: 4.2.17
   svelte-check:
-    specifier: ^3.6.0
-    version: 3.7.0(postcss@8.4.38)(svelte@4.2.15)
+    specifier: ^3.7.1
+    version: 3.7.1(postcss@8.4.38)(svelte@4.2.17)
   tailwindcss:
     specifier: ^3.4.3
     version: 3.4.3
   typescript:
-    specifier: ^5.0.0
+    specifier: ^5.4.5
     version: 5.4.5
   vite:
-    specifier: ^5.0.3
-    version: 5.2.10
+    specifier: ^5.2.11
+    version: 5.2.11
   vitest:
-    specifier: ^1.2.0
-    version: 1.5.3
+    specifier: ^1.6.0
+    version: 1.6.0
 
 packages:
 
@@ -110,12 +110,12 @@ packages:
       '@jridgewell/trace-mapping': 0.3.25
     dev: true
 
-  /@esbuild-plugins/node-globals-polyfill@0.2.3(esbuild@0.20.2):
+  /@esbuild-plugins/node-globals-polyfill@0.2.3(esbuild@0.21.3):
     resolution: {integrity: sha512-r3MIryXDeXDOZh7ih1l/yE9ZLORCd5e8vWg02azWRGj5SPTuoh69A2AIyn0Z31V/kHBfZ4HgWJ+OK3GTTwLmnw==}
     peerDependencies:
       esbuild: '*'
     dependencies:
-      esbuild: 0.20.2
+      esbuild: 0.21.3
     dev: false
 
   /@esbuild/aix-ppc64@0.20.2:
@@ -124,6 +124,16 @@ packages:
     cpu: [ppc64]
     os: [aix]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/aix-ppc64@0.21.3:
+    resolution: {integrity: sha512-yTgnwQpFVYfvvo4SvRFB0SwrW8YjOxEoT7wfMT7Ol5v7v5LDNvSGo67aExmxOb87nQNeWPVvaGBNfQ7BXcrZ9w==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [aix]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/android-arm64@0.20.2:
@@ -132,6 +142,16 @@ packages:
     cpu: [arm64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm64@0.21.3:
+    resolution: {integrity: sha512-c+ty9necz3zB1Y+d/N+mC6KVVkGUUOcm4ZmT5i/Fk5arOaY3i6CA3P5wo/7+XzV8cb4GrI/Zjp8NuOQ9Lfsosw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [android]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/android-arm@0.20.2:
@@ -140,6 +160,16 @@ packages:
     cpu: [arm]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-arm@0.21.3:
+    resolution: {integrity: sha512-bviJOLMgurLJtF1/mAoJLxDZDL6oU5/ztMHnJQRejbJrSc9FFu0QoUoFhvi6qSKJEw9y5oGyvr9fuDtzJ30rNQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [android]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/android-x64@0.20.2:
@@ -148,6 +178,16 @@ packages:
     cpu: [x64]
     os: [android]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/android-x64@0.21.3:
+    resolution: {integrity: sha512-JReHfYCRK3FVX4Ra+y5EBH1b9e16TV2OxrPAvzMsGeES0X2Ndm9ImQRI4Ket757vhc5XBOuGperw63upesclRw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [android]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/darwin-arm64@0.20.2:
@@ -156,6 +196,16 @@ packages:
     cpu: [arm64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-arm64@0.21.3:
+    resolution: {integrity: sha512-U3fuQ0xNiAkXOmQ6w5dKpEvXQRSpHOnbw7gEfHCRXPeTKW9sBzVck6C5Yneb8LfJm0l6le4NQfkNPnWMSlTFUQ==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/darwin-x64@0.20.2:
@@ -164,6 +214,16 @@ packages:
     cpu: [x64]
     os: [darwin]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/darwin-x64@0.21.3:
+    resolution: {integrity: sha512-3m1CEB7F07s19wmaMNI2KANLcnaqryJxO1fXHUV5j1rWn+wMxdUYoPyO2TnAbfRZdi7ADRwJClmOwgT13qlP3Q==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [darwin]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/freebsd-arm64@0.20.2:
@@ -172,6 +232,16 @@ packages:
     cpu: [arm64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-arm64@0.21.3:
+    resolution: {integrity: sha512-fsNAAl5pU6wmKHq91cHWQT0Fz0vtyE1JauMzKotrwqIKAswwP5cpHUCxZNSTuA/JlqtScq20/5KZ+TxQdovU/g==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/freebsd-x64@0.20.2:
@@ -180,6 +250,16 @@ packages:
     cpu: [x64]
     os: [freebsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/freebsd-x64@0.21.3:
+    resolution: {integrity: sha512-tci+UJ4zP5EGF4rp8XlZIdq1q1a/1h9XuronfxTMCNBslpCtmk97Q/5qqy1Mu4zIc0yswN/yP/BLX+NTUC1bXA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [freebsd]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-arm64@0.20.2:
@@ -188,6 +268,16 @@ packages:
     cpu: [arm64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm64@0.21.3:
+    resolution: {integrity: sha512-vvG6R5g5ieB4eCJBQevyDMb31LMHthLpXTc2IGkFnPWS/GzIFDnaYFp558O+XybTmYrVjxnryru7QRleJvmZ6Q==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-arm@0.20.2:
@@ -196,6 +286,16 @@ packages:
     cpu: [arm]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-arm@0.21.3:
+    resolution: {integrity: sha512-f6kz2QpSuyHHg01cDawj0vkyMwuIvN62UAguQfnNVzbge2uWLhA7TCXOn83DT0ZvyJmBI943MItgTovUob36SQ==}
+    engines: {node: '>=12'}
+    cpu: [arm]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-ia32@0.20.2:
@@ -204,6 +304,16 @@ packages:
     cpu: [ia32]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ia32@0.21.3:
+    resolution: {integrity: sha512-HjCWhH7K96Na+66TacDLJmOI9R8iDWDDiqe17C7znGvvE4sW1ECt9ly0AJ3dJH62jHyVqW9xpxZEU1jKdt+29A==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-loong64@0.20.2:
@@ -212,6 +322,16 @@ packages:
     cpu: [loong64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-loong64@0.21.3:
+    resolution: {integrity: sha512-BGpimEccmHBZRcAhdlRIxMp7x9PyJxUtj7apL2IuoG9VxvU/l/v1z015nFs7Si7tXUwEsvjc1rOJdZCn4QTU+Q==}
+    engines: {node: '>=12'}
+    cpu: [loong64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-mips64el@0.20.2:
@@ -220,6 +340,16 @@ packages:
     cpu: [mips64el]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-mips64el@0.21.3:
+    resolution: {integrity: sha512-5rMOWkp7FQGtAH3QJddP4w3s47iT20hwftqdm7b+loe95o8JU8ro3qZbhgMRy0VuFU0DizymF1pBKkn3YHWtsw==}
+    engines: {node: '>=12'}
+    cpu: [mips64el]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-ppc64@0.20.2:
@@ -228,6 +358,16 @@ packages:
     cpu: [ppc64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-ppc64@0.21.3:
+    resolution: {integrity: sha512-h0zj1ldel89V5sjPLo5H1SyMzp4VrgN1tPkN29TmjvO1/r0MuMRwJxL8QY05SmfsZRs6TF0c/IDH3u7XYYmbAg==}
+    engines: {node: '>=12'}
+    cpu: [ppc64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-riscv64@0.20.2:
@@ -236,6 +376,16 @@ packages:
     cpu: [riscv64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-riscv64@0.21.3:
+    resolution: {integrity: sha512-dkAKcTsTJ+CRX6bnO17qDJbLoW37npd5gSNtSzjYQr0svghLJYGYB0NF1SNcU1vDcjXLYS5pO4qOW4YbFama4A==}
+    engines: {node: '>=12'}
+    cpu: [riscv64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-s390x@0.20.2:
@@ -244,6 +394,16 @@ packages:
     cpu: [s390x]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-s390x@0.21.3:
+    resolution: {integrity: sha512-vnD1YUkovEdnZWEuMmy2X2JmzsHQqPpZElXx6dxENcIwTu+Cu5ERax6+Ke1QsE814Zf3c6rxCfwQdCTQ7tPuXA==}
+    engines: {node: '>=12'}
+    cpu: [s390x]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/linux-x64@0.20.2:
@@ -252,6 +412,16 @@ packages:
     cpu: [x64]
     os: [linux]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/linux-x64@0.21.3:
+    resolution: {integrity: sha512-IOXOIm9WaK7plL2gMhsWJd+l2bfrhfilv0uPTptoRoSb2p09RghhQQp9YY6ZJhk/kqmeRt6siRdMSLLwzuT0KQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [linux]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/netbsd-x64@0.20.2:
@@ -260,6 +430,16 @@ packages:
     cpu: [x64]
     os: [netbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/netbsd-x64@0.21.3:
+    resolution: {integrity: sha512-uTgCwsvQ5+vCQnqM//EfDSuomo2LhdWhFPS8VL8xKf+PKTCrcT/2kPPoWMTs22aB63MLdGMJiE3f1PHvCDmUOw==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [netbsd]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/openbsd-x64@0.20.2:
@@ -268,6 +448,16 @@ packages:
     cpu: [x64]
     os: [openbsd]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/openbsd-x64@0.21.3:
+    resolution: {integrity: sha512-vNAkR17Ub2MgEud2Wag/OE4HTSI6zlb291UYzHez/psiKarp0J8PKGDnAhMBcHFoOHMXHfExzmjMojJNbAStrQ==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [openbsd]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/sunos-x64@0.20.2:
@@ -276,6 +466,16 @@ packages:
     cpu: [x64]
     os: [sunos]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/sunos-x64@0.21.3:
+    resolution: {integrity: sha512-W8H9jlGiSBomkgmouaRoTXo49j4w4Kfbl6I1bIdO/vT0+0u4f20ko3ELzV3hPI6XV6JNBVX+8BC+ajHkvffIJA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [sunos]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/win32-arm64@0.20.2:
@@ -284,6 +484,16 @@ packages:
     cpu: [arm64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-arm64@0.21.3:
+    resolution: {integrity: sha512-EjEomwyLSCg8Ag3LDILIqYCZAq/y3diJ04PnqGRgq8/4O3VNlXyMd54j/saShaN4h5o5mivOjAzmU6C3X4v0xw==}
+    engines: {node: '>=12'}
+    cpu: [arm64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/win32-ia32@0.20.2:
@@ -292,6 +502,16 @@ packages:
     cpu: [ia32]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-ia32@0.21.3:
+    resolution: {integrity: sha512-WGiE/GgbsEwR33++5rzjiYsKyHywE8QSZPF7Rfx9EBfK3Qn3xyR6IjyCr5Uk38Kg8fG4/2phN7sXp4NPWd3fcw==}
+    engines: {node: '>=12'}
+    cpu: [ia32]
+    os: [win32]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@esbuild/win32-x64@0.20.2:
@@ -300,6 +520,16 @@ packages:
     cpu: [x64]
     os: [win32]
     requiresBuild: true
+    dev: true
+    optional: true
+
+  /@esbuild/win32-x64@0.21.3:
+    resolution: {integrity: sha512-xRxC0jaJWDLYvcUvjQmHCJSfMrgmUuvsoXgDeU/wTorQ1ngDdUBuFtgY3W1Pc5sprGAvZBtWdJX7RPg/iZZUqA==}
+    engines: {node: '>=12'}
+    cpu: [x64]
+    os: [win32]
+    requiresBuild: true
+    dev: false
     optional: true
 
   /@eslint-community/eslint-utils@4.4.0(eslint@8.57.0):
@@ -359,13 +589,13 @@ packages:
     resolution: {integrity: sha512-93zYdMES/c1D69yZiKDBj0V24vqNzB/koF26KPaagAfd3P/4gUlh3Dys5ogAK+Exi9QyzlD8x/08Zt7wIKcDcA==}
     dev: true
 
-  /@iconify/svelte@4.0.1(svelte@4.2.15):
-    resolution: {integrity: sha512-rF6WUdYhoEaKT4D6qTsZFMD1g+NJZWOH2S+9zMTo5rWa8/NXPnB9uviuHOlGm3v+Cp/M1qTOOJsGdXXUTYHq+Q==}
+  /@iconify/svelte@4.0.2(svelte@4.2.17):
+    resolution: {integrity: sha512-6BSrU85FzGfhQD3bTXpnkCCvBAglEt8T9QednVnXAYm4C+d3464y+pYMzhQNJm5mPId2cuiw+2wXlDflXllHDw==}
     peerDependencies:
       svelte: '>4.0.0'
     dependencies:
       '@iconify/types': 2.0.0
-      svelte: 4.2.15
+      svelte: 4.2.17
     dev: true
 
   /@iconify/types@2.0.0:
@@ -649,16 +879,16 @@ packages:
     resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==}
     dev: true
 
-  /@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.7):
+  /@sveltejs/adapter-auto@3.2.0(@sveltejs/kit@2.5.9):
     resolution: {integrity: sha512-She5nKT47kwHE18v9NMe6pbJcvULr82u0V3yZ0ej3n1laWKGgkgdEABE9/ak5iDPs93LqsBkuIo51kkwCLBjJA==}
     peerDependencies:
       '@sveltejs/kit': ^2.0.0
     dependencies:
-      '@sveltejs/kit': 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10)
+      '@sveltejs/kit': 2.5.9(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11)
       import-meta-resolve: 4.1.0
     dev: true
 
-  /@sveltejs/adapter-node@5.0.1(@sveltejs/kit@2.5.7):
+  /@sveltejs/adapter-node@5.0.1(@sveltejs/kit@2.5.9):
     resolution: {integrity: sha512-eYdmxdUWMW+dad1JfMsWBPY2vjXz9eE+52A2AQnXPScPJlIxIVk5mmbaEEzrZivLfO2wEcLTZ5vdC03W69x+iA==}
     peerDependencies:
       '@sveltejs/kit': ^2.4.0
@@ -666,12 +896,12 @@ packages:
       '@rollup/plugin-commonjs': 25.0.7(rollup@4.17.2)
       '@rollup/plugin-json': 6.1.0(rollup@4.17.2)
       '@rollup/plugin-node-resolve': 15.2.3(rollup@4.17.2)
-      '@sveltejs/kit': 2.5.7(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10)
+      '@sveltejs/kit': 2.5.9(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11)
       rollup: 4.17.2
     dev: true
 
-  /@sveltejs/kit@2.5.7(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10):
-    resolution: {integrity: sha512-6uedTzrb7nQrw6HALxnPrPaXdIN2jJJTzTIl96Z3P5NiG+OAfpdPbrWrvkJ3GN4CfWqrmU4dJqwMMRMTD/C7ow==}
+  /@sveltejs/kit@2.5.9(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11):
+    resolution: {integrity: sha512-x8biUVHPQq075/ESH/UO+fwENtAcw0kg9+bloqqEnbLUNWcrWpmcL3vKrKJc4vaVh/CYKFXn47N98Sbt/Y3vKQ==}
     engines: {node: '>=18.13'}
     hasBin: true
     requiresBuild: true
@@ -680,7 +910,7 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.3
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.15)(vite@5.2.10)
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.17)(vite@5.2.11)
       '@types/cookie': 0.6.0
       cookie: 0.6.0
       devalue: 5.0.0
@@ -692,12 +922,12 @@ packages:
       sade: 1.8.1
       set-cookie-parser: 2.6.0
       sirv: 2.0.4
-      svelte: 4.2.15
+      svelte: 4.2.17
       tiny-glob: 0.2.9
-      vite: 5.2.10
+      vite: 5.2.11
     dev: true
 
-  /@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10):
+  /@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11):
     resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
@@ -705,30 +935,30 @@ packages:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.15)(vite@5.2.10)
+      '@sveltejs/vite-plugin-svelte': 3.1.0(svelte@4.2.17)(vite@5.2.11)
       debug: 4.3.4
-      svelte: 4.2.15
-      vite: 5.2.10
+      svelte: 4.2.17
+      vite: 5.2.11
     transitivePeerDependencies:
       - supports-color
     dev: true
 
-  /@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.15)(vite@5.2.10):
+  /@sveltejs/vite-plugin-svelte@3.1.0(svelte@4.2.17)(vite@5.2.11):
     resolution: {integrity: sha512-sY6ncCvg+O3njnzbZexcVtUqOBE3iYmQPJ9y+yXSkOwG576QI/xJrBnQSRXFLGwJNBa0T78JEKg5cIR0WOAuUw==}
     engines: {node: ^18.0.0 || >=20}
     peerDependencies:
       svelte: ^4.0.0 || ^5.0.0-next.0
       vite: ^5.0.0
     dependencies:
-      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.15)(vite@5.2.10)
+      '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.0)(svelte@4.2.17)(vite@5.2.11)
       debug: 4.3.4
       deepmerge: 4.3.1
       kleur: 4.1.5
       magic-string: 0.30.10
-      svelte: 4.2.15
-      svelte-hmr: 0.16.0(svelte@4.2.15)
-      vite: 5.2.10
-      vitefu: 0.2.5(vite@5.2.10)
+      svelte: 4.2.17
+      svelte-hmr: 0.16.0(svelte@4.2.17)
+      vite: 5.2.11
+      vitefu: 0.2.5(vite@5.2.11)
     transitivePeerDependencies:
       - supports-color
     dev: true
@@ -772,38 +1002,38 @@ packages:
     resolution: {integrity: sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==}
     dev: true
 
-  /@vitest/expect@1.5.3:
-    resolution: {integrity: sha512-y+waPz31pOFr3rD7vWTbwiLe5+MgsMm40jTZbQE8p8/qXyBX3CQsIXRx9XK12IbY7q/t5a5aM/ckt33b4PxK2g==}
+  /@vitest/expect@1.6.0:
+    resolution: {integrity: sha512-ixEvFVQjycy/oNgHjqsL6AZCDduC+tflRluaHIzKIsdbzkLn2U/iBnVeJwB6HsIjQBdfMR8Z0tRxKUsvFJEeWQ==}
     dependencies:
-      '@vitest/spy': 1.5.3
-      '@vitest/utils': 1.5.3
+      '@vitest/spy': 1.6.0
+      '@vitest/utils': 1.6.0
       chai: 4.4.1
     dev: true
 
-  /@vitest/runner@1.5.3:
-    resolution: {integrity: sha512-7PlfuReN8692IKQIdCxwir1AOaP5THfNkp0Uc4BKr2na+9lALNit7ub9l3/R7MP8aV61+mHKRGiqEKRIwu6iiQ==}
+  /@vitest/runner@1.6.0:
+    resolution: {integrity: sha512-P4xgwPjwesuBiHisAVz/LSSZtDjOTPYZVmNAnpHHSR6ONrf8eCJOFRvUwdHn30F5M1fxhqtl7QZQUk2dprIXAg==}
     dependencies:
-      '@vitest/utils': 1.5.3
+      '@vitest/utils': 1.6.0
       p-limit: 5.0.0
       pathe: 1.1.2
     dev: true
 
-  /@vitest/snapshot@1.5.3:
-    resolution: {integrity: sha512-K3mvIsjyKYBhNIDujMD2gfQEzddLe51nNOAf45yKRt/QFJcUIeTQd2trRvv6M6oCBHNVnZwFWbQ4yj96ibiDsA==}
+  /@vitest/snapshot@1.6.0:
+    resolution: {integrity: sha512-+Hx43f8Chus+DCmygqqfetcAZrDJwvTj0ymqjQq4CvmpKFSTVteEOBzCusu1x2tt4OJcvBflyHUE0DZSLgEMtQ==}
     dependencies:
       magic-string: 0.30.10
       pathe: 1.1.2
       pretty-format: 29.7.0
     dev: true
 
-  /@vitest/spy@1.5.3:
-    resolution: {integrity: sha512-Llj7Jgs6lbnL55WoshJUUacdJfjU2honvGcAJBxhra5TPEzTJH8ZuhI3p/JwqqfnTr4PmP7nDmOXP53MS7GJlg==}
+  /@vitest/spy@1.6.0:
+    resolution: {integrity: sha512-leUTap6B/cqi/bQkXUu6bQV5TZPx7pmMBKBQiI0rJA8c3pB56ZsaTbREnF7CJfmvAS4V2cXIBAh/3rVwrrCYgw==}
     dependencies:
       tinyspy: 2.2.1
     dev: true
 
-  /@vitest/utils@1.5.3:
-    resolution: {integrity: sha512-rE9DTN1BRhzkzqNQO+kw8ZgfeEBCLXiHJwetk668shmNBpSagQxneT5eSqEBLP+cqSiAeecvQmbpFfdMyLcIQA==}
+  /@vitest/utils@1.6.0:
+    resolution: {integrity: sha512-21cPiuGMoMZwiOHa2i4LXkMkMkCGzA+MVFV70jRwHo95dL4x/ts5GZhML1QWuy7yfp3WzK3lRvZi3JnXTYqrBw==}
     dependencies:
       diff-sequences: 29.6.3
       estree-walker: 3.0.3
@@ -911,10 +1141,10 @@ packages:
       postcss: ^8.1.0
     dependencies:
       browserslist: 4.23.0
-      caniuse-lite: 1.0.30001615
+      caniuse-lite: 1.0.30001620
       fraction.js: 4.3.7
       normalize-range: 0.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       postcss: 8.4.38
       postcss-value-parser: 4.2.0
     dev: true
@@ -967,10 +1197,10 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001615
-      electron-to-chromium: 1.4.756
+      caniuse-lite: 1.0.30001620
+      electron-to-chromium: 1.4.774
       node-releases: 2.0.14
-      update-browserslist-db: 1.0.15(browserslist@4.23.0)
+      update-browserslist-db: 1.0.16(browserslist@4.23.0)
     dev: true
 
   /buffer-crc32@0.2.13:
@@ -1004,8 +1234,8 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /caniuse-lite@1.0.30001615:
-    resolution: {integrity: sha512-1IpazM5G3r38meiae0bHRnPhz+CBQ3ZLqbQMtrg+AsTPKAXgW38JNsXkyZ+v8waCsDmPq87lmfun5Q2AGysNEQ==}
+  /caniuse-lite@1.0.30001620:
+    resolution: {integrity: sha512-WJvYsOjd1/BYUY6SNGUosK9DUidBPDTnOARHp3fSmFO1ekdxaY6nKRttEVrfMmYi80ctS0kz1wiWmm14fVc3ew==}
     dev: true
 
   /chai@4.4.1:
@@ -1186,8 +1416,8 @@ packages:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
     dev: true
 
-  /electron-to-chromium@1.4.756:
-    resolution: {integrity: sha512-RJKZ9+vEBMeiPAvKNWyZjuYyUqMndcP1f335oHqn3BEQbs2NFtVrnK5+6Xg5wSM9TknNNpWghGDUCKGYF+xWXw==}
+  /electron-to-chromium@1.4.774:
+    resolution: {integrity: sha512-132O1XCd7zcTkzS3FgkAzKmnBuNJjK8WjcTtNuoylj7MYbqw5eXehjQ5OK91g0zm7OTKIPeaAG4CPoRfD9M1Mg==}
     dev: true
 
   /emoji-regex@8.0.0:
@@ -1231,6 +1461,38 @@ packages:
       '@esbuild/win32-arm64': 0.20.2
       '@esbuild/win32-ia32': 0.20.2
       '@esbuild/win32-x64': 0.20.2
+    dev: true
+
+  /esbuild@0.21.3:
+    resolution: {integrity: sha512-Kgq0/ZsAPzKrbOjCQcjoSmPoWhlcVnGAUo7jvaLHoxW1Drto0KGkR1xBNg2Cp43b9ImvxmPEJZ9xkfcnqPsfBw==}
+    engines: {node: '>=12'}
+    hasBin: true
+    requiresBuild: true
+    optionalDependencies:
+      '@esbuild/aix-ppc64': 0.21.3
+      '@esbuild/android-arm': 0.21.3
+      '@esbuild/android-arm64': 0.21.3
+      '@esbuild/android-x64': 0.21.3
+      '@esbuild/darwin-arm64': 0.21.3
+      '@esbuild/darwin-x64': 0.21.3
+      '@esbuild/freebsd-arm64': 0.21.3
+      '@esbuild/freebsd-x64': 0.21.3
+      '@esbuild/linux-arm': 0.21.3
+      '@esbuild/linux-arm64': 0.21.3
+      '@esbuild/linux-ia32': 0.21.3
+      '@esbuild/linux-loong64': 0.21.3
+      '@esbuild/linux-mips64el': 0.21.3
+      '@esbuild/linux-ppc64': 0.21.3
+      '@esbuild/linux-riscv64': 0.21.3
+      '@esbuild/linux-s390x': 0.21.3
+      '@esbuild/linux-x64': 0.21.3
+      '@esbuild/netbsd-x64': 0.21.3
+      '@esbuild/openbsd-x64': 0.21.3
+      '@esbuild/sunos-x64': 0.21.3
+      '@esbuild/win32-arm64': 0.21.3
+      '@esbuild/win32-ia32': 0.21.3
+      '@esbuild/win32-x64': 0.21.3
+    dev: false
 
   /escalade@3.1.2:
     resolution: {integrity: sha512-ErCHMCae19vR8vQGe50xIsVomy19rg6gFu3+r3jkEO46suLMWBksvVyoGgQV+jOfl84ZSOSlmv6Gxa89PmTGmA==}
@@ -1249,7 +1511,7 @@ packages:
       eslint: '>=6.0.0'
     dependencies:
       eslint: 8.57.0
-      semver: 7.6.0
+      semver: 7.6.2
     dev: true
 
   /eslint-config-prettier@9.1.0(eslint@8.57.0):
@@ -1261,8 +1523,8 @@ packages:
       eslint: 8.57.0
     dev: true
 
-  /eslint-plugin-svelte@2.38.0(eslint@8.57.0)(svelte@4.2.15):
-    resolution: {integrity: sha512-IwwxhHzitx3dr0/xo0z4jjDlb2AAHBPKt+juMyKKGTLlKi1rZfA4qixMwnveU20/JTHyipM6keX4Vr7LZFYc9g==}
+  /eslint-plugin-svelte@2.39.0(eslint@8.57.0)(svelte@4.2.17):
+    resolution: {integrity: sha512-FXktBLXsrxbA+6ZvJK2z/sQOrUKyzSg3fNWK5h0reSCjr2fjAsc9ai/s/JvSl4Hgvz3nYVtTIMwarZH5RcB7BA==}
     engines: {node: ^14.17.0 || >=16.0.0}
     peerDependencies:
       eslint: ^7.0.0 || ^8.0.0-0 || ^9.0.0-0
@@ -1277,14 +1539,14 @@ packages:
       eslint: 8.57.0
       eslint-compat-utils: 0.5.0(eslint@8.57.0)
       esutils: 2.0.3
-      known-css-properties: 0.30.0
+      known-css-properties: 0.31.0
       postcss: 8.4.38
       postcss-load-config: 3.1.4(postcss@8.4.38)
       postcss-safe-parser: 6.0.0(postcss@8.4.38)
       postcss-selector-parser: 6.0.16
-      semver: 7.6.0
-      svelte: 4.2.15
-      svelte-eslint-parser: 0.35.0(svelte@4.2.15)
+      semver: 7.6.2
+      svelte: 4.2.17
+      svelte-eslint-parser: 0.36.0(svelte@4.2.17)
     transitivePeerDependencies:
       - supports-color
       - ts-node
@@ -1550,16 +1812,16 @@ packages:
       is-glob: 4.0.3
     dev: true
 
-  /glob@10.3.12:
-    resolution: {integrity: sha512-TCNv8vJ+xz4QiqTpfOJA7HvYv+tNIRHKfUWw/q+v2jdgN4ebz+KY9tGx5J4rHP0o84mNP+ApH66HRX8us3Khqg==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  /glob@10.3.15:
+    resolution: {integrity: sha512-0c6RlJt1TICLyvJYIApxb8GsXoai0KUP7AxKKAtsYXdgJR1mGEUa7DgwShbdk1nly0PYoZj01xd4hzbq3fsjpw==}
+    engines: {node: '>=16 || 14 >=14.18'}
     hasBin: true
     dependencies:
       foreground-child: 3.1.1
       jackspeak: 2.3.6
       minimatch: 9.0.4
-      minipass: 7.1.0
-      path-scurry: 1.10.2
+      minipass: 7.1.1
+      path-scurry: 1.11.1
     dev: true
 
   /glob@7.2.3:
@@ -1805,8 +2067,8 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
-  /known-css-properties@0.30.0:
-    resolution: {integrity: sha512-VSWXYUnsPu9+WYKkfmJyLKtIvaRJi1kXUqVmBACORXZQxT5oZDsoZ2vQP+bQFDnWtpI/4eq3MLoRMjI2fnLzTQ==}
+  /known-css-properties@0.31.0:
+    resolution: {integrity: sha512-sBPIUGTNF0czz0mwGGUoKKJC8Q7On1GPbCSFPfyEsfHb2DyBG0Y4QtV+EVWpINSaiGKZblDNuF5AezxSgOhesQ==}
     dev: true
 
   /levn@0.4.1:
@@ -1841,8 +2103,8 @@ packages:
     resolution: {integrity: sha512-ok6z3qlYyCDS4ZEU27HaU6x/xZa9Whf8jD4ptH5UZTQYZVYeb9bnZ3ojVhiJNLiXK1Hfc0GNbLXcmZ5plLDDBg==}
     engines: {node: '>=14'}
     dependencies:
-      mlly: 1.6.1
-      pkg-types: 1.1.0
+      mlly: 1.7.0
+      pkg-types: 1.1.1
     dev: true
 
   /localforage@1.10.0:
@@ -1872,18 +2134,15 @@ packages:
       get-func-name: 2.0.2
     dev: true
 
+  /lrc-parser-ts@1.0.3:
+    resolution: {integrity: sha512-BZItDkVpFgY/D9AGBKJkLZXaSJQ1LTk88o0YI863PfdzUzGmXxHW+53fuRAaiNKabA43RgCb7T6mJ2PG6ysLfQ==}
+    dev: false
+
   /lru-cache@10.2.2:
     resolution: {integrity: sha512-9hp3Vp2/hFQUiIwKo8XCeFVnrg8Pk3TYNPIR7tJADKi5YfcF7vEaK7avFHTlSy3kOKYaJQaalfEo6YuXdceBOQ==}
     engines: {node: 14 || >=16.14}
     dev: true
 
-  /lru-cache@6.0.0:
-    resolution: {integrity: sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==}
-    engines: {node: '>=10'}
-    dependencies:
-      yallist: 4.0.0
-    dev: true
-
   /magic-string@0.25.9:
     resolution: {integrity: sha512-RmF0AsMzgt25qzqqLc1+MbHmhdx0ojF2Fvs4XnOqz2ZOBXzzkEwc/dJQZCYHAn7v1jbVOjAZfK8msRn4BxO4VQ==}
     dependencies:
@@ -1956,8 +2215,8 @@ packages:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
     dev: true
 
-  /minipass@7.1.0:
-    resolution: {integrity: sha512-oGZRv2OT1lO2UF1zUcwdTb3wqUwI0kBGTgt/T7OdSj6M6N5m3o5uPf0AIW6lVxGGoiWUR7e2AwTE+xiwK8WQig==}
+  /minipass@7.1.1:
+    resolution: {integrity: sha512-UZ7eQ+h8ywIRAW1hIEl2AqdwzJucU/Kp59+8kkZeSvafXhZjul247BvIJjEVFVeON6d7lM46XX1HXCduKAS8VA==}
     engines: {node: '>=16 || 14 >=14.17'}
     dev: true
 
@@ -1968,12 +2227,12 @@ packages:
       minimist: 1.2.8
     dev: true
 
-  /mlly@1.6.1:
-    resolution: {integrity: sha512-vLgaHvaeunuOXHSmEbZ9izxPx3USsk8KCQ8iC+aTlp5sKRSoZvwhHh5L9VbKSaVC6sJDqbyohIS76E2VmHIPAA==}
+  /mlly@1.7.0:
+    resolution: {integrity: sha512-U9SDaXGEREBYQgfejV97coK0UL1r+qnF2SyO9A3qcI8MzKnsIFKHNVEkrDyNncQTKQQumsasmeq84eNMdBfsNQ==}
     dependencies:
       acorn: 8.11.3
       pathe: 1.1.2
-      pkg-types: 1.1.0
+      pkg-types: 1.1.1
       ufo: 1.5.3
     dev: true
 
@@ -2143,12 +2402,12 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
-  /path-scurry@1.10.2:
-    resolution: {integrity: sha512-7xTavNy5RQXnsjANvVvMkEjvloOinkAjv/Z6Ildz9v2RinZ4SBKTWFOVRbaF8p0vpHnyjV/UwNDdKuUv6M5qcA==}
-    engines: {node: '>=16 || 14 >=14.17'}
+  /path-scurry@1.11.1:
+    resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==}
+    engines: {node: '>=16 || 14 >=14.18'}
     dependencies:
       lru-cache: 10.2.2
-      minipass: 7.1.0
+      minipass: 7.1.1
     dev: true
 
   /pathe@1.1.2:
@@ -2172,8 +2431,8 @@ packages:
       is-reference: 3.0.2
     dev: true
 
-  /picocolors@1.0.0:
-    resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
+  /picocolors@1.0.1:
+    resolution: {integrity: sha512-anP1Z8qwhkbmu7MFP5iTt+wQKXgwzf7zTyGlcdzabySa9vd0Xt392U0rVmz9poOaBj0uHJKyyo9/upk0HrEQew==}
     dev: true
 
   /picomatch@2.3.1:
@@ -2191,11 +2450,11 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
-  /pkg-types@1.1.0:
-    resolution: {integrity: sha512-/RpmvKdxKf8uILTtoOhAgf30wYbP2Qw+L9p3Rvshx1JZVX+XQNZQFjlbmGHEGIm4CkVPlSn+NXmIM8+9oWQaSA==}
+  /pkg-types@1.1.1:
+    resolution: {integrity: sha512-ko14TjmDuQJ14zsotODv7dBlwxKhUKQEhuhmbqo1uCi9BB0Z2alo/wAXg6q1dTR5TyuqYyWhjtfe/Tsh+X28jQ==}
     dependencies:
       confbox: 0.1.7
-      mlly: 1.6.1
+      mlly: 1.7.0
       pathe: 1.1.2
     dev: true
 
@@ -2300,7 +2559,7 @@ packages:
     engines: {node: ^10 || ^12 || >=14}
     dependencies:
       nanoid: 3.3.7
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       source-map-js: 1.2.0
     dev: true
 
@@ -2309,14 +2568,14 @@ packages:
     engines: {node: '>= 0.8.0'}
     dev: true
 
-  /prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@4.2.15):
+  /prettier-plugin-svelte@3.2.3(prettier@3.2.5)(svelte@4.2.17):
     resolution: {integrity: sha512-wJq8RunyFlWco6U0WJV5wNCM7zpBFakS76UBSbmzMGpncpK98NZABaE+s7n8/APDCEVNHXC5Mpq+MLebQtsRlg==}
     peerDependencies:
       prettier: ^3.0.0
       svelte: ^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0
     dependencies:
       prettier: 3.2.5
-      svelte: 4.2.15
+      svelte: 4.2.17
     dev: true
 
   /prettier@3.2.5:
@@ -2498,12 +2757,10 @@ packages:
       rimraf: 2.7.1
     dev: true
 
-  /semver@7.6.0:
-    resolution: {integrity: sha512-EnwXhrlwXMk9gKu5/flx5sv/an57AkRplG3hTK68W7FRDN+k+OWBj65M7719OkA82XLBxrcX0KSHj+X5COhOVg==}
+  /semver@7.6.2:
+    resolution: {integrity: sha512-FNAIBWCx9qcRhoHcgcJ0gvU7SN1lYU2ZXuSfl04bSC5OpvDHFyJCjdNHomPXxjQlCBU67YW64PzY7/VIEH7F2w==}
     engines: {node: '>=10'}
     hasBin: true
-    dependencies:
-      lru-cache: 6.0.0
     dev: true
 
   /set-cookie-parser@2.6.0:
@@ -2560,11 +2817,6 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: false
 
-  /srt-parser-2@1.2.3:
-    resolution: {integrity: sha512-dANP1AyJTI503H0/kXwRza+7QxDB3BqeFvEKTF4MI9lQcBe8JbRUQTKVIGzGABJCwBovEYavZ2Qsdm/s8XKz8A==}
-    hasBin: true
-    dev: false
-
   /stackback@0.0.2:
     resolution: {integrity: sha512-1XMJE5fQo1jGH6Y/7ebnwPOBEkIEnT4QF32d5R1+VXdXveM0IBMJt8zfaxX1P3QhVwrYe+576+jkANtSS2mBbw==}
     dev: true
@@ -2649,7 +2901,7 @@ packages:
     dependencies:
       '@jridgewell/gen-mapping': 0.3.5
       commander: 4.1.1
-      glob: 10.3.12
+      glob: 10.3.15
       lines-and-columns: 1.2.4
       mz: 2.7.0
       pirates: 4.0.6
@@ -2668,8 +2920,8 @@ packages:
     engines: {node: '>= 0.4'}
     dev: true
 
-  /svelte-check@3.7.0(postcss@8.4.38)(svelte@4.2.15):
-    resolution: {integrity: sha512-Va6sGL4Vy4znn0K+vaatk98zoBvG2aDee4y3r5X4S80z8DXfbACHvdLlyXa4C4c5tQzK9H0Uq2pbd20wH3ucjQ==}
+  /svelte-check@3.7.1(postcss@8.4.38)(svelte@4.2.17):
+    resolution: {integrity: sha512-U4uJoLCzmz2o2U33c7mPDJNhRYX/DNFV11XTUDlFxaKLsO7P+40gvJHMPpoRfa24jqZfST4/G9fGNcUGMO8NAQ==}
     hasBin: true
     peerDependencies:
       svelte: ^3.55.0 || ^4.0.0-next.0 || ^4.0.0 || ^5.0.0-next.0
@@ -2678,10 +2930,10 @@ packages:
       chokidar: 3.6.0
       fast-glob: 3.3.2
       import-fresh: 3.3.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       sade: 1.8.1
-      svelte: 4.2.15
-      svelte-preprocess: 5.1.4(postcss@8.4.38)(svelte@4.2.15)(typescript@5.4.5)
+      svelte: 4.2.17
+      svelte-preprocess: 5.1.4(postcss@8.4.38)(svelte@4.2.17)(typescript@5.4.5)
       typescript: 5.4.5
     transitivePeerDependencies:
       - '@babel/core'
@@ -2695,11 +2947,11 @@ packages:
       - sugarss
     dev: true
 
-  /svelte-eslint-parser@0.35.0(svelte@4.2.15):
-    resolution: {integrity: sha512-CtbPseajW0gjwEvHiuzYJkPDjAcHz2FaHt540j6RVYrZgnE6xWkzUBodQ4I3nV+G5AS0Svt8K6aIA/CIU9xT2Q==}
+  /svelte-eslint-parser@0.36.0(svelte@4.2.17):
+    resolution: {integrity: sha512-/6YmUSr0FAVxW8dXNdIMydBnddPMHzaHirAZ7RrT21XYdgGGZMh0LQG6CZsvAFS4r2Y4ItUuCQc8TQ3urB30mQ==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
     peerDependencies:
-      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.112
+      svelte: ^3.37.0 || ^4.0.0 || ^5.0.0-next.115
     peerDependenciesMeta:
       svelte:
         optional: true
@@ -2709,19 +2961,19 @@ packages:
       espree: 9.6.1
       postcss: 8.4.38
       postcss-scss: 4.0.9(postcss@8.4.38)
-      svelte: 4.2.15
+      svelte: 4.2.17
     dev: true
 
-  /svelte-hmr@0.16.0(svelte@4.2.15):
+  /svelte-hmr@0.16.0(svelte@4.2.17):
     resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==}
     engines: {node: ^12.20 || ^14.13.1 || >= 16}
     peerDependencies:
       svelte: ^3.19.0 || ^4.0.0
     dependencies:
-      svelte: 4.2.15
+      svelte: 4.2.17
     dev: true
 
-  /svelte-preprocess@5.1.4(postcss@8.4.38)(svelte@4.2.15)(typescript@5.4.5):
+  /svelte-preprocess@5.1.4(postcss@8.4.38)(svelte@4.2.17)(typescript@5.4.5):
     resolution: {integrity: sha512-IvnbQ6D6Ao3Gg6ftiM5tdbR6aAETwjhHV+UKGf5bHGYR69RQvF1ho0JKPcbUON4vy4R7zom13jPjgdOWCQ5hDA==}
     engines: {node: '>= 16.0.0'}
     requiresBuild: true
@@ -2765,12 +3017,12 @@ packages:
       postcss: 8.4.38
       sorcery: 0.11.0
       strip-indent: 3.0.0
-      svelte: 4.2.15
+      svelte: 4.2.17
       typescript: 5.4.5
     dev: true
 
-  /svelte@4.2.15:
-    resolution: {integrity: sha512-j9KJSccHgLeRERPlhMKrCXpk2TqL2m5Z+k+OBTQhZOhIdCCd3WfqV+ylPWeipEwq17P/ekiSFWwrVQv93i3bsg==}
+  /svelte@4.2.17:
+    resolution: {integrity: sha512-N7m1YnoXtRf5wya5Gyx3TWuTddI4nAyayyIWFojiWV5IayDYNV5i2mRp/7qNGol4DtxEYxljmrbgp1HM6hUbmQ==}
     engines: {node: '>=16'}
     dependencies:
       '@ampproject/remapping': 2.3.0
@@ -2807,7 +3059,7 @@ packages:
       micromatch: 4.0.5
       normalize-path: 3.0.0
       object-hash: 3.0.0
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       postcss: 8.4.38
       postcss-import: 15.1.0(postcss@8.4.38)
       postcss-js: 4.0.1(postcss@8.4.38)
@@ -2909,15 +3161,15 @@ packages:
     resolution: {integrity: sha512-Y7HYmWaFwPUmkoQCUIAYpKqkOf+SbVj/2fJJZ4RJMCfZp0rTGwRbzQD+HghfnhKOjL9E01okqz+ncJskGYfBNw==}
     dev: true
 
-  /update-browserslist-db@1.0.15(browserslist@4.23.0):
-    resolution: {integrity: sha512-K9HWH62x3/EalU1U6sjSZiylm9C8tgq2mSvshZpqc7QE69RaA2qjhkW2HlNA0tFpEbtyFz7HTqbSdN4MSwUodA==}
+  /update-browserslist-db@1.0.16(browserslist@4.23.0):
+    resolution: {integrity: sha512-KVbTxlBYlckhF5wgfyZXTWnMn7MMZjMu9XG8bPlliUOP9ThaF4QnhP8qrjrH7DRzHfSk0oQv1wToW+iA5GajEQ==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
     dependencies:
       browserslist: 4.23.0
       escalade: 3.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
     dev: true
 
   /uri-js@4.4.1:
@@ -2934,16 +3186,16 @@ packages:
     hasBin: true
     dev: false
 
-  /vite-node@1.5.3:
-    resolution: {integrity: sha512-axFo00qiCpU/JLd8N1gu9iEYL3xTbMbMrbe5nDp9GL0nb6gurIdZLkkFogZXWnE8Oyy5kfSLwNVIcVsnhE7lgQ==}
+  /vite-node@1.6.0:
+    resolution: {integrity: sha512-de6HJgzC+TFzOu0NTC4RAIsyf/DY/ibWDYQUcuEA84EMHhcefTUGkjFHKKEJhQN4A+6I0u++kr3l36ZF2d7XRw==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     dependencies:
       cac: 6.7.14
       debug: 4.3.4
       pathe: 1.1.2
-      picocolors: 1.0.0
-      vite: 5.2.10
+      picocolors: 1.0.1
+      vite: 5.2.11
     transitivePeerDependencies:
       - '@types/node'
       - less
@@ -2955,8 +3207,8 @@ packages:
       - terser
     dev: true
 
-  /vite@5.2.10:
-    resolution: {integrity: sha512-PAzgUZbP7msvQvqdSD+ErD5qGnSFiGOoWmV5yAKUEI0kdhjbH6nMWVyZQC/hSc4aXwc0oJ9aEdIiF9Oje0JFCw==}
+  /vite@5.2.11:
+    resolution: {integrity: sha512-HndV31LWW05i1BLPMUCE1B9E9GFbOu1MbenhS58FuK6owSO5qHm7GiCotrNY1YE5rMeQSFBGmT5ZaLEjFizgiQ==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
@@ -2990,7 +3242,7 @@ packages:
       fsevents: 2.3.3
     dev: true
 
-  /vitefu@0.2.5(vite@5.2.10):
+  /vitefu@0.2.5(vite@5.2.11):
     resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==}
     peerDependencies:
       vite: ^3.0.0 || ^4.0.0 || ^5.0.0
@@ -2998,18 +3250,18 @@ packages:
       vite:
         optional: true
     dependencies:
-      vite: 5.2.10
+      vite: 5.2.11
     dev: true
 
-  /vitest@1.5.3:
-    resolution: {integrity: sha512-2oM7nLXylw3mQlW6GXnRriw+7YvZFk/YNV8AxIC3Z3MfFbuziLGWP9GPxxu/7nRlXhqyxBikpamr+lEEj1sUEw==}
+  /vitest@1.6.0:
+    resolution: {integrity: sha512-H5r/dN06swuFnzNFhq/dnz37bPXnq8xB2xB5JOVk8K09rUtoeNN+LHWkoQ0A/i3hvbUKKcCei9KpbxqHMLhLLA==}
     engines: {node: ^18.0.0 || >=20.0.0}
     hasBin: true
     peerDependencies:
       '@edge-runtime/vm': '*'
       '@types/node': ^18.0.0 || >=20.0.0
-      '@vitest/browser': 1.5.3
-      '@vitest/ui': 1.5.3
+      '@vitest/browser': 1.6.0
+      '@vitest/ui': 1.6.0
       happy-dom: '*'
       jsdom: '*'
     peerDependenciesMeta:
@@ -3026,11 +3278,11 @@ packages:
       jsdom:
         optional: true
     dependencies:
-      '@vitest/expect': 1.5.3
-      '@vitest/runner': 1.5.3
-      '@vitest/snapshot': 1.5.3
-      '@vitest/spy': 1.5.3
-      '@vitest/utils': 1.5.3
+      '@vitest/expect': 1.6.0
+      '@vitest/runner': 1.6.0
+      '@vitest/snapshot': 1.6.0
+      '@vitest/spy': 1.6.0
+      '@vitest/utils': 1.6.0
       acorn-walk: 8.3.2
       chai: 4.4.1
       debug: 4.3.4
@@ -3038,13 +3290,13 @@ packages:
       local-pkg: 0.5.0
       magic-string: 0.30.10
       pathe: 1.1.2
-      picocolors: 1.0.0
+      picocolors: 1.0.1
       std-env: 3.7.0
       strip-literal: 2.1.0
       tinybench: 2.8.0
       tinypool: 0.8.4
-      vite: 5.2.10
-      vite-node: 1.5.3
+      vite: 5.2.11
+      vite-node: 1.6.0
       why-is-node-running: 2.2.2
     transitivePeerDependencies:
       - less
@@ -3100,10 +3352,6 @@ packages:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
 
-  /yallist@4.0.0:
-    resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==}
-    dev: true
-
   /yaml@1.10.2:
     resolution: {integrity: sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==}
     engines: {node: '>= 6'}
diff --git a/src/index.test.js b/src/index.test.js
index f5e2ff9..2bf1e23 100644
--- a/src/index.test.js
+++ b/src/index.test.js
@@ -6,6 +6,10 @@ describe('formatDuration test', () => {
         expect(formatDuration(120)).toBe('2:00');
     });
 
+    it('converts 119.935429 seconds to "1:59"', () => {
+        expect(formatDuration(119.935429)).toBe('1:59');
+    });
+
     it('converts 185 seconds to "3:05"', () => {
         expect(formatDuration(185)).toBe('3:05');
     });
diff --git a/src/lib/components/background.svelte b/src/lib/components/background.svelte
index 5bc7a8b..9203538 100644
--- a/src/lib/components/background.svelte
+++ b/src/lib/components/background.svelte
@@ -55,5 +55,6 @@
         height: 100%;
         opacity: 0;
         transition: .45s;
+        filter: brightness(0.8);
     }
 </style>
diff --git a/src/lib/components/interactiveBox.svelte b/src/lib/components/interactiveBox.svelte
index 8dcf506..4101524 100644
--- a/src/lib/components/interactiveBox.svelte
+++ b/src/lib/components/interactiveBox.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
     import formatDuration from '$lib/formatDuration';
     import { onMount } from 'svelte';
+    import userAdjustingProgress from '$lib/state/userAdjustingProgress';
+    import progressBarRaw from '$lib/state/progressBarRaw';
 
     export let name: string;
     export let singer: string = '';
@@ -10,33 +12,30 @@
     export let volume: number = 1;
     export let clickPlay: Function;
     export let adjustProgress: Function;
-    export let adjustRealProgress: Function;
+    export let adjustDisplayProgress: Function;
     export let adjustVolume: Function;
-    export let onSlide: boolean;
-    export let setOnSlide: Function;
+
     export let hasLyrics: boolean;
 
-    let progressBar: HTMLInputElement;
+    let progressBar: HTMLDivElement;
     let volumeBar: HTMLInputElement;
     let showInfoTop: boolean = false;
     let isInfoTopOverflowing = false;
     let songInfoTopContainer: HTMLDivElement;
     let songInfoTopContent: HTMLSpanElement;
+
     const mql = window.matchMedia('(max-width: 1280px)');
 
-    function progressBarOnChange(e: any) {
-        adjustProgress(e.target.value / (duration + 0.001));
-    }
-
-    function progressBarOnInput(e: any) {
-        adjustRealProgress(e.target.value / (duration + 0.001));
-    }
-
     function volumeBarOnChange(e: any) {
         adjustVolume(e.target.value);
         localStorage.setItem('volume', e.target.value);
     }
 
+    function progressBarOnClick(e: MouseEvent) {
+        adjustProgress(e.offsetX / progressBar.getBoundingClientRect().width);
+        progressBarRaw.set(e.offsetX / progressBar.getBoundingClientRect().width * duration);
+    }
+
     onMount(() => {
         mql.addEventListener('change', (e) => {
             showInfoTop = e.matches && hasLyrics;
@@ -45,8 +44,7 @@
 
     $: {
         if (songInfoTopContainer && songInfoTopContent) {
-            isInfoTopOverflowing =
-                songInfoTopContent.offsetWidth > songInfoTopContainer.offsetWidth;
+            isInfoTopOverflowing = songInfoTopContent.offsetWidth > songInfoTopContainer.offsetWidth;
         }
     }
 
@@ -81,31 +79,39 @@
     {/if}
 
     <div class="progress top-16">
-        <div class="time-indicator text-shadow-md time-current">{formatDuration(progress)}</div>
-        <input
+        <div class="time-indicator text-shadow-md time-current">
+            {formatDuration(progress)}
+        </div>
+        <div
             class="progress-bar shadow-md"
+            on:click={(e) => progressBarOnClick(e)}
             bind:this={progressBar}
-            on:change={progressBarOnChange}
-            on:input={progressBarOnInput}
-            on:mousedown={() => setOnSlide(true)}
-            on:mouseup={() => {
-                setTimeout(() => {
-                    setOnSlide(false);
-                }, 50);
+            on:mousedown={() => {
+                userAdjustingProgress.set(true);
             }}
-            type="range"
-            min="0"
-            max={duration - 0.2}
-            step="1"
-            value={onSlide ? progressBar.value : progress}
-        />
+            on:mousemove={(e) => {
+                if ($userAdjustingProgress) {
+                    adjustDisplayProgress(e.offsetX / progressBar.getBoundingClientRect().width);
+                }
+            }}
+            on:mouseup={() => {
+                userAdjustingProgress.set(false);
+            }}
+            role="slider"
+            aria-valuemin="0"
+            aria-valuemax={duration}
+            aria-valuenow={progress}
+            tabindex="0"
+            on:keydown
+            on:keyup
+        >
+            <div class="bar" style={`width: ${(progress / (duration + 0.001)) * 100}%;`}></div>
+        </div>
+
         <div class="time-indicator text-shadow-md time-total">{formatDuration(duration)}</div>
     </div>
     <div class="controls top-32 flex h-16 overflow-hidden items-center justify-center">
-        <button
-            style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
-            class="control-btn previous"
-        >
+        <button style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" class="control-btn previous">
             <img class="control-img switch-song-img" src="/previous.svg" alt="上一曲" />
         </button>
         <button
@@ -115,10 +121,7 @@
         >
             <img class="control-img" src={paused ? '/play.svg' : '/pause.svg'} alt="暂停或播放" />
         </button>
-        <button
-            style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );"
-            class="control-btn next"
-        >
+        <button style="filter: drop-shadow( 0 4px 8px rgba(0, 0, 0, 0.12) );" class="control-btn next">
             <img class="control-img switch-song-img" src="/next.svg" alt="下一曲" />
         </button>
     </div>
@@ -132,7 +135,7 @@
             min="0"
             max="1"
             step="0.01"
-            value={onSlide ? volumeBar.value : volume}
+            value={$userAdjustingProgress ? volumeBar.value : volume}
         />
         <img class="scale-75" src="/volumeUp.svg" alt="最大音量" />
     </div>
@@ -252,24 +255,18 @@
     .progress-bar:hover {
         height: 0.7rem;
     }
-    .progress-bar::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        appearance: none;
-        width: 0rem;
-        height: 0.7rem;
+    .bar {
         background-color: white;
-        box-shadow: -700px 0 0 700px white;
-        cursor: pointer;
+        position: absolute;
+        content: '';
+        height: 0.4rem;
+        display: inline-block;
+        border-radius: 1rem;
+        transition: height 0.3s;
     }
 
-    .progress-bar::-moz-range-thumb {
-        appearance: none;
-        width: 0px;
-        height: 0px;
-        background-color: white;
-        box-shadow: -700px 0 0 700px white;
-        cursor: pointer;
-        border: none;
+    .progress-bar:hover .bar {
+        height: 0.7rem;
     }
 
     .time-indicator {
diff --git a/src/lib/components/lyrics.svelte b/src/lib/components/lyrics.svelte
index a5e9e60..aac9df8 100644
--- a/src/lib/components/lyrics.svelte
+++ b/src/lib/components/lyrics.svelte
@@ -1,148 +1,156 @@
 <script lang="ts">
-    import BezierEasing from 'bezier-easing';
-    import type { Line } from 'srt-parser-2';
+    import userAdjustingProgress from '$lib/state/userAdjustingProgress';
+    import createLyricsSearcher from '$lib/lyrics/lyricSearcher';
+    import progressBarRaw from '$lib/state/progressBarRaw';
+    import type { LrcJsonData } from 'lrc-parser-ts';
     export let lyrics: string[];
-    export let originalLyrics: Line[];
+    export let originalLyrics: LrcJsonData;
     export let progress: number;
-    function userSlideProgress() {
-        systemCouldScrollSince = 0;
-    }
-    export { userSlideProgress };
 
-    let currentScrollPos = '';
-    let currentLyric: Line;
+    let getLyricIndex: Function;
+    const debugMode = false;
     let currentLyricIndex = -1;
+    let currentPositionIndex = -1;
+    let currentAnimationIndex = -1;
     let lyricsContainer: HTMLDivElement;
-    let systemScrolling = false;
-    let systemCouldScrollSince = 0;
-    let lastScroll = 0;
+    let nextUpdate = -1;
+    let lastAdjustProgress = 0;
 
-    let refs = [];
+    let refs: HTMLParagraphElement[] = [];
     let _refs: any[] = [];
     $: refs = _refs.filter(Boolean);
-
-    function smoothScrollTo(element: HTMLElement, to: number, duration: number, timingFunction: Function) {
-        if (systemCouldScrollSince > Date.now()) return;
-        systemScrolling = true;
-        const start = element.scrollTop;
-        const change = to - start;
-        const startTime = performance.now();
-
-        function animateScroll(timestamp: number) {
-            const elapsedTime = timestamp - startTime;
-            const progress = Math.min(elapsedTime / duration, 1);
-            const easedProgress = timingFunction(progress, 0.38, 0, 0.24, 0.99);
-            element.scrollTop = start + change * easedProgress;
-
-            console.log(elapsedTime);
-            if (elapsedTime < duration) {
-                requestAnimationFrame(animateScroll);
-            } else {
-                console.log('!');
-                setTimeout(() => {
-                    console.log('?');
-                    systemScrolling = false;
-                }, 100);
-            }
-        }
-
-        requestAnimationFrame(animateScroll);
-    }
-
-    // Define your custom Bézier curve function
-    function customBezier(progress: number, p1x: number, p1y: number, p2x: number, p2y: number) {
-        function cubicBezier(t: number, p1: number, p2: number) {
-            const c = 3 * p1;
-            const b = 3 * (p2 - p1) - c;
-            const a = 1 - c - b;
-            return a * Math.pow(t, 3) + b * Math.pow(t, 2) + c * t;
-        }
-
-        return BezierEasing(p1x, p1y, p2x, p2y)(progress);
-    }
+    $: getLyricIndex = createLyricsSearcher(originalLyrics);
 
     function getClass(lyricIndex: number, progress: number) {
-        if (!currentLyric) return 'after-lyric';
-        if (lyricIndex === currentLyricIndex) return 'current-lyric';
-        else if (progress > currentLyric.endSeconds) return 'after-lyric';
+        if (!originalLyrics.scripts) return 'previous-lyric';
+        if (currentLyricIndex === lyricIndex) return 'current-lyric';
+        else if (progress > originalLyrics.scripts[lyricIndex].end) return 'after-lyric';
         else return 'previous-lyric';
     }
 
-    function inRange(x: number, min: number, max: number) {
-        return (x - min) * (x - max) <= 0;
-    }
-
     $: {
-        if (originalLyrics && lyricsContainer) {
-            let found = false;
-            let finallyFound = false;
-            for (let i = 0; i < originalLyrics.length; i++) {
-                let l = originalLyrics[i];
-                if (progress >= l.startSeconds && progress <= l.endSeconds) {
-                    currentLyric = l;
-                    currentLyricIndex = i;
-                    found = true;
-                    const currentRef = refs[i];
-                    if (currentRef && currentScrollPos !== currentLyric.text) {
-                        const targetScroll =
-                            lyricsContainer.scrollTop +
-                            currentRef.getBoundingClientRect().top -
-                            lyricsContainer.getBoundingClientRect().height * 0.1 -
-                            128;
-                        const duration = 450;
-                        smoothScrollTo(lyricsContainer, targetScroll, duration, customBezier);
-                        lastScroll = 0;
-                        currentScrollPos = currentLyric.text;
-                    }
-                    break;
-                }
+        if (lyricsContainer && originalLyrics && originalLyrics.scripts) {
+            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;
             }
-            if (!found) {
-                for (let i = 0; i < originalLyrics.length; i++) {
-                    let l = originalLyrics[i];
-                    let nl = i + 1 < originalLyrics.length ? originalLyrics[i + 1] : originalLyrics[i];
-                    if (
-                        progress >= l.endSeconds &&
-                        progress < nl.startSeconds &&
-                        inRange(lastScroll, l.endSeconds, nl.startSeconds) === false
-                    ) {
-                        const currentRef = refs[i];
-                        const targetScroll = lyricsContainer.scrollTop + currentRef.getBoundingClientRect().top - 320;
-                        const duration = 700;
-                        currentLyricIndex = i - 0.1;
-                        currentLyric = {
-                            id: '-1',
-                            startTime: '00:00:00,000',
-                            startSeconds: l.endSeconds + 0.01,
-                            endTime: '00:00:00,000',
-                            endSeconds: nl.startSeconds - 0.01,
-                            text: ''
-                        };
-                        smoothScrollTo(lyricsContainer, targetScroll, duration, customBezier);
-                        lastScroll = progress;
-                        finallyFound = true;
-                        break;
-                    }
-                }
-            }
-            if (systemCouldScrollSince < Date.now()) {
-                for (let i = 0; i < lyrics.length; i++) {
-                    const offset = Math.abs(i - currentLyricIndex);
-                    const blurRadius = Math.min(offset * 1, 16);
+            if ($userAdjustingProgress === false) {
+                for (let i = 0; i < scripts.length; i++) {
+                    const offset = Math.abs(i - currentPositionIndex);
+                    const blurRadius = Math.min(offset * 1.5, 16);
                     if (refs[i]) {
                         refs[i].style.filter = `blur(${blurRadius}px)`;
                     }
                 }
             }
-            if (found == false && finallyFound == false) {
-                currentLyric = {
-                    id: '-1',
-                    startTime: '00:00:00,000',
-                    startSeconds: 0,
-                    endTime: '00:00:00,000',
-                    endSeconds: 0,
-                    text: ''
-                };
+        }
+    }
+
+    function sleep(ms: number) {
+        return new Promise((resolve) => setTimeout(resolve, ms));
+    }
+
+    async function a(h: number) {
+        let pos = currentPositionIndex + 2;
+        for (let i = currentPositionIndex + 2; 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;
+            await sleep(75);
+            if (refs[i - 2].getBoundingClientRect().top > lyricsContainer.getBoundingClientRect().height) break;
+        }
+        for (let i = pos; i < refs.length; i++) {
+            refs[i].style.transition =
+                'transform 0s, filter 200ms ease, opacity 200ms ease, font-size 200ms ease, scale 250ms ease';
+            const h = refs[i].getBoundingClientRect().height;
+            refs[i].style.transform = `translateY(${-h}px)`;
+        }
+        await sleep(650);
+        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';
+        }
+        for (let i = 0; i < refs.length; i++) {
+            refs[i].style.transform = `translateY(0px)`;
+        }
+        lyricsContainer.scrollTop += h;
+    }
+
+    async function b(currentLyric: HTMLParagraphElement) {
+        if (!originalLyrics || !originalLyrics.scripts || !lyricsContainer) return;
+        lyricsContainer.scrollTop += currentLyric.getBoundingClientRect().top - 144;
+    }
+
+    userAdjustingProgress.subscribe((v) => {
+        if (!originalLyrics) return;
+        const scripts = originalLyrics.scripts;
+        if (!scripts) return;
+        if (v) {
+            console.log('!');
+            for (let i = 0; i < scripts.length; i++) {
+                refs[i].style.filter = `blur(0px)`;
+            }
+        } else {
+            for (let i = 0; i < scripts.length; i++) {
+                const offset = Math.abs(i - currentPositionIndex);
+                const blurRadius = Math.min(offset * 1.5, 16);
+                if (refs[i]) {
+                    refs[i].style.filter = `blur(${blurRadius}px)`;
+                }
+            }
+        }
+    });
+
+    progressBarRaw.subscribe((progress: number) => {
+        if ($userAdjustingProgress === false && getLyricIndex) {
+            const currentLyric = refs[getLyricIndex(progress)];
+            b(currentLyric);
+            lastAdjustProgress = currentPositionIndex;
+        }
+    });
+
+    $: {
+        if ($userAdjustingProgress) {
+            nextUpdate = progress;
+        } else {
+            if (0 < nextUpdate - progress && nextUpdate - progress < 0.05) {
+                if (
+                    currentPositionIndex >= 0 &&
+                    currentPositionIndex !== currentAnimationIndex &&
+                    currentPositionIndex !== lastAdjustProgress
+                ) {
+                    const offsetHeight =
+                        refs[currentPositionIndex].getBoundingClientRect().height +
+                        refs[currentPositionIndex].getBoundingClientRect().top -
+                        144;
+                    const currentLyric = refs[currentPositionIndex];
+                    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 h = refs[i].getBoundingClientRect().height;
+                        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)`;
+                        a(offsetHeight);
+                    }
+                    currentAnimationIndex = currentPositionIndex;
+                }
             }
         }
     }
@@ -151,23 +159,24 @@
 {#if lyrics && originalLyrics}
     <div
         class="absolute top-[6.5rem] md:top-36 xl:top-0 w-screen xl:w-[52vw] px-6 md:px-12 lg:px-[7.5rem] xl:left-[45vw] xl:px-[3vw] h-[calc(100vh-17rem)] xl:h-screen font-sans
-        text-left no-scrollbar overflow-y-auto z-[1] lyrics py-16"
+        text-left no-scrollbar overflow-y-auto z-[1] pt-16 lyrics"
         bind:this={lyricsContainer}
-        on:scroll={(e) => {
-            if (systemScrolling == false) {
-                console.log('yes');
-                for (let i = 0; i < lyrics.length; i++) {
-                    refs[i].style.filter = `blur(0px)`;
-                }
-                systemCouldScrollSince = Date.now() + 5000;
-            }
-        }}
     >
+        {#if debugMode}
+            <p class="fixed top-6 right-20">
+                LyricIndex: {currentLyricIndex} PositionIndex: {currentPositionIndex} AnimationIndex:{currentAnimationIndex}
+                NextUpdate: {Math.floor(nextUpdate / 60)}m {Math.round((nextUpdate % 60) * 100) / 100}s
+            </p>
+        {/if}
         {#each lyrics as lyric, i}
-            <p bind:this={_refs[i]} class={getClass(i, progress)}>
+            <p bind:this={_refs[i]} class={`${getClass(i, progress)} text-shadow-lg`}>
+                {#if debugMode}
+                    <span class="text-lg absolute">{i}</span>
+                {/if}
                 {lyric}
             </p>
         {/each}
+        <div class="relative w-full h-[50rem]"></div>
     </div>
 {/if}
 
@@ -181,42 +190,38 @@
         );
     }
     .no-scrollbar {
-        scrollbar-width: none;
+        scrollbar-width: 10px;
     }
     .no-scrollbar::-webkit-scrollbar {
-        width: 0;
+        width: 10px;
     }
     .current-lyric {
         position: relative;
         color: white;
         font-weight: 600;
-        font-size: 2.3rem;
+        font-size: 2.1rem;
         line-height: 2.7rem;
-        top: 1rem;
-        transition: 0.2s;
         margin: 1rem 0rem;
+        scale: 1.02 1;
+        top: 1rem;
     }
     .previous-lyric {
         position: relative;
         color: rgba(255, 255, 255, 0.7);
         font-weight: 600;
-        font-size: 2.3rem;
+        font-size: 2.1rem;
         line-height: 2.7rem;
-        filter: blur(1px);
-        top: 1rem;
-        transition: 0.2s;
         margin: 1rem 0rem;
+        top: 1rem;
     }
     .after-lyric {
         position: relative;
         color: rgba(255, 255, 255, 0.7);
         font-weight: 600;
-        font-size: 2.3rem;
+        font-size: 2.1rem;
         line-height: 2.7rem;
-        filter: blur(1px);
-        top: 1rem;
-        transition: 0.2s;
         margin: 1rem 0rem;
+        top: 1rem;
     }
     @media (min-width: 768px) {
         .current-lyric {
@@ -239,18 +244,18 @@
     @media (min-width: 1024px) {
         .current-lyric {
             font-size: 3.5rem;
-            line-height: 4.5rem;
-            margin: 2rem 0rem;
+            line-height: 6.5rem;
+            margin: 0rem 0rem;
         }
         .after-lyric {
-            font-size: 3rem;
-            line-height: 3.5rem;
-            margin: 2rem 0rem;
+            font-size: 3.5rem;
+            line-height: 6.5rem;
+            margin: 0rem 0rem;
         }
         .previous-lyric {
-            font-size: 3rem;
-            line-height: 3.5rem;
-            margin: 2rem 0rem;
+            font-size: 3.5rem;
+            line-height: 6.5rem;
+            margin: 0rem 0rem;
         }
     }
 </style>
diff --git a/src/lib/formatDuration.ts b/src/lib/formatDuration.ts
index 1c4324f..b3d88bc 100644
--- a/src/lib/formatDuration.ts
+++ b/src/lib/formatDuration.ts
@@ -2,7 +2,7 @@ export default function(durationInSeconds: number): string {
     // Calculate hours, minutes, and seconds
     const hours = Math.floor(durationInSeconds / 3600);
     const minutes = Math.floor((durationInSeconds % 3600) / 60);
-    const seconds = Math.round(durationInSeconds) % 60;
+    const seconds = Math.floor(durationInSeconds) % 60;
 
     // Format hours, minutes, and seconds into string
     let formattedTime = '';
diff --git a/src/lib/formatText.ts b/src/lib/formatText.ts
index 3037d28..f234083 100644
--- a/src/lib/formatText.ts
+++ b/src/lib/formatText.ts
@@ -4,7 +4,7 @@ export default function(key: string){
         "audio/ogg": "OGG 容器",
         "audio/flac": "FLAC 无损音频",
         "audio/aac": "AAC 音频",
-        "srt": "SRT 字幕"
+        "lrc": "LRC 歌词"
     }
     if (!key) return "未知格式";
     else return dict[key as keyof typeof dict];
diff --git a/src/lib/lyrics/lyricSearcher.ts b/src/lib/lyrics/lyricSearcher.ts
new file mode 100644
index 0000000..fab139e
--- /dev/null
+++ b/src/lib/lyrics/lyricSearcher.ts
@@ -0,0 +1,33 @@
+import type { LrcJsonData } from "lrc-parser-ts";
+
+export default function createLyricsSearcher(lrc: LrcJsonData): (progress: number) => number {
+    if (!lrc || !lrc.scripts) return () => 0;
+    const startTimes: number[] = lrc.scripts.map(script => script.start);
+    const endTimes: number[] = lrc.scripts.map(script => script.end);
+
+    return function(progress: number): number {
+        // 使用二分查找定位 progress 对应的歌词索引
+        let left = 0;
+        let right = startTimes.length - 1;
+
+        while (left <= right) {
+            const mid = Math.floor((left + right) / 2);
+
+            if (startTimes[mid] === progress) {
+                return mid;
+            } else if (startTimes[mid] < progress) {
+                left = mid + 1;
+            } else {
+                right = mid - 1;
+            }
+        }
+
+        // 循环结束后，检查 left 索引
+        if (left < startTimes.length && startTimes[left] > progress && (left === 0 || endTimes[left - 1] <= progress)) {
+            return left;
+        }
+
+        // 如果没有找到确切的 progress，返回小于等于 progress 的最大索引
+        return Math.max(0, right);
+    };
+}
\ No newline at end of file
diff --git a/src/lib/state/progressBarRaw.ts b/src/lib/state/progressBarRaw.ts
new file mode 100644
index 0000000..73e6aae
--- /dev/null
+++ b/src/lib/state/progressBarRaw.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+const progressBarRaw  = writable(0);
+export default progressBarRaw;
\ No newline at end of file
diff --git a/src/lib/state/userAdjustingProgress.ts b/src/lib/state/userAdjustingProgress.ts
new file mode 100644
index 0000000..cd932dd
--- /dev/null
+++ b/src/lib/state/userAdjustingProgress.ts
@@ -0,0 +1,3 @@
+import { writable } from 'svelte/store';
+const userAdjustingProgress  = writable(false);
+export default userAdjustingProgress;
\ No newline at end of file
diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte
index 1379e51..4b975f6 100644
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@@ -77,7 +77,7 @@
         </ul>
     </div>
     <p>
-        AquaVox 1.9.1 · 早期公开预览 · 源代码参见
+        AquaVox 1.10.0 · 早期公开预览 · 源代码参见
         <a href="https://github.com/alikia2x/aquavox">GitHub</a>
     </p>
     <a href="/import">导入音乐</a> <br />
diff --git a/src/routes/import/[id]/lyric/+page.svelte b/src/routes/import/[id]/lyric/+page.svelte
index 69b6ada..a52a1f8 100644
--- a/src/routes/import/[id]/lyric/+page.svelte
+++ b/src/routes/import/[id]/lyric/+page.svelte
@@ -16,7 +16,7 @@
 
 <div class="w-full flex my-3">
     <h2>歌词文件</h2>
-    <FileSelector accept=".srt" class="ml-auto top-2 relative" />
+    <FileSelector accept=".lrc" class="ml-auto top-2 relative" />
 </div>
 
 <FileList />
diff --git a/src/routes/play/[id]/+page.svelte b/src/routes/play/[id]/+page.svelte
index df22211..9c2c853 100644
--- a/src/routes/play/[id]/+page.svelte
+++ b/src/routes/play/[id]/+page.svelte
@@ -8,8 +8,8 @@
     import extractFileName from '$lib/extractFileName';
     import localforage from 'localforage';
     import { writable } from 'svelte/store';
-    import srtParser2 from 'srt-parser-2';
-    import type { Line } from 'srt-parser-2';
+    import lrcParser, { type LrcJsonData } from 'lrc-parser-ts';
+    import userAdjustingProgress from '$lib/state/userAdjustingProgress';
     import type { IAudioMetadata } from 'music-metadata-browser';
 
     const audioId = $page.params.id;
@@ -23,11 +23,9 @@
     let paused: boolean = true;
     let launched = false;
     let prepared: string[] = [];
-    let originalLyrics: Line[];
+    let originalLyrics: LrcJsonData;
     let lyricsText: string[] = [];
-    let onAdjustingProgress = false;
     let hasLyrics: boolean;
-    let lyricComp: any;
     const coverPath = writable('');
     let mainInterval: ReturnType<typeof setInterval>;
 
@@ -70,7 +68,6 @@
         getAudioIDMetadata(audioId, (metadata: IAudioMetadata | null) => {
             if (!metadata) return;
             duration = metadata.format.duration ? metadata.format.duration : 0;
-            console.log(metadata);
             singer = metadata.common.artist ? metadata.common.artist : '未知歌手';
             prepared.push('duration');
         });
@@ -95,9 +92,9 @@
             if (file) {
                 const f = file as File;
                 f.text().then((lr) => {
-                    const parser = new srtParser2();
-                    originalLyrics = parser.fromSrt(lr);
-                    for (const line of originalLyrics) {
+                    originalLyrics = lrcParser(lr);
+                    if (!originalLyrics.scripts) return;
+                    for (const line of originalLyrics.scripts) {
                         lyricsText.push(line.text);
                     }
                 });
@@ -135,14 +132,12 @@
         if (audioPlayer) {
             audioPlayer.currentTime = duration * progress;
             currentProgress = duration * progress;
-            lyricComp.userSlideProgress();
         }
     }
 
-    function adjustRealProgress(progress: number) {
+    function adjustDisplayProgress(progress: number) {
         if (audioPlayer) {
             currentProgress = duration * progress;
-            lyricComp.userSlideProgress();
         }
     }
 
@@ -152,24 +147,22 @@
         }
     }
 
-    function setOnSlide(value: boolean) {
-        onAdjustingProgress = value;
-    }
-
     $: {
         clearInterval(mainInterval);
         mainInterval = setInterval(() => {
             if (
                 audioPlayer !== null &&
-                audioPlayer.currentTime !== undefined &&
-                onAdjustingProgress === false
+                audioPlayer.currentTime !== undefined
             ) {
-                currentProgress = audioPlayer.currentTime;
+                if ($userAdjustingProgress === false)
+                    currentProgress = audioPlayer.currentTime;
+                progressBarRaw.set(audioPlayer.currentTime);
             }
-        }, 17);
+        }, 50);
     }
 
     import { onMount } from 'svelte';
+    import progressBarRaw from '$lib/state/progressBarRaw';
 
 	onMount(() => {
 		audioPlayer.volume = localStorage.getItem('volume') ? Number(localStorage.getItem('volume')) : 1;
@@ -209,13 +202,11 @@
     {paused}
     {adjustProgress}
     {adjustVolume}
-    {adjustRealProgress}
-    onSlide={onAdjustingProgress}
-    {setOnSlide}
+    {adjustDisplayProgress}
     {hasLyrics}
 />
 
-<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress} bind:this={lyricComp}/>
+<Lyrics lyrics={lyricsText} {originalLyrics} progress={currentProgress}/>
 
 <audio
     bind:this={audioPlayer}