Merge branch 'master' into keyboard-navigation-2

client/components/app/BookShelfToolbar.vue

@@ -98,6 +98,9 @@
       <template v-else-if="page === 'authors'">
         <div class="flex-grow" />
         <ui-btn v-if="userCanUpdate && authors && authors.length && !isBatchSelecting" :loading="processingAuthors" color="primary" small @click="matchAllAuthors">{{ $strings.ButtonMatchAllAuthors }}</ui-btn>
+
+        <!-- author sort select -->
+        <controls-sort-select v-if="authors && authors.length" v-model="settings.authorSortBy" :descending.sync="settings.authorSortDesc" :items="authorSortItems" class="w-36 sm:w-44 md:w-48 h-7.5 ml-1 sm:ml-4" @change="updateAuthorSort" />
       </template>
     </div>
   </div>
@@ -183,6 +186,30 @@ export default {
         }
       ]
     },
+    authorSortItems() {
+      return [
+        {
+          text: this.$strings.LabelAuthorFirstLast,
+          value: 'name'
+        },
+        {
+          text: this.$strings.LabelAuthorLastFirst,
+          value: 'lastFirst'
+        },
+        {
+          text: this.$strings.LabelNumberOfBooks,
+          value: 'numBooks'
+        },
+        {
+          text: this.$strings.LabelAddedAt,
+          value: 'addedAt'
+        },
+        {
+          text: this.$strings.LabelUpdatedAt,
+          value: 'updatedAt'
+        }
+      ]
+    },
     userIsAdminOrUp() {
       return this.$store.getters['user/getIsAdminOrUp']
     },
