Add Subtitle and Narrarator fields, add server settings object, scanner to parse out subtitles

client/components/modals/EditModal.vue

@@ -1,5 +1,5 @@
 <template>
-  <modals-modal v-model="show" :width="800" :height="500" :processing="processing">
+  <modals-modal v-model="show" :width="800" :height="height" :processing="processing" :content-margin-top="75">
     <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>
@@ -79,6 +79,10 @@ export default {
         this.$store.commit('setShowEditModal', val)
       }
     },
+    height() {
+      var maxHeightAllowed = window.innerHeight - 150
+      return Math.min(maxHeightAllowed, 650)
+    },
     tabName() {
       var _tab = this.tabs.find((t) => t.id === this.selectedTab)
       return _tab ? _tab.component : ''

client/components/modals/Modal.vue

@@ -6,7 +6,7 @@
       <span class="material-icons text-4xl">close</span>
     </div>
     <slot name="outer" />
-    <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth }" v-click-outside="clickBg">
+    <div ref="content" style="min-width: 400px; min-height: 200px" class="relative text-white" :style="{ height: modalHeight, width: modalWidth, marginTop: contentMarginTop + 'px' }" v-click-outside="clickBg">
       <slot />
       <div v-if="processing" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-black bg-opacity-60 rounded-lg flex items-center justify-center">
         <ui-loading-indicator />
