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

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,
-      selected_album: {}
+      show_album_details_modal: false,
+      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
     }
   }
 }