From e874276bdb25910cf0b3699a7a17ec945d3f88b3 Mon Sep 17 00:00:00 2001
From: chme <christian.meffert@googlemail.com>
Date: Mon, 17 Dec 2018 11:52:09 +0100
Subject: [PATCH] [web-src] Refactor spotify modal dialogs into a separate
 components

---
 .../src/components/SpotifyListItemAlbum.vue   |  85 +--------------
 .../src/components/SpotifyListItemArtist.vue  |  77 +-------------
 .../components/SpotifyListItemPlaylist.vue    |  81 +-------------
 .../src/components/SpotifyListItemTrack.vue   |  98 +----------------
 .../components/SpotifyModalDialogAlbum.vue    |  85 +++++++++++++++
 .../components/SpotifyModalDialogArtist.vue   |  77 ++++++++++++++
 .../components/SpotifyModalDialogPlaylist.vue |  81 ++++++++++++++
 .../components/SpotifyModalDialogTrack.vue    | 100 ++++++++++++++++++
 web-src/src/pages/SpotifyPageAlbum.vue        |  22 +++-
 web-src/src/pages/SpotifyPageArtist.vue       |  22 +++-
 web-src/src/pages/SpotifyPageBrowse.vue       |  44 +++++++-
 .../SpotifyPageBrowseFeaturedPlaylists.vue    |  26 ++++-
 .../pages/SpotifyPageBrowseNewReleases.vue    |  26 ++++-
 web-src/src/pages/SpotifyPagePlaylist.vue     |  24 ++++-
 web-src/src/pages/SpotifyPageSearch.vue       |  76 +++++++++++--
 15 files changed, 564 insertions(+), 360 deletions(-)
 create mode 100644 web-src/src/components/SpotifyModalDialogAlbum.vue
 create mode 100644 web-src/src/components/SpotifyModalDialogArtist.vue
 create mode 100644 web-src/src/components/SpotifyModalDialogPlaylist.vue
 create mode 100644 web-src/src/components/SpotifyModalDialogTrack.vue

diff --git a/web-src/src/components/SpotifyListItemAlbum.vue b/web-src/src/components/SpotifyListItemAlbum.vue
index 09fb82ed..4effbe53 100644
--- a/web-src/src/components/SpotifyListItemAlbum.vue
+++ b/web-src/src/components/SpotifyListItemAlbum.vue
@@ -5,103 +5,20 @@
       <h2 class="subtitle is-7 has-text-grey"><b>{{ album.artists[0].name }}</b></h2>
     </div>
     <div class="media-right">
