Add Marquee to Make Long Text Readable (#767)

music-assistant · Dec 26, 2024 · e3196d4 · e3196d4
1 parent 65dc148
commit e3196d4
Show file tree

Hide file tree

Showing 5 changed files with 571 additions and 116 deletions.
diff --git a/src/components/InfoHeader.vue b/src/components/InfoHeader.vue
@@ -40,6 +40,8 @@
           padding-left: 15px;
           align-items: center;
           padding-right: 15px;
+          display: flex;
+          width: 100%;
         "
       >
         <!-- left side: cover image -->
@@ -54,6 +56,7 @@
             margin-bottom: 15px;
             margin-right: 24px;
             align-content: center;
+            flex-shrink: 0;
           "
         >
           <div v-if="item.media_type && item.media_type == MediaType.ARTIST">
@@ -70,7 +73,7 @@
           </div>
         </div>
 
-        <div style="width: 100%; text-align: left">
+        <div style="min-width: 0">
           <!-- Main title -->
           <img
             v-if="artistLogo"
@@ -80,7 +83,9 @@
             style="padding-left: 10px"
           />
           <v-card-title v-else>
-            {{ item.name }}
+            <MarqueeText :sync="marqueeSync">
+              {{ item.name }}
+            </MarqueeText>
           </v-card-title>
 
           <!-- other details -->
@@ -108,52 +113,64 @@
             <!-- item artists -->
             <v-card-subtitle
               v-if="'artists' in item && item.artists"
-              class="title accent--text"
+              class="title accent--text d-flex"
             >
               <v-icon
                 style="margin-left: -3px; margin-right: 3px"
                 small
                 color="primary"
                 icon="mdi-account-music"
               />
-              <span
-                v-for="(artist, artistindex) in item.artists"
-                :key="artist.item_id"
-              >
-                <a style="color: accent" @click="artistClick(artist)">{{
-                  artist.name
-                }}</a>
+              <MarqueeText :sync="marqueeSync">
                 <span
-                  v-if="artistindex + 1 < item.artists.length"
-                  :key="artistindex"
-                  style="color: accent"
-                  >{{ " / " }}</span
+                  v-for="(artist, artistindex) in item.artists"
+                  :key="artist.item_id"
                 >
-              </span>
+                  <a style="color: accent" @click="artistClick(artist)">{{
+                    artist.name
+                  }}</a>
+                  <span
+                    v-if="artistindex + 1 < item.artists.length"
+                    :key="artistindex"
+                    style="color: accent"
+                    >{{ " / " }}</span
+                  >
+                </span>
+              </MarqueeText>
             </v-card-subtitle>
 
             <!-- playlist owner -->
-            <v-card-subtitle v-if="'owner' in item && item.owner" class="title">
+            <v-card-subtitle
+              v-if="'owner' in item && item.owner"
+              class="title d-flex"
+            >
               <v-icon
                 color="primary"
                 style="margin-left: -3px; margin-right: 3px"
                 small
                 icon="mdi-account-music"
               />
-              <a style="color: primary">{{ item.owner }}</a>
+              <MarqueeText :sync="marqueeSync">
+                <a style="color: primary">{{ item.owner }}</a>
+              </MarqueeText>
             </v-card-subtitle>
 
-            <v-card-subtitle v-if="'album' in item && item.album">
+            <v-card-subtitle
+              v-if="'album' in item && item.album"
+              class="d-flex"
+            >
               <v-icon
                 color="primary"
                 style="margin-left: -3px; margin-right: 3px"
                 small
                 icon="mdi-album"
               />
-              <a
-                style="color: secondary"
-                @click="albumClick((item as Track)?.album)"
-                >{{ item.album.name }}</a
+              <MarqueeText :sync="marqueeSync">
+                <a
+                  style="color: secondary"
+                  @click="albumClick((item as Track)?.album)"
+                  >{{ item.album.name }}</a
+                ></MarqueeText
               >
             </v-card-subtitle>
           </div>
@@ -322,6 +339,8 @@ import {
 } from "@/layouts/default/ItemContextMenu.vue";
 import Toolbar from "@/components/Toolbar.vue";
 import { useI18n } from "vue-i18n";
+import MarqueeText from "./MarqueeText.vue";
+import { MarqueeTextSync } from "@/helpers/marquee_text_sync";
 
 // properties
 export interface Props {
@@ -335,6 +354,7 @@ const { mobile } = useDisplay();
 const imgGradient = new URL("../assets/info_gradient.jpg", import.meta.url)
   .href;
 
+const marqueeSync = new MarqueeTextSync();
 const router = useRouter();
 const { t } = useI18n();