From 91ec155ecd3d942cff34acdc0a3fb3139b67ab1c Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 20 Sep 2020 12:25:38 +0200
Subject: [PATCH] [web-src] Refactor albums lists to use new ListAlbums
 component

---
 web-src/src/components/ListAlbums.vue         |  80 ++++++++---
 web-src/src/components/ModalDialogAlbum.vue   |   2 +-
 web-src/src/pages/PageBrowse.vue              |  45 +------
 web-src/src/pages/PageBrowseRecentlyAdded.vue |  47 +------
 web-src/src/pages/PageGenre.vue               |  36 +----
 web-src/src/pages/PagePodcasts.vue            |  81 ++---------
 web-src/src/pages/PageSearch.vue              | 127 ++----------------
 7 files changed, 93 insertions(+), 325 deletions(-)

diff --git a/web-src/src/components/ListAlbums.vue b/web-src/src/components/ListAlbums.vue
index 4e2f59e7..1768dda9 100644
--- a/web-src/src/components/ListAlbums.vue
+++ b/web-src/src/components/ListAlbums.vue
@@ -4,41 +4,62 @@
         :key="album.id"
         :album="album"
         @click="open_album(album)">
-        <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-            <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-        </template>
-        <template slot="actions">
-            <a @click="open_dialog(album)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-        </template>
+      <template slot="artwork" v-if="is_visible_artwork">
+        <p class="image is-64x64 fd-has-shadow fd-has-action">
+        <cover-artwork
+            :artwork_url="album.artwork_url"
+            :artist="album.artist"
+            :album="album.name"
+            :maxwidth="64"
+            :maxheight="64" />
+        </p>
+      </template>
+      <template slot="actions">
+        <a @click="open_dialog(album)">
+          <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+        </a>
+      </template>
     </list-item-album>
-    <modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="media_kind" @close="show_details_modal = false" />
+    <modal-dialog-album
+        :show="show_details_modal"
+        :album="selected_album"
+        :media_kind="media_kind"
+        @remove-podcast="open_remove_podcast_dialog()"
+        @close="show_details_modal = false" />
+    <modal-dialog
+        :show="show_remove_podcast_modal"
+        title="Remove podcast"
+        delete_action="Remove"
+        @close="show_remove_podcast_modal = false"
+        @delete="remove_podcast">
+      <template slot="modal-content">
+        <p>Permanently remove this podcast from your library?</p>
+        <p class="is-size-7">(This will also remove the RSS playlist <b>{{ rss_playlist_to_remove.name }}</b>.)</p>
+      </template>
+    </modal-dialog>
   </div>
 </template>
 
 <script>
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ModalDialog from '@/components/ModalDialog'
 import CoverArtwork from '@/components/CoverArtwork'
+import webapi from '@/webapi'
 
 export default {
   name: 'ListAlbums',
-  components: { ListItemAlbum, ModalDialogAlbum, CoverArtwork },
+  components: { ListItemAlbum, ModalDialogAlbum, ModalDialog, CoverArtwork },
 
   props: ['albums', 'media_kind'],
 
   data () {
     return {
       show_details_modal: false,
-      selected_album: {}
+      selected_album: {},
+
+      show_remove_podcast_modal: false,
+      rss_playlist_to_remove: {}
     }
   },
 
@@ -67,6 +88,29 @@ export default {
     open_dialog: function (album) {
       this.selected_album = album
       this.show_details_modal = true
+    },
+
+    open_remove_podcast_dialog: function () {
+      webapi.library_album_tracks(this.selected_album.id, { limit: 1 }).then(({ data }) => {
+        webapi.library_track_playlists(data.items[0].id).then(({ data }) => {
+          const rssPlaylists = data.items.filter(pl => pl.type === 'rss')
+          if (rssPlaylists.length !== 1) {
+            this.$store.dispatch('add_notification', { text: 'Podcast cannot be removed. Probably it was not added as an RSS playlist.', type: 'danger' })
+            return
+          }
+
+          this.rss_playlist_to_remove = rssPlaylists[0]
+          this.show_remove_podcast_modal = true
+          this.show_details_modal = false
+        })
+      })
+    },
+
+    remove_podcast: function () {
+      this.show_remove_podcast_modal = false
+      webapi.library_playlist_delete(this.rss_playlist_to_remove.id).then(() => {
+        this.$emit('podcast-deleted')
+      })
     }
   }
 }
