Plugin system demo

client/components/app/ConfigSideNav.vue

@@ -112,6 +112,14 @@ export default {
         }
       ]
 
+      if (this.$store.state.pluginsEnabled) {
+        configRoutes.push({
+          id: 'config-plugins',
+          title: 'Plugins',
+          path: '/config/plugins'
+        })
+      }
+
       if (this.currentLibraryId) {
         configRoutes.push({
           id: 'library-stats',

client/components/prompt/Confirm.vue

@@ -7,6 +7,14 @@
 
         <ui-checkbox v-if="checkboxLabel" v-model="checkboxValue" checkbox-bg="bg" :label="checkboxLabel" label-class="pl-2 text-base" class="mb-6 px-1" />
 
+        <div v-if="formFields.length" class="mb-6 space-y-2">
+          <template v-for="field in formFields">
+            <ui-select-input v-if="field.type === 'select'" :key="field.name" v-model="formData[field.name]" :label="field.label" :items="field.options" class="px-1" />
+            <ui-textarea-with-label v-else-if="field.type === 'textarea'" :key="field.name" v-model="formData[field.name]" :label="field.label" class="px-1" />
+            <ui-text-input-with-label v-else-if="field.type === 'text'" :key="field.name" v-model="formData[field.name]" :label="field.label" class="px-1" />
+          </template>
+        </div>
+
         <div class="flex px-1 items-center">
           <ui-btn v-if="isYesNo" color="primary" @click="nevermind">{{ $strings.ButtonCancel }}</ui-btn>
           <div class="flex-grow" />
@@ -25,7 +33,8 @@ export default {
     return {
       el: null,
       content: null,
-      checkboxValue: false
+      checkboxValue: false,
+      formData: {}
     }
   },
   watch: {
@@ -61,6 +70,9 @@ export default {
     persistent() {
       return !!this.confirmPromptOptions.persistent
     },
+    formFields() {
+      return this.confirmPromptOptions.formFields || []
+    },
     checkboxLabel() {
       return this.confirmPromptOptions.checkboxLabel
     },
@@ -100,11 +112,31 @@ export default {
       this.show = false
     },
     confirm() {
-      if (this.callback) this.callback(true, this.checkboxValue)
+      if (this.callback) {
+        if (this.formFields.length) {
+          const formFieldData = {
+            ...this.formData
+          }
+
+          this.callback(true, formFieldData)
+        } else {
+          this.callback(true, this.checkboxValue)
+        }
+      }
       this.show = false
     },
     setShow() {
       this.checkboxValue = this.checkboxDefaultValue
+
+      if (this.formFields.length) {
+        this.formFields.forEach((field) => {
+          let defaultValue = ''
+          if (field.type === 'boolean') defaultValue = false
+          if (field.type === 'select') defaultValue = field.options[0].value
+          this.$set(this.formData, field.name, defaultValue)
+        })
+      }
+
       this.$eventBus.$emit('showing-prompt', true)
       document.body.appendChild(this.el)
       setTimeout(() => {

client/components/ui/ContextMenuDropdown.vue

@@ -31,6 +31,7 @@
             </div>
           </template>
           <button v-else :key="index" role="menuitem" class="flex items-center px-2 py-1.5 hover:bg-white/5 text-white text-xs cursor-pointer w-full" @click.stop="clickAction(item.action)">
+            <span v-if="item.icon" class="material-symbols text-base mr-1">{{ item.icon }}</span>
             <p class="text-left">{{ item.text }}</p>
           </button>
         </template>

client/pages/config/plugins/_id.vue

@@ -0,0 +1,154 @@
+<template>
+  <div>
+    <app-settings-content :header-text="`Plugin: ${pluginManifest.name}`">
+      <template #header-prefix>
+        <nuxt-link to="/config/plugins" 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-symbols text-2xl">arrow_back</span>
+        </nuxt-link>
+      </template>
+      <template #header-items>
+        <ui-tooltip v-if="pluginManifest.documentationUrl" :text="$strings.LabelClickForMoreInfo" class="inline-flex ml-2">
+          <a :href="pluginManifest.documentationUrl" target="_blank" class="inline-flex">
+            <span class="material-symbols text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+
+        <div class="flex-grow" />
+
+        <a v-if="repositoryUrl" :href="repositoryUrl" target="_blank" class="abs-btn outline-none rounded-md shadow-md relative border border-gray-600 text-center bg-primary text-white px-4 py-1 text-sm inline-flex items-center space-x-2"><span>Source</span><span class="material-symbols text-base">open_in_new</span> </a>
+      </template>
+
+      <div class="py-4">
+        <p v-if="configDescription" class="mb-4">{{ configDescription }}</p>
+
+        <form v-if="configFormFields.length" @submit.prevent="handleFormSubmit">
+          <template v-for="field in configFormFields">
+            <div :key="field.name" class="flex items-center mb-4">
+              <label :for="field.name" class="w-1/3 text-gray-200">{{ field.label }}</label>
+              <div class="w-2/3">
+                <input :id="field.name" :type="field.type" :placeholder="field.placeholder" class="w-full bg-bg border border-white border-opacity-20 rounded-md p-2 text-gray-200" />
+              </div>
+            </div>
+          </template>
+
+          <div class="flex justify-end">
+            <ui-btn class="bg-primary bg-opacity-70 text-white rounded-md p-2" :loading="processing" type="submit">{{ $strings.ButtonSave }}</ui-btn>
+          </div>
+        </form>
+      </div>
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ store, redirect, params, app }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+    const pluginConfigData = await app.$axios.$get(`/api/plugins/${params.id}/config`).catch((error) => {
+      console.error('Failed to get plugin config', error)
+      return null
+    })
+    if (!pluginConfigData) {
+      redirect('/config/plugins')
+    }
+    const pluginManifest = store.state.plugins.find((plugin) => plugin.id === params.id)
+    if (!pluginManifest) {
+      redirect('/config/plugins')
+    }
+    return {
+      pluginManifest,
+      pluginConfig: pluginConfigData.config
+    }
+  },
+  data() {
+    return {
+      processing: false
+    }
+  },
+  computed: {
+    pluginManifestConfig() {
+      return this.pluginManifest.config
+    },
+    pluginLocalization() {
+      return this.pluginManifest.localization || {}
+    },
+    localizedStrings() {
+      const localeKey = this.$languageCodes.current
+      if (!localeKey) return {}
+      return this.pluginLocalization[localeKey] || {}
+    },
+    configDescription() {
+      if (this.pluginManifestConfig.descriptionKey && this.localizedStrings[this.pluginManifestConfig.descriptionKey]) {
+        return this.localizedStrings[this.pluginManifestConfig.descriptionKey]
+      }
+
+      return this.pluginManifestConfig.description
+    },
+    configFormFields() {
+      return this.pluginManifestConfig.formFields || []
+    },
+    repositoryUrl() {
+      return this.pluginManifest.repositoryUrl
+    }
+  },
+  methods: {
+    getFormData() {
+      const formData = {}
+      this.configFormFields.forEach((field) => {
+        if (field.type === 'checkbox') {
+          formData[field.name] = document.getElementById(field.name).checked
+        } else {
+          formData[field.name] = document.getElementById(field.name).value
+        }
+      })
+      return formData
+    },
+    handleFormSubmit() {
+      const formData = this.getFormData()
+      console.log('Form data', formData)
+
+      const payload = {
+        config: formData
+      }
+
+      this.processing = true
+
+      this.$axios
+        .$post(`/api/plugins/${this.pluginManifest.id}/config`, payload)
+        .then(() => {
+          console.log('Plugin configuration saved')
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Error saving plugin configuration'
+          console.error('Failed to save config:', error)
+          this.$toast.error(errorMsg)
+        })
+        .finally(() => {
+          this.processing = false
+        })
+    },
+    initializeForm() {
+      if (!this.pluginConfig) return
+      this.configFormFields.forEach((field) => {
+        if (this.pluginConfig[field.name] === undefined) {
+          return
+        }
+
+        const value = this.pluginConfig[field.name]
+        if (field.type === 'checkbox') {
+          document.getElementById(field.name).checked = value
+        } else {
+          document.getElementById(field.name).value = value
+        }
+      })
+    }
+  },
+  mounted() {
+    console.log('Plugin manifest', this.pluginManifest, 'config', this.pluginConfig)
+    this.initializeForm()
+  },
+  beforeDestroy() {}
+}
+</script>

client/pages/config/plugins/index.vue

@@ -0,0 +1,48 @@
+<template>
+  <div>
+    <app-settings-content :header-text="'Plugins'">
+      <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-symbols text-xl w-5 text-gray-200">help_outline</span>
+          </a>
+        </ui-tooltip>
+      </template>
+      <div class="py-4">
+        <p v-if="!plugins.length" class="text-gray-300">No plugins installed</p>
+
+        <template v-for="plugin in plugins">
+          <nuxt-link :key="plugin.id" :to="`/config/plugins/${plugin.id}`" 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 items-center space-x-4">
+              <p class="text-lg">{{ plugin.name }}</p>
+              <p class="text-sm text-gray-300">{{ plugin.description }}</p>
+              <div class="flex-grow" />
+              <span class="material-symbols">arrow_forward</span>
+            </div>
+          </nuxt-link>
+        </template>
+      </div>
+    </app-settings-content>
+  </div>
+</template>
+
+<script>
+export default {
+  asyncData({ store, redirect }) {
+    if (!store.getters['user/getIsAdminOrUp']) {
+      redirect('/')
+    }
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    plugins() {
+      return this.$store.state.plugins
+    }
+  },
+  methods: {},
+  mounted() {},
+  beforeDestroy() {}
+}
+</script>

client/pages/item/_id/index.vue

@@ -364,6 +364,9 @@ export default {
     showCollectionsButton() {
       return this.isBook && this.userCanUpdate
     },
+    pluginExtensions() {
+      return this.$store.getters['getPluginExtensions']('item.detail.actions')
+    },
     contextMenuItems() {
       const items = []
 
@@ -429,6 +432,18 @@ export default {
         })
       }
 
+      if (this.pluginExtensions.length) {
+        this.pluginExtensions.forEach((plugin) => {
+          plugin.extensions.forEach((pext) => {
+            items.push({
+              text: pext.label,
+              action: `plugin-${plugin.id}-action-${pext.name}`,
+              icon: 'extension'
+            })
+          })
+        })
+      }
+
       return items
     }
   },
@@ -763,7 +778,54 @@ export default {
       } else if (action === 'share') {
         this.$store.commit('setSelectedLibraryItem', this.libraryItem)
         this.$store.commit('globals/setShareModal', this.mediaItemShare)
+      } else if (action.startsWith('plugin-')) {
+        const actionStrSplit = action.replace('plugin-', '').split('-action-')
+        const pluginId = actionStrSplit[0]
+        const pluginAction = actionStrSplit[1]
+        this.onPluginAction(pluginId, pluginAction)
+      }
+    },
+    onPluginAction(pluginId, pluginAction) {
+      const plugin = this.pluginExtensions.find((p) => p.id === pluginId)
+      const extension = plugin.extensions.find((ext) => ext.name === pluginAction)
+
+      if (extension.prompt) {
+        const payload = {
+          message: extension.prompt.message,
+          formFields: extension.prompt.formFields || [],
+          yesButtonText: this.$strings.ButtonSubmit,
+          callback: (confirmed, promptData) => {
+            if (confirmed) {
+              this.sendPluginAction(pluginId, pluginAction, promptData)
+            }
+          },
+          type: 'yesNo'
+        }
+        this.$store.commit('globals/setConfirmPrompt', payload)
+      } else {
+        this.sendPluginAction(pluginId, pluginAction)
       }
+    },
+    sendPluginAction(pluginId, pluginAction, promptData = null) {
+      this.$axios
+        .$post(`/api/plugins/${pluginId}/action`, {
+          pluginAction,
+          target: 'item.detail.actions',
+          data: {
+            entityId: this.libraryItemId,
+            entityType: 'libraryItem',
+            userId: this.$store.state.user.user.id,
+            promptData
+          }
+        })
+        .then((data) => {
+          console.log('Plugin action response', data)
+        })
+        .catch((error) => {
+          const errorMsg = error.response?.data || 'Plugin action failed'
+          console.error('Plugin action failed:', error)
+          this.$toast.error(errorMsg)
+        })
     }
   },
   mounted() {

client/pages/login.vue

@@ -166,10 +166,14 @@ export default {
 
       location.reload()
     },
-    setUser({ user, userDefaultLibraryId, serverSettings, Source, ereaderDevices }) {
+    setUser({ user, userDefaultLibraryId, serverSettings, Source, ereaderDevices, plugins }) {
       this.$store.commit('setServerSettings', serverSettings)
       this.$store.commit('setSource', Source)
       this.$store.commit('libraries/setEReaderDevices', ereaderDevices)
+      if (plugins !== undefined) {
+        this.$store.commit('setPlugins', plugins)
+      }
+
       this.$setServerLanguageCode(serverSettings.language)
 
       if (serverSettings.chromecastEnabled) {