[webui] add genre tab mirroring album/artist functionality

web-src/src/components/ListItemGenre.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="media">
+    <div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
+      <h1 class="title is-6">{{ genre.name }}</h1>
+    </div>
+    <div class="media-right">
+      <a @click="show_details_modal = true">
+        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+      </a>
+      <modal-dialog :show="show_details_modal" @close="show_details_modal = false">
+        <template slot="modal-content">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                <a class="has-text-link" @click="open_genre">{{ genre.name }}</a>
+              </p>
+<!--
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Albums</span>
+                  <span class="title is-6">{{ genre.album_count }}</span>
+                </p>
+                <p>
+                  <span class="heading">Tracks</span>
+                  <span class="title is-6">{{ genre.track_count }}</span>
+                </p>
+              </div>
+ -->
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="queue_add">
+                <span class="icon"><i class="mdi mdi-playlist-plus mdi-12px"></i></span> <span>Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play mdi-12px"></i></span> <span>Add Next</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play mdi-12px"></i></span> <span>Play</span>
+              </a>
+            </footer>
+          </div>
+        </template>
+      </modal-dialog>
+    </div>
+  </div>
+</template>
+
+<script>
+import ModalDialog from '@/components/ModalDialog'
+import webapi from '@/webapi'
+
+export default {
+  name: 'PartGenre',
+  components: { ModalDialog },
+
+  props: [ 'genre' ],
+
+  data () {
+    return {
+      show_details_modal: false
+    }
+  },
+
+  methods: {
+    play: function () {
+      this.show_details_modal = false
+      webapi.queue_clear().then(() =>
+        webapi.library_genre(this.genre.name).then(({ data }) =>
+          webapi.queue_add(data.albums.items.map(a => a.uri).join(',')).then(() =>
+            webapi.player_play()
+          )
+        )
+      )
+    },
+
+    queue_add: function () {
+      this.show_details_modal = false
+      webapi.library_genre(this.genre.name).then(({ data }) =>
+        webapi.queue_add(data.albums.items.map(a => a.uri).join(','))
+      )
+      this.$store.dispatch('add_notification', { text: 'Genre albums appended to queue', type: 'info', timeout: 1500 })
+    },
+
+    queue_add_next: function () {
+      this.show_details_modal = false
+      webapi.library_genre(this.genre.name).then(({ data }) =>
+        webapi.queue_add_next(data.albums.items.map(a => a.uri).join(','))
+      )
+      this.$store.dispatch('add_notification', { text: 'Genre albums playing next', type: 'info', timeout: 1500 })
+    },
+
+    open_genre: function () {
+      this.show_details_modal = false
+      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/TabsMusic.vue

@@ -23,6 +23,12 @@
                   <span class="">Albums</span>
                 </a>
               </router-link>
+              <router-link tag="li" to="/music/genres" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-speaker"></i></span>
+                  <span class="">Genres</span>
+                </a>
+              </router-link>
               <router-link tag="li" to="/music/spotify" v-if="spotify_enabled" active-class="is-active">
                 <a>
                   <span class="icon is-small"><i class="mdi mdi-spotify"></i></span>

web-src/src/pages/PageGenre.vue

@@ -0,0 +1,83 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">{{ name }}</p>
+        <p class="heading">{{ genreAlbums.total }} albums</p>
+      </template>
+      <template slot="heading-right">
+        <a class="button is-small is-dark is-rounded" @click="play">
+          <span class="icon">
+            <i class="mdi mdi-play"></i>
+          </span>
+          <span>Play</span>
+        </a>
+      </template>
+      <template slot="content">
+        <list-item-albums v-for="album in genreAlbums.items" :key="album.id" :album="album" :links="links"></list-item-albums>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemAlbums from '@/components/ListItemAlbum'
+import webapi from '@/webapi'
+
+const genreData = {
+  load: function (to) {
+    return webapi.library_genre(to.params.genre)
+  },
+
+  set: function (vm, response) {
+    vm.name = vm.$route.params.genre
+    vm.genreAlbums = response.data.albums
+    var li = 0
+    var v = null
+    var i
+    for (i = 0; i < vm.genreAlbums.items.length; i++) {
+      var n = vm.genreAlbums.items[i].name_sort.charAt(0).toUpperCase()
+      if (n !== v) {
+        var obj = {}
+        obj.n = n
+        obj.a = 'idx_nav_' + li
+        vm.links.push(obj)
+        li++
+        v = n
+      }
+    }
+  }
+}
+
+export default {
+  name: 'PageGenre',
+  mixins: [ LoadDataBeforeEnterMixin(genreData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemAlbums },
+
+  data () {
+    return {
+      name: '',
+      genreAlbums: {},
+      links: []
+    }
+  },
+
+  methods: {
+    play: function () {
+      webapi.queue_clear().then(() =>
+        webapi.queue_add(this.genreAlbums.items.map(a => a.uri).join(',')).then(() =>
+          webapi.player_play()
+        )
+      )
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/pages/PageGenres.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <tabs-music></tabs-music>
+
+    <content-with-heading>
+      <template slot="heading-left">
+        <p class="title is-4">Genres</p>
+        <p class="heading">{{ genres.total }} genres</p>
+      </template>
+      <template slot="content">
+        <list-item-genre v-for="genre in genres.items" :key="genre.name" :genre="genre"></list-item-genre>
+      </template>
+    </content-with-heading>
+  </div>
+</template>
+
+<script>
+import { LoadDataBeforeEnterMixin } from './mixin'
+import ContentWithHeading from '@/templates/ContentWithHeading'
+import TabsMusic from '@/components/TabsMusic'
+import ListItemGenre from '@/components/ListItemGenre'
+import webapi from '@/webapi'
+
+const genresData = {
+  load: function (to) {
+    return webapi.library_genres()
+  },
+
+  set: function (vm, response) {
+    vm.genres = response.data
+  }
+}
+
+export default {
+  name: 'PageGenres',
+  mixins: [ LoadDataBeforeEnterMixin(genresData) ],
+  components: { ContentWithHeading, TabsMusic, ListItemGenre },
+
+  data () {
+    return {
+      genres: {}
+    }
+  },
+
+  methods: {
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/router/index.js

@@ -11,6 +11,8 @@ import PageArtists from '@/pages/PageArtists'
 import PageArtist from '@/pages/PageArtist'
 import PageAlbums from '@/pages/PageAlbums'
 import PageAlbum from '@/pages/PageAlbum'
+import PageGenres from '@/pages/PageGenres'
+import PageGenre from '@/pages/PageGenre'
 import PagePodcasts from '@/pages/PagePodcasts'
 import PagePodcast from '@/pages/PagePodcast'
 import PageAudiobooks from '@/pages/PageAudiobooks'
@@ -92,6 +94,18 @@ export const router = new VueRouter({
       component: PageAlbum,
       meta: { show_progress: true }
     },
+    {
+      path: '/music/genres',
+      name: 'Genres',
+      component: PageGenres,
+      meta: { show_progress: true }
+    },
+    {
+      path: '/music/genres/:genre',
+      name: 'Genre',
+      component: PageGenre,
+      meta: { show_progress: true }
+    },
     {
       path: '/podcasts',
       name: 'Podcasts',

web-src/src/webapi/index.js

@@ -138,6 +138,21 @@ export default {
     return axios.get('/api/library/albums/' + albumId + '/tracks')
   },
 
+  library_genres () {
+    return axios.get('/api/library/genres')
+  },
+
+  library_genre (genre) {
+    var genreParams = {
+      'type': 'albums',
+      'media_kind': 'music',
+      'expression': 'genre is "' + genre + '"'
+    }
+    return axios.get('/api/search', {
+      params: genreParams
+    })
+  },
+
   library_podcasts () {
     return axios.get('/api/library/albums?media_kind=podcast')
   },