diff --git a/web-src/src/components/ModalDialogAlbum.vue b/web-src/src/components/ModalDialogAlbum.vue
index 1700bb3b..825dff90 100644
--- a/web-src/src/components/ModalDialogAlbum.vue
+++ b/web-src/src/components/ModalDialogAlbum.vue
@@ -16,7 +16,7 @@
               </p>
               <div class="buttons" v-if="media_kind_resolved === 'podcast'">
                 <a class="button is-small" @click="mark_played">Mark as played</a>
-                <a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
+                <a class="button is-small" @click="$emit('remove-podcast')">Remove podcast</a>
               </div>
               <div class="content is-small">
                 <p v-if="album.artist">
diff --git a/web-src/src/pages/PageBrowse.vue b/web-src/src/pages/PageBrowse.vue
index e7476a3c..dda82ed6 100644
--- a/web-src/src/pages/PageBrowse.vue
+++ b/web-src/src/pages/PageBrowse.vue
@@ -9,24 +9,7 @@
         <p class="heading">albums</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_album_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
+        <list-albums :albums="recently_added.items"></list-albums>
       </template>
       <template slot="footer">
         <nav class="level">
@@ -68,11 +51,9 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListAlbums from '@/components/ListAlbums'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
-import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -92,7 +73,7 @@ const browseData = {
 export default {
   name: 'PageBrowse',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ListItemTrack, ModalDialogTrack, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHeading, TabsMusic, ListAlbums, ListItemTrack, ModalDialogTrack },
 
   data () {
     return {
@@ -100,16 +81,7 @@ export default {
       recently_played: {},
 
       show_track_details_modal: false,
-      selected_track: {},
-
-      show_album_details_modal: false,
-      selected_album: {}
-    }
-  },
-
-  computed: {
-    is_visible_artwork () {
-      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
+      selected_track: {}
     }
   },
 
@@ -123,15 +95,6 @@ export default {
       this.show_track_details_modal = true
     },
 
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
-    open_album_dialog: function (album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
-
     play_track: function (track) {
       webapi.player_play_uri(track.uri, false)
     }
diff --git a/web-src/src/pages/PageBrowseRecentlyAdded.vue b/web-src/src/pages/PageBrowseRecentlyAdded.vue
index bc90e44a..bbb114db 100644
--- a/web-src/src/pages/PageBrowseRecentlyAdded.vue
+++ b/web-src/src/pages/PageBrowseRecentlyAdded.vue
@@ -8,24 +8,7 @@
         <p class="heading">albums</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in recently_added.items" :key="album.id" :album="album" @click="open_album(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
+        <list-albums :albums="recently_added.items"></list-albums>
       </template>
     </content-with-heading>
   </div>
@@ -35,9 +18,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
-import ListItemAlbum from '@/components/ListItemAlbum'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
-import CoverArtwork from '@/components/CoverArtwork'
+import ListAlbums from '@/components/ListAlbums'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -57,31 +38,11 @@ const browseData = {
 export default {
   name: 'PageBrowseType',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListItemAlbum, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHeading, TabsMusic, ListAlbums },
 
   data () {
     return {
-      recently_added: {},
-
-      show_details_modal: false,
-      selected_album: {}
-    }
-  },
-
-  computed: {
-    is_visible_artwork () {
-      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
-    }
-  },
-
-  methods: {
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
-    open_dialog: function (album) {
-      this.selected_album = album
-      this.show_details_modal = true
+      recently_added: {}
     }
   }
 }
diff --git a/web-src/src/pages/PageGenre.vue b/web-src/src/pages/PageGenre.vue
index 22ffc1d2..d95fe0a7 100644
--- a/web-src/src/pages/PageGenre.vue
+++ b/web-src/src/pages/PageGenre.vue
@@ -19,24 +19,7 @@
       </template>
       <template slot="content">
         <p class="heading has-text-centered-mobile">{{ genre_albums.total }} albums | <a class="has-text-link" @click="open_tracks">tracks</a></p>
-        <list-item-albums v-for="album in genre_albums.items" :key="album.id" :album="album" @click="open_album(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-albums>
-        <modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
+        <list-albums :albums="genre_albums.items"></list-albums>
         <modal-dialog-genre :show="show_genre_details_modal" :genre="{ 'name': name }" @close="show_genre_details_modal = false" />
       </template>
     </content-with-heading>
@@ -47,10 +30,8 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import IndexButtonList from '@/components/IndexButtonList'
-import ListItemAlbums from '@/components/ListItemAlbum'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ListAlbums from '@/components/ListAlbums'
 import ModalDialogGenre from '@/components/ModalDialogGenre'
-import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 
 const genreData = {
@@ -67,16 +48,13 @@ const genreData = {
 export default {
   name: 'PageGenre',
   mixins: [LoadDataBeforeEnterMixin(genreData)],
-  components: { ContentWithHeading, IndexButtonList, ListItemAlbums, ModalDialogAlbum, ModalDialogGenre, CoverArtwork },
+  components: { ContentWithHeading, IndexButtonList, ListAlbums, ModalDialogGenre },
 
   data () {
     return {
       name: '',
       genre_albums: { items: [] },
 
-      show_details_modal: false,
-      selected_album: {},
-
       show_genre_details_modal: false
     }
   },
@@ -85,10 +63,6 @@ export default {
     index_list () {
       return [...new Set(this.genre_albums.items
         .map(album => album.name.charAt(0).toUpperCase()))]
-    },
-
-    is_visible_artwork () {
-      return this.$store.getters.settings_option('webinterface', 'show_cover_artwork_in_album_lists').value
     }
   },
 
@@ -102,10 +76,6 @@ export default {
       webapi.player_play_expression('genre is "' + this.name + '" and media_kind is music', true)
     },
 
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
     open_dialog: function (album) {
       this.selected_album = album
       this.show_details_modal = true
diff --git a/web-src/src/pages/PagePodcasts.vue b/web-src/src/pages/PagePodcasts.vue
index 48a39ba5..9b733a0f 100644
--- a/web-src/src/pages/PagePodcasts.vue
+++ b/web-src/src/pages/PagePodcasts.vue
@@ -52,35 +52,14 @@
         </div>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'podcast'" @click="open_album(album)">
-          <template slot="actions">
-            <a @click="open_album_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album
-          :show="show_album_details_modal"
-          :album="selected_album"
-          :media_kind="'podcast'"
-          @close="show_album_details_modal = false"
-          @play_count_changed="reload_new_episodes"
-          @remove_podcast="open_remove_podcast_dialog" />
-        <modal-dialog
-          :show="show_remove_podcast_modal"
-          title="Remove podcast"
-          delete_action="Remove"
-          @close="show_remove_podcast_modal = false"
-          @delete="remove_podcast">
-          <template slot="modal-content">
-            <p>Permanently remove this podcast from your library?</p>
-            <p class="is-size-7">(This will also remove the RSS playlist <b>{{ rss_playlist_to_remove.name }}</b>.)</p>
-          </template>
-        </modal-dialog>
+        <list-albums :albums="albums.items"
+            @play_count_changed="reload_new_episodes()"
+            @podcast-deleted="reload_podcasts()">
+        </list-albums>
         <modal-dialog-add-rss
-          :show="show_url_modal"
-          @close="show_url_modal = false"
-          @podcast_added="reload_podcasts" />
+            :show="show_url_modal"
+            @close="show_url_modal = false"
+            @podcast_added="reload_podcasts()" />
       </template>
     </content-with-heading>
   </div>
@@ -90,11 +69,9 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListAlbums from '@/components/ListAlbums'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogAddRss from '@/components/ModalDialogAddRss'
-import ModalDialog from '@/components/ModalDialog'
 import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
@@ -115,31 +92,21 @@ const albumsData = {
 export default {
   name: 'PagePodcasts',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, ModalDialogAddRss, ModalDialog, RangeSlider },
+  components: { ContentWithHeading, ListItemTrack, ListAlbums, ModalDialogTrack, ModalDialogAddRss, RangeSlider },
 
   data () {
     return {
       albums: {},
       new_episodes: { items: [] },
 
-      show_album_details_modal: false,
-      selected_album: {},
-
       show_url_modal: false,
 
       show_track_details_modal: false,
-      selected_track: {},
-
-      show_remove_podcast_modal: false,
-      rss_playlist_to_remove: {}
+      selected_track: {}
     }
   },
 
   methods: {
-    open_album: function (album) {
-      this.$router.push({ path: '/podcasts/' + album.id })
-    },
-
     play_track: function (track) {
       webapi.player_play_uri(track.uri, false)
     },
@@ -149,11 +116,6 @@ export default {
       this.show_track_details_modal = true
     },
 
-    open_album_dialog: function (album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
-
     mark_all_played: function () {
       this.new_episodes.items.forEach(ep => {
         webapi.library_track_update(ep.id, { play_count: 'increment' })
@@ -165,29 +127,6 @@ export default {
       this.show_url_modal = true
     },
 
-    open_remove_podcast_dialog: function () {
-      this.show_album_details_modal = false
-      webapi.library_album_tracks(this.selected_album.id, { limit: 1 }).then(({ data }) => {
-        webapi.library_track_playlists(data.items[0].id).then(({ data }) => {
-          const rssPlaylists = data.items.filter(pl => pl.type === 'rss')
-          if (rssPlaylists.length !== 1) {
-            this.$store.dispatch('add_notification', { text: 'Podcast cannot be removed. Probably it was not added as an RSS playlist.', type: 'danger' })
-            return
-          }
-
-          this.rss_playlist_to_remove = rssPlaylists[0]
-          this.show_remove_podcast_modal = true
-        })
-      })
-    },
-
-    remove_podcast: function () {
-      this.show_remove_podcast_modal = false
-      webapi.library_playlist_delete(this.rss_playlist_to_remove.id).then(() => {
-        this.reload_podcasts()
-      })
-    },
-
     reload_new_episodes: function () {
       webapi.library_podcasts_new_episodes().then(({ data }) => {
         this.new_episodes = data.tracks
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index d547fa62..c8e6f248 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -59,14 +59,7 @@
         <p class="title is-4">Artists</p>
       </template>
       <template slot="content">
-        <list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist" @click="open_artist(artist)">
-          <template slot="actions">
-            <a @click="open_artist_dialog(artist)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-artist>
-        <modal-dialog-artist :show="show_artist_details_modal" :artist="selected_artist" @close="show_artist_details_modal = false" />
+        <list-artists :artists="artists.items"></list-artists>
       </template>
       <template slot="footer">
         <nav v-if="show_all_artists_button" class="level">
@@ -84,24 +77,7 @@
         <p class="title is-4">Albums</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in albums.items" :key="album.id" :album="album" @click="open_album(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_album_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
+        <list-albums :albums="albums.items"></list-albums>
       </template>
       <template slot="footer">
         <nav v-if="show_all_albums_button" class="level">
@@ -144,24 +120,7 @@
         <p class="title is-4">Podcasts</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in podcasts.items" :key="album.id" :album="album" :media_kind="'podcast'" @click="open_podcast(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_podcast_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_podcast_details_modal" :album="selected_podcast" :media_kind="'podcast'" @close="show_podcast_details_modal = false" />
+        <list-albums :albums="podcasts.items"></list-albums>
       </template>
       <template slot="footer">
         <nav v-if="show_all_podcasts_button" class="level">
@@ -179,24 +138,7 @@
         <p class="title is-4">Audiobooks</p>
       </template>
       <template slot="content">
-        <list-item-album v-for="album in audiobooks.items" :key="album.id" :album="album" :media_kind="'audiobook'" @click="open_audiobook(album)">
-          <template slot="artwork" v-if="is_visible_artwork">
-            <p class="image is-64x64 fd-has-shadow fd-has-action">
-              <cover-artwork
-                :artwork_url="album.artwork_url"
-                :artist="album.artist"
-                :album="album.name"
-                :maxwidth="64"
-                :maxheight="64" />
-            </p>
-          </template>
-          <template slot="actions">
-            <a @click="open_audiobook_dialog(album)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-album>
-        <modal-dialog-album :show="show_audiobook_details_modal" :album="selected_audiobook" :media_kind="'audiobook'" @close="show_audiobook_details_modal = false" />
+        <list-albums :albums="audiobooks.items"></list-albums>
       </template>
       <template slot="footer">
         <nav v-if="show_all_audiobooks_button" class="level">
@@ -214,20 +156,17 @@
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsSearch from '@/components/TabsSearch'
 import ListItemTrack from '@/components/ListItemTrack'
-import ListItemArtist from '@/components/ListItemArtist'
-import ListItemAlbum from '@/components/ListItemAlbum'
+import ListArtists from '@/components/ListArtists'
+import ListAlbums from '@/components/ListAlbums'
 import ListItemPlaylist from '@/components/ListItemPlaylist'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
-import ModalDialogAlbum from '@/components/ModalDialogAlbum'
-import ModalDialogArtist from '@/components/ModalDialogArtist'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
-import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
 export default {
   name: 'PageSearch',
-  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListItemArtist, ListItemAlbum, ListItemPlaylist, ModalDialogTrack, ModalDialogAlbum, ModalDialogArtist, ModalDialogPlaylist, CoverArtwork },
+  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListArtists, ListAlbums, ListItemPlaylist, ModalDialogTrack, ModalDialogPlaylist },
 
   data () {
     return {
@@ -243,20 +182,8 @@ export default {
       show_track_details_modal: false,
       selected_track: {},
 
-      show_album_details_modal: false,
-      selected_album: {},
-
-      show_artist_details_modal: false,
-      selected_artist: {},
-
       show_playlist_details_modal: false,
-      selected_playlist: {},
-
-      show_audiobook_details_modal: false,
-      selected_audiobook: {},
-
-      show_podcast_details_modal: false,
-      selected_podcast: {}
+      selected_playlist: {}
     }
   },
 
@@ -327,7 +254,7 @@ export default {
     },
 
     searchMusic: function (query) {
-      if (query.type.indexOf('track') < 0 && query.type.indexOf('track') < 0 && query.type.indexOf('album') < 0 && query.type.indexOf('playlist') < 0) {
+      if (query.type.indexOf('track') < 0 && query.type.indexOf('artist') < 0 && query.type.indexOf('album') < 0 && query.type.indexOf('playlist') < 0) {
         return
       }
 
@@ -488,26 +415,10 @@ export default {
       webapi.player_play_uri(track.uri, false)
     },
 
-    open_artist: function (artist) {
-      this.$router.push({ path: '/music/artists/' + artist.id })
-    },
-
-    open_album: function (album) {
-      this.$router.push({ path: '/music/albums/' + album.id })
-    },
-
     open_playlist: function (playlist) {
       this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
     },
 
-    open_audiobook: function (album) {
-      this.$router.push({ path: '/audiobooks/' + album.id })
-    },
-
-    open_podcast: function (album) {
-      this.$router.push({ path: '/podcasts/' + album.id })
-    },
-
     open_recent_search: function (query) {
       this.search_query = query
       this.new_search()
@@ -518,29 +429,9 @@ export default {
       this.show_track_details_modal = true
     },
 
-    open_album_dialog: function (album) {
-      this.selected_album = album
-      this.show_album_details_modal = true
-    },
-
-    open_artist_dialog: function (artist) {
-      this.selected_artist = artist
-      this.show_artist_details_modal = true
-    },
-
     open_playlist_dialog: function (playlist) {
       this.selected_playlist = playlist
       this.show_playlist_details_modal = true
-    },
-
-    open_audiobook_dialog: function (album) {
-      this.selected_audiobook = album
-      this.show_audiobook_details_modal = true
-    },
-
-    open_podcast_dialog: function (album) {
-      this.selected_podcast = album
-      this.show_podcast_details_modal = true
     }
   },