Add custom metadata provider controller, update model, move to item metadata utils

client/components/app/ConfigSideNav.vue

@@ -109,11 +109,6 @@ export default {
           id: 'config-authentication',
           title: this.$strings.HeaderAuthentication,
           path: '/config/authentication'
-        },
-        {
-          id: 'config-custom-metadata-providers',
-          title: this.$strings.HeaderCustomMetadataProviders,
-          path: '/config/custom-metadata-providers'
         }
       ]
 

client/components/app/SettingsContent.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="bg-bg rounded-md shadow-lg border border-white border-opacity-5 p-4 mb-8">
     <div class="flex items-center mb-2">
+      <slot name="header-prefix"></slot>
       <h1 class="text-xl">{{ headerText }}</h1>
 
       <slot name="header-items"></slot>

client/components/modals/AddCustomMetadataProviderModal.vue

@@ -6,18 +6,23 @@
       </div>
     </template>
     <form @submit.prevent="submitForm">
-      <div class="px-4 w-full text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
+      <div class="px-4 w-full flex items-center text-sm py-6 rounded-lg bg-bg shadow-lg border border-black-300 overflow-y-auto overflow-x-hidden" style="min-height: 400px; max-height: 80vh">
         <div class="w-full p-8">
-          <div class="w-full mb-4">
-            <ui-text-input-with-label v-model="newName" :label="$strings.LabelName" />
+          <div class="flex mb-2">
+            <div class="w-3/4 p-1">
+              <ui-text-input-with-label v-model="newName" :label="$strings.LabelName" />
+            </div>
+            <div class="w-1/4 p-1">
+              <ui-text-input-with-label value="Book" readonly :label="$strings.LabelMediaType" />
+            </div>
           </div>
-          <div class="w-full mb-4">
-            <ui-text-input-with-label v-model="newUrl" :label="$strings.LabelUrl" />
+          <div class="w-full mb-2 p-1">
+            <ui-text-input-with-label v-model="newUrl" label="URL" />
           </div>
-          <div class="w-full mb-4">
-            <ui-text-input-with-label v-model="newApiKey" :label="$strings.LabelApiKey" type="password" />
+          <div class="w-full mb-2 p-1">
+            <ui-text-input-with-label v-model="newAuthHeaderValue" :label="'Authorization Header Value'" type="password" />
           </div>
-          <div class="flex pt-4 px-2">
+          <div class="flex px-1 pt-4">
             <div class="flex-grow" />
             <ui-btn color="success" type="submit">{{ $strings.ButtonAdd }}</ui-btn>
           </div>
