From ee4ec0c9eb909094302990c02d69ba66ec0ba5b0 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Sun, 4 Oct 2020 17:31:47 +0200
Subject: [PATCH] [web-src] Refactor track and playlis listings

---
 web-src/src/components/ListPlaylists.vue      | 54 +++++++++++++++++++
 web-src/src/components/ListTracks.vue         | 52 ++++++++++++++++++
 web-src/src/pages/PageAlbum.vue               | 26 ++-------
 web-src/src/pages/PageArtistTracks.vue        | 30 +++--------
 web-src/src/pages/PageAudiobooksAlbum.vue     | 17 ++----
 web-src/src/pages/PageBrowse.vue              | 23 ++------
 .../src/pages/PageBrowseRecentlyPlayed.vue    | 30 ++---------
 web-src/src/pages/PageGenreTracks.vue         | 32 +++--------
 web-src/src/pages/PagePlaylist.vue            | 45 +++++-----------
 web-src/src/pages/PagePlaylists.vue           | 39 ++------------
 web-src/src/pages/PageRadioStreams.vue        | 30 ++---------
 web-src/src/pages/PageSearch.vue              | 52 +++---------------
 12 files changed, 161 insertions(+), 269 deletions(-)
 create mode 100644 web-src/src/components/ListPlaylists.vue
 create mode 100644 web-src/src/components/ListTracks.vue

