fix: song name display overflow

alikia2x · May 16, 2024 · 84a2e3f · 84a2e3f
1 parent d814eb3
commit 84a2e3f
Show file tree

Hide file tree

Showing 5 changed files with 197 additions and 8 deletions.
diff --git 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
diff --git 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}
 
 <div
-    class={"absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] z-10 " + (hasLyrics
-        ? "lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]"
-        : "lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[31.5vw]")}
+    class={'absolute select-none bottom-2 h-60 w-[86vw] left-[7vw] z-10 ' +
+        (hasLyrics
+            ? 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[7vw]'
+            : 'lg:w-[76vw] lg:left-[12vw] xl:w-[37vw] xl:left-[31.5vw]')}
 >
     {#if !showInfoTop}
         <div class="song-info">
-            <span class="song-name text-shadow">{name}</span><br />
+            <div class="song-info-top {isInfoTopOverflowing ? 'animate' : ''}" bind:this={songInfoTopContainer}>
+                <span
+                    class="song-name text-shadow {isInfoTopOverflowing ? 'animate' : ''}"
+                    bind:this={songInfoTopContent}>{name}</span
+                >
+            </div>
             <span class="song-author">{singer}</span>
         </div>
     {/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
@@ -63,7 +63,7 @@
                     >
                         <span class="font-bold">{musicList[id].name}</span> <br />
                         <span>{toHumanSize(musicList[id].size)}</span> ·
-                        <a href={`/import/${id}/lyric`}>导入歌词</a>
+                        <a class="!no-underline" href={`/import/${id}/lyric`}>导入歌词</a>
                         {#if musicList[id].coverUrl}
                             <img
                                 class="h-16 w-16 object-cover absolute rounded-lg right-2 top-2"
@@ -77,7 +77,7 @@
         </ul>
     </div>
     <p>
-        AquaVox 1.8.1 · 早期公开预览 · 源代码参见
+        AquaVox 1.8.2 · 早期公开预览 · 源代码参见
         <a href="https://github.com/alikia2x/aquavox">GitHub</a>
     </p>
     <a href="/import">导入音乐</a> <br />

diff --git 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} */