@@ -30,14 +35,14 @@
 <script>
 export default {
   props: {
-    value: Boolean,
+    value: Boolean
   },
   data() {
     return {
       processing: false,
-      newName: "",
-      newUrl: "",
-      newApiKey: "",
+      newName: '',
+      newUrl: '',
+      newAuthHeaderValue: ''
     }
   },
   watch: {
@@ -57,46 +62,42 @@ export default {
       set(val) {
         this.$emit('input', val)
       }
-    },
+    }
   },
   methods: {
-    close() {
-      // Force close when navigating - used in the table
-      if (this.$refs.modal) this.$refs.modal.setHide()
-    },
     submitForm() {
-      if (!this.newName || !this.newUrl || !this.newApiKey) {
-        this.$toast.error('Must add name, url and API key')
+      if (!this.newName || !this.newUrl) {
+        this.$toast.error('Must add name and url')
         return
       }
 
       this.processing = true
       this.$axios
-          .$patch('/api/custom-metadata-providers/admin', {
-            name: this.newName,
-            url: this.newUrl,
-            apiKey: this.newApiKey,
-          })
-          .then((data) => {
-            this.processing = false
-            if (data.error) {
-              this.$toast.error(`Failed to add provider: ${data.error}`)
-            } else {
-              this.$toast.success('New provider added')
-              this.show = false
-            }
-          })
-          .catch((error) => {
-            this.processing = false
-            console.error('Failed to add provider', error)
-            this.$toast.error('Failed to add provider')
-          })
+        .$post('/api/custom-metadata-providers', {
+          name: this.newName,
+          url: this.newUrl,
+          mediaType: 'book', // Currently only supporting book mediaType
+          authHeaderValue: this.newAuthHeaderValue
+        })
+        .then((data) => {
+          this.$emit('added', data.provider)
+          this.$toast.success('New provider added')
+          this.show = false
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Unknown error'
+          console.error('Failed to add provider', error)
+          this.$toast.error('Failed to add provider: ' + errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
     },
     init() {
       this.processing = false
-      this.newName = ""
-      this.newUrl = ""
-      this.newApiKey = ""
+      this.newName = ''
+      this.newUrl = ''
+      this.newAuthHeaderValue = ''
     }
   },
   mounted() {}

client/components/modals/item/tabs/Match.vue

@@ -328,6 +328,17 @@ export default {
         console.error('PersistProvider', error)
       }
     },
+    getDefaultBookProvider() {
+      let provider = localStorage.getItem('book-provider')
+      if (!provider) return 'google'
+      // Validate book provider
+      if (!this.$store.getters['scanners/checkBookProviderExists'](provider)) {
+        console.error('Stored book provider does not exist', provider)
+        localStorage.removeItem('book-provider')
+        return 'google'
+      }
+      return provider
+    },
     getSearchQuery() {
       if (this.isPodcast) return `term=${encodeURIComponent(this.searchTitle)}`
       var searchQuery = `provider=${this.provider}&fallbackTitleOnly=1&title=${encodeURIComponent(this.searchTitle)}`
@@ -434,7 +445,9 @@ export default {
       this.searchTitle = this.libraryItem.media.metadata.title
       this.searchAuthor = this.libraryItem.media.metadata.authorName || ''
       if (this.isPodcast) this.provider = 'itunes'
-      else this.provider = localStorage.getItem('book-provider') || 'google'
+      else {
+        this.provider = this.getDefaultBookProvider()
+      }
 
       // Prefer using ASIN if set and using audible provider
       if (this.provider.startsWith('audible') && this.libraryItem.media.metadata.asin) {

client/components/tables/CustomMetadataProviderTable.vue

@@ -1,96 +1,73 @@
 <template>
-  <div>
-    <div class="text-center">
-      <table id="providers">
-        <tr>
-          <th>{{ $strings.LabelName }}</th>
-          <th>{{ $strings.LabelUrl }}</th>
-          <th>{{ $strings.LabelApiKey }}</th>
-          <th class="w-12"></th>
-        </tr>
-        <tr v-for="provider in providers" :key="provider.id">
-          <td class="text-sm">{{ provider.name }}</td>
-          <td class="text-sm">{{ provider.url }}</td>
-          <td class="text-sm">
-            <span class="custom-provider-api-key">{{ provider.apiKey }}</span>
-          </td>
-          <td class="py-0">
-            <div class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="removeProvider(provider)">
-              <button type="button" :aria-label="$strings.ButtonDelete" class="material-icons text-base">delete</button>
-            </div>
-          </td>
-        </tr>
-      </table>
+  <div class="min-h-40">
+    <table v-if="providers.length" id="providers">
+      <tr>
+        <th>{{ $strings.LabelName }}</th>
+        <th>URL</th>
+        <th>Authorization Header Value</th>
+        <th class="w-12"></th>
+      </tr>
+      <tr v-for="provider in providers" :key="provider.id">
+        <td class="text-sm">{{ provider.name }}</td>
+        <td class="text-sm">{{ provider.url }}</td>
+        <td class="text-sm">
+          <span v-if="provider.authHeaderValue" class="custom-provider-api-key">{{ provider.authHeaderValue }}</span>
+        </td>
+        <td class="py-0">
+          <div class="h-8 w-8 flex items-center justify-center text-white text-opacity-50 hover:text-error cursor-pointer" @click.stop="removeProvider(provider)">
+            <button type="button" :aria-label="$strings.ButtonDelete" class="material-icons text-base">delete</button>
+          </div>
+        </td>
+      </tr>
+    </table>
+    <div v-else-if="!processing" class="text-center py-8">
+      <p class="text-lg">No custom metadata providers</p>
+    </div>
+
+    <div v-if="processing" class="absolute inset-0 h-full flex items-center justify-center bg-black/40 rounded-md">
+      <ui-loading-indicator />
     </div>
   </div>
 </template>
 
 <script>
 export default {
+  props: {
+    providers: {
+      type: Array,
+      default: () => []
+    },
+    processing: Boolean
+  },
   data() {
-    return {
-      providers: [],
-    }
+    return {}
   },
   methods: {
-    addedProvider(provider) {
-      if (!Array.isArray(this.providers)) return
-
-      this.providers.push(provider)
-    },
-    removedProvider(provider) {
-      this.providers = this.providers.filter((p) => p.id !== provider.id)
-    },
     removeProvider(provider) {
-      this.$axios
-          .$delete(`/api/custom-metadata-providers/admin/${provider.id}`)
-          .then((data) => {
-            if (data.error) {
-              this.$toast.error(`Failed to remove provider: ${data.error}`)
-            } else {
-              this.$toast.success('Provider removed')
-            }
-          })
-          .catch((error) => {
-            console.error('Failed to remove provider', error)
-            this.$toast.error('Failed to remove provider')
-          })
-    },
-    loadProviders() {
-      this.$axios.$get('/api/custom-metadata-providers/admin')
-          .then((res) => {
-            this.providers = res.providers
-          })
-          .catch((error) => {
-            console.error('Failed', error)
-          })
-    },
-    init(attempts = 0) {
-      if (!this.$root.socket) {
-        if (attempts > 10) {
-          return console.error('Failed to setup socket listeners')
-        }
-        setTimeout(() => {
-          this.init(++attempts)
-        }, 250)
-        return
-      }
-      this.$root.socket.on('custom_metadata_provider_added', this.addedProvider)
-      this.$root.socket.on('custom_metadata_provider_removed', this.removedProvider)
-    }
-  },
-  mounted() {
-    this.loadProviders()
-    this.init()
-  },
-  beforeDestroy() {
-    if (this.$refs.addModal) {
-      this.$refs.addModal.close()
-    }
+      const payload = {
+        message: `Are you sure you want remove custom metadata provider "${provider.name}"?`,
+        callback: (confirmed) => {
+          if (confirmed) {
+            this.$emit('update:processing', true)
 
-    if (this.$root.socket) {
-      this.$root.socket.off('custom_metadata_provider_added', this.addedProvider)
-      this.$root.socket.off('custom_metadata_provider_removed', this.removedProvider)
+            this.$axios
+              .$delete(`/api/custom-metadata-providers/${provider.id}`)
+              .then(() => {
+                this.$toast.success('Provider removed')
+                this.$emit('removed', provider.id)
+              })
+              .catch((error) => {
+                console.error('Failed to remove provider', error)
+                this.$toast.error('Failed to remove provider')
+              })
+              .finally(() => {
+                this.$emit('update:processing', false)
+              })
+          }
+        },
+        type: 'yesNo'
+      }
+      this.$store.commit('globals/setConfirmPrompt', payload)
     }
   }
 }

client/layouts/default.vue

@@ -328,8 +328,13 @@ export default {
 
       this.$store.commit('libraries/setEReaderDevices', data.ereaderDevices)
     },
-    customMetadataProvidersChanged() {
-      this.$store.dispatch('scanners/reFetchCustom')
+    customMetadataProviderAdded(provider) {
+      if (!provider?.id) return
+      this.$store.commit('scanners/addCustomMetadataProvider', provider)
+    },
+    customMetadataProviderRemoved(provider) {
+      if (!provider?.id) return
+      this.$store.commit('scanners/removeCustomMetadataProvider', provider)
     },
     initializeSocket() {
       this.socket = this.$nuxtSocket({
@@ -411,8 +416,8 @@ export default {
       this.socket.on('admin_message', this.adminMessageEvt)
 
       // Custom metadata provider Listeners
-      this.socket.on('custom_metadata_provider_added', this.customMetadataProvidersChanged)
-      this.socket.on('custom_metadata_provider_removed', this.customMetadataProvidersChanged)
+      this.socket.on('custom_metadata_provider_added', this.customMetadataProviderAdded)
+      this.socket.on('custom_metadata_provider_removed', this.customMetadataProviderRemoved)
     },
     showUpdateToast(versionData) {
       var ignoreVersion = localStorage.getItem('ignoreVersion')
@@ -548,7 +553,6 @@ export default {
     window.addEventListener('keydown', this.keyDown)
 
     this.$store.dispatch('libraries/load')
-    this.$store.dispatch('scanners/reFetchCustom')
 
     this.initLocalStorage()
 

client/pages/config/custom-metadata-providers.vue

@@ -1,43 +0,0 @@
-<template>
-  <div id="authentication-settings">
-    <app-settings-content :header-text="$strings.HeaderCustomMetadataProviders">
-      <template #header-items>
-        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
-          <a href="https://www.audiobookshelf.org/guides/#" target="_blank" class="inline-flex">
-            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
-          </a>
-        </ui-tooltip>
-        <div class="flex-grow" />
-
-        <ui-btn color="primary" small @click="setShowAddModal">{{ $strings.ButtonAdd }}</ui-btn>
-      </template>
-
-      <tables-custom-metadata-provider-table class="pt-2" />
-      <modals-add-custom-metadata-provider-modal ref="addModal" v-model="showAddModal" />
-    </app-settings-content>
-  </div>
-</template>
-
-<script>
-export default {
-  async asyncData({ store, redirect }) {
-    if (!store.getters['user/getIsAdminOrUp']) {
-      redirect('/')
-      return
-    }
-    return {}
-  },
-  data() {
-    return {
-      showAddModal: false,
-    }
-  },
-  methods: {
-    setShowAddModal() {
-      this.showAddModal = true
-    }
-  }
-}
-</script>
-
-<style></style>

client/pages/config/item-metadata-utils/custom-metadata-providers.vue

@@ -0,0 +1,74 @@
+<template>
+  <div class="relative">
+    <app-settings-content :header-text="$strings.HeaderCustomMetadataProviders">
+      <template #header-prefix>
+        <nuxt-link to="/config/item-metadata-utils" class="w-8 h-8 flex items-center justify-center rounded-full cursor-pointer hover:bg-white hover:bg-opacity-10 text-center mr-2">
+          <span class="material-icons text-2xl">arrow_back</span>
+        </nuxt-link>
+      </template>
+      <template #header-items>
+        <ui-tooltip :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a href="https://www.audiobookshelf.org/guides/#" target="_blank" class="inline-flex">
+            <span class="material-icons text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+        <div class="flex-grow" />
+
+        <ui-btn color="primary" small @click="setShowAddModal">{{ $strings.ButtonAdd }}</ui-btn>
+      </template>
+
+      <tables-custom-metadata-provider-table :providers="providers" :processing.sync="processing" class="pt-2" @removed="providerRemoved" />
+      <modals-add-custom-metadata-provider-modal ref="addModal" v-model="showAddModal" @added="providerAdded" />
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+      return
+    }
+    return {}
+  },
+  data() {
+    return {
+      showAddModal: false,
+      processing: false,
+      providers: []
+    }
+  },
+  methods: {
+    providerRemoved(providerId) {
+      this.providers = this.providers.filter((p) => p.id !== providerId)
+    },
+    providerAdded(provider) {
+      this.providers.push(provider)
+    },
+    setShowAddModal() {
+      this.showAddModal = true
+    },
+    loadProviders() {
+      this.processing = true
+      this.$axios
+        .$get('/api/custom-metadata-providers')
+        .then((res) => {
+          this.providers = res.providers
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Failed to load custom metadata providers')
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    }
+  },
+  mounted() {
+    this.loadProviders()
+  }
+}
+</script>
+
+<style></style>

client/pages/config/item-metadata-utils/index.vue

@@ -13,6 +13,12 @@
           <span class="material-icons">arrow_forward</span>
         </div>
       </nuxt-link>
+      <nuxt-link to="/config/item-metadata-utils/custom-metadata-providers" class="block w-full rounded bg-primary/40 hover:bg-primary/60 text-gray-300 hover:text-white p-4 my-2">
+        <div class="flex justify-between">
+          <p>{{ $strings.HeaderCustomMetadataProviders }}</p>
+          <span class="material-icons">arrow_forward</span>
+        </div>
+      </nuxt-link>
     </app-settings-content>
   </div>
 </template>

client/store/libraries.js

@@ -113,6 +113,7 @@ export const actions = {
         const library = data.library
         const filterData = data.filterdata
         const issues = data.issues || 0
+        const customMetadataProviders = data.customMetadataProviders || []
         const numUserPlaylists = data.numUserPlaylists
 
         dispatch('user/checkUpdateLibrarySortFilter', library.mediaType, { root: true })
@@ -126,6 +127,8 @@ export const actions = {
         commit('setLibraryIssues', issues)
         commit('setLibraryFilterData', filterData)
         commit('setNumUserPlaylists', numUserPlaylists)
+        commit('scanners/setCustomMetadataProviders', customMetadataProviders, { root: true })
+
         commit('setCurrentLibrary', libraryId)
         return data
       })

client/store/scanners.js

@@ -71,35 +71,56 @@ export const state = () => ({
   ]
 })
 
-export const getters = {}
-
-export const actions = {
-  reFetchCustom({ dispatch, commit }) {
-    return this.$axios
-        .$get(`/api/custom-metadata-providers`)
-        .then((data) => {
-          const providers = data.providers
-
-          commit('setCustomProviders', providers)
-          return data
-        })
-        .catch((error) => {
-          console.error('Failed', error)
-          return false
-        })
+export const getters = {
+  checkBookProviderExists: state => (providerValue) => {
+    return state.providers.some(p => p.value === providerValue)
   },
+  checkPodcastProviderExists: state => (providerValue) => {
+    return state.podcastProviders.some(p => p.value === providerValue)
+  }
 }
 
+export const actions = {}
+
 export const mutations = {
-  setCustomProviders(state, providers) {
-    // clear previous values, and add new values to the end
-    state.providers = state.providers.filter((p) => !p.value.startsWith("custom-"));
-    state.providers = [
-        ...state.providers,
-        ...providers.map((p) => {return {
-          text: p.name,
-          value: p.slug,
-        }})
-    ]
+  addCustomMetadataProvider(state, provider) {
+    if (provider.mediaType === 'book') {
+      if (state.providers.some(p => p.value === provider.slug)) return
+      state.providers.push({
+        text: provider.name,
+        value: provider.slug
+      })
+    } else {
+      if (state.podcastProviders.some(p => p.value === provider.slug)) return
+      state.podcastProviders.push({
+        text: provider.name,
+        value: provider.slug
+      })
+    }
   },
+  removeCustomMetadataProvider(state, provider) {
+    if (provider.mediaType === 'book') {
+      state.providers = state.providers.filter(p => p.value !== provider.slug)
+    } else {
+      state.podcastProviders = state.podcastProviders.filter(p => p.value !== provider.slug)
+    }
+  },
+  setCustomMetadataProviders(state, providers) {
+    if (!providers?.length) return
+
+    const mediaType = providers[0].mediaType
+    if (mediaType === 'book') {
+      // clear previous values, and add new values to the end
+      state.providers = state.providers.filter((p) => !p.value.startsWith('custom-'))
+      state.providers = [
+        ...state.providers,
+        ...providers.map((p) => ({
+          text: p.name,
+          value: p.slug
+        }))
+      ]
+    } else {
+      // Podcast providers not supported yet
+    }
+  }
 }

client/strings/en-us.json

@@ -104,7 +104,7 @@
   "HeaderCollectionItems": "Collection Items",
   "HeaderCover": "Cover",
   "HeaderCurrentDownloads": "Current Downloads",
-  "HeaderCustomMetadataProviders": "Custom metadata providers",
+  "HeaderCustomMetadataProviders": "Custom Metadata Providers",
   "HeaderDetails": "Details",
   "HeaderDownloadQueue": "Download Queue",
   "HeaderEbookFiles": "Ebook Files",
@@ -194,7 +194,6 @@
   "LabelAllUsersExcludingGuests": "All users excluding guests",
   "LabelAllUsersIncludingGuests": "All users including guests",
   "LabelAlreadyInYourLibrary": "Already in your library",
-  "LabelApiKey": "API Key",
   "LabelAppend": "Append",
   "LabelAuthor": "Author",
   "LabelAuthorFirstLast": "Author (First Last)",
@@ -536,7 +535,6 @@
   "LabelUploaderDragAndDrop": "Drag & drop files or folders",
   "LabelUploaderDropFiles": "Drop files",
   "LabelUploaderItemFetchMetadataHelp": "Automatically fetch title, author, and series",
-  "LabelUrl": "URL",
   "LabelUseChapterTrack": "Use chapter track",
   "LabelUseFullTrack": "Use full track",
   "LabelUser": "User",