[web-src] Refactor "remove podcast" handling

web-src/src/components/ModalDialog.vue

@@ -4,7 +4,25 @@
       <div class="modal is-active" v-if="show">
         <div class="modal-background" @click="$emit('close')"></div>
         <div class="modal-content fd-modal-card">
-          <slot name="modal-content"></slot>
+          <div class="card">
+            <div class="card-content">
+              <p class="title is-4" v-if="title">
+                {{ title }}
+              </p>
+              <slot name="modal-content"></slot>
+            </div>
+            <footer class="card-footer">
+              <a class="card-footer-item has-text-dark" @click="$emit('close')">
+                <span class="icon"><i class="mdi mdi-cancel"></i></span> <span class="is-size-7">Cancel</span>
+              </a>
+              <a v-if="delete_action" class="card-footer-item has-background-danger has-text-white has-text-weight-bold" @click="$emit('delete')">
+                <span class="icon"><i class="mdi mdi-delete"></i></span> <span class="is-size-7">{{ delete_action }}</span>
+              </a>
+              <a v-if="ok_action" class="card-footer-item has-background-info has-text-white has-text-weight-bold" @click="$emit('ok')">
+                <span class="icon"><i class="mdi mdi-check"></i></span> <span class="is-size-7">{{ ok_action }}</span>
+              </a>
+            </footer>
+          </div>
         </div>
         <button class="modal-close is-large" aria-label="close" @click="$emit('close')"></button>
       </div>
@@ -15,7 +33,7 @@
 <script>
 export default {
   name: 'ModalDialog',
-  props: ['show']
+  props: ['show', 'title', 'ok_action', 'delete_action']
 }
 </script>
 

web-src/src/components/ModalDialogAlbum.vue

@@ -12,8 +12,9 @@
               <p class="title is-4">
                 <a class="has-text-link" @click="open_album">{{ album.name }}</a>
               </p>
-              <div class="buttons" v-if="media_kind === 'podcast' && new_tracks > 0">
+              <div class="buttons" v-if="media_kind === 'podcast'">
-                <a class="button is-small" @click="mark_played">Mark as played</a>
+                <a class="button is-small" v-if="new_tracks > 0" @click="mark_played">Mark as played</a>
+                <a class="button is-small" @click="$emit('remove_podcast')">Remove podcast</a>
               </div>
               <div class="content is-small">
                 <p v-if="album.artist && media_kind !== 'audiobook'">

web-src/src/pages/PagePodcast.vue

@@ -2,12 +2,6 @@
   <content-with-heading>
     <template slot="heading-left">
       <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">
@@ -53,7 +47,19 @@
         :media_kind="'podcast'"
         :new_tracks="new_tracks"
         @close="show_album_details_modal = false"
-        @play_count_changed="reload_tracks" />
+        @play_count_changed="reload_tracks"
+        @remove_podcast="open_remove_podcast_dialog" />
+      <modal-dialog
+        :show="show_remove_podcast_modal"
+        title="Remove podcast"
+        delete_action="Remove"
+        @close="show_remove_podcast_modal = false"
+        @delete="remove_podcast">
+        <template slot="modal-content">
+          <p>Permanently remove this podcast from your library?</p>
+          <p class="is-size-7">(This will also remove the RSS playlist <b>{{ rss_playlist_to_remove.name }}</b>.)</p>
+        </template>
+      </modal-dialog>
     </template>
   </content-with-heading>
 </template>
@@ -64,6 +70,7 @@ import ContentWithHeading from '@/templates/ContentWithHeading'
 import ListItemTrack from '@/components/ListItemTrack'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
+import ModalDialog from '@/components/ModalDialog'
 import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
