Merge pull request #116 from sentriz/multi-genre

Add support for multiple album genres
tamland · Oct 16, 2023 · 7dff22a · 7dff22a
2 parents ae7250d + fe59aeb
commit 7dff22a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 10 deletions.
diff --git a/src/library/album/AlbumDetails.vue b/src/library/album/AlbumDetails.vue
@@ -14,10 +14,11 @@
           <router-link :key="artist.id" :to="{name: 'artist', params: { id: artist.id }}">{{ artist.name }}</router-link>
         </template>
         <span v-if="album.year"> • {{ album.year }}</span>
-        <span v-if="album.genreId"> •
-          <router-link :to="{name: 'genre', params: { id: album.genreId }}">
-            {{ album.genreId }}
-          </router-link>
+        <span v-if="album.genres.length"> •
+          <template v-for="({ name: genre }, index) in album.genres">
+            <span v-if="index > 0" :key="genre" class="text-muted">, </span>
+            <router-link :key="genre" :to="{name: 'genre', params: { id: genre }}">{{ genre }}</router-link>
+          </template>
         </span>
       </p>
       <div class="text-nowrap">

diff --git a/src/library/artist/ArtistDetails.vue b/src/library/artist/ArtistDetails.vue
@@ -11,7 +11,7 @@
         <strong>{{ item.albumCount }}</strong> albums •
         <strong>{{ item.trackCount }}</strong> tracks
         <div v-if="item.genres.length > 0">
-          <span v-for="(genre, index) in item.genres" :key="genre">
+          <span v-for="({ name: genre }, index) in item.genres" :key="genre">
             <span v-if="index > 0">•</span>
             <router-link :to="{name: 'genre', params: { id: genre }}">
               {{ genre }}

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 } from 'lodash-es'
+import { map, max, orderBy, uniq, uniqBy } from 'lodash-es'
 import { toQueryString } from '@/shared/utils'
 
 export type AlbumSort =
@@ -27,13 +27,17 @@ export interface Track {
   playCount? : number
 }
 
+export interface Genre {
+  name: string
+}
+
 export interface Album {
   id: string
   name: string
   artists: {name: string, id: string}[]
   year: number
   favourite: boolean
-  genreId?: string
+  genres: Genre[]
   image?: string
   tracks?: Track[]
 }
@@ -42,7 +46,7 @@ export interface Artist {
   id: string
   name: string
   description?: string
-  genres: string[]
+  genres: Genre[]
   albumCount: number
   trackCount: number
   favourite: boolean
@@ -468,6 +472,12 @@ export class API {
     }
   }
 
+  private normalizeGenres(item: any): Genre[] {
+    return item.genres?.length
+      ? item.genres
+      : [{ name: item.genre }]
+  }
+
   private normalizeAlbum(item: any): Album {
     return {
       id: item.id,
@@ -478,7 +488,7 @@ export class API {
       image: this.getCoverArtUrl(item),
       year: item.year || 0,
       favourite: !!item.starred,
-      genreId: item.genre,
+      genres: this.normalizeGenres(item),
       tracks: (item.song || []).map(this.normalizeTrack, this)
     }
   }
@@ -488,7 +498,7 @@ export class API {
       id: item.id,
       name: item.name,
       description: (item.biography || '').replace(/<a[^>]*>.*?<\/a>/gm, ''),
-      genres: uniq((item.album || []).flatMap((album: any) => album.genre || [])),
+      genres: uniqBy([...(item.album || []).flatMap(this.normalizeGenres, this)], 'name'),
       albumCount: item.albumCount,
       trackCount: (item.album || []).reduce((acc: number, album: any) => acc + (album.songCount || 0), 0),
       favourite: !!item.starred,