From 84a2e3fd9662d5b3b9c4ff80e24e5f222e09cd83 Mon Sep 17 00:00:00 2001 From: Alikia2x Date: Thu, 16 May 2024 23:05:38 +0800 Subject: [PATCH] fix: song name display overflow --- package.json | 3 +- pnpm-lock.yaml | 131 +++++++++++++++++++++++ src/lib/components/interactiveBox.svelte | 65 ++++++++++- src/routes/+page.svelte | 4 +- svelte.config.js | 2 +- 5 files changed, 197 insertions(+), 8 deletions(-) diff --git a/package.json b/package.json index daf9653..9844bed 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "aquavox", - "version": "1.8.1", + "version": "1.8.2", "private": false, "scripts": { "dev": "vite dev", @@ -15,6 +15,7 @@ "devDependencies": { "@iconify/svelte": "^4.0.1", "@sveltejs/adapter-auto": "^3.0.0", + "@sveltejs/adapter-node": "^5.0.1", "@sveltejs/kit": "^2.0.0", "@sveltejs/vite-plugin-svelte": "^3.0.0", "@types/eslint": "^8.56.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index ca5c1f4..d811d6a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -37,6 +37,9 @@ devDependencies: '@sveltejs/adapter-auto': specifier: ^3.0.0 version: 3.2.0(@sveltejs/kit@2.5.7) + '@sveltejs/adapter-node': + specifier: ^5.0.1 + version: 5.0.1(@sveltejs/kit@2.5.7) '@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) @@ -447,6 +450,70 @@ packages: resolution: {integrity: sha512-j7P6Rgr3mmtdkeDGTe0E/aYyWEWVtc5yFXtHCRHs28/jptDEWfaVOc5T7cblqy1XKPPfCxJc/8DwQ5YgLOZOVQ==} dev: true + /@rollup/plugin-commonjs@25.0.7(rollup@4.17.2): + resolution: {integrity: sha512-nEvcR+LRjEjsaSsc4x3XZfCCvZIaSMenZu/OiwOKGN2UhQpAYI7ru7czFvyWbErlpoGjnSX3D5Ch5FcMA3kRWQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^2.68.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.17.2) + commondir: 1.0.1 + estree-walker: 2.0.2 + glob: 8.1.0 + is-reference: 1.2.1 + magic-string: 0.30.10 + rollup: 4.17.2 + dev: true + + /@rollup/plugin-json@6.1.0(rollup@4.17.2): + resolution: {integrity: sha512-EGI2te5ENk1coGeADSIwZ7G2Q8CJS2sF120T7jLw4xFw9n7wIOXHo+kIYRAoVpJAN+kmqZSoO3Fp4JtoNF4ReA==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.17.2) + rollup: 4.17.2 + dev: true + + /@rollup/plugin-node-resolve@15.2.3(rollup@4.17.2): + resolution: {integrity: sha512-j/lym8nf5E21LwBT4Df1VD6hRO2L2iwUeUmP7litikRsVp1H6NWx20NEp0Y7su+7XGc476GnXXc4kFeZNGmaSQ==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^2.78.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@rollup/pluginutils': 5.1.0(rollup@4.17.2) + '@types/resolve': 1.20.2 + deepmerge: 4.3.1 + is-builtin-module: 3.2.1 + is-module: 1.0.0 + resolve: 1.22.8 + rollup: 4.17.2 + dev: true + + /@rollup/pluginutils@5.1.0(rollup@4.17.2): + resolution: {integrity: sha512-XTIWOPPcpvyKI6L1NHo0lFlCyznUEyPmPY1mc3KpPVDYulHSTvyeLNVW00QTLIAFNhR3kYnJTQHeGqU4M3n09g==} + engines: {node: '>=14.0.0'} + peerDependencies: + rollup: ^1.20.0||^2.0.0||^3.0.0||^4.0.0 + peerDependenciesMeta: + rollup: + optional: true + dependencies: + '@types/estree': 1.0.5 + estree-walker: 2.0.2 + picomatch: 2.3.1 + rollup: 4.17.2 + dev: true + /@rollup/rollup-android-arm-eabi@4.17.2: resolution: {integrity: sha512-NM0jFxY8bB8QLkoKxIQeObCaDlJKewVlIEkuyYKm5An1tdVZ966w2+MPQ2l8LBZLjR+SgyV+nRkTIunzOYBMLQ==} cpu: [arm] @@ -588,6 +655,18 @@ packages: import-meta-resolve: 4.1.0 dev: true + /@sveltejs/adapter-node@5.0.1(@sveltejs/kit@2.5.7): + resolution: {integrity: sha512-eYdmxdUWMW+dad1JfMsWBPY2vjXz9eE+52A2AQnXPScPJlIxIVk5mmbaEEzrZivLfO2wEcLTZ5vdC03W69x+iA==} + peerDependencies: + '@sveltejs/kit': ^2.4.0 + dependencies: + '@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) + 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==} engines: {node: '>=18.13'} @@ -678,6 +757,10 @@ packages: resolution: {integrity: sha512-Sk/uYFOBAB7mb74XcpizmH0KOR2Pv3D2Hmrh1Dmy5BmK3MpdSa5kqZcg6EKBdklU0bFXX9gCfzvpnyUehrPIuA==} dev: true + /@types/resolve@1.20.2: + resolution: {integrity: sha512-60BCwRFOZCQhDncwQdxxeOEEkbc5dIMccYLwbxsS4TUNeVECQ/pBJ0j09mrHOl/JJvpRPGwO9SvE4nR2Nb/a4Q==} + dev: true + /@types/uuid@9.0.8: resolution: {integrity: sha512-jg+97EGIcY9AGHJJRaaPVgetKDsrTgbRjQ5Msgjh/DQKEFl0DtyRr/VCOyD1T2R1MNeWPK/u7JoGhlDZnKBAfA==} dev: true @@ -894,6 +977,11 @@ packages: ieee754: 1.2.1 dev: false + /builtin-modules@3.3.0: + resolution: {integrity: sha512-zhaCDicdLuWN5UbN5IMnFqNMhNfo919sH85y2/ea+5Yg9TsTkeZxpL+JLbp6cgYFS4sRLp3YV4S6yDuqVWHYOw==} + engines: {node: '>=6'} + dev: true + /cac@6.7.14: resolution: {integrity: sha512-b6Ilus+c3RrdDk+JhLKUAQfzzgLEPy6wcXqS7f/xe1EETvsDP6GORG7SFuOs6cID5YkqchW/LXZbX5bc8j7ZcQ==} engines: {node: '>=8'} @@ -981,6 +1069,10 @@ packages: engines: {node: '>= 6'} dev: true + /commondir@1.0.1: + resolution: {integrity: sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==} + dev: true + /concat-map@0.0.1: resolution: {integrity: sha512-/Srv4dswyQNBfohGpz9o6Yb3Gz3SrUDqBH5rTuhGR7ahtlbYKnVxw2bCFMRljaA7EXHaXZ8wsHdodFvbkhKmqg==} dev: true @@ -1287,6 +1379,10 @@ packages: resolution: {integrity: sha512-SqmZANLWS0mnatqbSfRP5g8OXZC12Fgg1IwNtLsyHDzJizORW4khDfjPqJZsemPWBB2uqykUah5YpQ6epsqC/w==} dev: false + /estree-walker@2.0.2: + resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==} + dev: true + /estree-walker@3.0.3: resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} dependencies: @@ -1470,6 +1566,17 @@ packages: path-is-absolute: 1.0.1 dev: true + /glob@8.1.0: + resolution: {integrity: sha512-r8hpEjiQEYlF2QU0df3dS+nxxSIreXQS1qRhMJM0Q5NDdR386C7jb7Hwwod8Fgiuex+k0GFjgft18yvxm5XoCQ==} + engines: {node: '>=12'} + dependencies: + fs.realpath: 1.0.0 + inflight: 1.0.6 + inherits: 2.0.4 + minimatch: 5.1.6 + once: 1.4.0 + dev: true + /globals@13.24.0: resolution: {integrity: sha512-AhO5QUcj8llrbG09iWhPU2B204J1xnPeL8kQmVorSsy+Sjj1sk8gIyh6cUocGmH4L0UuhAJy+hJMRA4mgA4mFQ==} engines: {node: '>=8'} @@ -1557,6 +1664,13 @@ packages: binary-extensions: 2.3.0 dev: true + /is-builtin-module@3.2.1: + resolution: {integrity: sha512-BSLE3HnV2syZ0FK0iMA/yUGplUeMmNz4AW5fnTunbCIqZi4vG3WjJT9FHMy5D69xmAYBHXQhJdALdpwVxV501A==} + engines: {node: '>=6'} + dependencies: + builtin-modules: 3.3.0 + dev: true + /is-core-module@2.13.1: resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==} dependencies: @@ -1580,6 +1694,10 @@ packages: is-extglob: 2.1.1 dev: true + /is-module@1.0.0: + resolution: {integrity: sha512-51ypPSPCoTEIN9dy5Oy+h4pShgJmPCygKfyRCISBI+JoWT/2oJvK8QPxmwv7b/p239jXrm9M1mlQbyKJ5A152g==} + dev: true + /is-number@7.0.0: resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} engines: {node: '>=0.12.0'} @@ -1590,6 +1708,12 @@ packages: engines: {node: '>=8'} dev: true + /is-reference@1.2.1: + resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==} + dependencies: + '@types/estree': 1.0.5 + dev: true + /is-reference@3.0.2: resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} dependencies: @@ -1807,6 +1931,13 @@ packages: brace-expansion: 1.1.11 dev: true + /minimatch@5.1.6: + resolution: {integrity: sha512-lKwV/1brpG6mBUFHtb7NUmtABCb2WZZmm2wNiOA5hAb8VdCS4B3dtMWyvcoViccwAW/COERjXLt0zP1zXUN26g==} + engines: {node: '>=10'} + dependencies: + brace-expansion: 2.0.1 + dev: true + /minimatch@9.0.4: resolution: {integrity: sha512-KqWh+VchfxcMNRAJjj2tnsSJdNbHsVgnkBhTNrW7AjVo6OvLtxw8zfT9oLw1JSohlFzJ8jCoTgaoXvJ+kHt6fw==} engines: {node: '>=16 || 14 >=14.17'} diff --git a/src/lib/components/interactiveBox.svelte b/src/lib/components/interactiveBox.svelte index e2f37dd..c726e3b 100644 --- a/src/lib/components/interactiveBox.svelte +++ b/src/lib/components/interactiveBox.svelte @@ -19,6 +19,9 @@ let progressBar: HTMLInputElement; 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) { @@ -39,6 +42,15 @@ }); }); + $: { + console.log(songInfoTopContainer, songInfoTopContent); + if (songInfoTopContainer && songInfoTopContent) { + console.log(songInfoTopContent.offsetWidth, songInfoTopContainer.offsetWidth); + isInfoTopOverflowing = + songInfoTopContent.offsetWidth > songInfoTopContainer.offsetWidth; + } + } + $: { showInfoTop = mql.matches && hasLyrics; } @@ -52,13 +64,19 @@ {/if}
{#if !showInfoTop}
- {name}
+
+ {name} +
{singer}
{/if} @@ -156,17 +174,56 @@ user-select: text; position: absolute; width: auto; + max-width: 100%; left: 50%; transform: translate(-50%, 0); top: 1rem; font-family: sans-serif; text-align: center; } + .song-info-top { + white-space: nowrap; + overflow: hidden; + position: relative; + } + + .song-info-top.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% + ); + } + .song-name { + position: relative; font-size: 1.6rem; line-height: 2.5rem; + overflow-y: auto; font-weight: 700; color: white; + scrollbar-width: none; + 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%); + } + 50% { + transform: translateX(0%); + } + 100% { + transform: translateX(-100%); + } } .song-author { font-size: 1.2rem; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 0a39160..254f2f9 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -63,7 +63,7 @@ > {musicList[id].name}
{toHumanSize(musicList[id].size)} · - 导入歌词 + 导入歌词 {#if musicList[id].coverUrl}

- AquaVox 1.8.1 · 早期公开预览 · 源代码参见 + AquaVox 1.8.2 · 早期公开预览 · 源代码参见 GitHub

导入音乐
diff --git a/svelte.config.js b/svelte.config.js index b9a0894..331f4eb 100644 --- a/svelte.config.js +++ b/svelte.config.js @@ -1,4 +1,4 @@ -import adapter from '@sveltejs/adapter-auto'; +import adapter from '@sveltejs/adapter-node'; import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; /** @type {import('@sveltejs/kit').Config} */