[web-src] RSS feed maintainence updates to podcast pages and new add/remove RSS modal

web-src/src/components/ModalDialogAddRss.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">RSS feed</p>
+              <form class="fd-has-margin-bottom">
+                <div class="field">
+                  <p class="control is-expanded has-icons-left">
+                    <input class="input is-shadowless" type="text" placeholder="http://url-to-rss" v-model="url" :disabled="loading" ref="url_field">
+                    <span class="icon is-left">
+                      <i class="mdi mdi-rss-box"></i>
+                    </span>
+                  </p>
+                </div>
+              </form>
+            </div>
+            <footer class="card-footer" v-if="loading">
+              <a class="card-footer-item has-text-dark">
+                <span class="icon"><i class="mdi mdi-web"></i></span> <span class="is-size-7">Processing ...</span>
+              </a>
+            </footer>
+            <footer class="card-footer" v-else>
+              <a class="card-footer-item has-text-danger" @click="$emit('close')">
+                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">Cancel</span>
+              </a>
+              <a class="card-footer-item has-text-dark" @click="add_stream">
+                <span class="icon"><i class="mdi mdi-playlist-plus"></i></span> <span class="is-size-7">Add</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: 'ModalDialogAddRss',
+  props: [ 'show' ],
+
+  data () {
+    return {
+      url: '',
+      loading: false
+    }
+  },
+
+  methods: {
+    add_stream: function () {
+      this.loading = true
+      webapi.library_add(this.url).then(() => {
+        this.$emit('close')
+        this.$emit('rss_change')
+        this.url = ''
+      }).catch(() => {
+        this.loading = false
+      })
+    }
+  },
+
+  watch: {
+    'show' () {
+      if (this.show) {
+        this.loading = false
+
+        // We need to delay setting the focus to the input field until the field is part of the dom and visible
+        setTimeout(() => {
+          this.$refs.url_field.focus()
+        }, 10)
+      }
+    }
+  }
+}
+</script>
+
+<style>
+</style>

web-src/src/components/NavbarTop.vue

@@ -7,7 +7,7 @@
       <navbar-item-link to="/music">
         <span class="icon"><i class="mdi mdi-music"></i></span>
       </navbar-item-link>
-      <navbar-item-link to="/podcasts" v-if="podcasts.tracks > 0">
+      <navbar-item-link to="/podcasts">
         <span class="icon"><i class="mdi mdi-microphone"></i></span>
       </navbar-item-link>
       <navbar-item-link to="/audiobooks" v-if="audiobooks.tracks > 0">

web-src/src/pages/PagePlaylists.vue

@@ -8,7 +8,7 @@
       <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-folder': playlist.type === 'folder' }"></i>
+            <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">

web-src/src/pages/PagePodcast.vue

@@ -1,10 +1,23 @@
 <template>
   <content-with-heading>
     <template slot="heading-left">
-      <div class="title is-4">{{ album.name }}</div>
-    </template>
+      <div class="title is-4">{{ album.name }}
+        <a class="button is-small is-danger is-outlined" @click="rss_unsubscribe">
+          <span class="icon">
+            <i class="mdi mdi-bookmark-remove"></i>
+          </span>
+          <span>Unsubscribe</span>
+        </a>
+      </div>
+     </template>
     <template slot="heading-right">
       <div class="buttons is-centered">
+        <a class="button is-small" @click="mark_all_played" v-if="unplayed">
+          <span class="icon">
+            <i class="mdi mdi-pencil"></i>
+          </span>
+          <span>Mark All Played</span>
+        </a>
         <a class="button is-small is-light is-rounded" @click="show_album_details_modal = true">
           <span class="icon"><i class="mdi mdi-dots-horizontal mdi-18px"></i></span>
         </a>
@@ -61,6 +74,7 @@ const albumData = {
   set: function (vm, response) {
     vm.album = response[0].data
     vm.tracks = response[1].data.tracks.items
+    vm.unplayed = !vm.tracks.every(track => track.play_count > 0)
   }
 }
 
