[web-src] Make ListItemXXX functional components

web-src/src/components/ListItemArtist.vue

@@ -1,7 +1,7 @@
-<template>
+<template functional>
-  <div class="media" :id="'index_' + anchor">
+  <div class="media" :id="'index_' + props.anchor">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_artist">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ artist.name }}</h1>
+      <h1 class="title is-6">{{ props.artist.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,15 +12,7 @@
 <script>
 export default {
   name: 'ListItemArtist',
-  components: {},
+  props: ['artist', 'anchor']
-
-  props: ['artist', 'anchor'],
-
-  methods: {
-    open_artist: function () {
-      this.$router.push({ path: '/music/artists/' + this.artist.id })
-    }
-  }
 }
 </script>
 

web-src/src/components/ListItemGenre.vue

@@ -1,7 +1,7 @@
-<template>
+<template functional>
-  <div class="media" :id="'index_' + anchor">
+  <div class="media" :id="'index_' + props.anchor">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_genre">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ genre.name }}</h1>
+      <h1 class="title is-6">{{ props.genre.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,16 +12,7 @@
 <script>
 export default {
   name: 'ListItemGenre',
-  components: {},
+  props: [ 'genre', 'anchor' ]
-
-  props: [ 'genre', 'anchor' ],
-
-  methods: {
-    open_genre: function () {
-      this.show_details_modal = false
-      this.$router.push({ name: 'Genre', params: { genre: this.genre.name } })
-    }
-  }
 }
 </script>
 

web-src/src/components/ListItemPlaylist.vue

@@ -1,7 +1,7 @@
-<template>
+<template functional>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" v-on:click="open_playlist">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ playlist.name }}</h1>
+      <h1 class="title is-6">{{ props.playlist.name }}</h1>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,16 +12,7 @@
 <script>
 export default {
   name: 'ListItemPlaylist',
-  components: {},
+  props: ['playlist']
-
-  props: ['playlist'],
-
-  methods: {
-    open_playlist: function () {
-      this.show_details_modal = false
-      this.$router.push({ path: '/playlists/' + this.playlist.id })
-    }
-  }
 }
 </script>
 

web-src/src/components/ListItemTrack.vue

@@ -1,9 +1,9 @@
-<template>
+<template functional>
   <div class="media">
-    <div class="media-content fd-has-action is-clipped" v-on:click="play">
+    <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ track.title }}</h1>
+      <h1 class="title is-6">{{ props.track.title }}</h1>
-      <h2 class="subtitle is-7 has-text-grey"><b>{{ track.artist }}</b></h2>
+      <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
-      <h2 class="subtitle is-7 has-text-grey">{{ track.album }}</h2>
+      <h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
     </div>
     <div class="media-right">
       <slot name="actions"></slot>
@@ -12,24 +12,9 @@
 </template>
 
 <script>
-import webapi from '@/webapi'
-
 export default {
   name: 'ListItemTrack',
-  components: {},
+  props: ['track']
-
-  props: ['track', 'position', 'context_uri'],
-
-  data () {
-    return {
-    }
-  },
-
-  methods: {
-    play: function () {
-      webapi.player_play_uri(this.context_uri, false, this.position)
-    }
-  }
 }
 </script>
 

web-src/src/pages/PageAlbum.vue

@@ -18,7 +18,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
+      <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>
@@ -76,6 +76,10 @@ export default {
       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

web-src/src/pages/PageArtists.vue

@@ -19,12 +19,17 @@
         </a>
       </template>
       <template slot="content">
-        <list-item-artist v-for="(artist, index) in artists.items" :key="artist.id" :artist="artist" :anchor="anchor(artist, index)" v-if="!hide_singles || artist.track_count > (artist.album_count * 2)">
+        <list-item-artist v-for="(artist, index) in artists.items"
-          <template slot="actions">
+          :key="artist.id"
-            <a @click="open_dialog(artist)">
+          :artist="artist"
-              <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
+          :anchor="anchor(artist, index)"
-            </a>
+          @click="open_artist(artist)"
-          </template>
+          v-if="!hide_singles || artist.track_count > (artist.album_count * 2)">
+            <template slot="actions">
+              <a @click="open_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_details_modal" :artist="selected_artist" @close="show_details_modal = false" />
       </template>
@@ -87,6 +92,10 @@ export default {
       return artist.name_sort.charAt(0).toUpperCase()
     },
 
+    open_artist: function (artist) {
+      this.$router.push({ path: '/music/artists/' + artist.id })
+    },
+
     open_dialog: function (artist) {
       this.selected_artist = artist
       this.show_details_modal = true

web-src/src/pages/PageAudiobook.vue

@@ -14,7 +14,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
+      <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>
@@ -67,6 +67,10 @@ export default {
       webapi.player_play_uri(this.album.uri, false)
     },
 
+    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

web-src/src/pages/PageBrowse.vue

@@ -34,7 +34,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" :position="0" :context_uri="track.uri">
+        <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>
@@ -113,6 +113,10 @@ export default {
     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)
     }
   }
 }

web-src/src/pages/PageBrowseRecentlyPlayed.vue

@@ -8,7 +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" :position="0" :context_uri="track.uri">
+        <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>
@@ -61,6 +61,10 @@ export default {
     open_dialog: function (track) {
       this.selected_track = track
       this.show_details_modal = true
+    },
+
+    play_track: function (track) {
+      webapi.player_play_uri(track.uri, false)
     }
   }
 }

