[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/pages/PageAudiobooksGenres.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="fd-page-with-tabs">
+    <tabs-audiobooks />
+    <content-with-heading>
+      <template #options>
+        <index-button-list :index="genres.indexList" />
+      </template>
+      <template #heading-left>
+        <p class="title is-4" v-text="$t('page.genres.title')" />
+        <p
+          class="heading"
+          v-text="$t('page.genres.count', { count: genres.total })"
+        />
+      </template>
+      <template #content>
+        <list-genres :genres="genres" :media_kind="'audiobook'" />
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { GroupByList, byName } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
+import IndexButtonList from '@/components/IndexButtonList.vue'
+import ListGenres from '@/components/ListGenres.vue'
+import TabsAudiobooks from '@/components/TabsAudiobooks.vue'
+import webapi from '@/webapi'
+
+const dataObject = {
+  load(to) {
+    return webapi.library_genres('audiobook')
+  },
+
+  set(vm, response) {
+    vm.genres = response.data
+    vm.genres = new GroupByList(response.data)
+    vm.genres.group(byName('name_sort'))
+  }
+}
+
+export default {
+  name: 'PageAudiobookGenres',
+  components: {
+    ContentWithHeading,
+    IndexButtonList,
+    ListGenres,
+    TabsAudiobooks
+  },
+
+  beforeRouteEnter(to, from, next) {
+    dataObject.load(to).then((response) => {
+      next((vm) => dataObject.set(vm, response))
+    })
+  },
+  beforeRouteUpdate(to, from, next) {
+    const vm = this
+    dataObject.load(to).then((response) => {
+      dataObject.set(vm, response)
+      next()
+    })
+  },
+
+  data() {
+    return {
+      genres: new GroupByList()
+    }
+  }
+}
+</script>
+
+<style></style>

web-src/src/pages/PageGenreAlbums.vue

@@ -35,8 +35,9 @@
         </p>
         <list-albums :albums="albums_list" />
         <modal-dialog-genre
-          :show="show_genre_details_modal"
           :genre="genre"
+          :media_kind="media_kind"
+          :show="show_genre_details_modal"
           @close="show_genre_details_modal = false"
         />
       </template>
@@ -45,8 +46,8 @@
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupByList, byName } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListAlbums from '@/components/ListAlbums.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -55,8 +56,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_genre(to.params.name),
-      webapi.library_genre_albums(to.params.name)
+      webapi.library_genre(to.params.name, to.query.media_kind),
+      webapi.library_genre_albums(to.params.name, to.query.media_kind)
     ])
   },
 
@@ -68,14 +69,13 @@ const dataObject = {
 }
 
 export default {
-  name: 'PageGenreAlbum',
+  name: 'PageGenreAlbums',
   components: {
     ContentWithHeading,
     IndexButtonList,
     ListAlbums,
     ModalDialogGenre
   },
-
   beforeRouteEnter(to, from, next) {
     dataObject.load(to).then((response) => {
       next((vm) => dataObject.set(vm, response))
@@ -92,28 +92,31 @@ export default {
       next()
     })
   },
-
   data() {
     return {
       genre: {},
       albums_list: new GroupByList(),
-
       show_genre_details_modal: false
     }
   },
-
+  computed: {
+    media_kind() {
+      return this.$route.query.media_kind
+    }
+  },
   methods: {
     open_tracks() {
       this.show_details_modal = false
       this.$router.push({
-        name: 'music-genre-tracks',
-        params: { name: this.genre.name }
+        name: 'genre-tracks',
+        params: { name: this.genre.name },
+        query: { media_kind: this.media_kind }
       })
     },
 
     play() {
       webapi.player_play_expression(
-        'genre is "' + this.genre.name + '" and media_kind is music',
+        `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`,
         true
       )
     }

web-src/src/pages/PageGenreTracks.vue

@@ -46,6 +46,7 @@
         <modal-dialog-genre
           :show="show_genre_details_modal"
           :genre="genre"
+          :media_kind="media_kind"
           @close="show_genre_details_modal = false"
         />
       </template>
@@ -55,9 +56,9 @@
 
 <script>
 import * as types from '@/store/mutation_types'
+import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import ControlDropdown from '@/components/ControlDropdown.vue'
-import { GroupByList, byName, byRating } from '@/lib/GroupByList'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListTracks from '@/components/ListTracks.vue'
 import ModalDialogGenre from '@/components/ModalDialogGenre.vue'
@@ -66,8 +67,8 @@ import webapi from '@/webapi'
 const dataObject = {
   load(to) {
     return Promise.all([
-      webapi.library_genre(to.params.name),
-      webapi.library_genre_tracks(to.params.name)
+      webapi.library_genre(to.params.name, to.query.media_kind),
+      webapi.library_genre_tracks(to.params.name, to.query.media_kind)
     ])
   },
 
@@ -124,7 +125,10 @@ export default {
 
   computed: {
     expression() {
-      return 'genre is "' + this.genre.name + '" and media_kind is music'
+      return `genre is "${this.genre.name}" and media_kind is ${this.media_kind}`
+    },
+    media_kind() {
+      return this.$route.query.media_kind
     },
     selected_groupby_option_id: {
       get() {
@@ -147,8 +151,9 @@ export default {
     open_genre() {
       this.show_details_modal = false
       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/pages/PageGenres.vue

@@ -13,15 +13,15 @@
         />
       </template>
       <template #content>
-        <list-genres :genres="genres" />
+        <list-genres :genres="genres" :media_kind="'music'" />
       </template>
     </content-with-heading>
   </div>
 </template>
 
 <script>
-import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import { GroupByList, byName } from '@/lib/GroupByList'
+import ContentWithHeading from '@/templates/ContentWithHeading.vue'
 import IndexButtonList from '@/components/IndexButtonList.vue'
 import ListGenres from '@/components/ListGenres.vue'
 import TabsMusic from '@/components/TabsMusic.vue'
@@ -43,9 +43,9 @@ export default {
   name: 'PageGenres',
   components: {
     ContentWithHeading,
-    TabsMusic,
     IndexButtonList,
-    ListGenres
+    ListGenres,
+    TabsMusic
   },
 
   beforeRouteEnter(to, from, next) {