@@ -73,6 +87,7 @@ export default {
     return {
       album: {},
       tracks: [],
+      unplayed: false,
 
       show_details_modal: false,
       selected_track: {},
@@ -90,11 +105,39 @@ export default {
       webapi.player_play_uri(track.uri, false)
     },
 
+    mark_all_played: function () {
+      webapi.library_album_track_update(this.album.id, { 'play_count': 'played' }).then(({ data }) => (
+        this.tracks.forEach(track => {
+          if (track.play_count === 0) {
+            track.play_count = 1
+          }
+        })
+      ))
+      this.unplayed = false
+    },
+
     open_dialog: function (track) {
       this.selected_track = track
       this.show_details_modal = true
     },
 
+    rss_unsubscribe: function () {
+      webapi.search({ type: 'playlist', query: this.album.name }).then(({ data }) => {
+        var plids = [...new Set(data.playlists.items
+          .filter(pl => pl.name === this.album.name)
+          .map(pl => pl.id))]
+
+        if (plids.length === 1) {
+          plids.forEach(pl => {
+            webapi.library_playlist_delete(pl)
+          })
+          this.$router.push({ path: '/podcasts' })
+        } else {
+          this.$store.dispatch('add_notification', { text: 'Failed to delete playlist, unable to find unique plid', type: 'danger' })
+        }
+      })
+    },
+
     reload_tracks: function () {
       webapi.library_podcast_episodes(this.album.id).then(({ data }) => {
         this.tracks = data.tracks.items

web-src/src/pages/PagePodcasts.vue

@@ -4,7 +4,17 @@
       <template slot="heading-left">
         <p class="title is-4">New episodes</p>
       </template>
-      <template slot="content">
+      <template slot="heading-right">
+      <div class="buttons is-centered">
+        <a class="button is-small" @click="mark_all_played">
+          <span class="icon">
+            <i class="mdi mdi-pencil"></i>
+          </span>
+          <span>Mark All Played</span>
+        </a>
+      </div>
+    </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="progress">
             <range-slider
@@ -31,6 +41,16 @@
         <p class="title is-4">Podcasts</p>
         <p class="heading">{{ albums.total }} podcasts</p>
       </template>
+      <template slot="heading-right">
+        <div class="buttons is-centered">
+          <a class="button is-small" @click="open_add_stream_dialog">
+            <span class="icon">
+              <i class="mdi mdi-rss"></i>
+            </span>
+            <span>RSS Subscriptions</span>
+          </a>
+        </div>
+      </template>
       <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">
@@ -40,6 +60,7 @@
           </template>
         </list-item-album>
         <modal-dialog-album :show="show_album_details_modal" :album="selected_album" :media_kind="'podcast'" @close="show_album_details_modal = false" />
+        <modal-dialog-add-rss :show="show_url_modal" @close="show_url_modal = false" @rss_change="reload_podcasts"/>
       </template>
     </content-with-heading>
   </div>
@@ -52,6 +73,7 @@ import ListItemTrack from '@/components/ListItemTrack'
 import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ModalDialogAddRss from '@/components/ModalDialogAddRss'
 import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
@@ -72,7 +94,7 @@ const albumsData = {
 export default {
   name: 'PagePodcasts',
   mixins: [ LoadDataBeforeEnterMixin(albumsData) ],
-  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, RangeSlider },
+  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, ModalDialogAddRss, RangeSlider },
 
   data () {
     return {
@@ -82,6 +104,8 @@ export default {
       show_album_details_modal: false,
       selected_album: {},
 
+      show_url_modal: false,
+
       show_track_details_modal: false,
       selected_track: {}
     }
@@ -106,10 +130,28 @@ export default {
       this.show_album_details_modal = true
     },
 
+    mark_all_played: function () {
+      this.new_episodes.items.forEach(ep => {
+        webapi.library_track_update(ep.id, { 'play_count': 'increment' })
+      })
+      this.new_episodes.items = { }
+    },
+
+    open_add_stream_dialog: function (item) {
+      this.show_url_modal = true
+    },
+
     reload_new_episodes: function () {
       webapi.library_podcasts_new_episodes().then(({ data }) => {
         this.new_episodes = data.tracks
       })
+    },
+
+    reload_podcasts: function () {
+      webapi.library_podcasts().then(({ data }) => {
+        this.albums = data
+        this.reload_new_episodes()
+      })
     }
   }
 }

web-src/src/webapi/index.js

@@ -217,6 +217,10 @@ export default {
     return axios.get('/api/library/albums/' + albumId + '/tracks')
   },
 
+  library_album_track_update (albumId, attributes) {
+    return axios.put('/api/library/albums/' + albumId + '/tracks', undefined, { params: attributes })
+  },
+
   library_genres () {
     return axios.get('/api/library/genres')
   },
@@ -279,6 +283,14 @@ export default {
     })
   },
 
+  library_add (url) {
+    return axios.post('/api/library/add', undefined, { params: { 'url': url } })
+  },
+
+  library_playlist_delete (playlistId) {
+    return axios.delete('/api/library/playlists/' + playlistId, undefined)
+  },
+
   library_audiobooks () {
     return axios.get('/api/library/albums?media_kind=audiobook')
   },