diff --git a/web-src/src/components/ListPlaylists.vue b/web-src/src/components/ListPlaylists.vue
new file mode 100644
index 00000000..36ba1e7b
--- /dev/null
+++ b/web-src/src/components/ListPlaylists.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <list-item-playlist v-for="playlist in playlists" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
+      <template slot="icon">
+        <span class="icon">
+          <i class="mdi" :class="{ 'mdi-library-music': playlist.type !== 'folder', 'mdi-rss': playlist.type === 'rss', 'mdi-folder': playlist.type === 'folder' }"></i>
+        </span>
+      </template>
+      <template slot="actions">
+        <a @click="open_dialog(playlist)">
+          <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+        </a>
+      </template>
+    </list-item-playlist>
+    <modal-dialog-playlist :show="show_details_modal" :playlist="selected_playlist" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemPlaylist from '@/components/ListItemPlaylist'
+import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
+
+export default {
+  name: 'ListPlaylists',
+  components: { ListItemPlaylist, ModalDialogPlaylist },
+
+  props: ['playlists'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_playlist: {}
+    }
+  },
+
+  methods: {
+    open_playlist: function (playlist) {
+      if (playlist.type !== 'folder') {
+        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
+      } else {
+        this.$router.push({ path: '/playlists/' + playlist.id })
+      }
+    },
+
+    open_dialog: function (playlist) {
+      this.selected_playlist = playlist
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/components/ListTracks.vue b/web-src/src/components/ListTracks.vue
new file mode 100644
index 00000000..fdb856b1
--- /dev/null
+++ b/web-src/src/components/ListTracks.vue
@@ -0,0 +1,52 @@
+<template>
+  <div>
+    <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index, track)">
+      <template slot="actions">
+        <a @click="open_dialog(track)">
+          <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+        </a>
+      </template>
+    </list-item-track>
+    <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+  </div>
+</template>
+
+<script>
+import ListItemTrack from '@/components/ListItemTrack'
+import ModalDialogTrack from '@/components/ModalDialogTrack'
+import webapi from '@/webapi'
+
+export default {
+  name: 'ListTracks',
+  components: { ListItemTrack, ModalDialogTrack },
+
+  props: ['tracks', 'uris', 'expression'],
+
+  data () {
+    return {
+      show_details_modal: false,
+      selected_track: {}
+    }
+  },
+
+  methods: {
+    play_track: function (position, track) {
+      if (this.uris) {
+        webapi.player_play_uri(this.uris, false, position)
+      } else if (this.expression) {
+        webapi.player_play_expression(this.expression, false, position)
+      } else {
+        webapi.player_play_uri(track.uri, false)
+      }
+    },
+
+    open_dialog: function (track) {
+      this.selected_track = track
+      this.show_details_modal = true
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/pages/PageAlbum.vue b/web-src/src/pages/PageAlbum.vue
index 87cabdc3..4895f4ab 100644
--- a/web-src/src/pages/PageAlbum.vue
+++ b/web-src/src/pages/PageAlbum.vue
@@ -24,14 +24,7 @@
     </template>
     <template slot="content">
       <p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.track_count }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
-        <template slot="actions">
-          <a @click="open_dialog(track)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-          </a>
-        </template>
-      </list-item-track>
-      <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <list-tracks :tracks="tracks" :uris="album.uri"></list-tracks>
       <modal-dialog-album :show="show_album_details_modal" :album="album" @close="show_album_details_modal = false" />
     </template>
   </content-with-hero>
@@ -40,8 +33,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHero from '@/templates/ContentWithHero'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
@@ -63,16 +55,13 @@ const albumData = {
 export default {
   name: 'PageAlbum',
   mixins: [LoadDataBeforeEnterMixin(albumData)],
-  components: { ContentWithHero, ListItemTrack, ModalDialogTrack, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
 
   data () {
     return {
       album: {},
       tracks: [],
 
-      show_details_modal: false,
-      selected_track: {},
-
       show_album_details_modal: false
     }
   },
@@ -85,15 +74,6 @@ export default {
 
     play: function () {
       webapi.player_play_uri(this.album.uri, true)
-    },
-
-    play_track: function (position) {
-      webapi.player_play_uri(this.album.uri, false, position)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/PageArtistTracks.vue b/web-src/src/pages/PageArtistTracks.vue
index 06eb4f89..aa727996 100644
--- a/web-src/src/pages/PageArtistTracks.vue
+++ b/web-src/src/pages/PageArtistTracks.vue
@@ -19,14 +19,7 @@
       </template>
       <template slot="content">
         <p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_artist">{{ artist.album_count }} albums</a> | {{ artist.track_count }} tracks</p>
-        <list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" @click="play_track(index)">
-          <template slot="actions">
-            <a @click="open_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+        <list-tracks :tracks="tracks.items" :uris="track_uris"></list-tracks>
         <modal-dialog-artist :show="show_artist_details_modal" :artist="artist" @close="show_artist_details_modal = false" />
       </template>
     </content-with-heading>
@@ -37,8 +30,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import IndexButtonList from '@/components/IndexButtonList'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import ModalDialogArtist from '@/components/ModalDialogArtist'
 import webapi from '@/webapi'
 
@@ -59,16 +51,13 @@ const tracksData = {
 export default {
   name: 'PageArtistTracks',
   mixins: [LoadDataBeforeEnterMixin(tracksData)],
-  components: { ContentWithHeading, ListItemTrack, IndexButtonList, ModalDialogTrack, ModalDialogArtist },
+  components: { ContentWithHeading, ListTracks, IndexButtonList, ModalDialogArtist },
 
   data () {
     return {
       artist: {},
       tracks: { items: [] },
 
-      show_details_modal: false,
-      selected_track: {},
-
       show_artist_details_modal: false
     }
   },
@@ -77,6 +66,10 @@ export default {
     index_list () {
       return [...new Set(this.tracks.items
         .map(track => track.title_sort.charAt(0).toUpperCase()))]
+    },
+
+    track_uris () {
+      return this.tracks.items.map(a => a.uri).join(',')
     }
   },
 
@@ -88,15 +81,6 @@ export default {
 
     play: function () {
       webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), true)
-    },
-
-    play_track: function (position) {
-      webapi.player_play_uri(this.tracks.items.map(a => a.uri).join(','), false, position)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/PageAudiobooksAlbum.vue b/web-src/src/pages/PageAudiobooksAlbum.vue
index 619736a4..c2de2032 100644
--- a/web-src/src/pages/PageAudiobooksAlbum.vue
+++ b/web-src/src/pages/PageAudiobooksAlbum.vue
@@ -24,14 +24,7 @@
     </template>
     <template slot="content">
       <p class="heading is-7 has-text-centered-mobile fd-has-margin-top">{{ album.track_count }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
-        <template slot="actions">
-          <a @click="open_dialog(track)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-          </a>
-        </template>
-      </list-item-track>
-      <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <list-tracks :tracks="tracks" :uris="album.uri"></list-tracks>
       <modal-dialog-album :show="show_album_details_modal" :album="album" :media_kind="'audiobook'" @close="show_album_details_modal = false" />
     </template>
   </content-with-hero>
@@ -40,8 +33,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHero from '@/templates/ContentWithHero'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import CoverArtwork from '@/components/CoverArtwork'
 import webapi from '@/webapi'
@@ -63,16 +55,13 @@ const albumData = {
 export default {
   name: 'PageAudiobooksAlbum',
   mixins: [LoadDataBeforeEnterMixin(albumData)],
-  components: { ContentWithHero, ListItemTrack, ModalDialogTrack, ModalDialogAlbum, CoverArtwork },
+  components: { ContentWithHero, ListTracks, ModalDialogAlbum, CoverArtwork },
 
   data () {
     return {
       album: {},
       tracks: [],
 
-      show_details_modal: false,
-      selected_track: {},
-
       show_album_details_modal: false
     }
   },
diff --git a/web-src/src/pages/PageBrowse.vue b/web-src/src/pages/PageBrowse.vue
index dda82ed6..db2e67eb 100644
--- a/web-src/src/pages/PageBrowse.vue
+++ b/web-src/src/pages/PageBrowse.vue
@@ -27,14 +27,7 @@
         <p class="heading">tracks</p>
       </template>
       <template slot="content">
-        <list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" @click="play_track(track)">
-          <template slot="actions">
-            <a @click="open_track_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_track_details_modal" :track="selected_track" @close="show_track_details_modal = false" />
+        <list-tracks :tracks="recently_played.items"></list-tracks>
       </template>
       <template slot="footer">
         <nav class="level">
@@ -52,8 +45,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import ListAlbums from '@/components/ListAlbums'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -73,7 +65,7 @@ const browseData = {
 export default {
   name: 'PageBrowse',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListAlbums, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, TabsMusic, ListAlbums, ListTracks },
 
   data () {
     return {
@@ -88,15 +80,6 @@ export default {
   methods: {
     open_browse: function (type) {
       this.$router.push({ path: '/music/browse/' + type })
-    },
-
-    open_track_dialog: function (track) {
-      this.selected_track = track
-      this.show_track_details_modal = true
-    },
-
-    play_track: function (track) {
-      webapi.player_play_uri(track.uri, false)
     }
   }
 }
diff --git a/web-src/src/pages/PageBrowseRecentlyPlayed.vue b/web-src/src/pages/PageBrowseRecentlyPlayed.vue
index 371ff166..d2aefcd4 100644
--- a/web-src/src/pages/PageBrowseRecentlyPlayed.vue
+++ b/web-src/src/pages/PageBrowseRecentlyPlayed.vue
@@ -8,14 +8,7 @@
         <p class="heading">tracks</p>
       </template>
       <template slot="content">
-        <list-item-track v-for="track in recently_played.items" :key="track.id" :track="track" @click="play_track(track)">
-          <template slot="actions">
-            <a @click="open_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+        <list-tracks :tracks="recently_played.items"></list-tracks>
       </template>
     </content-with-heading>
   </div>
@@ -25,8 +18,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import webapi from '@/webapi'
 
 const browseData = {
@@ -46,25 +38,11 @@ const browseData = {
 export default {
   name: 'PageBrowseType',
   mixins: [LoadDataBeforeEnterMixin(browseData)],
-  components: { ContentWithHeading, TabsMusic, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, TabsMusic, ListTracks },
 
   data () {
     return {
-      recently_played: {},
-
-      show_details_modal: false,
-      selected_track: {}
-    }
-  },
-
-  methods: {
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
-    },
-
-    play_track: function (track) {
-      webapi.player_play_uri(track.uri, false)
+      recently_played: {}
     }
   }
 }
diff --git a/web-src/src/pages/PageGenreTracks.vue b/web-src/src/pages/PageGenreTracks.vue
index a2028f7d..c790cc6d 100644
--- a/web-src/src/pages/PageGenreTracks.vue
+++ b/web-src/src/pages/PageGenreTracks.vue
@@ -19,14 +19,7 @@
       </template>
       <template slot="content">
         <p class="heading has-text-centered-mobile"><a class="has-text-link" @click="open_genre">albums</a> | {{ tracks.total }} tracks</p>
-        <list-item-track v-for="(track, index) in tracks.items" :key="track.id" :track="track" @click="play_track(index)">
-          <template slot="actions">
-            <a @click="open_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+        <list-tracks :tracks="tracks.items" :expression="expression"></list-tracks>
         <modal-dialog-genre :show="show_genre_details_modal" :genre="{ 'name': genre }" @close="show_genre_details_modal = false" />
       </template>
     </content-with-heading>
@@ -37,8 +30,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import IndexButtonList from '@/components/IndexButtonList'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import ModalDialogGenre from '@/components/ModalDialogGenre'
 import webapi from '@/webapi'
 
@@ -56,16 +48,13 @@ const tracksData = {
 export default {
   name: 'PageGenreTracks',
   mixins: [LoadDataBeforeEnterMixin(tracksData)],
-  components: { ContentWithHeading, ListItemTrack, IndexButtonList, ModalDialogTrack, ModalDialogGenre },
+  components: { ContentWithHeading, ListTracks, IndexButtonList, ModalDialogGenre },
 
   data () {
     return {
       tracks: { items: [] },
       genre: '',
 
-      show_details_modal: false,
-      selected_track: {},
-
       show_genre_details_modal: false
     }
   },
@@ -74,6 +63,10 @@ export default {
     index_list () {
       return [...new Set(this.tracks.items
         .map(track => track.title_sort.charAt(0).toUpperCase()))]
+    },
+
+    expression () {
+      return 'genre is "' + this.genre + '" and media_kind is music'
     }
   },
 
@@ -84,16 +77,7 @@ export default {
     },
 
     play: function () {
-      webapi.player_play_expression('genre is "' + this.genre + '" and media_kind is music', true)
-    },
-
-    play_track: function (position) {
-      webapi.player_play_expression('genre is "' + this.genre + '" and media_kind is music', false, position)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
+      webapi.player_play_expression(this.expression, true)
     }
   }
 }
diff --git a/web-src/src/pages/PagePlaylist.vue b/web-src/src/pages/PagePlaylist.vue
index c5ea7b77..fbfa9465 100644
--- a/web-src/src/pages/PagePlaylist.vue
+++ b/web-src/src/pages/PagePlaylist.vue
@@ -15,14 +15,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ tracks.length }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" @click="play_track(index)">
-        <template slot="actions">
-          <a @click="open_dialog(track)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-          </a>
-        </template>
-      </list-item-track>
-      <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+      <list-tracks :tracks="tracks" :uris="uris"></list-tracks>
       <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="playlist" :tracks="playlist.random ? tracks : undefined" @close="show_playlist_details_modal = false" />
     </template>
   </content-with-heading>
@@ -31,8 +24,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
 import webapi from '@/webapi'
 
@@ -53,40 +45,29 @@ const playlistData = {
 export default {
   name: 'PagePlaylist',
   mixins: [LoadDataBeforeEnterMixin(playlistData)],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, ModalDialogPlaylist },
+  components: { ContentWithHeading, ListTracks, ModalDialogPlaylist },
 
   data () {
     return {
       playlist: {},
       tracks: [],
 
-      show_details_modal: false,
-      selected_track: {},
-
       show_playlist_details_modal: false
     }
   },
 
+  computed: {
+    uris () {
+      if (this.playlist.random) {
+        return this.tracks.map(a => a.uri).join(',')
+      }
+      return this.playlist.uri
+    }
+  },
+
   methods: {
     play: function () {
-      if (this.playlist.random) {
-        webapi.player_play_uri(this.tracks.map(a => a.uri).join(','), true)
-      } else {
-        webapi.player_play_uri(this.playlist.uri, true)
-      }
-    },
-
-    play_track: function (position) {
-      if (this.playlist.random) {
-        webapi.player_play_uri(this.tracks.map(a => a.uri).join(','), false, position)
-      } else {
-        webapi.player_play_uri(this.playlist.uri, false, position)
-      }
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
+      webapi.player_play_uri(this.uris, true)
     }
   }
 }
diff --git a/web-src/src/pages/PagePlaylists.vue b/web-src/src/pages/PagePlaylists.vue
index b755f31b..bdfa791c 100644
--- a/web-src/src/pages/PagePlaylists.vue
+++ b/web-src/src/pages/PagePlaylists.vue
@@ -5,19 +5,7 @@
       <p class="heading">{{ playlists.total }} playlists</p>
     </template>
     <template slot="content">
-      <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
-        <template slot="icon">
-          <span class="icon">
-            <i class="mdi" :class="{ 'mdi-library-music': playlist.type !== 'folder', 'mdi-rss': playlist.type === 'rss', 'mdi-folder': playlist.type === 'folder' }"></i>
-          </span>
-        </template>
-        <template slot="actions">
-          <a @click="open_dialog(playlist)">
-            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-          </a>
-        </template>
-      </list-item-playlist>
-      <modal-dialog-playlist :show="show_details_modal" :playlist="selected_playlist" @close="show_details_modal = false" />
+      <list-playlists :playlists="playlists.items"></list-playlists>
     </template>
   </content-with-heading>
 </template>
@@ -25,8 +13,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemPlaylist from '@/components/ListItemPlaylist'
-import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
+import ListPlaylists from '@/components/ListPlaylists'
 import webapi from '@/webapi'
 
 const playlistsData = {
@@ -46,30 +33,12 @@ const playlistsData = {
 export default {
   name: 'PagePlaylists',
   mixins: [LoadDataBeforeEnterMixin(playlistsData)],
-  components: { ContentWithHeading, ListItemPlaylist, ModalDialogPlaylist },
+  components: { ContentWithHeading, ListPlaylists },
 
   data () {
     return {
       playlist: {},
-      playlists: {},
-
-      show_details_modal: false,
-      selected_playlist: {}
-    }
-  },
-
-  methods: {
-    open_playlist: function (playlist) {
-      if (playlist.type !== 'folder') {
-        this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
-      } else {
-        this.$router.push({ path: '/playlists/' + playlist.id })
-      }
-    },
-
-    open_dialog: function (playlist) {
-      this.selected_playlist = playlist
-      this.show_details_modal = true
+      playlists: {}
     }
   }
 }
diff --git a/web-src/src/pages/PageRadioStreams.vue b/web-src/src/pages/PageRadioStreams.vue
index decc5d40..b404516a 100644
--- a/web-src/src/pages/PageRadioStreams.vue
+++ b/web-src/src/pages/PageRadioStreams.vue
@@ -6,14 +6,7 @@
       </template>
       <template slot="content">
         <p class="heading has-text-centered-mobile">{{ tracks.total }} tracks</p>
-        <list-item-track v-for="track in tracks.items" :key="track.id" :track="track" @click="play_track(track)">
-          <template slot="actions">
-            <a @click="open_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_details_modal" :track="selected_track" @close="show_details_modal = false" />
+        <list-tracks :tracks="tracks.items"></list-tracks>
       </template>
     </content-with-heading>
   </div>
@@ -22,8 +15,7 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
-import ListItemTrack from '@/components/ListItemTrack'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
+import ListTracks from '@/components/ListTracks'
 import webapi from '@/webapi'
 
 const streamsData = {
@@ -39,25 +31,11 @@ const streamsData = {
 export default {
   name: 'PageRadioStreams',
   mixins: [LoadDataBeforeEnterMixin(streamsData)],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack },
+  components: { ContentWithHeading, ListTracks },
 
   data () {
     return {
-      tracks: { items: [] },
-
-      show_details_modal: false,
-      selected_track: {}
-    }
-  },
-
-  methods: {
-    play_track: function (track) {
-      webapi.player_play_uri(track.uri, false)
-    },
-
-    open_dialog: function (track) {
-      this.selected_track = track
-      this.show_details_modal = true
+      tracks: { items: [] }
     }
   }
 }
diff --git a/web-src/src/pages/PageSearch.vue b/web-src/src/pages/PageSearch.vue
index c8e6f248..1212f69e 100644
--- a/web-src/src/pages/PageSearch.vue
+++ b/web-src/src/pages/PageSearch.vue
@@ -34,14 +34,7 @@
         <p class="title is-4">Tracks</p>
       </template>
       <template slot="content">
-        <list-item-track v-for="track in tracks.items" :key="track.id" :track="track" @click="play_track(track)">
-          <template slot="actions">
-            <a @click="open_track_dialog(track)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-track>
-        <modal-dialog-track :show="show_track_details_modal" :track="selected_track" @close="show_track_details_modal = false" />
+        <list-tracks :tracks="tracks.items"></list-tracks>
       </template>
       <template slot="footer">
         <nav v-if="show_all_tracks_button" class="level">
@@ -95,14 +88,7 @@
         <p class="title is-4">Playlists</p>
       </template>
       <template slot="content">
-        <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
-          <template slot="actions">
-            <a @click="open_playlist_dialog(playlist)">
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-            </a>
-          </template>
-        </list-item-playlist>
-        <modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
+        <list-playlists :playlists="playlists.items"></list-playlists>
       </template>
       <template slot="footer">
         <nav v-if="show_all_playlists_button" class="level">
@@ -155,18 +141,16 @@
 <script>
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsSearch from '@/components/TabsSearch'
-import ListItemTrack from '@/components/ListItemTrack'
+import ListTracks from '@/components/ListTracks'
 import ListArtists from '@/components/ListArtists'
 import ListAlbums from '@/components/ListAlbums'
-import ListItemPlaylist from '@/components/ListItemPlaylist'
-import ModalDialogTrack from '@/components/ModalDialogTrack'
-import ModalDialogPlaylist from '@/components/ModalDialogPlaylist'
+import ListPlaylists from '@/components/ListPlaylists'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
 
 export default {
   name: 'PageSearch',
-  components: { ContentWithHeading, TabsSearch, ListItemTrack, ListArtists, ListAlbums, ListItemPlaylist, ModalDialogTrack, ModalDialogPlaylist },
+  components: { ContentWithHeading, TabsSearch, ListTracks, ListArtists, ListAlbums, ListPlaylists },
 
   data () {
     return {
@@ -177,13 +161,7 @@ export default {
       albums: { items: [], total: 0 },
       playlists: { items: [], total: 0 },
       audiobooks: { items: [], total: 0 },
-      podcasts: { items: [], total: 0 },
-
-      show_track_details_modal: false,
-      selected_track: {},
-
-      show_playlist_details_modal: false,
-      selected_playlist: {}
+      podcasts: { items: [], total: 0 }
     }
   },
 
@@ -411,27 +389,9 @@ export default {
       })
     },
 
-    play_track: function (track) {
-      webapi.player_play_uri(track.uri, false)
-    },
-
-    open_playlist: function (playlist) {
-      this.$router.push({ path: '/playlists/' + playlist.id + '/tracks' })
-    },
-
     open_recent_search: function (query) {
       this.search_query = query
       this.new_search()
-    },
-
-    open_track_dialog: function (track) {
-      this.selected_track = track
-      this.show_track_details_modal = true
-    },
-
-    open_playlist_dialog: function (playlist) {
-      this.selected_playlist = playlist
-      this.show_playlist_details_modal = true
     }
   },