narrator filter, no series filter, full paths toggle, book landing page details, new sans font, update query string on filter/sort, persist experimental feature flag, batch edit redirect bug, upload file permissions and owner

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

@@ -47,7 +47,7 @@
 
         <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" />
+            <ui-text-input-with-label v-model="details.narrator" label="Narrator" />
           </div>
         </div>
       </div>
@@ -88,7 +88,7 @@ export default {
         subtitle: null,
         description: null,
         author: null,
-        narrarator: null,
+        narrator: null,
         series: null,
         volumeNumber: null,
         publishYear: null,
@@ -208,7 +208,7 @@ export default {
       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.narrator = this.book.narrator
       this.details.genres = this.book.genres || []
       this.details.series = this.book.series
       this.details.volumeNumber = this.book.volumeNumber

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

@@ -1,8 +1,13 @@
 <template>
   <div class="w-full h-full overflow-y-auto overflow-x-hidden px-4 py-6">
-    <div class="flex mb-4">
-      <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobook.id}/edit`">
-        <ui-btn color="primary">Edit Track Order</ui-btn>
+    <div class="w-full bg-primary px-4 py-2 flex items-center">
+      <div class="h-7 w-7 rounded-full bg-white bg-opacity-10 flex items-center justify-center">
+        <span class="text-sm font-mono">{{ tracks.length }}</span>
+      </div>
+      <div class="flex-grow" />
+      <ui-btn small :color="showFullPath ? 'gray-600' : 'primary'" class="mr-2" @click.stop="showFullPath = !showFullPath">Full Path</ui-btn>
+      <nuxt-link v-if="userCanUpdate" :to="`/audiobook/${audiobook.id}/edit`" class="mr-4">
+        <ui-btn small color="primary">Manage Tracks</ui-btn>
       </nuxt-link>
     </div>
     <table class="text-sm tracksTable">
@@ -18,9 +23,7 @@
           <td class="text-center">
             <p>{{ track.index }}</p>
           </td>
-          <td class="font-book">
-            {{ track.filename }}
-          </td>
+          <td class="font-sans">{{ showFullPath ? track.fullPath : track.filename }}</td>
           <td class="font-mono">
             {{ $bytesPretty(track.size) }}
           </td>
@@ -47,7 +50,8 @@ export default {
   data() {
     return {
       tracks: null,
-      audioFiles: null
+      audioFiles: null,
+      showFullPath: false
     }
   },
   watch: {

client/components/modals/libraries/EditLibrary.vue

@@ -14,7 +14,7 @@
           <!-- <ui-text-input :value="folder.fullPath" type="text" class="w-full" /> -->
           <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
           <ui-editable-text v-model="folder.fullPath" type="text" class="w-full" />
-          <span class="material-icons ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
+          <span v-show="folders.length > 1" class="material-icons ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
         </div>
         <p v-if="!folders.length" class="text-sm text-gray-300 px-1 py-2">No folders</p>
         <ui-btn class="w-full mt-2" color="primary" @click="showDirectoryPicker = true">Browse for Folder</ui-btn>
@@ -22,7 +22,7 @@
       <div class="absolute bottom-0 left-0 w-full py-4 px-4">
         <div class="flex items-center">
           <div class="flex-grow" />
-          <ui-btn color="success" @click="submit">{{ library ? 'Update Library' : 'Create Library' }}</ui-btn>
+          <ui-btn v-show="!disableSubmit" color="success" :disabled="disableSubmit" @click="submit">{{ library ? 'Update Library' : 'Create Library' }}</ui-btn>
         </div>
       </div>
     </div>
@@ -43,8 +43,7 @@ export default {
     return {
       name: '',
       folders: [],
-      showDirectoryPicker: false,
-      newLibraryName: ''
+      showDirectoryPicker: false
     }
   },
   computed: {
@@ -54,6 +53,18 @@ export default {
     },
     folderPaths() {
       return this.folders.map((f) => f.fullPath)
+    },
+    disableSubmit() {
+      if (!this.library) {
+        return false
+      }
+      var newfolderpaths = this.folderPaths.join(',')
+      var origfolderpaths = this.library.folders.map((f) => f.fullPath).join(',')
+      console.log(newfolderpaths)
+      console.log(origfolderpaths)
+      console.log(newfolderpaths === origfolderpaths)
+
+      return newfolderpaths === origfolderpaths && this.name === this.library.name
     }
   },
   methods: {

client/components/modals/libraries/FolderChooser.vue

@@ -30,11 +30,12 @@
       <p class="text-gray-300">Note: folders already mapped will not be shown</p>
     </div>
 
-    <div class="absolute bottom-0 left-0 w-full py-4 px-4">
-      <div class="flex items-center">
+    <div class="absolute bottom-0 left-0 w-full py-4 px-8">
+      <ui-btn :disabled="!selectedPath" color="primary" class="w-full mt-2" @click="selectFolder">Select Folder Path</ui-btn>
+      <!-- <div class="flex items-center">
         <div class="flex-grow" />
         <ui-btn color="success" @click="selectFolder">Select</ui-btn>
-      </div>
+      </div> -->
     </div>
   </div>
 </template>