web-src/src/pages/PageGenreTracks.vue

@@ -11,7 +11,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" :position="index" :context_uri="tracks.items.map(a => a.uri).join(',')" :links="links">
+        <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>
@@ -51,7 +51,6 @@ export default {
     return {
       tracks: {},
       genre: '',
-      links: [],
 
       show_details_modal: false,
       selected_track: {}
@@ -68,6 +67,10 @@ export default {
       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

web-src/src/pages/PageGenres.vue

@@ -11,7 +11,7 @@
         <p class="heading">{{ genres.total }} genres</p>
       </template>
       <template slot="content">
-        <list-item-genre v-for="(genre, index) in genres.items" :key="genre.name" :genre="genre" :anchor="anchor(genre, index)">
+        <list-item-genre v-for="(genre, index) in genres.items" :key="genre.name" :genre="genre" :anchor="anchor(genre, index)" @click="open_genre(genre)">
           <template slot="actions">
             <a @click="open_dialog(genre)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -69,6 +69,10 @@ export default {
       return genre.name.charAt(0).toUpperCase()
     },
 
+    open_genre: function (genre) {
+      this.$router.push({ name: 'Genre', params: { genre: genre.name } })
+    },
+
     open_dialog: function (genre) {
       this.selected_genre = genre
       this.show_details_modal = true

web-src/src/pages/PagePlaylist.vue

@@ -10,7 +10,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" :position="index" :context_uri="playlist.uri">
+      <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>
@@ -63,6 +63,10 @@ export default {
       webapi.player_play_uri(this.playlist.uri, true)
     },
 
+    play_track: function (position) {
+      webapi.player_play_uri(this.playlist.uri, false, position)
+    },
+
     open_dialog: function (track) {
       this.selected_track = track
       this.show_details_modal = true

web-src/src/pages/PagePlaylists.vue

@@ -5,7 +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">
+      <list-item-playlist v-for="playlist in playlists.items" :key="playlist.id" :playlist="playlist" @click="open_playlist(playlist)">
         <template slot="actions">
           <a @click="open_dialog(playlist)">
             <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
@@ -50,6 +50,10 @@ export default {
   },
 
   methods: {
+    open_playlist: function (playlist) {
+      this.$router.push({ path: '/playlists/' + playlist.id })
+    },
+
     open_dialog: function (playlist) {
       this.selected_playlist = playlist
       this.show_details_modal = true

web-src/src/pages/PagePodcast.vue

@@ -13,7 +13,7 @@
     </template>
     <template slot="content">
       <p class="heading has-text-centered-mobile">{{ album.track_count }} tracks</p>
-      <list-item-track v-for="(track, index) in tracks" :key="track.id" :track="track" :position="index" :context_uri="album.uri">
+      <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>
@@ -66,6 +66,10 @@ export default {
       webapi.player_play_uri(this.album.uri, false)
     },
 
+    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

web-src/src/pages/PageSearch.vue

@@ -31,7 +31,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" :position="0" :context_uri="track.uri">
+        <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>
@@ -56,7 +56,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">
+        <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>
@@ -106,7 +106,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">
+        <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>
@@ -282,10 +282,22 @@ export default {
       })
     },
 
+    play_track: function (track) {
+      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 })
+    },
+
     open_recent_search: function (query) {
       this.search_query = query
       this.new_search()

web-src/src/pages/PageTracks.vue

@@ -11,7 +11,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" :position="index" :context_uri="tracks.items.map(a => a.uri).join(',')">
+        <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>
@@ -70,6 +70,10 @@ export default {
       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