[web] Fix genre not being displayed correctly depending on the media kind

The genre is not displayed depending on the media kind and not only for the "music" kind.

web-src/src/components/ListArtists.vue

@@ -26,9 +26,8 @@
   </template>
   <teleport to="#app">
     <modal-dialog-artist
-      :show="show_details_modal"
       :artist="selected_artist"
-      :media_kind="media_kind"
+      :show="show_details_modal"
       @close="show_details_modal = false"
     />
   </teleport>
@@ -41,7 +40,7 @@ export default {
   name: 'ListArtists',
   components: { ModalDialogArtist },
 
-  props: ['artists', 'media_kind', 'hide_group_title'],
+  props: ['artists', 'hide_group_title'],
 
   data() {
     return {
@@ -50,23 +49,12 @@ export default {
     }
   },
 
-  computed: {
-    media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.selected_artist.media_kind
-    }
-  },
-
   methods: {
     open_artist(artist) {
       this.selected_artist = artist
-      if (this.media_kind_resolved === 'audiobook') {
-        this.$router.push({
-          name: 'audiobooks-artist',
-          params: { id: artist.id }
-        })
-      } else {
-        this.$router.push({ name: 'music-artist', params: { id: artist.id } })
-      }
+      const route =
+        artist.media_kind === 'audiobook' ? 'audiobooks-artist' : 'music-artist'
+      this.$router.push({ name: route, params: { id: artist.id } })
     },
 
     open_dialog(artist) {

web-src/src/components/ListGenres.vue

@@ -28,6 +28,7 @@
     <modal-dialog-genre
       :show="show_details_modal"
       :genre="selected_genre"
+      :media_kind="media_kind"
       @close="show_details_modal = false"
     />
   </teleport>
@@ -40,7 +41,7 @@ export default {
   name: 'ListGenres',
   components: { ModalDialogGenre },
 
-  props: ['genres', 'media_kind', 'hide_group_title'],
+  props: ['genres', 'hide_group_title', 'media_kind'],
 
   data() {
     return {
@@ -49,17 +50,14 @@ export default {
     }
   },
 
-  computed: {
-    media_kind_resolved() {
-      return this.media_kind ? this.media_kind : this.selected_genre.media_kind
-    }
-  },
-
   methods: {
     open_genre(genre) {
-      this.$router.push({ name: 'music-genre', params: { name: genre.name } })
+      this.$router.push({
+        name: 'genre-albums',
+        params: { name: genre.name },
+        query: { media_kind: this.media_kind }
+      })
     },
-
     open_dialog(genre) {
       this.selected_genre = genre
       this.show_details_modal = true

web-src/src/components/ModalDialogGenre.vue

@@ -62,37 +62,36 @@ import webapi from '@/webapi'
 
 export default {
   name: 'ModalDialogGenre',
-  props: ['show', 'genre'],
+  props: ['genre', 'media_kind', 'show'],
   emits: ['close'],
 
+  computed: {
+    expression() {
+      return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
+    }
+  },
   methods: {
     play() {
       this.$emit('close')
-      webapi.player_play_expression(
-        'genre is "' + this.genre.name + '" and media_kind is music',
-        false
-      )
+      webapi.player_play_expression(this.expression, false)
     },
 
     queue_add() {
       this.$emit('close')
-      webapi.queue_expression_add(
-        'genre is "' + this.genre.name + '" and media_kind is music'
-      )
+      webapi.queue_expression_add(this.expression)
     },
 
     queue_add_next() {
       this.$emit('close')
-      webapi.queue_expression_add_next(
-        'genre is "' + this.genre.name + '" and media_kind is music'
-      )
+      webapi.queue_expression_add_next(this.expression)
     },
 
     open_genre() {
       this.$emit('close')
       this.$router.push({
-        name: 'music-genre',
-        params: { name: this.genre.name }
+        name: 'genre-albums',
+        params: { name: this.genre.name },
+        query: { media_kind: this.media_kind }
       })
     }
   }

web-src/src/components/ModalDialogQueueItem.vue

@@ -208,12 +208,12 @@ export default {
     },
 
     open_album() {
-      if (this.media_kind === 'podcast') {
+      if (this.item.media_kind === 'podcast') {
         this.$router.push({
           name: 'podcast',
           params: { id: this.item.album_id }
         })
-      } else if (this.media_kind === 'audiobook') {
+      } else if (this.item.media_kind === 'audiobook') {
         this.$router.push({
           name: 'audiobooks-album',
           params: { id: this.item.album_id }
@@ -235,8 +235,9 @@ export default {
 
     open_genre() {
       this.$router.push({
-        name: 'music-genre',
-        params: { name: this.item.genre }
+        name: 'genre-albums',
+        params: { name: this.item.genre },
+        query: { media_kind: this.item.media_kind }
       })
     },
 

web-src/src/components/ModalDialogTrack.vue

@@ -270,8 +270,9 @@ export default {
 
     open_genre() {
       this.$router.push({
-        name: 'music-genre',
-        params: { name: this.track.genre }
+        name: 'genre-albums',
+        params: { name: this.track.genre },
+        query: { media_kind: this.track.media_kind }
       })
     },
 

web-src/src/components/TabsAudiobooks.vue

@@ -33,6 +33,18 @@
                   </a>
                 </li>
               </router-link>
+              <router-link
+                v-slot="{ navigate, isActive }"
+                :to="{ name: 'audiobooks-genres' }"
+                custom
+              >
+                <li :class="{ 'is-active': isActive }">
+                  <a @click="navigate" @keypress.enter="navigate">
+                    <mdicon class="icon is-small" name="speaker" size="16" />
+                    <span v-text="$t('page.audiobooks.tabs.genres')" />
+                  </a>
+                </li>
+              </router-link>
             </ul>
           </div>
         </div>