Merge RSS feed modals into a universal one

2025-02-24 00:21:12 +01:00 · 2022-12-31 15:26:37 -06:00 · 2022-12-31 15:26:37 -06:00 · a364fe5031
commit a364fe5031
parent ca6765c8e7
6 changed files with 46 additions and 193 deletions
--- a/client/components/modals/rssfeed/CollectionModal.vue
+++ b/client/components/modals/rssfeed/CollectionModal.vue
@ -1,152 +0,0 @@
-<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>
--- a/client/components/modals/rssfeed/OpenCloseModal.vue
+++ b/client/components/modals/rssfeed/OpenCloseModal.vue
@ -37,17 +37,6 @@

 <script>
 export default {
-  props: {
-    value: Boolean,
-    libraryItem: {
-      type: Object,
-      default: () => null
-    },
-    feed: {
-      type: Object,
-      default: () => null
-    }
-  },
  data() {
    return {
      processing: false,
@ -68,23 +57,29 @@ export default {
  computed: {
    show: {
      get() {
-        return this.value
+        return this.$store.state.globals.showRSSFeedOpenCloseModal
      },
      set(val) {
-        this.$emit('input', val)
+        this.$store.commit('globals/setShowRSSFeedOpenCloseModal', val)
      }
    },
-    libraryItemId() {
-      return this.libraryItem.id
+    rssFeedEntity() {
+      return this.$store.state.globals.rssFeedEntity || {}
    },
-    media() {
-      return this.libraryItem.media || {}
+    entityId() {
+      return this.rssFeedEntity.id
    },
-    mediaMetadata() {
-      return this.media.metadata || {}
+    entityType() {
+      return this.rssFeedEntity.type
+    },
+    entityFeed() {
+      return this.rssFeedEntity.feed
+    },
+    hasEpisodesWithoutPubDate() {
+      return !!this.rssFeedEntity.hasEpisodesWithoutPubDate
    },
    title() {
-      return this.mediaMetadata.title
+      return this.rssFeedEntity.name
    },
    userIsAdminOrUp() {
      return this.$store.getters['user/getIsAdminOrUp']
@ -94,12 +89,6 @@ export default {
    },
    isHttp() {
      return window.origin.startsWith('http://')
-    },
-    episodes() {
-      return this.media.episodes || []
-    },
-    hasEpisodesWithoutPubDate() {
-      return this.episodes.some((ep) => !ep.pubDate)
    }
  },
  methods: {
@ -124,7 +113,7 @@ export default {

      console.log('Payload', payload)
      this.$axios
-        .$post(`/api/feeds/item/${this.libraryItemId}/open`, payload)
+        .$post(`/api/feeds/${this.entityType}/${this.entityId}/open`, payload)
        .then((data) => {
          console.log('Opened RSS Feed', data)
          this.currentFeed = data.feed
@ -155,9 +144,9 @@ export default {
        })
    },
    init() {
-      if (!this.libraryItem) return
-      this.newFeedSlug = this.libraryItem.id
-      this.currentFeed = this.feed
+      if (!this.entityId) return
+      this.newFeedSlug = this.entityId
+      this.currentFeed = this.entityFeed
    }
  },
  mounted() {}
--- a/client/layouts/default.vue
+++ b/client/layouts/default.vue
@ -18,6 +18,7 @@
    <modals-podcast-view-episode />
    <modals-authors-edit-modal />
    <modals-batch-quick-match-model />
+    <modals-rssfeed-open-close-modal />
    <prompt-confirm />
    <readers-reader />
  </div>
--- a/client/pages/collection/_id.vue
+++ b/client/pages/collection/_id.vue
@ -21,7 +21,7 @@

            <!-- 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-icon-btn icon="rss_feed" class="mx-0.5" :bg-color="rssFeed ? 'success' : 'primary'" outlined @click="showRSSFeedModal" />
            </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">
@ -42,8 +42,6 @@
    <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>

@ -74,8 +72,7 @@ export default {
  },
  data() {
    return {
-      processing: false,
-      showRssFeedModal: false
+      processing: false
    }
  },
  computed: {
@ -140,8 +137,13 @@ export default {
    }
  },
  methods: {
-    clickRSSFeed() {
-      this.showRssFeedModal = true
+    showRSSFeedModal() {
+      this.$store.commit('globals/setRSSFeedOpenCloseModal', {
+        id: this.collectionId,
+        name: this.collectionName,
+        type: 'collection',
+        feed: this.rssFeed
+      })
    },
    contextMenuAction(action) {
      if (action === 'delete') {
@ -149,7 +151,7 @@ export default {
      } else if (action === 'create-playlist') {
        this.createPlaylistFromCollection()
      } else if (action === 'open-rss-feed') {
-        this.showRssFeedModal = true
+        this.showRSSFeedModal()
      }
    },
    createPlaylistFromCollection() {
--- a/client/pages/item/_id/index.vue
+++ b/client/pages/item/_id/index.vue
@ -200,7 +200,6 @@
    </div>

    <modals-podcast-episode-feed v-model="showPodcastEpisodeFeed" :library-item="libraryItem" :episodes="podcastFeedEpisodes" />
-    <modals-rssfeed-view-modal v-model="showRssFeedModal" :library-item="libraryItem" :feed="rssFeed" />
    <modals-bookmarks-modal v-model="showBookmarksModal" :bookmarks="bookmarks" :library-item-id="libraryItemId" hide-create @select="selectBookmark" />
  </div>
 </template>
@ -235,7 +234,6 @@ export default {
      podcastFeedEpisodes: [],
      episodesDownloading: [],
      episodeDownloadsQueued: [],
-      showRssFeedModal: false,
      showBookmarksModal: false
    }
  },
@ -633,7 +631,13 @@ export default {
      this.$store.commit('globals/setShowPlaylistsModal', true)
    },
    clickRSSFeed() {
-      this.showRssFeedModal = true
+      this.$store.commit('globals/setRSSFeedOpenCloseModal', {
+        id: this.libraryItemId,
+        name: this.title,
+        type: 'item',
+        feed: this.rssFeed,
+        hasEpisodesWithoutPubDate: this.podcastEpisodes.some((ep) => !ep.pubDate)
+      })
    },
    episodeDownloadQueued(episodeDownload) {
      if (episodeDownload.libraryItemId === this.libraryItemId) {
--- a/client/store/globals.js
+++ b/client/store/globals.js
@ -8,9 +8,11 @@ export const state = () => ({
  showEditPlaylistModal: false,
  showEditPodcastEpisode: false,
  showViewPodcastEpisodeModal: false,
+  showRSSFeedOpenCloseModal: false,
  showConfirmPrompt: false,
  confirmPromptOptions: null,
  showEditAuthorModal: false,
+  rssFeedEntity: null,
  selectedEpisode: null,
  selectedPlaylistItems: null,
  selectedPlaylist: null,
@ -99,6 +101,13 @@ export const mutations = {
  setShowViewPodcastEpisodeModal(state, val) {
    state.showViewPodcastEpisodeModal = val
  },
+  setShowRSSFeedOpenCloseModal(state, val) {
+    state.showRSSFeedOpenCloseModal = val
+  },
+  setRSSFeedOpenCloseModal(state, entity) {
+    state.rssFeedEntity = entity
+    state.showRSSFeedOpenCloseModal = true
+  },
  setShowConfirmPrompt(state, val) {
    state.showConfirmPrompt = val
  },