Cleaning up, adding readme and images, genre filter

.dockerignore

@@ -6,4 +6,5 @@ npm-debug.log
 /audiobooks
 /metadata
 dev.js
-/test/
+/test/
+/client/.nuxt/

client/components/app/Appbar.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full h-16 bg-primary relative">
-    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-20">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-30">
       <div class="flex h-full items-center">
         <img v-if="!showBack" src="/LogoTransparent.png" class="w-12 h-12 mr-4" />
         <a v-if="showBack" @click="back" class="rounded-full h-12 w-12 flex items-center justify-center hover:bg-white hover:bg-opacity-10 mr-4 cursor-pointer">

client/components/app/BookShelf.vue

@@ -20,9 +20,6 @@
 </template>
 
 <script>
-import { sort } from '@/assets/fastSort'
-console.log('SORT', sort)
-
 export default {
   data() {
     return {

client/components/app/BookShelfToolbar.vue

@@ -1,11 +1,9 @@
 <template>
   <div class="w-full h-10 relative">
-    <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-10 flex items-center px-8">
-      <!-- <p>Order By: {{ settings.orderBy }}</p>
-      <p class="px-4">Desc: {{ settings.orderDesc ? 'Desc' : 'Asc' }}</p> -->
+    <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-20 flex items-center px-8">
       <p class="font-book">{{ numShowing }} Audiobooks</p>
       <div class="flex-grow" />
-      <controls-filter-select v-model="settings.filterBy" class="w-28 h-7.5" @change="updateFilter" />
+      <controls-filter-select v-model="settings.filterBy" class="w-40 h-7.5" @change="updateFilter" />
       <span class="px-4 text-sm">by</span>
       <controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-40 h-7.5" @change="updateOrder" />
     </div>

client/components/cards/BookCover.vue

@@ -8,7 +8,7 @@
       </div>
     </div>
     <div v-if="!hasCover" class="absolute left-0 right-0 w-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem', bottom: authorBottom + 'rem' }">
-      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ author }}</p>
+      <p class="text-center font-book" style="color: rgb(247 223 187); opacity: 0.75" :style="{ fontSize: authorFontSize + 'rem' }">{{ authorCleaned }}</p>
     </div>
   </div>
 </template>
@@ -36,14 +36,20 @@ export default {
       return this.book.title || 'No Title'
     },
     titleCleaned() {
-      if (this.title.length > 75) {
-        return this.title.slice(0, 47) + '...'
+      if (this.title.length > 60) {
+        return this.title.slice(0, 57) + '...'
       }
       return this.title
     },
     author() {
       return this.book.author || 'Unknown'
     },
+    authorCleaned() {
+      if (this.author.length > 30) {
+        return this.author.slice(0, 27) + '...'
+      }
+      return this.author
+    },
     cover() {
       return this.book.cover || '/book_placeholder.jpg'
     },

client/components/controls/FilterSelect.vue

@@ -2,7 +2,7 @@
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
     <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
-        <span class="block truncate" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
@@ -11,15 +11,42 @@
       </span>
     </button>
 
-    <ul v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-56 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm" role="listbox" aria-labelledby="listbox-label">
-      <template v-for="item in items">
-        <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item.value)">
-          <div class="flex items-center">
-            <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+    <div v-show="showMenu" class="absolute z-10 mt-1 w-full bg-bg border border-black-200 shadow-lg max-h-80 rounded-md py-1 text-base ring-1 ring-black ring-opacity-5 overflow-auto focus:outline-none sm:text-sm">
+      <ul v-show="!sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <template v-for="item in items">
+          <li :key="item.value" class="text-gray-50 select-none relative py-2 pr-9 cursor-pointer hover:bg-black-400" :class="item.value === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedOption(item)">
+            <div class="flex items-center justify-between">
+              <span class="font-normal ml-3 block truncate">{{ item.text }}</span>
+            </div>
+            <div v-if="item.sublist" class="absolute right-1 top-0 bottom-0 h-full flex items-center">
+              <span class="material-icons">arrow_right</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+      <ul v-show="sublist" class="h-full w-full" role="listbox" aria-labelledby="listbox-label">
+        <li class="text-gray-50 select-none relative py-2 pl-9 cursor-pointer hover:bg-black-400" role="option" @click="sublist = null">
+          <div class="absolute left-1 top-0 bottom-0 h-full flex items-center">
+            <span class="material-icons">arrow_left</span>
+          </div>
+          <div class="flex items-center justify-between">
+            <span class="font-normal ml-3 block truncate">Back</span>
           </div>
         </li>
-      </template>
-    </ul>
+        <li v-if="!sublistItems.length" class="text-gray-400 select-none relative px-2" role="option">
+          <div class="flex items-center justify-center">
+            <span class="font-normal block truncate py-2">No {{ sublist }}</span>
+          </div>
+        </li>
+        <template v-for="item in sublistItems">
+          <li :key="item" class="text-gray-50 select-none relative px-2 cursor-pointer hover:bg-black-400" :class="`${sublist}.${item}` === selected ? 'bg-primary bg-opacity-50' : ''" role="option" @click="clickedSublistOption(item)">
+            <div class="flex items-center">
+              <span class="font-normal truncate py-2 text-xs">{{ snakeToNormal(item) }}</span>
+            </div>
+          </li>
+        </template>
+      </ul>
+    </div>
   </div>
 </template>
 
@@ -31,6 +58,7 @@ export default {
   data() {
     return {
       showMenu: false,
+      sublist: null,
       items: [
         {
           text: 'All',
@@ -38,15 +66,25 @@ export default {
         },
         {
           text: 'Genre',
-          value: 'genre'
+          value: 'genres',
+          sublist: true
         },
         {
           text: 'Tag',
-          value: 'tag'
+          value: 'tags',
+          sublist: true
         }
       ]
     }
   },
+  watch: {
+    showMenu(newVal) {
+      if (!newVal) {
+        if (this.sublist && !this.selectedItemSublist) this.sublist = null
+        if (!this.sublist && this.selectedItemSublist) this.sublist = this.selectedItemSublist
+      }
+    }
+  },
   computed: {
     selected: {
       get() {
@@ -56,17 +94,53 @@ export default {
         this.$emit('input', val)
       }
     },
+    selectedItemSublist() {
+      return this.selected && this.selected.includes('.') ? this.selected.split('.')[0] : false
+    },
     selectedText() {
+      if (!this.selected) return ''
+      var parts = this.selected.split('.')
+      if (parts.length > 1) {
+        return this.snakeToNormal(parts[1])
+      }
       var _sel = this.items.find((i) => i.value === this.selected)
       if (!_sel) return ''
       return _sel.text
+    },
+    genres() {
+      return this.$store.state.audiobooks.genres
+    },
+    tags() {
+      return this.$store.state.audiobooks.tags
+    },
+    sublistItems() {
+      return this[this.sublist] || []
     }
   },
   methods: {
+    snakeToNormal(kebab) {
+      if (!kebab) {
+        return 'err'
+      }
+      return String(kebab)
+        .split('_')
+        .map((t) => t.slice(0, 1).toUpperCase() + t.slice(1))
+        .join(' ')
+    },
     clickOutside() {
+      if (!this.selectedItemSublist) this.sublist = null
       this.showMenu = false
     },
-    clickedOption(val) {
+    clickedSublistOption(item) {
+      this.clickedOption({ value: `${this.sublist}.${item}` })
+    },
+    clickedOption(option) {
+      if (option.sublist) {
+        this.sublist = option.value
+        return
+      }
+
+      var val = option.value
       if (this.selected === val) {
         this.showMenu = false
         return

client/components/controls/OrderSelect.vue

@@ -2,8 +2,8 @@
   <div ref="wrapper" class="relative" v-click-outside="clickOutside">
     <button type="button" class="relative w-full h-full bg-fg border border-gray-500 hover:border-gray-300 rounded shadow-sm pl-3 pr-3 py-0 text-left focus:outline-none sm:text-sm cursor-pointer" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label" @click.prevent="showMenu = !showMenu">
       <span class="flex items-center justify-between">
-        <span class="block truncate" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
-        <span class="material-icons text-xl text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
+        <span class="block truncate text-xs" :class="!selectedText ? 'text-gray-300' : ''">{{ selectedText }}</span>
+        <span class="material-icons text-lg text-yellow-400">{{ descending ? 'expand_more' : 'expand_less' }}</span>
       </span>
       <!-- <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <svg class="h-5 w-5 text-gray-400" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">

client/components/modals/Modal.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-20 opacity-0">
+  <div ref="wrapper" class="modal modal-bg w-full h-full fixed top-0 left-0 bg-primary bg-opacity-50 flex items-center justify-center z-30 opacity-0">
     <div class="absolute top-0 left-0 right-0 w-full h-36 bg-gradient-to-t from-transparent via-black-500 to-black-700 opacity-90 pointer-events-none" />
 
     <div class="absolute top-5 right-5 h-12 w-12 flex items-center justify-center cursor-pointer text-white hover:text-gray-300" @click="show = false">

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

@@ -18,7 +18,7 @@
 
       <ui-textarea-with-label v-model="details.description" :rows="3" label="Description" class="mt-2" />
 
-      <ui-multi-select v-model="details.genre" label="Genre" :items="genres" class="mt-2" @addOption="addGenre" />
+      <ui-multi-select v-model="details.genres" label="Genre" :items="genres" class="mt-2" @addOption="addGenre" />
 
       <div class="flex py-4">
         <ui-btn color="error" type="button" small @click.stop.prevent="deleteAudiobook">Remove</ui-btn>
@@ -45,7 +45,7 @@ export default {
         description: null,
         author: null,
         series: null,
-        genre: []
+        genres: []
       },
       resettingProgress: false,
       genres: ['adventure', 'autobiography', 'biography', 'childrens', 'comedy', 'crime', 'dystopian', 'fantasy', 'fiction', 'health', 'history', 'horror', 'mystery', 'new_adult', 'nonfiction', 'philosophy', 'politics', 'religion', 'romance', 'sci-fi', 'self-help', 'short_story', 'technology', 'thriller', 'true_crime', 'western', 'young_adult']
@@ -109,7 +109,7 @@ export default {
       this.details.title = this.book.title
       this.details.description = this.book.description
       this.details.author = this.book.author
-      this.details.genre = this.book.genre || []
+      this.details.genres = this.book.genres || []
       this.details.series = this.book.series
     },
     resetProgress() {

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

@@ -55,7 +55,6 @@ export default {
     return {
       search: null,
       lastSearch: null,
-      processing: false,
       searchResults: []
     }
   },

client/components/ui/MultiSelect.vue

@@ -99,16 +99,11 @@ export default {
         return
       }
       this.currentSearch = this.textInput
-      // this.itemsToShow = this.items.filter((i) => {
-      //   var iValue = String(i.value).toLowerCase()
-      //   return iValue.includes(this.currentSearch.toLowerCase())
-      // })
     },
     keydownInput() {
       clearTimeout(this.typingTimeout)
       this.isTyping = true
       this.typingTimeout = setTimeout(() => {
-        // this.setMatchingItems()
         this.currentSearch = this.textInput
       }, 100)
       this.setInputWidth()
@@ -145,7 +140,6 @@ export default {
       }
       this.isFocused = true
       this.recalcMenuPos()
-      // this.$refs.input.style.width = '100px'
     },
     inputBlur() {
       setTimeout(() => {
@@ -165,15 +159,12 @@ export default {
       e.stopPropagation()
       e.preventDefault()
       if (this.$refs.input) this.$refs.input.focus()
-      // this.$nextTick(() => {
-      //   this.$refs.input.focus()
-      // })
+
       var newSelected = null
       if (this.selected.includes(itemValue)) {
         newSelected = this.selected.filter((s) => s !== itemValue)
       } else {
         newSelected = this.selected.concat([itemValue])
-        // this.blur()
       }
       this.textInput = null
       this.currentSearch = null

client/package.json

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

client/pages/audiobook/_id/edit.vue

@@ -29,10 +29,10 @@
             <div class="font-book text-center px-4 w-12">
               {{ audio.index }}
             </div>
-            <div class="font-book text-center px-2 w-40">
+            <div class="font-book text-center px-2 w-32">
               {{ audio.trackNumFromFilename }}
             </div>
-            <div class="font-book text-center w-40">
+            <div class="font-book text-center w-32">
               {{ audio.trackNumFromMeta }}
             </div>
             <div class="font-book truncate px-4 flex-grow">

client/store/audiobooks.js

@@ -1,13 +1,31 @@
 import { sort } from '@/assets/fastSort'
 
+const STANDARD_GENRES = ['adventure', 'autobiography', 'biography', 'childrens', 'comedy', 'crime', 'dystopian', 'fantasy', 'fiction', 'health', 'history', 'horror', 'mystery', 'new_adult', 'nonfiction', 'philosophy', 'politics', 'religion', 'romance', 'sci-fi', 'self-help', 'short_story', 'technology', 'thriller', 'true_crime', 'western', 'young_adult']
+
 export const state = () => ({
   audiobooks: [],
-  listeners: []
+  listeners: [],
+  genres: [...STANDARD_GENRES],
+  tags: []
 })
 
 export const getters = {
   getFiltered: (state, getters, rootState) => () => {
     var filtered = state.audiobooks
+    var settings = rootState.settings.settings || {}
+    var filterBy = settings.filterBy || ''
+    var filterByParts = filterBy.split('.')
+    if (filterByParts.length > 1) {
+      var primary = filterByParts[0]
+      var secondary = filterByParts[1]
+      if (primary === 'genres') {
+        filtered = filtered.filter(ab => {
+          return ab.book && ab.book.genres.includes(secondary)
+        })
+      } else if (primary === 'tags') {
+        filtered = filtered.filter(ab => ab.tags.includes(secondary))
+      }
+    }
     // TODO: Add filters
     return filtered
   },
@@ -40,7 +58,21 @@ export const actions = {
 
 export const mutations = {
   set(state, audiobooks) {
-    console.log('Set Audiobooks', audiobooks)
+    // GENRES
+    var genres = [...state.genres]
+    audiobooks.forEach((ab) => {
+      if (!ab.book) return
+      genres = genres.concat(ab.book.genres)
+    })
+    state.genres = [...new Set(genres)] // Remove Duplicates
+
+    // TAGS
+    var tags = []
+    audiobooks.forEach((ab) => {
+      tags = tags.concat(ab.tags)
+    })
+    state.tags = [...new Set(tags)] // Remove Duplicates
+
     state.audiobooks = audiobooks
     state.listeners.forEach((listener) => {
       listener.meth()
@@ -49,13 +81,28 @@ export const mutations = {
   addUpdate(state, audiobook) {
     var index = state.audiobooks.findIndex(a => a.id === audiobook.id)
     if (index >= 0) {
-      console.log('Audiobook Updated', audiobook)
       state.audiobooks.splice(index, 1, audiobook)
     } else {
-      console.log('Audiobook Added', audiobook)
       state.audiobooks.push(audiobook)
     }
 
+    // GENRES
+    if (audiobook.book) {
+      var newGenres = []
+      audiobook.book.genres.forEach((genre) => {
+        if (!state.genres.includes(genre)) newGenres.push(genre)
+      })
+      if (newGenres.length) state.genres = state.genres.concat(newGenres)
+    }
+
+    // TAGS
+    var newTags = []
+    audiobook.tags.forEach((tag) => {
+      if (!state.tags.includes(tag)) newTags.push(tag)
+    })
+    if (newTags.length) state.tags = state.tags.concat(newTags)
+
+
     state.listeners.forEach((listener) => {
       if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
         listener.meth()
@@ -63,9 +110,35 @@ export const mutations = {
     })
   },
   remove(state, audiobook) {
-    console.log('Audiobook removed', audiobook)
     state.audiobooks = state.audiobooks.filter(a => a.id !== audiobook.id)
 
+    // GENRES
+    if (audiobook.book) {
+      audiobook.book.genres.forEach((genre) => {
+        if (!STANDARD_GENRES.includes(genre)) {
+          var isInOtherAB = state.audiobooks.find(ab => {
+            return ab.book && ab.book.genres.includes(genre)
+          })
+          if (!isInOtherAB) {
+            // Genre is not used by any other audiobook - remove it
+            state.genres = state.genres.filter(g => g !== genre)
+          }
+        }
+      })
+    }
+
+    // TAGS
+    audiobook.tags.forEach((tag) => {
+      var isInOtherAB = state.audiobooks.find(ab => {
+        return ab.tags.includes(tag)
+      })
+      if (!isInOtherAB) {
+        // Tag is not used by any other audiobook - remove it
+        state.tags = state.tags.filter(t => t !== tag)
+      }
+    })
+
+
     state.listeners.forEach((listener) => {
       if (!listener.audiobookId || listener.audiobookId === audiobook.id) {
         listener.meth()

package.json

@@ -1,7 +1,7 @@
 {
   "name": "audiobookshelf",
-  "version": "0.9.51",
-  "description": "",
+  "version": "0.9.52",
+  "description": "Self-hosted audiobook server for managing and playing audiobooks.",
   "main": "index.js",
   "scripts": {
     "dev": "node index.js",

readme.md

@@ -0,0 +1,32 @@
+# AudioBookshelf
+
+AudioBookshelf is a self-hosted audiobook server for managing and playing your audiobooks.
+
+**Currently in early beta**
+
+<img alt="Screenshot1" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_bookshelf.png" />
+
+Missing a lot of features still, like...
+
+* Scanner is intended for file structure `[author name]/[title]/...`
+* Adding new audiobooks require pressing Scan button again (on settings page)
+* Matching is all manual now and only using 1 source (openlibrary)
+* Need to add cover selection from match results
+* Different views to see more details of each audiobook
+* Mobile app will be next..
+
+<img alt="Screenshot2" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_streaming.png" />
+
+## Installation
+
+Built to run in Docker for now (also on Unraid server Community Apps)
+
+```bash
+docker run -d -p 1337:80 -v /audiobooks:/audiobooks -v /config:/config -v /metadata:/metadata --name audiobookshelf --rm advplyr/audiobookshelf
+```
+
+<img alt="Screenshot3" src="https://github.com/advplyr/audiobookshelf/raw/master/static/ss_audiobook.png" />
+
+## Contributing
+
+Feel free to help out

server/ApiController.js

@@ -28,6 +28,8 @@ class ApiController {
     this.router.delete('/user/audiobook/:id', this.resetUserAudiobookProgress.bind(this))
 
     this.router.post('/authorize', this.authorize.bind(this))
+
+    this.router.get('/genres', this.getGenres.bind(this))
   }
 
   find(req, res) {
@@ -139,5 +141,11 @@ class ApiController {
     this.emitter('user_updated', req.user.toJSONForBrowser())
     res.sendStatus(200)
   }
+
+  getGenres(req, res) {
+    res.json({
+      genres: this.db.getGenres()
+    })
+  }
 }
 module.exports = ApiController

server/Audiobook.js

@@ -57,6 +57,10 @@ class Audiobook {
     return this.book ? this.book.author : 'Unknown'
   }
 
+  get genres() {
+    return this.book ? this.book.genres || [] : []
+  }
+
   get totalDuration() {
     var total = 0
     this.tracks.forEach((track) => total += track.duration)

server/Book.js

@@ -8,7 +8,7 @@ class Book {
     this.publisher = null
     this.description = null
     this.cover = null
-    this.genre = []
+    this.genres = []
 
     if (book) {
       this.construct(book)
@@ -24,7 +24,7 @@ class Book {
     this.publisher = book.publisher
     this.description = book.description
     this.cover = book.cover
-    this.genre = book.genre
+    this.genres = book.genres
   }
 
   toJSON() {
@@ -37,7 +37,7 @@ class Book {
       publisher: this.publisher,
       description: this.description,
       cover: this.cover,
-      genre: this.genre
+      genres: this.genres
     }
   }
 
@@ -49,7 +49,7 @@ class Book {
     this.publishYear = data.publish_year || null
     this.description = data.description || null
     this.cover = data.cover || null
-    this.genre = data.genre || []
+    this.genres = data.genres || []
   }
 
   update(payload) {
@@ -57,12 +57,12 @@ class Book {
     for (const key in payload) {
       if (payload[key] === undefined) continue;
 
-      if (key === 'genre') {
-        if (payload['genre'] === null && this.genre !== null) {
-          this.genre = []
+      if (key === 'genres') {
+        if (payload['genres'] === null && this.genres !== null) {
+          this.genres = []
           hasUpdates = true
-        } else if (payload['genre'].join(',') !== this.genre.join(',')) {
-          this.genre = payload['genre']
+        } else if (payload['genres'].join(',') !== this.genres.join(',')) {
+          this.genres = payload['genres']
           hasUpdates = true
         }
       } else if (this[key] !== undefined && payload[key] !== this[key]) {

server/Db.js

@@ -154,5 +154,23 @@ class Db {
       Logger.error(`[DB] Remove entity ${entityName} Failed: ${error}`)
     })
   }
+
+  getGenres() {
+    var allGenres = []
+    this.db.audiobooks.forEach((audiobook) => {
+      allGenres = allGenres.concat(audiobook.genres)
+    })
+    allGenres = [...new Set(allGenres)] // Removes duplicates
+    return allGenres
+  }
+
+  getTags() {
+    var allTags = []
+    this.db.audiobooks.forEach((audiobook) => {
+      allTags = allTags.concat(audiobook.tags)
+    })
+    allTags = [...new Set(allTags)] // Removes duplicates
+    return allTags
+  }
 }
 module.exports = Db

server/utils/audioFileScanner.js

@@ -106,12 +106,10 @@ async function scanParts(audiobook, parts) {
     }
     audiobook.audioFiles.push(audioFileObj)
 
-    var trackNumber = isNumber(trackNumFromMeta) ? trackNumFromMeta : trackNumFromFilename
-    if (trackNumber === null) {
-      if (parts.length === 1) {
-        // Only 1 track
-        trackNumber = 1
-      } else {
+    var trackNumber = 1
+    if (parts.length > 1) {
+      trackNumber = isNumber(trackNumFromMeta) ? trackNumFromMeta : trackNumFromFilename
+      if (trackNumber === null) {
         Logger.error('Invalid track number for', parts[i])
         audioFileObj.invalid = true
         audioFileObj.error = 'Failed to get track number'
@@ -136,6 +134,11 @@ async function scanParts(audiobook, parts) {
   }
 
   tracks.sort((a, b) => a.index - b.index)
+  audiobook.audioFiles.sort((a, b) => {
+    var aNum = isNumber(a.trackNumFromMeta) ? a.trackNumFromMeta : isNumber(a.trackNumFromFilename) ? a.trackNumFromFilename : 0
+    var bNum = isNumber(b.trackNumFromMeta) ? b.trackNumFromMeta : isNumber(b.trackNumFromFilename) ? b.trackNumFromFilename : 0
+    return aNum - bNum
+  })
 
   // If first index is 0, increment all by 1
   if (tracks[0].index === 0) {