add track count and duration to playlist page

tamland · Oct 25, 2024 · b1d6a7f · b1d6a7f
1 parent 84ba6c0
commit b1d6a7f
Show file tree

Hide file tree

Showing 2 changed files with 34 additions and 8 deletions.
diff --git a/src/library/playlist/Playlist.vue b/src/library/playlist/Playlist.vue
@@ -4,9 +4,6 @@
       <h1 class="mb-0 mr-2 text-truncate">
         {{ playlist.name }}
       </h1>
-      <span v-if="playlist.isPublic" class="badge badge-light badge-pill mr-2">
-        Public
-      </span>
       <OverflowMenu class="ml-auto">
         <ContextMenuItem icon="edit" :disabled="playlist.isReadOnly" @click="showEditModal = true">
           Edit
@@ -17,16 +14,37 @@
         </ContextMenuItem>
       </OverflowMenu>
     </div>
-    <p v-if="playlist.comment" class="text-muted">
+
+    <div class="d-flex flex-wrap align-items-center">
+      <span class="text-nowrap">
+        <strong>{{ playlist.trackCount }}</strong> tracks
+      </span>
+      <template v-if="playlist.duration != null">
+        <span class="mx-1">•</span>
+        <strong>{{ formatDuration(playlist.duration) }}</strong>
+      </template>
+      <template v-if="playlist.isPublic">
+        <span class="mx-1">•</span>
+        <span  class="badge badge-secondary badge-pill">
+          Public
+        </span>
+      </template>
+    </div>
+
+    <div v-if="playlist.comment"  class="mt-3">
       {{ playlist.comment }}
-    </p>
+    </div>
+
+    <div class="text-nowrap mt-3">
     <b-button variant="secondary" :disabled="playlist.tracks.length === 0" class="mr-2" @click="playNow">
       <Icon icon="play" /> Play
     </b-button>
     <b-button variant="secondary" :disabled="playlist.tracks.length === 0" @click="shuffleNow">
       <Icon icon="shuffle" /> Shuffle
     </b-button>
-    <TrackList v-if="playlist.tracks.length > 0" :tracks="playlist.tracks">
+    </div>
+
+    <TrackList v-if="playlist.tracks.length > 0" :tracks="playlist.tracks" class="mt-3">
       <template #context-menu="{index}">
         <b-dropdown-divider />
         <ContextMenuItem icon="x" variant="danger" :disabled="playlist.isReadOnly" @click="removeTrack(index)">
@@ -62,6 +80,7 @@
   import EditModal from '@/shared/components/EditModal.vue'
   import { usePlaylistStore } from '@/library/playlist/store'
   import SwitchInput from '@/shared/components/SwitchInput.vue'
+  import { formatDuration } from '@/shared/utils'
 
   export default defineComponent({
     components: {
@@ -73,7 +92,10 @@
       id: { type: String, required: true }
     },
     setup() {
-      return { playlistStore: usePlaylistStore() }
+      return {
+        playlistStore: usePlaylistStore(),
+        formatDuration,
+      }
     },
     data() {
       return {

diff --git a/src/shared/api.ts b/src/shared/api.ts
@@ -1,5 +1,5 @@
 import { AuthService } from '@/auth/service'
-import { map, max, orderBy, uniq, uniqBy } from 'lodash-es'
+import { map, max, orderBy, sumBy, uniq, uniqBy } from 'lodash-es'
 import { toQueryString } from '@/shared/utils'
 
 export type AlbumSort =
@@ -96,6 +96,7 @@ export interface Playlist {
   isPublic: boolean
   isReadOnly: boolean
   trackCount: number
+  duration: number
   createdAt: string
   updatedAt: string
   image?: string
@@ -262,6 +263,7 @@ export class API {
   async getPlaylist(id: string): Promise<Playlist> {
     if (id === 'random') {
       const tracks = await this.getRandomSongs()
+      const duration = sumBy(tracks, 'duration')
       return {
         id,
         name: 'Random',
@@ -270,6 +272,7 @@ export class API {
         updatedAt: '',
         tracks,
         trackCount: tracks.length,
+        duration,
         isPublic: false,
         isReadOnly: true,
       }
@@ -599,6 +602,7 @@ export class API {
       createdAt: response.created || '',
       updatedAt: response.changed || '',
       trackCount: response.songCount,
+      duration: response.duration,
       image: response.songCount > 0 ? this.getCoverArtUrl(response) : undefined,
       isPublic: response.public,
       isReadOnly: false,