@@ -455,6 +482,9 @@ export default {
     updateCollapseBookSeries() {
       this.saveSettings()
     },
+    updateAuthorSort() {
+      this.saveSettings()
+    },
     saveSettings() {
       this.$store.dispatch('user/updateUserSettings', this.settings)
     },

client/components/player/PlayerTrackBar.vue

@@ -57,7 +57,6 @@ export default {
   },
   watch: {
     duration: {
-      immediate: true,
       handler() {
         this.setChapterTicks()
       }
@@ -205,10 +204,14 @@ export default {
     },
     windowResize() {
       this.setTrackWidth()
+      this.setChapterTicks()
+      this.updatePlayedTrackWidth()
+      this.updateBufferTrack()
     }
   },
   mounted() {
     this.setTrackWidth()
+    this.setChapterTicks()
     window.addEventListener('resize', this.windowResize)
   },
   beforeDestroy() {

client/components/ui/MultiSelect.vue

@@ -11,7 +11,7 @@
             </div>
             {{ item }}
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: fit-content" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -154,15 +154,6 @@ export default {
       this.typingTimeout = setTimeout(() => {
         this.search()
       }, 100)
-      this.setInputWidth()
-    },
-    setInputWidth() {
-      setTimeout(() => {
-        var value = this.$refs.input.value
-        var len = value.length * 7 + 24
-        this.$refs.input.style.width = len + 'px'
-        this.recalcMenuPos()
-      }, 50)
     },
     recalcScroll() {
       if (!this.menu) return

client/components/ui/MultiSelectQueryInput.vue

@@ -14,7 +14,7 @@
           <div v-if="showEdit && !disabled" class="rounded-full cursor-pointer w-6 h-6 mx-0.5 bg-bg flex items-center justify-center">
             <span class="material-icons text-white hover:text-success pt-px pr-px" style="font-size: 1.1rem" @click.stop="addItem">add</span>
           </div>
-          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: 40px" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
+          <input v-show="!readonly" ref="input" v-model="textInput" :disabled="disabled" style="min-width: 40px; width: fit-content" class="h-full bg-primary focus:outline-none px-1" @keydown="keydownInput" @focus="inputFocus" @blur="inputBlur" @paste="inputPaste" />
         </div>
       </form>
 
@@ -156,15 +156,6 @@ export default {
       this.typingTimeout = setTimeout(() => {
         this.search()
       }, 250)
-      this.setInputWidth()
-    },
-    setInputWidth() {
-      setTimeout(() => {
-        var value = this.$refs.input.value
-        var len = value.length * 7 + 24
-        this.$refs.input.style.width = len + 'px'
-        this.recalcMenuPos()
-      }, 50)
     },
     recalcScroll() {
       if (!this.menu) return

client/pages/batch/index.vue

@@ -20,44 +20,44 @@
       <div class="overflow-hidden">
         <transition name="slide">
           <div v-if="openMapOptions" class="flex flex-wrap">
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.subtitle" />
-              <ui-text-input-with-label ref="subtitleInput" v-model="batchDetails.subtitle" :disabled="!selectedBatchUsage.subtitle" :label="$strings.LabelSubtitle" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="subtitleInput" v-model="batchDetails.subtitle" :disabled="!selectedBatchUsage.subtitle" :label="$strings.LabelSubtitle" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.authors" />
               <!-- Authors filter only contains authors in this library, uses filter data -->
-              <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" filter-key="authors" class="mb-4 ml-4" />
+              <ui-multi-select-query-input ref="authorsSelect" v-model="batchDetails.authors" :disabled="!selectedBatchUsage.authors" :label="$strings.LabelAuthors" filter-key="authors" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.publishedYear" />
-              <ui-text-input-with-label ref="publishedYearInput" v-model="batchDetails.publishedYear" :disabled="!selectedBatchUsage.publishedYear" :label="$strings.LabelPublishYear" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="publishedYearInput" v-model="batchDetails.publishedYear" :disabled="!selectedBatchUsage.publishedYear" :label="$strings.LabelPublishYear" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.series" />
-              <ui-multi-select ref="seriesSelect" v-model="batchDetails.series" :disabled="!selectedBatchUsage.series" :label="$strings.LabelSeries" :items="existingSeriesNames" @newItem="newSeriesItem" @removedItem="removedSeriesItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="seriesSelect" v-model="batchDetails.series" :disabled="!selectedBatchUsage.series" :label="$strings.LabelSeries" :items="existingSeriesNames" @newItem="newSeriesItem" @removedItem="removedSeriesItem" class="mb-5 ml-4" />
             </div>
-            <div class="flex items-center px-4 w-1/2">
+            <div class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.genres" />
-              <ui-multi-select ref="genresSelect" v-model="batchDetails.genres" :disabled="!selectedBatchUsage.genres" :label="$strings.LabelGenres" :items="genreItems" @newItem="newGenreItem" @removedItem="removedGenreItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="genresSelect" v-model="batchDetails.genres" :disabled="!selectedBatchUsage.genres" :label="$strings.LabelGenres" :items="genreItems" @newItem="newGenreItem" @removedItem="removedGenreItem" class="mb-5 ml-4" />
             </div>
-            <div class="flex items-center px-4 w-1/2">
+            <div class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.tags" />
-              <ui-multi-select ref="tagsSelect" v-model="batchDetails.tags" :label="$strings.LabelTags" :disabled="!selectedBatchUsage.tags" :items="tagItems" @newItem="newTagItem" @removedItem="removedTagItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="tagsSelect" v-model="batchDetails.tags" :label="$strings.LabelTags" :disabled="!selectedBatchUsage.tags" :items="tagItems" @newItem="newTagItem" @removedItem="removedTagItem" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.narrators" />
-              <ui-multi-select ref="narratorsSelect" v-model="batchDetails.narrators" :disabled="!selectedBatchUsage.narrators" :label="$strings.LabelNarrators" :items="narratorItems" @newItem="newNarratorItem" @removedItem="removedNarratorItem" class="mb-4 ml-4" />
+              <ui-multi-select ref="narratorsSelect" v-model="batchDetails.narrators" :disabled="!selectedBatchUsage.narrators" :label="$strings.LabelNarrators" :items="narratorItems" @newItem="newNarratorItem" @removedItem="removedNarratorItem" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.publisher" />
-              <ui-text-input-with-label ref="publisherInput" v-model="batchDetails.publisher" :disabled="!selectedBatchUsage.publisher" :label="$strings.LabelPublisher" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="publisherInput" v-model="batchDetails.publisher" :disabled="!selectedBatchUsage.publisher" :label="$strings.LabelPublisher" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.language" />
-              <ui-text-input-with-label ref="languageInput" v-model="batchDetails.language" :disabled="!selectedBatchUsage.language" :label="$strings.LabelLanguage" class="mb-4 ml-4" />
+              <ui-text-input-with-label ref="languageInput" v-model="batchDetails.language" :disabled="!selectedBatchUsage.language" :label="$strings.LabelLanguage" class="mb-5 ml-4" />
             </div>
-            <div v-if="!isMapAppend" class="flex items-center px-4 w-1/2">
+            <div v-if="!isMapAppend" class="flex items-center px-4 h-18 w-1/2">
               <ui-checkbox v-model="selectedBatchUsage.explicit" />
               <div class="ml-4">
                 <ui-checkbox
@@ -71,6 +71,20 @@
                 />
               </div>
             </div>
+            <div v-if="!isPodcastLibrary && !isMapAppend" class="flex items-center px-4 h-18 w-1/2">
+              <ui-checkbox v-model="selectedBatchUsage.abridged" />
+              <div class="ml-4">
+                <ui-checkbox
+                  v-model="batchDetails.abridged"
+                  :label="$strings.LabelAbridged"
+                  :disabled="!selectedBatchUsage.abridged"
+                  :checkbox-bg="!selectedBatchUsage.abridged ? 'bg' : 'primary'"
+                  :check-color="!selectedBatchUsage.abridged ? 'gray-600' : 'green-500'"
+                  border-color="gray-600"
+                  :label-class="!selectedBatchUsage.abridged ? 'pl-2 text-base text-gray-400 font-semibold' : 'pl-2 text-base font-semibold'"
+                />
+              </div>
+            </div>
 
             <div class="w-full flex items-center justify-end p-4">
               <ui-btn color="success" :disabled="!hasSelectedBatchUsage" :padding-x="8" small class="text-base" :loading="isProcessing" @click="mapBatchDetails">{{ $strings.ButtonApply }}</ui-btn>
@@ -139,7 +153,8 @@ export default {
         narrators: [],
         publisher: null,
         language: null,
-        explicit: false
+        explicit: false,
+        abridged: false
       },
       selectedBatchUsage: {
         subtitle: false,
@@ -151,7 +166,8 @@ export default {
         narrators: false,
         publisher: false,
         language: false,
-        explicit: false
+        explicit: false,
+        abridged: false
       },
       appendableKeys: ['authors', 'genres', 'tags', 'narrators', 'series'],
       openMapOptions: false

client/pages/library/_library/authors/index.vue

@@ -3,7 +3,7 @@
     <app-book-shelf-toolbar page="authors" is-home :authors="authors" />
     <div id="bookshelf" class="w-full h-full p-8 overflow-y-auto">
       <div class="flex flex-wrap justify-center">
-        <template v-for="author in authors">
+        <template v-for="author in authorsSorted">
           <cards-author-card :key="author.id" :author="author" :width="160" :height="200" class="p-3" @edit="editAuthor" />
         </template>
       </div>
@@ -44,6 +44,22 @@ export default {
     },
     selectedAuthor() {
       return this.$store.state.globals.selectedAuthor
+    },
+    authorSortBy() {
+      return this.$store.getters['user/getUserSetting']('authorSortBy') || 'name'
+    },
+    authorSortDesc() {
+      return !!this.$store.getters['user/getUserSetting']('authorSortDesc')
+    },
+    authorsSorted() {
+      const sortProp = this.authorSortBy
+      const bDesc = this.authorSortDesc ? -1 : 1
+      return this.authors.sort((a, b) => {
+        if (typeof a[sortProp] === 'number' && typeof b[sortProp] === 'number') {
+          return a[sortProp] > b[sortProp] ? bDesc : -bDesc
+        }
+        return a[sortProp].localeCompare(b[sortProp], undefined, { sensitivity: 'base' }) * bDesc
+      })
     }
   },
   methods: {

client/store/user.js

@@ -11,7 +11,9 @@ export const state = () => ({
     useChapterTrack: false,
     seriesSortBy: 'name',
     seriesSortDesc: false,
-    seriesFilterBy: 'all'
+    seriesFilterBy: 'all',
+    authorSortBy: 'name',
+    authorSortDesc: false
   }
 })
 

client/strings/pt-br.json

@@ -356,9 +356,9 @@
   "LabelMetaTags": "Etiquetas Meta",
   "LabelMinute": "Minuto",
   "LabelMissing": "Ausente",
-  "LabelMissingEbook": "Has no ebook",
+  "LabelMissingEbook": "Ebook não existe",
   "LabelMissingParts": "Partes Ausentes",
-  "LabelMissingSupplementaryEbook": "Has no supplementary ebook",
+  "LabelMissingSupplementaryEbook": "Ebook complementar não existe",
   "LabelMobileRedirectURIs": "URIs de redirecionamento móveis permitidas",
   "LabelMobileRedirectURIsDescription": "Essa é uma lista de permissionamento para URIs válidas para o redirecionamento de aplicativos móveis. A padrão é <code>audiobookshelf://oauth</code>, que pode ser removida ou acrescentada com novas URIs para integração com apps de terceiros. Usando um asterisco (<code>*</code>) como um item único dará permissão para qualquer URI.",
   "LabelMore": "Mais",

server/controllers/LibraryController.js

@@ -660,6 +660,7 @@ class LibraryController {
     for (const author of authors) {
       const oldAuthor = author.getOldAuthor().toJSON()
       oldAuthor.numBooks = author.books.length
+      oldAuthor.lastFirst = author.lastFirst
       oldAuthors.push(oldAuthor)
     }