Update:Experimental RSS feed setting custom slugs with default to library item id #553

client/components/modals/rssfeed/ViewModal.vue

@@ -6,18 +6,27 @@
       </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 class="w-full">
+      <div v-if="currentFeedUrl" class="w-full">
         <p class="text-lg font-semibold mb-4">Podcast RSS Feed is Open</p>
 
         <div class="w-full relative">
-          <ui-text-input v-model="feedUrl" readonly />
+          <ui-text-input v-model="currentFeedUrl" 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(feedUrl)">content_copy</span>
+          <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(currentFeedUrl)">content_copy</span>
+        </div>
+      </div>
+      <div v-else class="w-full">
+        <p class="text-lg font-semibold mb-4">Open RSS Feed</p>
+
+        <div class="w-full relative">
+          <ui-text-input-with-label v-model="newFeedSlug" label="RSS Feed Slug" />
+          <p class="text-xs text-gray-400 py-0.5 px-1">Feed will be {{ demoFeedUrl }}</p>
         </div>
       </div>
       <div v-show="userIsAdminOrUp" class="flex items-center pt-6">
         <div class="flex-grow" />
-        <ui-btn color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
+        <ui-btn v-if="currentFeedUrl" color="error" small @click="closeFeed">Close RSS Feed</ui-btn>
+        <ui-btn v-else color="success" small @click="openFeed">Open RSS Feed</ui-btn>
       </div>
     </div>
   </modals-modal>
@@ -35,7 +44,9 @@ export default {
   },
   data() {
     return {
-      processing: false
+      processing: false,
+      newFeedSlug: null,
+      currentFeedUrl: null
     }
   },
   watch: {
@@ -57,6 +68,9 @@ export default {
         this.$emit('input', val)
       }
     },
+    libraryItemId() {
+      return this.libraryItem.id
+    },
     media() {
       return this.libraryItem.media || {}
     },
@@ -68,9 +82,48 @@ export default {
     },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
+    },
+    demoFeedUrl() {
+      return `${window.origin}/feed/${this.newFeedSlug}`
     }
   },
   methods: {
+    openFeed() {
+      if (!this.newFeedSlug) {
+        this.$toast.error('Must set a feed slug')
+        return
+      }
+
+      var 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'
+
+      console.log('Payload', payload)
+      this.$axios
+        .$post(`/api/podcasts/${this.libraryItemId}/open-feed`, payload)
+        .then((data) => {
+          if (data.success) {
+            console.log('Opened RSS Feed', data)
+            this.currentFeedUrl = data.feedUrl
+          } else {
+            const errorMsg = data.error || 'Unknown error'
+            this.$toast.error(errorMsg)
+          }
+        })
+        .catch((error) => {
+          console.error('Failed to open RSS Feed', error)
+          this.$toast.error()
+        })
+    },
     copyToClipboard(str) {
       this.$copyToClipboard(str, this)
     },
@@ -89,7 +142,11 @@ export default {
           this.$toast.error()
         })
     },
-    init() {}
+    init() {
+      if (!this.libraryItem) return
+      this.newFeedSlug = this.libraryItem.id
+      this.currentFeedUrl = this.feedUrl
+    }
   },
   mounted() {}
 }