Update popup item info title

mantou132 · Oct 8, 2020 · f3238b4 · f3238b4
1 parent b738b98
commit f3238b4
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 9 deletions.
diff --git a/src/popup/elements/item.ts b/src/popup/elements/item.ts
@@ -14,9 +14,12 @@ export class SongItem extends GemElement {
     if (!this.song) return null;
     const { id, name, artists, album, duration } = this.song;
     const durationText = duration
-      ? `${Math.floor(duration / 1000 / 60)}:${((duration / 1000) % 60).toFixed().padStart(2, '0')}`
+      ? `${Math.floor(duration / 1000 / 60)}:${(Math.floor(duration / 1000) % 60)
+          .toString()
+          .padStart(2, '0')}`
       : '';
     const checked = id === store.id;
+    const artist = artists.map(({ name }) => name).join(',');
     return html`
       <style>
         :host {
@@ -48,10 +51,11 @@ export class SongItem extends GemElement {
         }
       </style>
       <div class="track-info">
-        <div class="track-name">${name}</div>
+        <div title=${name} class="track-name">${name}</div>
         <div class="artist-name">
-          <span>${durationText}</span>
-          • <span>${artists.map(({ name }) => name).join(',')}</span> • <span>${album.name}</span>
+          <span title="id: ${id}">${durationText}</span>
+          • <span title=${artist}>${artist}</span> •
+          <span title=${album.name}>${album.name}</span>
         </div>
       </div>
       ${checked ? html`<div class="status">✓</div>` : null}

diff --git a/src/popup/elements/list.ts b/src/popup/elements/list.ts
@@ -27,11 +27,7 @@ export class SongList extends GemElement {
       ${store.list.map(
         (song) =>
           html`
-            <app-track-item
-              @click=${() => this.select(song.id)}
-              .song=${song}
-              title="id: ${song.id}"
-            ></app-track-item>
+            <app-track-item @click=${() => this.select(song.id)} .song=${song}></app-track-item>
           `,
       )}
     `;