[web-src] Show new (unplayed) episodes in podcasts page

web-src/src/components/ListItemTrack.vue

@@ -4,7 +4,7 @@
       <slot name="icon"></slot>
     </figure>
     <div class="media-content fd-has-action is-clipped" @click="listeners.click">
-      <h1 class="title is-6">{{ props.track.title }}</h1>
+      <h1 class="title is-6" :class="{ 'has-text-grey': props.track.media_kind === 'podcast' && props.track.play_count > 0 }">{{ props.track.title }}</h1>
       <h2 class="subtitle is-7 has-text-grey"><b>{{ props.track.artist }}</b></h2>
       <h2 class="subtitle is-7 has-text-grey">{{ props.track.album }}</h2>
     </div>

web-src/src/components/ModalDialogTrack.vue

@@ -12,6 +12,10 @@
               <p class="subtitle">
                 {{ track.artist }}
               </p>
+              <div class="buttons" v-if="track.media_kind === 'podcast'">
+                <a class="button is-small" v-if="track.play_count > 0" @click="mark_new">Mark as new</a>
+                <a class="button is-small" v-if="track.play_count === 0" @click="mark_played">Mark as played</a>
+              </div>
               <div class="content is-small">
                 <p>
                   <span class="heading">Album</span>
@@ -125,6 +129,16 @@ export default {
     open_artist: function () {
       this.$emit('close')
       this.$router.push({ path: '/music/artists/' + this.track.album_artist_id })
+    },
+
+    mark_new: function () {
+      this.$emit('close')
+      // TODO
+    },
+
+    mark_played: function () {
+      this.$emit('close')
+      // TODO
     }
   }
 }

web-src/src/pages/PagePodcast.vue

@@ -36,13 +36,13 @@ const albumData = {
   load: function (to) {
     return Promise.all([
       webapi.library_album(to.params.album_id),
-      webapi.library_album_tracks(to.params.album_id)
+      webapi.library_podcast_episodes(to.params.album_id)
     ])
   },
 
   set: function (vm, response) {
     vm.album = response[0].data
-    vm.tracks = response[1].data.items
+    vm.tracks = response[1].data.tracks.items
   }
 }
 

web-src/src/pages/PagePodcasts.vue

@@ -1,5 +1,21 @@
 <template>
   <div>
+    <content-with-heading v-if="new_episodes.items.length > 0">
+      <template slot="heading-left">
+        <p class="title is-4">New episodes</p>
+      </template>
+      <template slot="content">
+        <list-item-track v-for="track in new_episodes.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" />
+      </template>
+    </content-with-heading>
+
     <content-with-heading>
       <template slot="heading-left">
         <p class="title is-4">Podcasts</p>
@@ -8,12 +24,12 @@
       <template slot="content">
         <list-item-album v-for="album in albums.items" :key="album.id" :album="album" :media_kind="'podcast'" @click="open_album(album)">
           <template slot="actions">
-            <a @click="open_dialog(album)">
+            <a @click="open_album_dialog(album)">
               <span class="icon has-text-dark"><i class="mdi mdi-dots-vertical mdi-18px"></i></span>
             </a>
           </template>
         </list-item-album>
-        <modal-dialog-album :show="show_details_modal" :album="selected_album" :media_kind="'podcast'" @close="show_details_modal = false" />
+        <modal-dialog-album :show="show_album_details_modal" :album="selected_album" :media_kind="'podcast'" @close="show_album_details_modal = false" />
       </template>
     </content-with-heading>
   </div>
@@ -22,31 +38,41 @@
 <script>
 import { LoadDataBeforeEnterMixin } from './mixin'
 import ContentWithHeading from '@/templates/ContentWithHeading'
+import ListItemTrack from '@/components/ListItemTrack'
 import ListItemAlbum from '@/components/ListItemAlbum'
+import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import webapi from '@/webapi'
 
 const albumsData = {
   load: function (to) {
-    return webapi.library_podcasts()
+    return Promise.all([
+      webapi.library_podcasts(),
+      webapi.library_podcasts_new_episodes()
+    ])
   },
 
   set: function (vm, response) {
-    vm.albums = response.data
+    vm.albums = response[0].data
+    vm.new_episodes = response[1].data.tracks
   }
 }
 
 export default {
   name: 'PagePodcasts',
   mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
-  components: { ContentWithHeading, ListItemAlbum, ModalDialogAlbum },
+  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum },
 
   data () {
     return {
       albums: {},
+      new_episodes: { items: [] },
 
-      show_details_modal: false,
+      show_album_details_modal: false,
-      selected_album: {}
+      selected_album: {},
+
+      show_track_details_modal: false,
+      selected_track: {}
     }
   },
 
@@ -55,9 +81,18 @@ export default {
       this.$router.push({ path: '/podcasts/' + album.id })
     },
 
-    open_dialog: function (album) {
+    play_track: function (track) {
+      webapi.player_play_uri(track.uri, false)
+    },
+
+    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_details_modal = true
+      this.show_album_details_modal = true
     }
   }
 }

web-src/src/webapi/index.js

@@ -202,6 +202,26 @@ export default {
     return axios.get('/api/library/albums?media_kind=podcast')
   },
 
+  library_podcasts_new_episodes () {
+    var episodesParams = {
+      'type': 'tracks',
+      'expression': 'media_kind is podcast and play_count = 0 ORDER BY time_added DESC'
+    }
+    return axios.get('/api/search', {
+      params: episodesParams
+    })
+  },
+
+  library_podcast_episodes (albumId) {
+    var episodesParams = {
+      'type': 'tracks',
+      'expression': 'media_kind is podcast and songalbumid is "' + albumId + '" ORDER BY time_added DESC'
+    }
+    return axios.get('/api/search', {
+      params: episodesParams
+    })
+  },
+
   library_audiobooks () {
     return axios.get('/api/library/albums?media_kind=audiobook')
   },