-      <a @click="show_details">
-        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-      </a>
-      <transition name="fade">
-        <div class="modal is-active" v-if="show_details_modal">
-          <div class="modal-background" @click="hide_details"></div>
-          <div class="modal-content">
-            <div class="card">
-              <div class="card-content">
-                <p class="title is-4">
-                  <a class="has-text-link" @click="open_album">{{ album.name }}</a>
-                </p>
-                <div class="content is-small">
-                  <p>
-                    <span class="heading">Album artist</span>
-                    <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
-                  </p>
-                  <p>
-                    <span class="heading">Release date</span>
-                    <span class="title is-6">{{ album.release_date }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Type</span>
-                    <span class="title is-6">{{ album.album_type }}</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-18px"></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-18px"></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-18px"></i></span> <span>Play</span>
-                </a>
-              </footer>
-            </div>
-          </div>
-          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
-        </div>
-      </transition>
+      <slot name="actions"></slot>
     </div>
   </div>
 </template>
 
 <script>
-import webapi from '@/webapi'
-
 export default {
   name: 'SpotifyListItemAlbum',
 
   props: ['album'],
 
-  data () {
-    return {
-      show_details_modal: false
-    }
-  },
-
   methods: {
-    play: function () {
-      this.show_details_modal = false
-      webapi.player_play_uri(this.album.uri, false)
-    },
-
-    queue_add: function () {
-      webapi.queue_add(this.album.uri).then(
-        // this.$store.commit(types.ADD_NOTIFICATION, { text: 'Album tracks appended to queue', timeout: 0 })
-        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 3000 })
-      )
-      this.show_details_modal = false
-    },
-
-    queue_add_next: function () {
-      webapi.queue_add_next(this.album.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    show_details: function () {
-      this.show_details_modal = true
-    },
-
-    hide_details: function () {
-      this.show_details_modal = false
-    },
-
     open_album: function () {
       this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
-    },
-
-    open_artist: function () {
-      this.show_details_modal = false
-      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
     }
   }
 }
diff --git a/web-src/src/components/SpotifyListItemArtist.vue b/web-src/src/components/SpotifyListItemArtist.vue
index 404e67f7..5e00e173 100644
--- a/web-src/src/components/SpotifyListItemArtist.vue
+++ b/web-src/src/components/SpotifyListItemArtist.vue
@@ -4,93 +4,18 @@
       <h1 class="title is-6">{{ artist.name }}</h1>
     </div>
     <div class="media-right">
-      <a @click="show_details">
-        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-      </a>
-      <transition name="fade">
-        <div class="modal is-active" v-if="show_details_modal">
-          <div class="modal-background" @click="hide_details"></div>
-          <div class="modal-content">
-            <div class="card">
-              <div class="card-content">
-                <p class="title is-4">
-                  <a class="has-text-link" @click="open_artist">{{ artist.name }}</a>
-                </p>
-                <div class="content is-small">
-                  <p>
-                    <span class="heading">Popularity / Followers</span>
-                    <span class="title is-6">{{ artist.popularity }} / {{ artist.followers.total }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Genres</span>
-                    <span class="title is-6">{{ artist.genres.join(', ') }}</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-18px"></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-18px"></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-18px"></i></span> <span>Play</span>
-                </a>
-              </footer>
-            </div>
-          </div>
-          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
-        </div>
-      </transition>
+      <slot name="actions"></slot>
     </div>
   </div>
 </template>
 
 <script>
-import webapi from '@/webapi'
-
 export default {
   name: 'SpotifyListItemArtist',
-
   props: ['artist'],
 
-  data () {
-    return {
-      show_details_modal: false
-    }
-  },
-
   methods: {
-    play: function () {
-      this.show_details_modal = false
-      webapi.player_play_uri(this.artist.uri, false)
-    },
-
-    queue_add: function () {
-      webapi.queue_add(this.artist.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    queue_add_next: function () {
-      webapi.queue_add_next(this.artist.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    show_details: function () {
-      this.show_details_modal = true
-    },
-
-    hide_details: function () {
-      this.show_details_modal = false
-    },
-
     open_artist: function () {
-      this.show_details_modal = false
       this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
     }
   }
diff --git a/web-src/src/components/SpotifyListItemPlaylist.vue b/web-src/src/components/SpotifyListItemPlaylist.vue
index c4688d41..2530264e 100644
--- a/web-src/src/components/SpotifyListItemPlaylist.vue
+++ b/web-src/src/components/SpotifyListItemPlaylist.vue
@@ -5,97 +5,18 @@
       <h2 class="subtitle is-7">{{ playlist.owner.display_name }}</h2>
     </div>
     <div class="media-right">
-      <a @click="show_details">
-        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-      </a>
-      <transition name="fade">
-        <div class="modal is-active" v-if="show_details_modal">
-          <div class="modal-background" @click="hide_details"></div>
-          <div class="modal-content">
-            <div class="card">
-              <div class="card-content">
-                <p class="title is-4">
-                  <a class="has-text-link" @click="open_playlist">{{ playlist.name }}</a>
-                </p>
-                <div class="content is-small">
-                  <p>
-                    <span class="heading">Owner</span>
-                    <span class="title is-6">{{ playlist.owner.display_name }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Tracks</span>
-                    <span class="title is-6">{{ playlist.tracks.total }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Path</span>
-                    <span class="title is-6">{{ playlist.uri }}</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-18px"></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-18px"></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-18px"></i></span> <span>Play</span>
-                </a>
-              </footer>
-            </div>
-          </div>
-          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
-        </div>
-      </transition>
+      <slot name="actions"></slot>
     </div>
   </div>
 </template>
 
 <script>
-import webapi from '@/webapi'
-
 export default {
   name: 'SpotifyListItemPlaylist',
-
   props: ['playlist'],
 
-  data () {
-    return {
-      show_details_modal: false
-    }
-  },
-
   methods: {
-    play: function () {
-      this.show_details_modal = false
-      webapi.player_play_uri(this.playlist.uri, false)
-    },
-
-    queue_add: function () {
-      webapi.queue_add(this.playlist.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    queue_add_next: function () {
-      webapi.queue_add_next(this.playlist.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Playlist tracks appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    show_details: function () {
-      this.show_details_modal = true
-    },
-
-    hide_details: function () {
-      this.show_details_modal = false
-    },
-
     open_playlist: function () {
-      this.show_details_modal = false
       this.$router.push({ path: '/music/spotify/playlists/' + this.playlist.id })
     }
   }
diff --git a/web-src/src/components/SpotifyListItemTrack.vue b/web-src/src/components/SpotifyListItemTrack.vue
index a4407b72..5222dc28 100644
--- a/web-src/src/components/SpotifyListItemTrack.vue
+++ b/web-src/src/components/SpotifyListItemTrack.vue
@@ -5,64 +5,7 @@
       <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artists[0].name }}</b></h2>
     </div>
     <div class="media-right">
-      <a @click="show_details">
-        <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
-      </a>
-      <transition name="fade">
-        <div class="modal is-active" v-if="show_details_modal">
-          <div class="modal-background" @click="hide_details"></div>
-          <div class="modal-content">
-            <div class="card">
-              <div class="card-content">
-                <p class="title is-4">
-                  {{ track.name }}
-                </p>
-                <p class="subtitle">
-                  {{ track.artists[0].name }}
-                </p>
-                <div class="content is-small">
-                  <p>
-                    <span class="heading">Album</span>
-                    <a class="title is-6 has-text-link" @click="open_album">{{ album.name }}</a>
-                  </p>
-                  <p>
-                    <span class="heading">Album artist</span>
-                    <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
-                  </p>
-                  <p>
-                    <span class="heading">Release date</span>
-                    <span class="title is-6">{{ album.release_date }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Track / Disc</span>
-                    <span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Length</span>
-                    <span class="title is-6">{{ track.duration_ms | duration }}</span>
-                  </p>
-                  <p>
-                    <span class="heading">Path</span>
-                    <span class="title is-6">{{ track.uri }}</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-18px"></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-18px"></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-18px"></i></span> <span>Play</span>
-                </a>
-              </footer>
-            </div>
-          </div>
-          <button class="modal-close is-large" aria-label="close" @click="hide_details"></button>
-        </div>
-      </transition>
+      <slot name="actions"></slot>
     </div>
   </div>
 </template>
@@ -75,48 +18,9 @@ export default {
 
   props: ['track', 'position', 'album', 'context_uri'],
 
-  data () {
-    return {
-      show_details_modal: false
-    }
-  },
-
   methods: {
     play: function () {
-      this.show_details_modal = false
       webapi.player_play_uri(this.context_uri, false, this.position)
-    },
-
-    queue_add: function () {
-      webapi.queue_add(this.track.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    queue_add_next: function () {
-      webapi.queue_add_next(this.track.uri).then(() =>
-        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
-      )
-      this.show_details_modal = false
-    },
-
-    show_details: function () {
-      this.show_details_modal = true
-    },
-
-    hide_details: function () {
-      this.show_details_modal = false
-    },
-
-    open_album: function () {
-      this.show_details_modal = false
-      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
-    },
-
-    open_artist: function () {
-      this.show_details_modal = false
-      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
     }
   }
 }
diff --git a/web-src/src/components/SpotifyModalDialogAlbum.vue b/web-src/src/components/SpotifyModalDialogAlbum.vue
new file mode 100644
index 00000000..1b3370a1
--- /dev/null
+++ b/web-src/src/components/SpotifyModalDialogAlbum.vue
@@ -0,0 +1,85 @@
+<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_album">{{ album.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Album artist</span>
+                  <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
+                </p>
+                <p>
+                  <span class="heading">Release date</span>
+                  <span class="title is-6">{{ album.release_date }}</span>
+                </p>
+                <p>
+                  <span class="heading">Type</span>
+                  <span class="title is-6">{{ album.album_type }}</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-18px"></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-18px"></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-18px"></i></span> <span>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: 'SpotifyModalDialogAlbum',
+  props: [ 'show', 'album' ],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.player_play_uri(this.album.uri, false)
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.queue_add(this.album.uri).then(
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 3000 })
+      )
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.queue_add_next(this.album.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Album tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_album: function () {
+      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+    },
+
+    open_artist: function () {
+      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/components/SpotifyModalDialogArtist.vue b/web-src/src/components/SpotifyModalDialogArtist.vue
new file mode 100644
index 00000000..919105ea
--- /dev/null
+++ b/web-src/src/components/SpotifyModalDialogArtist.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_artist">{{ artist.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Popularity / Followers</span>
+                  <span class="title is-6">{{ artist.popularity }} / {{ artist.followers.total }}</span>
+                </p>
+                <p>
+                  <span class="heading">Genres</span>
+                  <span class="title is-6">{{ artist.genres.join(', ') }}</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-18px"></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-18px"></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-18px"></i></span> <span>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: 'SpotifyModalDialogArtist',
+  props: [ 'show', 'artist' ],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.player_play_uri(this.artist.uri, false)
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.queue_add(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.queue_add_next(this.artist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Artist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_artist: function () {
+      this.$router.push({ path: '/music/spotify/artists/' + this.artist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/components/SpotifyModalDialogPlaylist.vue b/web-src/src/components/SpotifyModalDialogPlaylist.vue
new file mode 100644
index 00000000..f7b8961d
--- /dev/null
+++ b/web-src/src/components/SpotifyModalDialogPlaylist.vue
@@ -0,0 +1,81 @@
+<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_playlist">{{ playlist.name }}</a>
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Owner</span>
+                  <span class="title is-6">{{ playlist.owner.display_name }}</span>
+                </p>
+                <p>
+                  <span class="heading">Tracks</span>
+                  <span class="title is-6">{{ playlist.tracks.total }}</span>
+                </p>
+                <p>
+                  <span class="heading">Path</span>
+                  <span class="title is-6">{{ playlist.uri }}</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-18px"></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-18px"></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-18px"></i></span> <span>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: 'SpotifyModalDialogPlaylist',
+  props: [ 'show', 'playlist' ],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.player_play_uri(this.playlist.uri, false)
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.queue_add(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Playlist appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.queue_add_next(this.playlist.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Playlist tracks appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_playlist: function () {
+      this.$router.push({ path: '/music/spotify/playlists/' + this.playlist.id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/components/SpotifyModalDialogTrack.vue b/web-src/src/components/SpotifyModalDialogTrack.vue
new file mode 100644
index 00000000..59b09c34
--- /dev/null
+++ b/web-src/src/components/SpotifyModalDialogTrack.vue
@@ -0,0 +1,100 @@
+<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">
+                {{ track.name }}
+              </p>
+              <p class="subtitle">
+                {{ track.artists[0].name }}
+              </p>
+              <div class="content is-small">
+                <p>
+                  <span class="heading">Album</span>
+                  <a class="title is-6 has-text-link" @click="open_album">{{ album.name }}</a>
+                </p>
+                <p>
+                  <span class="heading">Album artist</span>
+                  <a class="title is-6 has-text-link" @click="open_artist">{{ album.artists[0].name }}</a>
+                </p>
+                <p>
+                  <span class="heading">Release date</span>
+                  <span class="title is-6">{{ album.release_date }}</span>
+                </p>
+                <p>
+                  <span class="heading">Track / Disc</span>
+                  <span class="title is-6">{{ track.track_number }} / {{ track.disc_number }}</span>
+                </p>
+                <p>
+                  <span class="heading">Length</span>
+                  <span class="title is-6">{{ track.duration_ms | duration }}</span>
+                </p>
+                <p>
+                  <span class="heading">Path</span>
+                  <span class="title is-6">{{ track.uri }}</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-18px"></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-18px"></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-18px"></i></span> <span>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: 'SpotifyModalDialogTrack',
+  props: [ 'show', 'track', 'album' ],
+
+  methods: {
+    play: function () {
+      this.$emit('close')
+      webapi.player_play_uri(this.track.uri, false)
+    },
+
+    queue_add: function () {
+      this.$emit('close')
+      webapi.queue_add(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    queue_add_next: function () {
+      this.$emit('close')
+      webapi.queue_add_next(this.track.uri).then(() =>
+        this.$store.dispatch('add_notification', { text: 'Track appended to queue', type: 'info', timeout: 2000 })
+      )
+    },
+
+    open_album: function () {
+      this.$router.push({ path: '/music/spotify/albums/' + this.album.id })
+    },
+
+    open_artist: function () {
+      this.$router.push({ path: '/music/spotify/artists/' + this.album.artists[0].id })
+    }
+  }
+}
+</script>
+
+<style>
+</style>
diff --git a/web-src/src/pages/SpotifyPageAlbum.vue b/web-src/src/pages/SpotifyPageAlbum.vue
index 307cd98b..9bcb43df 100644
--- a/web-src/src/pages/SpotifyPageAlbum.vue
+++ b/web-src/src/pages/SpotifyPageAlbum.vue
@@ -11,7 +11,14 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.tracks.total }} tracks</p>
-      <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri"></spotify-list-item-track>
+      <spotify-list-item-track v-for="(track, index) in album.tracks.items" :key="track.id" :track="track" :position="index" :album="album" :context_uri="album.uri">
+        <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>
+      </spotify-list-item-track>
+      <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="album" @close="show_track_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -20,6 +27,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
+import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack'
 import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -39,11 +47,14 @@ const albumData = {
 export default {
   name: 'PageAlbum',
   mixins: [ LoadDataBeforeEnterMixin(albumData) ],
-  components: { ContentWithHeading, SpotifyListItemTrack },
+  components: { ContentWithHeading, SpotifyListItemTrack, SpotifyModalDialogTrack },
 
   data () {
     return {
-      album: {}
+      album: { artists: [{}], tracks: {} },
+
+      show_track_details_modal: false,
+      selected_track: {}
     }
   },
 
@@ -55,6 +66,11 @@ export default {
     play: function () {
       this.show_details_modal = false
       webapi.player_play_uri(this.album.uri, true)
+    },
+
+    open_track_dialog: function (track) {
+      this.selected_track = track
+      this.show_track_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageArtist.vue b/web-src/src/pages/SpotifyPageArtist.vue
index 7da70b89..9a970e66 100644
--- a/web-src/src/pages/SpotifyPageArtist.vue
+++ b/web-src/src/pages/SpotifyPageArtist.vue
@@ -5,8 +5,15 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ total }} albums</p>
-      <spotify-list-item-album v-for="album in albums" :key="album.id" :album="album"></spotify-list-item-album>
+      <spotify-list-item-album v-for="album in albums" :key="album.id" :album="album">
+        <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>
+      </spotify-list-item-album>
       <infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
+      <spotify-modal-dialog-album :show="show_details_modal" :album="selected_album" @close="show_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -15,6 +22,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
 import store from '@/store'
 import SpotifyWebApi from 'spotify-web-api-js'
 import InfiniteLoading from 'vue-infinite-loading'
@@ -42,14 +50,17 @@ const artistData = {
 export default {
   name: 'SpotifyPageArtist',
   mixins: [ LoadDataBeforeEnterMixin(artistData) ],
-  components: { ContentWithHeading, SpotifyListItemAlbum, InfiniteLoading },
+  components: { ContentWithHeading, SpotifyListItemAlbum, SpotifyModalDialogAlbum, InfiniteLoading },
 
   data () {
     return {
       artist: {},
       albums: [],
       total: 0,
-      offset: 0
+      offset: 0,
+
+      show_details_modal: false,
+      selected_album: {}
     }
   },
 
@@ -73,6 +84,11 @@ export default {
           $state.complete()
         }
       }
+    },
+
+    open_dialog: function (album) {
+      this.selected_album = album
+      this.show_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageBrowse.vue b/web-src/src/pages/SpotifyPageBrowse.vue
index 68b6eee4..c1def11b 100644
--- a/web-src/src/pages/SpotifyPageBrowse.vue
+++ b/web-src/src/pages/SpotifyPageBrowse.vue
@@ -8,7 +8,14 @@
         <p class="title is-4">New Releases</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
+        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :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>
+        </spotify-list-item-album>
+        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
       </template>
       <template slot="footer">
         <nav class="level">
@@ -27,7 +34,14 @@
         <p class="title is-4">Featured Playlists</p>
       </template>
       <template slot="content">
-        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :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>
+        </spotify-list-item-playlist>
+        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
       </template>
       <template slot="footer">
         <nav class="level">
@@ -48,6 +62,8 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
 import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
+import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
 import store from '@/store'
 import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -77,7 +93,17 @@ const browseData = {
 export default {
   name: 'SpotifyPageBrowse',
   mixins: [ LoadDataBeforeEnterMixin(browseData) ],
-  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist },
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist },
+
+  data () {
+    return {
+      show_album_details_modal: false,
+      selected_album: {},
+
+      show_playlist_details_modal: false,
+      selected_playlist: {}
+    }
+  },
 
   computed: {
     new_releases () {
@@ -87,6 +113,18 @@ export default {
     featured_playlists () {
       return this.$store.state.spotify_featured_playlists.slice(0, 3)
     }
+  },
+
+  methods: {
+    open_album_dialog: function (album) {
+      this.selected_album = album
+      this.show_album_details_modal = true
+    },
+
+    open_playlist_dialog: function (playlist) {
+      this.selected_playlist = playlist
+      this.show_playlist_details_modal = true
+    }
   }
 }
 </script>
diff --git a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
index 1c3546d6..8ceb7d7f 100644
--- a/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
+++ b/web-src/src/pages/SpotifyPageBrowseFeaturedPlaylists.vue
@@ -7,7 +7,14 @@
         <p class="title is-4">Featured Playlists</p>
       </template>
       <template slot="content">
-        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+        <spotify-list-item-playlist v-for="playlist in featured_playlists" :key="playlist.id" :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>
+        </spotify-list-item-playlist>
+        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -18,6 +25,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
 import store from '@/store'
 import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -43,12 +51,26 @@ const browseData = {
 export default {
   name: 'SpotifyPageBrowseFeaturedPlaylists',
   mixins: [ LoadDataBeforeEnterMixin(browseData) ],
-  components: { ContentWithHeading, TabsMusic, SpotifyListItemPlaylist },
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemPlaylist, SpotifyModalDialogPlaylist },
+
+  data () {
+    return {
+      show_playlist_details_modal: false,
+      selected_playlist: {}
+    }
+  },
 
   computed: {
     featured_playlists () {
       return this.$store.state.spotify_featured_playlists
     }
+  },
+
+  methods: {
+    open_playlist_dialog: function (playlist) {
+      this.selected_playlist = playlist
+      this.show_playlist_details_modal = true
+    }
   }
 }
 </script>
diff --git a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
index cbcb8184..5719396e 100644
--- a/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
+++ b/web-src/src/pages/SpotifyPageBrowseNewReleases.vue
@@ -7,7 +7,14 @@
         <p class="title is-4">New Releases</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album"></spotify-list-item-album>
+        <spotify-list-item-album v-for="album in new_releases" :key="album.id" :album="album">
+          <template slot="actions">
+            <a @click="open_album(album)">
+              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+            </a>
+          </template>
+        </spotify-list-item-album>
+        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -18,6 +25,7 @@ import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import TabsMusic from '@/components/TabsMusic'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
+import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
 import store from '@/store'
 import * as types from '@/store/mutation_types'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -43,12 +51,26 @@ const browseData = {
 export default {
   name: 'SpotifyPageBrowseNewReleases',
   mixins: [ LoadDataBeforeEnterMixin(browseData) ],
-  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum },
+  components: { ContentWithHeading, TabsMusic, SpotifyListItemAlbum, SpotifyModalDialogAlbum },
+
+  data () {
+    return {
+      show_album_details_modal: false,
+      selected_album: {}
+    }
+  },
 
   computed: {
     new_releases () {
       return this.$store.state.spotify_new_releases
     }
+  },
+
+  methods: {
+    open_album: function (album) {
+      this.selected_album = album
+      this.show_album_details_modal = true
+    }
   }
 }
 </script>
diff --git a/web-src/src/pages/SpotifyPagePlaylist.vue b/web-src/src/pages/SpotifyPagePlaylist.vue
index 801656d0..96b8ba93 100644
--- a/web-src/src/pages/SpotifyPagePlaylist.vue
+++ b/web-src/src/pages/SpotifyPagePlaylist.vue
@@ -10,8 +10,15 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ playlist.tracks.total }} tracks</p>
-      <spotify-list-item-track v-for="(item, index) in tracks" :key="item.track.id" :track="item.track" :album="item.track.album" :position="index" :context_uri="playlist.uri"></spotify-list-item-track>
+      <spotify-list-item-track v-for="(item, index) in tracks" :key="item.track.id" :track="item.track" :album="item.track.album" :position="index" :context_uri="playlist.uri">
+        <template slot="actions">
+          <a @click="open_track_dialog(item.track)">
+            <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+          </a>
+        </template>
+      </spotify-list-item-track>
       <infinite-loading v-if="offset < total" @infinite="load_next"><span slot="no-more">.</span></infinite-loading>
+      <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="selected_track.album" @close="show_track_details_modal = false" />
     </template>
   </content-with-heading>
 </template>
@@ -20,6 +27,7 @@
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
 import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
+import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack'
 import store from '@/store'
 import webapi from '@/webapi'
 import SpotifyWebApi from 'spotify-web-api-js'
@@ -47,14 +55,17 @@ const playlistData = {
 export default {
   name: 'SpotifyPagePlaylist',
   mixins: [ LoadDataBeforeEnterMixin(playlistData) ],
-  components: { ContentWithHeading, SpotifyListItemTrack, InfiniteLoading },
+  components: { ContentWithHeading, SpotifyListItemTrack, SpotifyModalDialogTrack, InfiniteLoading },
 
   data () {
     return {
-      playlist: {},
+      playlist: { tracks: {} },
       tracks: [],
       total: 0,
-      offset: 0
+      offset: 0,
+
+      show_track_details_modal: false,
+      selected_track: {}
     }
   },
 
@@ -83,6 +94,11 @@ export default {
     play: function () {
       this.show_details_modal = false
       webapi.player_play_uri(this.playlist.uri, true)
+    },
+
+    open_track_dialog: function (track) {
+      this.selected_track = track
+      this.show_track_details_modal = true
     }
   }
 }
diff --git a/web-src/src/pages/SpotifyPageSearch.vue b/web-src/src/pages/SpotifyPageSearch.vue
index cee35d9a..03014612 100644
--- a/web-src/src/pages/SpotifyPageSearch.vue
+++ b/web-src/src/pages/SpotifyPageSearch.vue
@@ -31,8 +31,15 @@
         <p class="title is-4">Tracks</p>
       </template>
       <template slot="content">
-        <spotify-list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :album="track.album" :position="0" :context_uri="track.uri"></spotify-list-item-track>
+        <spotify-list-item-track v-for="track in tracks.items" :key="track.id" :track="track" :album="track.album" :position="0" :context_uri="track.uri">
+          <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>
+        </spotify-list-item-track>
         <infinite-loading v-if="query.type === 'track'" @infinite="search_tracks_next"><span slot="no-more">.</span></infinite-loading>
+        <spotify-modal-dialog-track :show="show_track_details_modal" :track="selected_track" :album="selected_track.album" @close="show_track_details_modal = false" />
       </template>
       <template slot="footer">
         <nav v-if="show_all_tracks_button" class="level">
@@ -50,8 +57,15 @@
         <p class="title is-4">Artists</p>
       </template>
       <template slot="content">
-        <spotify-list-item-artist v-for="artist in artists.items" :key="artist.id" :artist="artist"></spotify-list-item-artist>
+        <spotify-list-item-artist v-for="artist in artists.items" :key="artist.id" :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>
+        </spotify-list-item-artist>
         <infinite-loading v-if="query.type === 'artist'" @infinite="search_artists_next"><span slot="no-more">.</span></infinite-loading>
+        <spotify-modal-dialog-artist :show="show_artist_details_modal" :artist="selected_artist" @close="show_artist_details_modal = false" />
       </template>
       <template slot="footer">
         <nav v-if="show_all_artists_button" class="level">
@@ -69,8 +83,15 @@
         <p class="title is-4">Albums</p>
       </template>
       <template slot="content">
-        <spotify-list-item-album v-for="album in albums.items" :key="album.id" :album="album"></spotify-list-item-album>
+        <spotify-list-item-album v-for="album in albums.items" :key="album.id" :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>
+        </spotify-list-item-album>
         <infinite-loading v-if="query.type === 'album'" @infinite="search_albums_next"><span slot="no-more">.</span></infinite-loading>
+        <spotify-modal-dialog-album :show="show_album_details_modal" :album="selected_album" @close="show_album_details_modal = false" />
       </template>
       <template slot="footer">
         <nav v-if="show_all_albums_button" class="level">
@@ -88,8 +109,15 @@
         <p class="title is-4">Playlists</p>
       </template>
       <template slot="content">
-        <spotify-list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist"></spotify-list-item-playlist>
+        <spotify-list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :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>
+        </spotify-list-item-playlist>
         <infinite-loading v-if="query.type === 'playlist'" @infinite="search_playlists_next"><span slot="no-more">.</span></infinite-loading>
+        <spotify-modal-dialog-playlist :show="show_playlist_details_modal" :playlist="selected_playlist" @close="show_playlist_details_modal = false" />
       </template>
       <template slot="footer">
         <nav v-if="show_all_playlists_button" class="level">
@@ -110,6 +138,10 @@ import SpotifyListItemTrack from '@/components/SpotifyListItemTrack'
 import SpotifyListItemArtist from '@/components/SpotifyListItemArtist'
 import SpotifyListItemAlbum from '@/components/SpotifyListItemAlbum'
 import SpotifyListItemPlaylist from '@/components/SpotifyListItemPlaylist'
+import SpotifyModalDialogTrack from '@/components/SpotifyModalDialogTrack'
+import SpotifyModalDialogArtist from '@/components/SpotifyModalDialogArtist'
+import SpotifyModalDialogAlbum from '@/components/SpotifyModalDialogAlbum'
+import SpotifyModalDialogPlaylist from '@/components/SpotifyModalDialogPlaylist'
 import SpotifyWebApi from 'spotify-web-api-js'
 import webapi from '@/webapi'
 import * as types from '@/store/mutation_types'
@@ -117,7 +149,7 @@ import InfiniteLoading from 'vue-infinite-loading'
 
 export default {
   name: 'SpotifyPageSearch',
-  components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, InfiniteLoading },
+  components: { ContentWithHeading, TabsSearch, SpotifyListItemTrack, SpotifyListItemArtist, SpotifyListItemAlbum, SpotifyListItemPlaylist, SpotifyModalDialogTrack, SpotifyModalDialogArtist, SpotifyModalDialogAlbum, SpotifyModalDialogPlaylist, InfiniteLoading },
 
   data () {
     return {
@@ -128,7 +160,19 @@ export default {
       playlists: { items: [], total: 0 },
 
       query: {},
-      search_param: {}
+      search_param: {},
+
+      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: {}
     }
   },
 
@@ -321,6 +365,26 @@ export default {
     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_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
     }
   },