@@ -31,6 +31,10 @@ export default {
     height: {
       type: [String, Number],
       default: 'unset'
+    },
+    contentMarginTop: {
+      type: Number,
+      default: 50
     }
   },
   data() {

client/components/modals/edit-tabs/Details.vue

@@ -12,6 +12,8 @@
     <form @submit.prevent="submitForm">
       <ui-text-input-with-label v-model="details.title" label="Title" />
 
+      <ui-text-input-with-label v-model="details.subtitle" label="Subtitle" class="mt-2" />
+
       <div class="flex mt-2 -mx-1">
         <div class="w-3/4 px-1">
           <ui-text-input-with-label v-model="details.author" label="Author" />
@@ -41,7 +43,13 @@
         </div>
       </div>
 
-      <div class="flex py-4">
+      <div class="flex mt-2 -mx-1">
+        <div class="w-1/2 px-1">
+          <ui-text-input-with-label v-model="details.narrarator" label="Narrarator" />
+        </div>
+      </div>
+
+      <div class="flex py-4 mt-2">
         <ui-btn color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
         <div class="flex-grow" />
         <ui-btn type="submit">Submit</ui-btn>
@@ -63,8 +71,10 @@ export default {
     return {
       details: {
         title: null,
+        subtitle: null,
         description: null,
         author: null,
+        narrarator: null,
         series: null,
         volumeNumber: null,
         publishYear: null,
@@ -136,8 +146,10 @@ export default {
     },
     init() {
       this.details.title = this.book.title
+      this.details.subtitle = this.book.subtitle
       this.details.description = this.book.description
       this.details.author = this.book.author
+      this.details.narrarator = this.book.narrarator
       this.details.genres = this.book.genres || []
       this.details.series = this.book.series
       this.details.volumeNumber = this.book.volumeNumber

client/components/ui/Tooltip.vue

@@ -39,7 +39,7 @@ export default {
       tooltip.style.top = top + 'px'
       tooltip.style.left = left + 'px'
       tooltip.style.zIndex = 100
-      tooltip.innerText = this.text
+      tooltip.innerHTML = this.text
       this.tooltip = tooltip
     },
     showTooltip() {

client/layouts/default.vue

@@ -56,6 +56,9 @@ export default {
         this.$store.commit('user/setUser', payload.user)
         this.$store.commit('user/setSettings', payload.user.settings)
       }
+      if (payload.serverSettings) {
+        this.$store.commit('setServerSettings', payload.serverSettings)
+      }
     },
     streamOpen(stream) {
       if (this.$refs.streamContainer) this.$refs.streamContainer.streamOpen(stream)

client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf-client",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "description": "Audiobook manager and player",
   "main": "index.js",
   "scripts": {

client/pages/batch/index.vue

@@ -9,6 +9,8 @@
           <div class="flex-grow pl-4">
             <ui-text-input-with-label v-model="audiobook.book.title" label="Title" />
 
+            <ui-text-input-with-label v-model="audiobook.book.subtitle" label="Subtitle" class="mt-2" />
+
             <div class="flex mt-2 -mx-1">
               <div class="w-3/4 px-1">
                 <ui-text-input-with-label v-model="audiobook.book.author" label="Author" />
@@ -37,6 +39,12 @@
                 <ui-multi-select v-model="audiobook.tags" label="Tags" :items="tags" />
               </div>
             </div>
+
+            <div class="flex mt-2 -mx-1">
+              <div class="w-1/2 px-1">
+                <ui-text-input-with-label v-model="audiobook.book.narrarator" label="Narrarator" />
+              </div>
+            </div>
           </div>
         </div>
       </template>

client/pages/config/index.vue

@@ -35,8 +35,16 @@
       </div>
       <div class="h-0.5 bg-primary bg-opacity-50 w-full" />
       <div class="py-4 mb-8">
+        <p class="text-2xl">Scanner</p>
         <div class="flex items-start py-2">
-          <p class="text-2xl">Scanner</p>
+          <div class="py-2">
+            <div class="flex items-center">
+              <ui-toggle-switch v-model="newServerSettings.scannerParseSubtitle" @input="updateScannerParseSubtitle" />
+              <ui-tooltip :text="parseSubtitleTooltip">
+                <p class="pl-4 text-lg">Parse Subtitles <span class="material-icons icon-text">info_outlined</span></p>
+              </ui-tooltip>
+            </div>
+          </div>
           <div class="flex-grow" />
           <div class="w-40 flex flex-col">
             <ui-btn color="success" class="mb-4" :loading="isScanning" :disabled="isScanningCovers" @click="scan">Scan</ui-btn>
@@ -84,10 +92,24 @@ export default {
       isResettingAudiobooks: false,
       users: [],
       showAccountModal: false,
-      isDeletingUser: false
+      isDeletingUser: false,
+      newServerSettings: {}
+    }
+  },
+  watch: {
+    serverSettings(newVal, oldVal) {
+      if (newVal && !oldVal) {
+        this.newServerSettings = { ...this.serverSettings }
+      }
     }
   },
   computed: {
+    parseSubtitleTooltip() {
+      return 'Extract subtitles from audiobook directory names.<br>Subtitle must be seperated by " - "<br>i.e. "Book Title - A Subtitle Here" has the subtitle "A Subtitle Here"'
+    },
+    serverSettings() {
+      return this.$store.state.serverSettings
+    },
     streamAudiobook() {
       return this.$store.state.streamAudiobook
     },
@@ -99,6 +121,19 @@ export default {
     }
   },
   methods: {
+    updateScannerParseSubtitle(val) {
+      var payload = {
+        scannerParseSubtitle: val
+      }
+      this.$store
+        .dispatch('updateServerSettings', payload)
+        .then((success) => {
+          console.log('Updated Server Settings', success)
+        })
+        .catch((error) => {
+          console.error('Failed to update server settings', error)
+        })
+    },
     setDeveloperMode() {
       var value = !this.$store.state.developerMode
       this.$store.commit('setDeveloperMode', value)
@@ -186,6 +221,8 @@ export default {
       this.$root.socket.on('user_added', this.addUpdateUser)
       this.$root.socket.on('user_updated', this.addUpdateUser)
       this.$root.socket.on('user_removed', this.userRemoved)
+
+      this.newServerSettings = this.serverSettings ? { ...this.serverSettings } : {}
     }
   },
   mounted() {

client/plugins/axios.js

@@ -1,11 +1,10 @@
 export default function ({ $axios, store }) {
   $axios.onRequest(config => {
-    console.log('Making request to ' + config.url)
+    // console.log('Making request to ' + config.url)
     if (config.url.startsWith('http:') || config.url.startsWith('https:')) {
       return
     }
     var bearerToken = store.state.user.user ? store.state.user.user.token : null
-    // console.log('Bearer token', bearerToken)
     if (bearerToken) {
       config.headers.common['Authorization'] = `Bearer ${bearerToken}`
     }

client/store/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 
 export const state = () => ({
+  serverSettings: null,
   streamAudiobook: null,
   showEditModal: false,
   selectedAudiobook: null,
@@ -21,9 +22,29 @@ export const getters = {
   getNumAudiobooksSelected: state => state.selectedAudiobooks.length
 }
 
-export const actions = {}
+export const actions = {
+  updateServerSettings({ commit }, payload) {
+    var updatePayload = {
+      ...payload
+    }
+    return this.$axios.$patch('/api/serverSettings', updatePayload).then((result) => {
+      if (result.success) {
+        commit('setServerSettings', result.settings)
+        return true
+      } else {
+        return false
+      }
+    }).catch((error) => {
+      console.error('Failed to update server settings', error)
+      return false
+    })
+  }
+}
 
 export const mutations = {
+  setServerSettings(state, settings) {
+    state.serverSettings = settings
+  },
   setStreamAudiobook(state, audiobook) {
     state.playOnLoad = true
     state.streamAudiobook = audiobook

client/store/user.js

@@ -35,7 +35,6 @@ export const actions = {
     return this.$axios.$patch('/api/user/settings', updatePayload).then((result) => {
       if (result.success) {
         commit('setSettings', result.settings)
-        console.log('Settings updated', result.settings)
         return true
       } else {
         return false