@@ -84,7 +91,7 @@ const albumData = {
 export default {
   name: 'PagePodcast',
   mixins: [LoadDataBeforeEnterMixin(albumData)],
-  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider, ModalDialogAlbum },
+  components: { ContentWithHeading, ListItemTrack, ModalDialogTrack, RangeSlider, ModalDialogAlbum, ModalDialog },
 
   data () {
     return {
@@ -94,7 +101,10 @@ export default {
       show_details_modal: false,
       selected_track: {},
 
-      show_album_details_modal: false
+      show_album_details_modal: false,
+
+      show_remove_podcast_modal: false,
+      rss_playlist_to_remove: {}
     }
   },
 
@@ -118,20 +128,25 @@ export default {
       this.show_details_modal = true
     },
 
-    rss_unsubscribe: function () {
+    open_remove_podcast_dialog: function () {
+      this.show_album_details_modal = false
       webapi.search({ type: 'playlist', query: this.album.name }).then(({ data }) => {
-        var plids = [...new Set(data.playlists.items
+        var playlists = data.playlists.items.filter(pl => pl.name === this.album.name && pl.type === 'rss')
-          .filter(pl => pl.name === this.album.name)
-          .map(pl => pl.id))]
 
-        if (plids.length === 1) {
+        if (playlists.length !== 1) {
-          plids.forEach(pl => {
+          this.$store.dispatch('add_notification', { text: 'Podcast cannot be removed. Probably it was not added as an RSS playlist.', type: 'danger' })
-            webapi.library_playlist_delete(pl)
+          return
-          })
-          this.$router.push({ path: '/podcasts' })
-        } else {
-          this.$store.dispatch('add_notification', { text: 'Failed to delete playlist, unable to find unique plid', type: 'danger' })
         }
+
+        this.rss_playlist_to_remove = playlists[0]
+        this.show_remove_podcast_modal = true
+      })
+    },
+
+    remove_podcast: function () {
+      this.show_remove_podcast_modal = false
+      webapi.library_playlist_delete(this.rss_playlist_to_remove.id).then(() => {
+        this.$router.replace({ path: '/podcasts' })
       })
     },
 

web-src/src/pages/PagePodcasts.vue

@@ -59,7 +59,24 @@
             </a>
           </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-album
+          :show="show_album_details_modal"
+          :album="selected_album"
+          :media_kind="'podcast'"
+          @close="show_album_details_modal = false"
+          @play_count_changed="reload_new_episodes"
+          @remove_podcast="open_remove_podcast_dialog" />
+        <modal-dialog
+          :show="show_remove_podcast_modal"
+          title="Remove podcast"
+          delete_action="Remove"
+          @close="show_remove_podcast_modal = false"
+          @delete="remove_podcast">
+          <template slot="modal-content">
+            <p>Permanently remove this podcast from your library?</p>
+            <p class="is-size-7">(This will also remove the RSS playlist <b>{{ rss_playlist_to_remove.name }}</b>.)</p>
+          </template>
+        </modal-dialog>
         <modal-dialog-add-rss :show="show_url_modal" @close="show_url_modal = false" @rss_change="reload_podcasts"/>
       </template>
     </content-with-heading>
@@ -74,6 +91,7 @@ import ListItemAlbum from '@/components/ListItemAlbum'
 import ModalDialogTrack from '@/components/ModalDialogTrack'
 import ModalDialogAlbum from '@/components/ModalDialogAlbum'
 import ModalDialogAddRss from '@/components/ModalDialogAddRss'
+import ModalDialog from '@/components/ModalDialog'
 import RangeSlider from 'vue-range-slider'
 import webapi from '@/webapi'
 
@@ -94,7 +112,7 @@ const albumsData = {
 export default {
   name: 'PagePodcasts',
   mixins: [LoadDataBeforeEnterMixin(albumsData)],
-  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, ModalDialogAddRss, RangeSlider },
+  components: { ContentWithHeading, ListItemTrack, ListItemAlbum, ModalDialogTrack, ModalDialogAlbum, ModalDialogAddRss, ModalDialog, RangeSlider },
 
   data () {
     return {
@@ -107,7 +125,10 @@ export default {
       show_url_modal: false,
 
       show_track_details_modal: false,
-      selected_track: {}
+      selected_track: {},
+
+      show_remove_podcast_modal: false,
+      rss_playlist_to_remove: {}
     }
   },
 
@@ -141,6 +162,28 @@ export default {
       this.show_url_modal = true
     },
 
+    open_remove_podcast_dialog: function () {
+      this.show_album_details_modal = false
+      webapi.search({ type: 'playlist', query: this.selected_album.name }).then(({ data }) => {
+        var playlists = data.playlists.items.filter(pl => pl.name === this.selected_album.name && pl.type === 'rss')
+
+        if (playlists.length !== 1) {
+          this.$store.dispatch('add_notification', { text: 'Podcast cannot be removed. Probably it was not added as an RSS playlist.', type: 'danger' })
+          return
+        }
+
+        this.rss_playlist_to_remove = playlists[0]
+        this.show_remove_podcast_modal = true
+      })
+    },
+
+    remove_podcast: function () {
+      this.show_remove_podcast_modal = false
+      webapi.library_playlist_delete(this.rss_playlist_to_remove.id).then(() => {
+        this.reload_podcasts()
+      })
+    },
+
     reload_new_episodes: function () {
       webapi.library_podcasts_new_episodes().then(({ data }) => {
         this.new_episodes = data.tracks