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