[web-src] add composer support

web-src/src/components/ListComposers.vue

@@ -0,0 +1,84 @@
+<template>
+  <div>
+    <div v-if="is_grouped">
+      <div v-for="idx in composers.indexList" :key="idx" class="mb-6">
+        <span class="tag is-info is-light is-small has-text-weight-bold" :id="'index_' + idx">{{ idx }}</span>
+        <list-item-composer v-for="composer in composers.grouped[idx]"
+            :key="composer.id"
+            :composer="composer"
+            @click="open_composer(composer)">
+            <template slot="actions">
+                <a @click="open_dialog(composer)">
+                <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+                </a>
+            </template>
+        </list-item-composer>
+      </div>
+    </div>
+    <div v-else>
+      <list-item-composer v-for="composer in composers_list"
+          :key="composer.id"
+          :composer="composer"
+          @click="open_composer(composer)">
+          <template slot="actions">
+              <a @click="open_dialog(composer)">
+              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+              </a>
+          </template>
+      </list-item-composer>
+    </div>
+    <modal-dialog-composer :show="show_details_modal" :composer="selected_composer" :media_kind="media_kind" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemComposer from '@/components/ListItemComposer'
+import ModalDialogComposer from '@/components/ModalDialogComposer'
+import Composers from '@/lib/Composers'
+
+export default {
+  name: 'ListComposers',
+  components: { ListItemComposer, ModalDialogComposer },
+
+  props: ['composers', 'media_kind'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_composer: {}
+    }
+  },
+
+  computed: {
+    media_kind_resolved: function () {
+      return this.media_kind ? this.media_kind : this.selected_composer.media_kind
+    },
+
+    composers_list: function () {
+      if (Array.isArray(this.composers)) {
+        return this.composers
+      }
+      return this.composers.sortedAndFiltered
+    },
+
+    is_grouped: function () {
+      return (this.composers instanceof Composers && this.composers.options.group)
+    }
+  },
+
+  methods: {
+    open_composer: function (composer) {
+      this.selected_composer = composer
+      this.$router.push({ name: 'ComposerTracks', params: { composer: composer.name } })
+    },
+
+    open_dialog: function (composer) {
+      this.selected_composer = composer
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ListItemComposer.vue

@@ -0,0 +1,20 @@
+<template functional>
+  <div class="media" :id="'index_' + props.composer.name.charAt(0).toUpperCase()">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
+      <h1 class="title is-6">{{ props.composer.name }}</h1>
+    </div>
+    <div class="media-right">
+      <slot name="actions"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'ListItemComposer',
+  props: ['composer']
+}
+</script>
+
+<style>
+</style>

web-src/src/components/ModalDialogComposer.vue

@@ -0,0 +1,77 @@
+<template>
+  <div>
+    <transition name="fade">
+      <div class="modal is-active" v-if="show">
+        <div class="modal-background" @click="$emit('close')"></div>
+        <div class="modal-content fd-modal-card">
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4">
+                <a class="has-text-link" @click="open_albums">{{ composer.name }}</a>
+              </p>
+              <p>
+                <span class="heading">Albums</span>
+                <a class="has-text-link is-6" @click="open_albums">{{ composer.album_count }}</a>
+              </p>
+              <p>
+                <span class="heading">Tracks</span>
+                <a class="has-text-link is-6" @click="open_tracks">{{ composer.track_count }}</a>
+              </p>
+            </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"></i></span> <span class="is-size-7">Add</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="queue_add_next">
+                <span class="icon"><i class="mdi mdi-playlist-play"></i></span> <span class="is-size-7">Add Next</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="play">
+                <span class="icon"><i class="mdi mdi-play"></i></span> <span class="is-size-7">Play</span>
+              </a>
+            </footer>
+          </div>
+        </div>
+        <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<script>
+import webapi from '@/webapi'
+
+export default {
+  name: 'ModalDialogComposer',
+  props: ['show', 'composer'],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.player_play_expression('composer is "' + this.composer.name + '" and media_kind is music', false)
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.queue_expression_add('composer is "' + this.composer.name + '" and media_kind is music')
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.queue_expression_add_next('composer is "' + this.composer.name + '" and media_kind is music')
+    },
+
+    open_albums: function () {
+      this.$emit('close')
+      this.$router.push({ name: 'ComposerAlbums', params: { composer: this.composer.name } })
+    },
+
+    open_tracks: function () {
+      this.show_details_modal = false
+      this.$router.push({ name: 'ComposerTracks', params: { composer: this.composer.name } })
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/TabsMusic.vue

@@ -29,6 +29,12 @@
                   <span class="">Genres</span>
                 </a>
               </router-link>
+              <router-link tag="li" to="/music/composers" active-class="is-active">
+                <a>
+                  <span class="icon is-small"><i class="mdi mdi-book-open-page-variant"></i></span>
+                  <span class="">Composers</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>