Add:Open RSS feed for collection #606 #1265

client/components/modals/rssfeed/CollectionModal.vue

@@ -0,0 +1,152 @@
+<template>
+  <modals-modal v-model="show" name="rss-feed-modal" :width="600" :height="'unset'" :processing="processing">
+    <template #outer>
+      <div class="absolute top-0 left-0 p-5 w-2/3 overflow-hidden">
+        <p class="font-book text-3xl text-white truncate">{{ title }}</p>
+      </div>
+    </template>
+    <div ref="wrapper" class="px-8 py-6 w-full text-sm rounded-lg bg-bg shadow-lg border border-black-300 relative overflow-hidden">
+      <div v-if="currentFeed" class="w-full">
+        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderRSSFeedIsOpen }}</p>
+
+        <div class="w-full relative">
+          <ui-text-input v-model="currentFeed.feedUrl" readonly />
+
+          <span class="material-icons absolute right-2 bottom-2 p-0.5 text-base transition-transform duration-100 text-gray-300 hover:text-white transform hover:scale-125 cursor-pointer" @click="copyToClipboard(currentFeed.feedUrl)">content_copy</span>
+        </div>
+      </div>
+      <div v-else class="w-full">
+        <p class="text-lg font-semibold mb-4">{{ $strings.HeaderOpenRSSFeed }}</p>
+
+        <div class="w-full relative mb-2">
+          <ui-text-input-with-label v-model="newFeedSlug" :label="$strings.LabelRSSFeedSlug" />
+          <p class="text-xs text-gray-400 py-0.5 px-1">{{ $getString('MessageFeedURLWillBe', [demoFeedUrl]) }}</p>
+        </div>
+
+        <p v-if="isHttp" class="w-full pt-2 text-warning text-xs">{{ $strings.NoteRSSFeedPodcastAppsHttps }}</p>
+      </div>
+      <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
+        <div class="flex-grow" />
+        <ui-btn v-if="currentFeed" color="error" small @click="closeFeed">{{ $strings.ButtonCloseFeed }}</ui-btn>
+        <ui-btn v-else color="success" small @click="openFeed">{{ $strings.ButtonOpenFeed }}</ui-btn>
+      </div>
+    </div>
+  </modals-modal>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    collection: {
+      type: Object,
+      default: () => null
+    },
+    feed: {
+      type: Object,
+      default: () => null
+    }
+  },
+  data() {
+    return {
+      processing: false,
+      newFeedSlug: null,
+      currentFeed: null
+    }
+  },
+  watch: {
+    show: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          this.init()
+        }
+      }
+    }
+  },
+  computed: {
+    show: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', val)
+      }
+    },
+    collectionId() {
+      return this.collection.id
+    },
+    title() {
+      return this.collection.name
+    },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
+    demoFeedUrl() {
+      return `${window.origin}/feed/${this.newFeedSlug}`
+    },
+    isHttp() {
+      return window.origin.startsWith('http://')
+    }
+  },
+  methods: {
+    openFeed() {
+      if (!this.newFeedSlug) {
+        this.$toast.error('Must set a feed slug')
+        return
+      }
+
+      const sanitized = this.$sanitizeSlug(this.newFeedSlug)
+      if (this.newFeedSlug !== sanitized) {
+        this.newFeedSlug = sanitized
+        this.$toast.warning('Slug had to be modified - Run again')
+        return
+      }
+
+      const payload = {
+        serverAddress: window.origin,
+        slug: this.newFeedSlug
+      }
+      if (this.$isDev) payload.serverAddress = `http://localhost:3333${this.$config.routerBasePath}`
+
+      console.log('Payload', payload)
+      this.$axios
+        .$post(`/api/feeds/collection/${this.collectionId}/open`, payload)
+        .then((data) => {
+          console.log('Opened RSS Feed', data)
+          this.currentFeed = data.feed
+        })
+        .catch((error) => {
+          console.error('Failed to open RSS Feed', error)
+          const errorMsg = error.response ? error.response.data : null
+          this.$toast.error(errorMsg || 'Failed to open RSS Feed')
+        })
+    },
+    copyToClipboard(str) {
+      this.$copyToClipboard(str, this)
+    },
+    closeFeed() {
+      this.processing = true
+      this.$axios
+        .$post(`/api/feeds/${this.currentFeed.id}/close`)
+        .then(() => {
+          this.$toast.success(this.$strings.ToastRSSFeedCloseSuccess)
+          this.show = false
+        })
+        .catch((error) => {
+          console.error('Failed to close RSS feed', error)
+          this.$toast.error(this.$strings.ToastRSSFeedCloseFailed)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    init() {
+      if (!this.collection) return
+      this.newFeedSlug = this.collectionId
+      this.currentFeed = this.feed
+    }
+  },
+  mounted() {}
+}
+</script>

client/pages/collection/_id.vue

@@ -19,6 +19,11 @@
               {{ streaming ? $strings.ButtonPlaying : $strings.ButtonPlay }}
             </ui-btn>
 
+             <!-- RSS feed -->
+            <ui-tooltip v-if="rssFeed" :text="$strings.LabelOpenRSSFeed" direction="top">
+              <ui-icon-btn icon="rss_feed" class="mx-0.5" :bg-color="rssFeed ? 'success' : 'primary'" outlined @click="clickRSSFeed" />
+            </ui-tooltip>
+
             <button type="button" class="h-9 w-9 flex items-center justify-center shadow-sm pl-3 pr-3 text-left focus:outline-none cursor-pointer text-gray-100 hover:text-gray-200 rounded-full hover:bg-white/5 mx-px" @click.stop.prevent="editClick">
               <span class="material-icons text-xl">edit</span>
             </button>
@@ -37,6 +42,8 @@
     <div v-show="processing" class="absolute top-0 left-0 w-full h-full z-10 bg-black bg-opacity-40 flex items-center justify-center">
       <ui-loading-indicator />
     </div>
+
+    <modals-rssfeed-collection-modal v-model="showRssFeedModal" :collection="collection" :feed="rssFeed" />
   </div>
 </template>
 
@@ -46,7 +53,7 @@ export default {
     if (!store.state.user.user) {
       return redirect(`/login?redirect=${route.path}`)
     }
-    var collection = await app.$axios.$get(`/api/collections/${params.id}`).catch((error) => {
+    const collection = await app.$axios.$get(`/api/collections/${params.id}?include=rssfeed`).catch((error) => {
       console.error('Failed', error)
       return false
     })
@@ -61,12 +68,14 @@ export default {
 
     store.commit('libraries/addUpdateCollection', collection)
     return {
-      collectionId: collection.id
+      collectionId: collection.id,
+      rssFeed: collection.rssFeed || null
     }
   },
   data() {
     return {
-      processing: false
+      processing: false,
+      showRssFeedModal: false
     }
   },
   computed: {
@@ -99,6 +108,9 @@ export default {
     showPlayButton() {
       return this.playableBooks.length
     },
+    userIsAdminOrUp() {
+      return this.$store.getters['user/getIsAdminOrUp']
+    },
     userCanUpdate() {
       return this.$store.getters['user/getUserCanUpdate']
     },
@@ -112,6 +124,12 @@ export default {
           action: 'create-playlist'
         }
       ]
+      if (this.userIsAdminOrUp) {
+        items.push({
+          text: this.$strings.LabelOpenRSSFeed,
+          action: 'open-rss-feed'
+        })
+      }
       if (this.userCanDelete) {
         items.push({
           text: this.$strings.ButtonDelete,
@@ -122,11 +140,16 @@ export default {
     }
   },
   methods: {
+    clickRSSFeed() {
+      this.showRssFeedModal = true
+    },
     contextMenuAction(action) {
       if (action === 'delete') {
         this.removeClick()
       } else if (action === 'create-playlist') {
         this.createPlaylistFromCollection()
+      } else if (action === 'open-rss-feed') {
+        this.showRssFeedModal = true
       }
     },
     createPlaylistFromCollection() {
@@ -206,9 +229,27 @@ export default {
           queueItems
         })
       }
+    },
+    rssFeedOpen(data) {
+      if (data.entityId === this.collectionId) {
+        console.log('RSS Feed Opened', data)
+        this.rssFeed = data
       }
     },
-  mounted() {},
+    rssFeedClosed(data) {
-  beforeDestroy() {}
+      if (data.entityId === this.collectionId) {
+        console.log('RSS Feed Closed', data)
+        this.rssFeed = null
+      }
+    }
+  },
+  mounted() {
+    this.$root.socket.on('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.on('rss_feed_closed', this.rssFeedClosed)
+  },
+  beforeDestroy() {
+    this.$root.socket.off('rss_feed_open', this.rssFeedOpen)
+    this.$root.socket.off('rss_feed_closed', this.rssFeedClosed)
+  }
 }
 </script>

server/controllers/CollectionController.js

@@ -26,7 +26,16 @@ class CollectionController {
   }
 
   findOne(req, res) {
-    res.json(req.collection.toJSONExpanded(this.db.libraryItems))
+    const includeEntities = (req.query.include || '').split(',')
+
+    const collectionExpanded = req.collection.toJSONExpanded(this.db.libraryItems)
+
+    if (includeEntities.includes('rssfeed')) {
+      const feedData = this.rssFeedManager.findFeedForEntityId(collectionExpanded.id)
+      collectionExpanded.rssFeed = feedData ? feedData.toJSONMinified() : null
+    }
+
+    res.json(collectionExpanded)
   }
 
   async update(req, res) {

server/controllers/LibraryItemController.js

@@ -21,7 +21,7 @@ class LibraryItemController {
       }
 
       if (includeEntities.includes('rssfeed')) {
-        const feedData = this.rssFeedManager.findFeedForItem(item.id)
+        const feedData = this.rssFeedManager.findFeedForEntityId(item.id)
         item.rssFeed = feedData ? feedData.toJSONMinified() : null
       }
 

server/managers/RssFeedManager.js

@@ -28,8 +28,8 @@ class RssFeedManager {
     }
   }
 
-  findFeedForItem(libraryItemId) {
+  findFeedForEntityId(entityId) {
-    return Object.values(this.feeds).find(feed => feed.entityId === libraryItemId)
+    return Object.values(this.feeds).find(feed => feed.entityId === entityId)
   }
 
   findFeed(feedId) {