Fix config page not scrolling, add scroll arrows on home page, fix routing issue on back button, fix continue reading shelf

Starting point for home page
Remove ino from file tables
2026-06-01 16:30:39 +02:00 · 2021-09-28 17:36:41 -05:00 · 2021-09-28 06:44:40 -05:00 · 2021-09-27 07:02:31 -05:00 · 2021-09-27 06:52:21 -05:00 · 2021-09-26 17:21:10 -05:00
70 changed files with 2812 additions and 221 deletions
@@ -10,4 +10,5 @@ npm-debug.log
 dev.js
 test/
 /client/.nuxt/
-/client/dist/
+/client/dist/
+/dist/
@@ -7,4 +7,5 @@ node_modules/
 /metadata/
 test/
 /client/.nuxt/
-/client/dist/
+/client/dist/
+/dist/
@@ -0,0 +1,8 @@
+Package: audiobookshelf
+Version: 1.2.1
+Section: base
+Priority: optional
+Architecture: amd64
+Depends:
+Maintainer: advplyr
+Description: Self-hosted audiobook server for managing and playing audiobooks
@@ -0,0 +1,85 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+declare -r init_type='auto'
+declare -ri no_rebuild='0'
+
+add_user() {
+  : "${1:?'User was not defined'}"
+  declare -r user="$1"
+  declare -r uid="$2"
+
+  if [ -z "$uid" ]; then
+    declare -r uid_flags=""
+  else
+    declare -r uid_flags="--uid $uid"
+  fi
+
+  declare -r group="${3:-$user}"
+  declare -r descr="${4:-No description}"
+  declare -r shell="${5:-/bin/false}"
+
+  if ! getent passwd | grep -q "^$user:"; then
+    echo "Creating system user: $user in $group with $descr and shell $shell"
+    useradd $uid_flags --gid $group --no-create-home --system --shell $shell -c "$descr" $user
+  fi
+}
+
+add_group() {
+  : "${1:?'Group was not defined'}"
+  declare -r group="$1"
+  declare -r gid="$2"
+
+  if [ -z "$gid" ]; then
+    declare -r gid_flags=""
+  else
+    declare -r gid_flags="--gid $gid"
+  fi
+
+  if ! getent group | grep -q "^$group:" ; then
+    echo "Creating system group: $group"
+    groupadd $gid_flags --system $group
+  fi
+}
+
+start_service () {
+  : "${1:?'Service name was not defined'}"
+  declare -r service_name="$1"
+
+  if hash systemctl 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'systemd' ]]; then
+      {
+        systemctl enable "$service_name.service" && \
+        systemctl start "$service_name.service"
+      } || echo "$service_name could not be registered or started"
+    fi
+  elif hash service 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'upstart' || "$init_type" == 'sysv' ]]; then
+      service "$service_name" start || echo "$service_name could not be registered or started"
+    fi
+  elif hash start 2> /dev/null; then
+    if [[ "$init_type" == 'auto' || "$init_type" == 'upstart' ]]; then
+      start "$service_name" || echo "$service_name could not be registered or started"
+    fi
+  elif hash update-rc.d 2> /dev/null; then
+      if [[ "$init_type" == 'auto' || "$init_type" == 'sysv' ]]; then
+      {
+        update-rc.d "$service_name" defaults && \
+        "/etc/init.d/$service_name" start
+      } || echo "$service_name could not be registered or started"
+    fi
+  else
+    echo 'Your system does not appear to use systemd, Upstart, or System V, so the service could not be started'
+  fi
+}
+
+
+add_group 'audiobookshelf' ''
+add_user 'audiobookshelf' '' 'audiobookshelf' 'audiobookshelf user-daemon' '/bin/false'
+
+mkdir -p '/var/log/audiobookshelf'
+chown -R 'audiobookshelf:audiobookshelf' '/var/log/audiobookshelf'
+chown -R 'audiobookshelf:audiobookshelf' '/usr/share/audiobookshelf'
+
+start_service 'audiobookshelf'
@@ -0,0 +1,99 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+DEFAULT_AUDIOBOOK_PATH="/usr/share/audiobookshelf/audiobooks"
+DEFAULT_DATA_PATH="/usr/share/audiobookshelf"
+DEFAULT_PORT=7331
+
+CONFIG_PATH="/etc/default/audiobookshelf"
+
+install_ffmpeg() {
+  echo "Starting FFMPEG Install"
+
+  WGET="wget https://johnvansickle.com/ffmpeg/builds/ffmpeg-git-amd64-static.tar.xz"
+  TARGET_DIR="/usr/lib/audiobookshelf-ffmpeg/"
+
+  if ! cd "$TARGET_DIR"; then
+    echo "WARNING: can't access working directory ($TARGET_DIR) creating it" >&2
+    mkdir "$TARGET_DIR"
+    cd "$TARGET_DIR"
+  fi
+
+  $WGET
+  tar xvf ffmpeg-git-amd64-static.tar.xz --strip-components=1
+  rm ffmpeg-git-amd64-static.tar.xz
+
+  chown -R 'audiobookshelf:audiobookshelf' "$TARGET_DIR"
+
+  echo "Good to go on Ffmpeg... hopefully"
+}
+
+should_build_config() {
+  if [ -f "$CONFIG_PATH" ]; then
+    echo "You already have a config file. Do you want to use it?"
+
+    options=("Yes" "No")
+    select yn in "${options[@]}"
+    do
+      case $yn in
+          "Yes") 
+            false; return
+            ;;
+          "No")
+            true; return
+            ;;
+      esac
+    done
+  else 
+    echo "No existing config found in $CONFIG_PATH"
+    true; return
+  fi
+}
+
+setup_config() {
+  if should_build_config; then
+    echo "Okay, let's setup a new config."
+
+    AUDIOBOOK_PATH=""
+    read -p "
+    Enter path for your audiobooks [Default: $DEFAULT_AUDIOBOOK_PATH]:" AUDIOBOOK_PATH
+
+    if [[ -z "$AUDIOBOOK_PATH" ]]; then
+      AUDIOBOOK_PATH="$DEFAULT_AUDIOBOOK_PATH"
+    fi
+
+    DATA_PATH=""
+    read -p "
+    Enter path for data files, i.e. streams, downloads, database [Default: $DEFAULT_DATA_PATH]:" DATA_PATH
+
+    if [[ -z "$DATA_PATH" ]]; then
+      DATA_PATH="$DEFAULT_DATA_PATH"
+    fi
+
+    PORT=""
+    read -p "
+    Port for the web ui [Default: $DEFAULT_PORT]:" PORT
+
+    if [[ -z "$PORT" ]]; then
+      PORT="$DEFAULT_PORT"
+    fi
+
+    config_text="AUDIOBOOK_PATH=$AUDIOBOOK_PATH
+  METADATA_PATH=$DATA_PATH/metadata
+  CONFIG_PATH=$DATA_PATH/config
+  FFMPEG_PATH=/usr/lib/audiobookshelf-ffmpeg/ffmpeg
+  PORT=$PORT"
+
+    echo "$config_text"
+
+    echo "$config_text" > /etc/default/audiobookshelf;
+
+    echo "Config created"
+
+  fi
+}
+
+setup_config
+
+install_ffmpeg
@@ -0,0 +1,26 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+declare -r init_type='auto'
+declare -r service_name='audiobookshelf'
+
+if [[ "$init_type" == 'auto' || "$init_type" == 'systemd' || "$init_type" == 'upstart' || "$init_type" == 'sysv' ]]; then
+  if hash systemctl 2> /dev/null; then
+    systemctl disable "$service_name.service" && \
+    systemctl stop "$service_name.service" || \
+    echo "$service_name wasn't even running!"
+  elif hash service 2> /dev/null; then
+    service "$service_name" stop || echo "$service_name wasn't even running!"
+  elif hash stop 2> /dev/null; then
+    stop "$service_name" || echo "$service_name wasn't even running!"
+  elif hash update-rc.d 2> /dev/null; then
+    {
+      update-rc.d "$service_name" remove && \
+      "/etc/init.d/$service_name" stop
+    } || "$service_name wasn't even running!"
+  else
+    echo "Your system does not appear to use upstart, systemd or sysv, so $service_name could not be stopped"
+    echo 'Unless these systems were removed since install, no processes have been left running'
+  fi
+fi
@@ -0,0 +1,16 @@
+[Unit]
+Description=Self-hosted audiobook server for managing and playing audiobooks
+Requires=network.target
+
+[Service]
+Type=simple
+EnvironmentFile=/etc/default/audiobookshelf
+WorkingDirectory=/usr/share/audiobookshelf
+ExecStart=/usr/share/audiobookshelf/audiobookshelf
+ExecReload=/bin/kill -HUP $MAINPID
+Restart=always
+User=audiobookshelf
+PermissionsStartOnly=true
+
+[Install]
+WantedBy=multi-user.target
@@ -0,0 +1,57 @@
+#!/bin/bash
+set -e
+set -o pipefail
+
+SCRIPT_DIR="$( cd "$( dirname "${BASH_SOURCE[0]}" )" &> /dev/null && pwd )"
+
+cd "$SCRIPT_DIR/.."
+
+# Get package version without double quotes
+VERSION="$( eval echo $( jq '.version' package.json) )"
+DESCRIPTION="$( eval echo $( jq '.description' package.json) )"
+OUTPUT_FILE="audiobookshelf_${VERSION}_amd64.deb"
+
+echo ">>> Building Client"
+echo "--------------------"
+
+cd client
+rm -rf node_modules
+npm ci --unsafe-perm=true --allow-root
+npm run generate
+cd ..
+
+echo ">>> Building Server"
+echo "--------------------"
+
+rm -rf node_modules
+npm ci --unsafe-perm=true --allow-root
+
+echo ">>> Packaging"
+echo "--------------------"
+
+# Create debian control file
+
+mkdir -p dist
+cp -R build/debian dist/debian
+chmod -R 775 dist/debian
+
+controlfile="Package: audiobookshelf
+Version: $VERSION
+Section: base
+Priority: optional
+Architecture: amd64
+Depends:
+Maintainer: advplyr
+Description: $DESCRIPTION"
+
+echo "$controlfile" > dist/debian/DEBIAN/control;
+
+# Package debian
+pkg -t node12-linux-x64 -o dist/debian/usr/share/audiobookshelf/audiobookshelf .
+
+fakeroot dpkg-deb --build dist/debian
+
+mv dist/debian.deb "dist/$OUTPUT_FILE"
+chmod +x "dist/$OUTPUT_FILE"
+
+echo "Finished! Filename: $OUTPUT_FILE"
@@ -9,20 +9,38 @@
  height: calc(100% - 64px - 165px);
  max-height: calc(100% - 64px - 165px);
 }
+#bookshelf {
+  height: calc(100% - 40px);
+}

 /* width */
 ::-webkit-scrollbar {
  width: 8px;
 }
+/* ::-webkit-scrollbar:horizontal { */
+  /* height: 16px; */
+  /* height: 24px;
+} */
 /* Track */
 ::-webkit-scrollbar-track {
  background-color: rgba(0,0,0,0);
 }
+/* ::-webkit-scrollbar-track:horizontal { */
+  /* background: rgb(149, 119, 90); */
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
+  /* background: linear-gradient(180deg, rgb(117, 88, 60) 0%, rgb(65, 41, 17) 17%, rgb(71, 43, 15) 88%, rgb(3, 2, 1) 100%);
+  box-shadow: 2px 14px 8px #111111aa;
+} */
 /* Handle */
 ::-webkit-scrollbar-thumb {
  background: #855620; 
  border-radius: 4px;
 }
+/* ::-webkit-scrollbar-thumb:horizontal { */
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
+  /* box-shadow: 2px 14px 8px #111111aa; 
+  border-radius: 4px;
+} */
 /* Handle on hover */
 ::-webkit-scrollbar-thumb:hover {
  background: #704922; 
@@ -102,3 +120,11 @@
 .box-shadow-book {
  box-shadow: 4px 1px 8px #11111166, -4px 1px 8px #11111166, 1px -4px 8px #11111166;
 }
+
+.box-shadow-book3d {
+  box-shadow: 4px 1px 8px #11111166, 1px -4px 8px #11111166;
+}
+
+.box-shadow-side {
+  box-shadow: 5px 0px 5px #11111166;
+}
@@ -61,7 +61,9 @@

      <!-- Hover timestamp -->
      <div ref="hoverTimestamp" class="absolute -top-8 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
-        <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5">00:00</p>
+        <p ref="hoverTimestampText" class="text-xs font-mono text-center px-2 py-0.5 truncate whitespace-nowrap">00:00</p>
+      </div>
+      <div ref="hoverTimestampArrow" class="absolute -top-3 left-0 bg-white text-black rounded-full opacity-0 pointer-events-none">
        <div class="absolute -bottom-1.5 left-0 right-0 w-full flex justify-center">
          <div class="arrow-down" />
        </div>
@@ -103,7 +105,8 @@ export default {
      seekedTime: 0,
      seekLoading: false,
      showChaptersModal: false,
-      currentTime: 0
+      currentTime: 0,
+      trackOffsetLeft: 16 // Track is 16px from edge
    }
  },
  computed: {
@@ -187,7 +190,20 @@ export default {
      if (this.$refs.hoverTimestamp) {
        var width = this.$refs.hoverTimestamp.clientWidth
        this.$refs.hoverTimestamp.style.opacity = 1
-        this.$refs.hoverTimestamp.style.left = offsetX - width / 2 + 'px'
+        var posLeft = offsetX - width / 2
+        if (posLeft + width + this.trackOffsetLeft > window.innerWidth) {
+          posLeft = window.innerWidth - width - this.trackOffsetLeft
+        } else if (posLeft < -this.trackOffsetLeft) {
+          posLeft = -this.trackOffsetLeft
+        }
+        this.$refs.hoverTimestamp.style.left = posLeft + 'px'
+      }
+
+      if (this.$refs.hoverTimestampArrow) {
+        var width = this.$refs.hoverTimestampArrow.clientWidth
+        var posLeft = offsetX - width / 2
+        this.$refs.hoverTimestampArrow.style.opacity = 1
+        this.$refs.hoverTimestampArrow.style.left = posLeft + 'px'
      }
      if (this.$refs.hoverTimestampText) {
        var hoverText = this.$secondsToTimestamp(time)
@@ -207,6 +223,9 @@ export default {
      if (this.$refs.hoverTimestamp) {
        this.$refs.hoverTimestamp.style.opacity = 0
      }
+      if (this.$refs.hoverTimestampArrow) {
+        this.$refs.hoverTimestampArrow.style.opacity = 0
+      }
      if (this.$refs.trackCursor) {
        this.$refs.trackCursor.style.opacity = 0
      }
@@ -1,21 +1,22 @@
 <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-30">
+    <div id="appbar" class="absolute top-0 bottom-0 left-0 w-full h-full px-6 py-1 z-40">
      <div class="flex h-full items-center">
        <img v-if="!showBack" src="/Logo48.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">
          <span class="material-icons text-4xl text-white">arrow_back</span>
        </a>
        <h1 class="text-2xl font-book mr-6">AudioBookshelf</h1>
-
+        <!-- <div class="-mb-2">
+          <h1 class="text-lg font-book leading-3 mr-6 px-1">AudioBookshelf</h1>
+          <div class="bg-black bg-opacity-20 rounded-sm py-1.5 px-2 mt-1.5 flex items-center justify-between border border-bg">
+            <p class="text-sm text-gray-400 leading-3">My Library</p>
+            <span class="material-icons text-sm leading-3 text-gray-400">expand_more</span>
+          </div>
+        </div> -->
        <controls-global-search />
        <div class="flex-grow" />

-        <!-- <a v-if="isUpdateAvailable" :href="githubTagUrl" target="_blank" class="flex items-center rounded-full bg-warning p-2 text-sm">
-          <span class="material-icons">notification_important</span>
-          <span class="pl-2">Update is available! Check release notes for v{{ latestVersion }}</span>
-        </a> -->
-
        <nuxt-link v-if="userCanUpload" to="/upload" class="outline-none hover:text-gray-200 cursor-pointer w-8 h-8 flex items-center justify-center">
          <span class="material-icons">upload</span>
        </nuxt-link>
@@ -36,7 +37,9 @@

      <div v-show="numAudiobooksSelected" class="absolute top-0 left-0 w-full h-full px-4 bg-primary flex items-center">
        <h1 class="text-2xl px-4">{{ numAudiobooksSelected }} Selected</h1>
-        <ui-btn small class="text-sm mx-2" @click="toggleSelectAll">{{ isAllSelected ? 'Select None' : 'Select All' }}</ui-btn>
+        <ui-btn v-show="!isHome" small class="text-sm mx-2" @click="toggleSelectAll"
+          >{{ isAllSelected ? 'Select None' : 'Select All' }}<span class="pl-2">({{ audiobooksShowing.length }})</span></ui-btn
+        >

        <div class="flex-grow" />

@@ -45,10 +48,8 @@
        </ui-tooltip>
        <template v-if="userCanUpdate">
          <ui-icon-btn v-show="!processingBatchDelete" icon="edit" bg-color="warning" class="mx-1.5" @click="batchEditClick" />
-          <!-- <ui-btn v-show="!processingBatchDelete" color="warning" small class="mx-2 w-10 h-10" :padding-y="0" :padding-x="0" @click="batchEditClick"><span class="material-icons text-gray-200 text-base">edit</span></ui-btn> -->
        </template>
        <ui-icon-btn v-show="userCanDelete" :disabled="processingBatchDelete" icon="delete" bg-color="error" class="mx-1.5" @click="batchDeleteClick" />
-        <!-- <ui-btn v-if="userCanDelete" color="error" small class="mx-2" :loading="processingBatchDelete" @click="batchDeleteClick"><span class="material-icons text-gray-200 pt-1">delete</span></ui-btn> -->
        <span class="material-icons text-4xl px-4 hover:text-gray-100 cursor-pointer" :class="processingBatchDelete ? 'text-gray-400' : ''" @click="cancelSelectionMode">close</span>
      </div>
    </div>
@@ -63,8 +64,11 @@ export default {
    }
  },
  computed: {
+    isHome() {
+      return this.$route.name === 'index'
+    },
    showBack() {
-      return this.$route.name !== 'index'
+      return this.$route.name !== 'library-id' && !this.isHome
    },
    user() {
      return this.$store.state.user.user
@@ -72,6 +76,7 @@ export default {
    isRootUser() {
      return this.$store.getters['user/getIsRoot']
    },
+
    username() {
      return this.user ? this.user.username : 'err'
    },
@@ -88,7 +93,11 @@ export default {
      return this.$store.state.user.user.audiobooks || {}
    },
    audiobooksShowing() {
-      return this.$store.getters['audiobooks/getFiltered']()
+      // return this.$store.getters['audiobooks/getFiltered']()
+      return this.$store.getters['audiobooks/getEntitiesShowing']()
+    },
+    selectedSeries() {
+      return this.$store.state.audiobooks.selectedSeries
    },
    userCanUpdate() {
      return this.$store.getters['user/getUserCanUpdate']
@@ -111,12 +120,10 @@ export default {
    }
  },
  methods: {
-    back() {
-      if (this.$route.name === 'audiobook-id-edit') {
-        this.$router.push(`/audiobook/${this.$route.params.id}`)
-      } else {
-        this.$router.push('/')
-      }
+    async back() {
+      var popped = await this.$store.dispatch('popRoute')
+      var backTo = popped || '/'
+      this.$router.push(backTo)
    },
    cancelSelectionMode() {
      if (this.processingBatchDelete) return
@@ -1,5 +1,5 @@
 <template>
-  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-auto relative">
+  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
    <!-- Cover size widget -->
    <div v-show="!isSelectionMode" class="fixed bottom-2 right-4 z-20">
      <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
@@ -16,20 +16,24 @@
        <ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
      </div>
    </div>
-    <div v-else class="w-full flex flex-col items-center">
-      <template v-for="(shelf, index) in groupedBooks">
+    <div v-else id="bookshelf" class="w-full flex flex-col items-center">
+      <template v-for="(shelf, index) in shelves">
        <div :key="index" class="w-full bookshelfRow relative">
          <div class="flex justify-center items-center">
-            <template v-for="audiobook in shelf">
-              <cards-book-card :ref="`audiobookCard-${audiobook.id}`" :key="audiobook.id" :width="bookCoverWidth" :user-progress="userAudiobooks[audiobook.id]" :audiobook="audiobook" />
+            <template v-for="entity in shelf">
+              <cards-group-card v-if="showGroups" :key="entity.id" :width="bookCoverWidth" :group="entity" @click="clickGroup" />
+              <!-- <cards-book-3d :key="entity.id" v-else :width="100" :src="$store.getters['audiobooks/getBookCoverSrc'](entity.book)" /> -->
+              <cards-book-card v-else :key="entity.id" :show-volume-number="!!selectedSeries" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" />
            </template>
          </div>
          <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
        </div>
      </template>
-      <div v-show="!groupedBooks.length" class="w-full py-16 text-center text-xl">
-        <div class="py-4">No Audiobooks</div>
-        <ui-btn v-if="filterBy !== 'all' || keywordFilter" @click="clearFilter">Clear Filter</ui-btn>
+      <div v-show="!shelves.length" class="w-full py-16 text-center text-xl">
+        <div v-if="page === 'search'" class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
+        <div v-else class="py-4">No {{ showGroups ? 'Series' : 'Audiobooks' }}</div>
+        <ui-btn v-if="!showGroups && (filterBy !== 'all' || keywordFilter)" @click="clearFilter">Clear Filter</ui-btn>
+        <ui-btn v-else-if="page === 'search'" to="/library">Back to Library</ui-btn>
      </div>
    </div>
  </div>
@@ -37,22 +41,42 @@

 <script>
 export default {
+  props: {
+    page: String,
+    selectedSeries: String,
+    searchResults: {
+      type: Array,
+      default: () => []
+    },
+    searchQuery: String
+  },
  data() {
    return {
-      width: 0,
-      booksPerRow: 0,
-      groupedBooks: [],
+      shelves: [],
      currFilterOrderKey: null,
      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
      selectedSizeIndex: 3,
      rowPaddingX: 40,
      keywordFilterTimeout: null,
-      scannerParseSubtitle: false
+      scannerParseSubtitle: false,
+      wrapperClientWidth: 0
    }
  },
  watch: {
    keywordFilter() {
      this.checkKeywordFilter()
+    },
+    selectedSeries() {
+      this.$nextTick(() => {
+        this.$store.commit('audiobooks/setSelectedSeries', this.selectedSeries)
+        this.setBookshelfEntities()
+      })
+    },
+    searchResults() {
+      this.$nextTick(() => {
+        this.$store.commit('audiobooks/setSearchResults', this.searchResults)
+        this.setBookshelfEntities()
+      })
    }
  },
  computed: {
@@ -85,9 +109,29 @@ export default {
    },
    filterBy() {
      return this.$store.getters['user/getUserSetting']('filterBy')
+    },
+    showGroups() {
+      return this.page !== '' && this.page !== 'search' && !this.selectedSeries
+    },
+    entities() {
+      if (this.page === '') {
+        return this.$store.getters['audiobooks/getFilteredAndSorted']()
+      } else if (this.page === 'search') {
+        return this.searchResults || []
+      } else {
+        var seriesGroups = this.$store.getters['audiobooks/getSeriesGroups']()
+        if (this.selectedSeries) {
+          var group = seriesGroups.find((group) => group.name === this.selectedSeries)
+          return group.books
+        }
+        return seriesGroups
+      }
    }
  },
  methods: {
+    clickGroup(group) {
+      this.$emit('update:selectedSeries', group.name)
+    },
    clearFilter() {
      this.$store.commit('audiobooks/setKeywordFilter', null)
      if (this.filterBy !== 'all') {
@@ -95,13 +139,13 @@ export default {
          filterBy: 'all'
        })
      } else {
-        this.setGroupedBooks()
+        this.setBookshelfEntities()
      }
    },
    checkKeywordFilter() {
      clearTimeout(this.keywordFilterTimeout)
      this.keywordFilterTimeout = setTimeout(() => {
-        this.setGroupedBooks()
+        this.setBookshelfEntities()
      }, 500)
    },
    increaseSize() {
@@ -114,59 +158,52 @@ export default {
      this.resize()
      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
    },
-    setGroupedBooks() {
+    setBookshelfEntities() {
+      this.wrapperClientWidth = this.$refs.wrapper.clientWidth
+      var width = Math.max(0, this.wrapperClientWidth - this.rowPaddingX * 2)
+      var booksPerRow = Math.floor(width / this.bookWidth)
+
+      var entities = this.entities
      var groups = []
      var currentRow = 0
      var currentGroup = []

-      var audiobooksSorted = this.$store.getters['audiobooks/getFilteredAndSorted']()
-      this.currFilterOrderKey = this.filterOrderKey
-
-      for (let i = 0; i < audiobooksSorted.length; i++) {
-        var row = Math.floor(i / this.booksPerRow)
+      for (let i = 0; i < entities.length; i++) {
+        var row = Math.floor(i / booksPerRow)
        if (row > currentRow) {
          groups.push([...currentGroup])
          currentRow = row
          currentGroup = []
        }
-        currentGroup.push(audiobooksSorted[i])
+        currentGroup.push(entities[i])
      }
      if (currentGroup.length) {
        groups.push([...currentGroup])
      }
-      this.groupedBooks = groups
+      this.shelves = groups
    },
-    calculateBookshelf() {
-      this.width = this.$refs.wrapper.clientWidth
-      this.width = Math.max(0, this.width - this.rowPaddingX * 2)
-      var booksPerRow = Math.floor(this.width / this.bookWidth)
-      this.booksPerRow = booksPerRow
-    },
-    getAudiobookCard(id) {
-      if (this.$refs[`audiobookCard-${id}`] && this.$refs[`audiobookCard-${id}`].length) {
-        return this.$refs[`audiobookCard-${id}`][0]
-      }
-      return null
-    },
-    init() {
+    async init() {
+      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
+
      var bookshelfCoverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
      var sizeIndex = this.availableSizes.findIndex((s) => s === bookshelfCoverSize)
      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
-      this.calculateBookshelf()
+
+      var isLoading = await this.$store.dispatch('audiobooks/load')
+      if (!isLoading) {
+        this.setBookshelfEntities()
+      }
    },
    resize() {
-      this.$nextTick(() => {
-        this.calculateBookshelf()
-        this.setGroupedBooks()
-      })
+      this.$nextTick(this.setBookshelfEntities)
    },
    audiobooksUpdated() {
      console.log('[AudioBookshelf] Audiobooks Updated')
-      this.setGroupedBooks()
+      this.setBookshelfEntities()
    },
    settingsUpdated(settings) {
      if (this.currFilterOrderKey !== this.filterOrderKey) {
-        this.setGroupedBooks()
+        this.setBookshelfEntities()
      }
      if (settings.bookshelfCoverSize !== this.bookCoverWidth && settings.bookshelfCoverSize !== undefined) {
        var index = this.availableSizes.indexOf(settings.bookshelfCoverSize)
@@ -180,18 +217,24 @@ export default {
      this.$root.socket.emit('scan')
    }
  },
+  updated() {
+    if (this.$refs.wrapper) {
+      if (this.wrapperClientWidth !== this.$refs.wrapper.clientWidth) {
+        this.$nextTick(this.setBookshelfEntities)
+      }
+    }
+  },
  mounted() {
+    window.addEventListener('resize', this.resize)
    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })

-    this.$store.dispatch('audiobooks/load')
    this.init()
-    window.addEventListener('resize', this.resize)
  },
  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
    this.$store.commit('audiobooks/removeListener', 'bookshelf')
    this.$store.commit('user/removeSettingsListener', 'bookshelf')
-    window.removeEventListener('resize', this.resize)
  }
 }
 </script>
@@ -0,0 +1,158 @@
+<template>
+  <div id="bookshelf" ref="wrapper" class="w-full h-full overflow-y-scroll relative">
+    <!-- Cover size widget -->
+    <div class="fixed bottom-2 right-4 z-40">
+      <div class="rounded-full py-1 bg-primary px-2 border border-black-100 text-center flex items-center box-shadow-md" @mousedown.prevent @mouseup.prevent>
+        <span class="material-icons" :class="selectedSizeIndex === 0 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="decreaseSize">remove</span>
+        <p class="px-2 font-mono">{{ bookCoverWidth }}</p>
+        <span class="material-icons" :class="selectedSizeIndex === availableSizes.length - 1 ? 'text-gray-400' : 'hover:text-yellow-300 cursor-pointer'" style="font-size: 0.9rem" @mousedown.prevent @click="increaseSize">add</span>
+      </div>
+    </div>
+
+    <div v-if="!audiobooks.length" class="w-full flex flex-col items-center justify-center py-12">
+      <p class="text-center text-2xl font-book mb-4 py-4">Your Audiobookshelf is empty!</p>
+      <div class="flex">
+        <ui-btn to="/config" color="primary" class="w-52 mr-2" @click="scan">Configure Scanner</ui-btn>
+        <ui-btn color="success" class="w-52" @click="scan">Scan Audiobooks</ui-btn>
+      </div>
+    </div>
+    <div v-else id="bookshelf" class="w-full flex flex-col items-center">
+      <template v-for="(shelf, index) in shelves">
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
+      </template>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      availableSizes: [60, 80, 100, 120, 140, 160, 180, 200, 220],
+      selectedSizeIndex: 3,
+      rowPaddingX: 40,
+      keywordFilterTimeout: null,
+      scannerParseSubtitle: false,
+      wrapperClientWidth: 0,
+      overflowingShelvesRight: {},
+      overflowingShelvesLeft: {}
+    }
+  },
+  computed: {
+    userAudiobooks() {
+      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    },
+    audiobooks() {
+      return this.$store.state.audiobooks.audiobooks
+    },
+    bookCoverWidth() {
+      return this.availableSizes[this.selectedSizeIndex]
+    },
+    sizeMultiplier() {
+      return this.bookCoverWidth / 120
+    },
+    signSizeMultiplier() {
+      return (1 - this.sizeMultiplier) / 2 + this.sizeMultiplier
+    },
+    paddingX() {
+      return 16 * this.sizeMultiplier
+    },
+    bookWidth() {
+      return this.bookCoverWidth + this.paddingX * 2
+    },
+    mostRecentPlayed() {
+      var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].lastUpdate > 0 && this.userAudiobooks[ab.id].progress > 0 && !this.userAudiobooks[ab.id].isRead).map((ab) => ({ ...ab }))
+      audiobooks.sort((a, b) => {
+        return this.userAudiobooks[b.id].lastUpdate - this.userAudiobooks[a.id].lastUpdate
+      })
+      return audiobooks.slice(0, 10)
+    },
+    mostRecentAdded() {
+      var audiobooks = this.audiobooks.map((ab) => ({ ...ab })).sort((a, b) => b.addedAt - a.addedAt)
+      return audiobooks.slice(0, 10)
+    },
+    seriesGroups() {
+      return this.$store.getters['audiobooks/getSeriesGroups']()
+    },
+    recentlyUpdatedSeries() {
+      var mostRecentTime = 0
+      var mostRecentSeries = null
+      this.seriesGroups.forEach((series) => {
+        if ((series.books.length && mostRecentSeries === null) || series.lastUpdate > mostRecentTime) {
+          mostRecentTime = series.lastUpdate
+          mostRecentSeries = series
+        }
+      })
+      if (!mostRecentSeries) return null
+      return mostRecentSeries.books
+    },
+    booksRecentlyRead() {
+      var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].isRead).map((ab) => ({ ...ab }))
+      audiobooks.sort((a, b) => {
+        return this.userAudiobooks[b.id].finishedAt - this.userAudiobooks[a.id].finishedAt
+      })
+      return audiobooks.slice(0, 10)
+    },
+    shelves() {
+      var shelves = [
+        { books: this.mostRecentPlayed, label: 'Continue Reading' },
+        { books: this.mostRecentAdded, label: 'Recently Added' }
+      ]
+      if (this.recentlyUpdatedSeries) {
+        shelves.push({ books: this.recentlyUpdatedSeries, label: 'Newest Series' })
+      }
+      if (this.booksRecentlyRead.length) {
+        shelves.push({ books: this.booksRecentlyRead, label: 'Read Again' })
+      }
+      return shelves
+    }
+  },
+  methods: {
+    increaseSize() {
+      this.selectedSizeIndex = Math.min(this.availableSizes.length - 1, this.selectedSizeIndex + 1)
+      this.resize()
+      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
+    },
+    decreaseSize() {
+      this.selectedSizeIndex = Math.max(0, this.selectedSizeIndex - 1)
+      this.resize()
+      this.$store.dispatch('user/updateUserSettings', { bookshelfCoverSize: this.bookCoverWidth })
+    },
+    async init() {
+      this.wrapperClientWidth = this.$refs.wrapper ? this.$refs.wrapper.clientWidth : 0
+
+      var bookshelfCoverSize = this.$store.getters['user/getUserSetting']('bookshelfCoverSize')
+      var sizeIndex = this.availableSizes.findIndex((s) => s === bookshelfCoverSize)
+      if (!isNaN(sizeIndex)) this.selectedSizeIndex = sizeIndex
+
+      await this.$store.dispatch('audiobooks/load')
+    },
+    resize() {},
+    audiobooksUpdated() {},
+    settingsUpdated(settings) {
+      if (settings.bookshelfCoverSize !== this.bookCoverWidth && settings.bookshelfCoverSize !== undefined) {
+        var index = this.availableSizes.indexOf(settings.bookshelfCoverSize)
+        if (index >= 0) {
+          this.selectedSizeIndex = index
+          this.resize()
+        }
+      }
+    },
+    scan() {
+      this.$root.socket.emit('scan')
+    }
+  },
+  mounted() {
+    window.addEventListener('resize', this.resize)
+    this.$store.commit('audiobooks/addListener', { id: 'bookshelf', meth: this.audiobooksUpdated })
+    this.$store.commit('user/addSettingsListener', { id: 'bookshelf', meth: this.settingsUpdated })
+
+    this.init()
+  },
+  beforeDestroy() {
+    window.removeEventListener('resize', this.resize)
+    this.$store.commit('audiobooks/removeListener', 'bookshelf')
+    this.$store.commit('user/removeSettingsListener', 'bookshelf')
+  }
+}
+</script>
@@ -0,0 +1,139 @@
+<template>
+  <div class="relative">
+    <div ref="shelf" class="w-full max-w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 2.5 * sizeMultiplier + 'rem' }" @scroll="scrolled">
+      <div class="w-full h-full" :style="{ marginTop: sizeMultiplier + 'rem' }">
+        <div class="flex items-center -mb-2">
+          <template v-for="entity in shelf.books">
+            <cards-book-card :key="entity.id" :width="bookCoverWidth" :user-progress="userAudiobooks[entity.id]" :audiobook="entity" @hook:updated="updatedBookCard" />
+          </template>
+        </div>
+      </div>
+    </div>
+
+    <div class="absolute text-center categoryPlacard font-book transform z-30 bottom-0.5 left-8 w-36 rounded-md" style="height: 22px">
+      <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm border">
+        <p class="transform text-sm">{{ shelf.label }}</p>
+      </div>
+    </div>
+
+    <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
+
+    <div v-show="canScrollLeft && !isScrolling" class="absolute top-0 left-0 w-32 pr-8 bg-black book-shelf-arrow-left flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollLeft">
+      <span class="material-icons text-8xl text-white">chevron_left</span>
+    </div>
+    <div v-show="canScrollRight && !isScrolling" class="absolute top-0 right-0 w-32 pl-8 bg-black book-shelf-arrow-right flex items-center justify-center cursor-pointer opacity-0 hover:opacity-100 z-30" @click="scrollRight">
+      <span class="material-icons text-8xl text-white">chevron_right</span>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    index: Number,
+    shelf: {
+      type: Object,
+      default: () => {}
+    },
+    sizeMultiplier: Number,
+    bookCoverWidth: Number
+  },
+  data() {
+    return {
+      canScrollRight: false,
+      canScrollLeft: false,
+      isScrolling: false,
+      scrollTimer: null,
+      updateTimer: null
+    }
+  },
+  computed: {
+    userAudiobooks() {
+      return this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {}
+    }
+  },
+  methods: {
+    scrolled() {
+      clearTimeout(this.scrollTimer)
+      this.scrollTimer = setTimeout(() => {
+        this.isScrolling = false
+        this.$nextTick(this.checkCanScroll)
+      }, 50)
+    },
+    scrollLeft() {
+      if (!this.$refs.shelf) {
+        console.error('No Shelf', this.index)
+        return
+      }
+      this.isScrolling = true
+      this.$refs.shelf.scrollLeft = 0
+    },
+    scrollRight() {
+      if (!this.$refs.shelf) {
+        console.error('No Shelf', this.index)
+        return
+      }
+      this.isScrolling = true
+      this.$refs.shelf.scrollLeft = 999
+    },
+    updatedBookCard() {
+      clearTimeout(this.updateTimer)
+      this.updateTimer = setTimeout(() => {
+        this.$nextTick(this.checkCanScroll)
+      }, 100)
+    },
+    checkCanScroll() {
+      if (!this.$refs.shelf) {
+        console.error('No Shelf', this.index)
+        return
+      }
+      var clientWidth = this.$refs.shelf.clientWidth
+      var scrollWidth = this.$refs.shelf.scrollWidth
+      var scrollLeft = this.$refs.shelf.scrollLeft
+      if (scrollWidth > clientWidth) {
+        this.canScrollRight = scrollLeft === 0
+        this.canScrollLeft = scrollLeft > 0
+      } else {
+        this.canScrollRight = false
+        this.canScrollLeft = false
+      }
+    }
+  }
+}
+</script>
+
+<style>
+.bookshelfRowCategorized {
+  scroll-behavior: smooth;
+  width: calc(100vw - 80px);
+  background-image: url(/wood_panels.jpg);
+}
+.bookshelfDividerCategorized {
+  background: rgb(149, 119, 90);
+  /* background: linear-gradient(180deg, rgba(149, 119, 90, 1) 0%, rgba(103, 70, 37, 1) 17%, rgba(103, 70, 37, 1) 88%, rgba(71, 48, 25, 1) 100%); */
+  background: linear-gradient(180deg, rgb(122, 94, 68) 0%, rgb(92, 62, 31) 17%, rgb(82, 54, 26) 88%, rgba(71, 48, 25, 1) 100%);
+  /* background: linear-gradient(180deg, rgb(114, 85, 59) 0%, rgb(73, 48, 22) 17%, rgb(71, 43, 15) 88%, rgb(61, 41, 20) 100%); */
+  box-shadow: 2px 14px 8px #111111aa;
+}
+.categoryPlacard {
+  background-image: url(https://image.freepik.com/free-photo/brown-wooden-textured-flooring-background_53876-128537.jpg);
+  letter-spacing: 1px;
+}
+.shinyBlack {
+  background-color: #2d3436;
+  background-image: linear-gradient(315deg, #19191a 0%, rgb(15, 15, 15) 74%);
+  border-color: rgba(255, 244, 182, 0.6);
+  border-style: solid;
+  color: #fce3a6;
+}
+.book-shelf-arrow-right {
+  height: calc(100% - 24px);
+  background: rgb(48, 48, 48);
+  background: linear-gradient(90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
+}
+.book-shelf-arrow-left {
+  height: calc(100% - 24px);
+  background: rgb(48, 48, 48);
+  background: linear-gradient(-90deg, rgba(48, 48, 48, 0) 0%, rgba(25, 25, 25, 0.25) 8%, rgba(17, 17, 17, 0.4) 28%, rgba(17, 17, 17, 0.6) 71%, rgba(10, 10, 10, 0.6) 86%, rgba(0, 0, 0, 0.7) 100%);
+}
+</style>
@@ -1,20 +1,48 @@
 <template>
  <div class="w-full h-10 relative">
-    <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" />
+    <div id="toolbar" class="absolute top-0 left-0 w-full h-full z-40 flex items-center px-8">
+      <template v-if="page !== 'search' && !isHome">
+        <p v-if="!selectedSeries" class="font-book">{{ numShowing }} {{ entityName }}</p>
+        <div v-else class="flex items-center">
+          <div @click="seriesBackArrow" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
+            <span class="material-icons text-3xl text-white">west</span>
+          </div>
+          <!-- <span class="material-icons text-2xl cursor-pointer" @click="seriesBackArrow">west</span> -->
+          <p class="pl-4 font-book text-lg">
+            {{ selectedSeries }} <span class="ml-3 font-mono text-lg bg-black bg-opacity-30 rounded-lg px-1 py-0.5">{{ numShowing }}</span>
+          </p>
+        </div>
+        <div class="flex-grow" />

-      <ui-text-input v-model="_keywordFilter" placeholder="Keyword Filter" :padding-y="1.5" class="text-xs w-40" />
-
-      <controls-filter-select v-model="settings.filterBy" class="w-48 h-7.5 ml-4" @change="updateFilter" />
-
-      <controls-order-select v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5 ml-4" @change="updateOrder" />
+        <ui-text-input v-show="!selectedSeries" v-model="_keywordFilter" placeholder="Keyword Filter" :padding-y="1.5" class="text-xs w-40" />
+        <controls-filter-select v-show="showSortFilters" v-model="settings.filterBy" class="w-48 h-7.5 ml-4" @change="updateFilter" />
+        <controls-order-select v-show="showSortFilters" v-model="settings.orderBy" :descending.sync="settings.orderDesc" class="w-48 h-7.5 ml-4" @change="updateOrder" />
+      </template>
+      <template v-else-if="!isHome">
+        <div @click="searchBackArrow" class="rounded-full h-10 w-10 flex items-center justify-center hover:bg-white hover:bg-opacity-10 cursor-pointer">
+          <span class="material-icons text-3xl text-white">west</span>
+        </div>
+        <!-- <p class="font-book pl-4">{{ numShowing }} showing</p> -->
+        <div class="flex-grow" />
+        <p>Search results for "{{ searchQuery }}"</p>
+        <div class="flex-grow" />
+      </template>
    </div>
  </div>
 </template>

 <script>
 export default {
+  props: {
+    page: String,
+    isHome: Boolean,
+    selectedSeries: String,
+    searchResults: {
+      type: Array,
+      default: () => []
+    },
+    searchQuery: String
+  },
  data() {
    return {
      settings: {},
@@ -22,8 +50,29 @@ export default {
    }
  },
  computed: {
+    showSortFilters() {
+      return this.page === ''
+    },
    numShowing() {
-      return this.$store.getters['audiobooks/getFiltered']().length
+      if (this.page === '') {
+        return this.$store.getters['audiobooks/getFiltered']().length
+      } else if (this.page === 'search') {
+        return (this.searchResults || []).length
+      } else {
+        var groups = this.$store.getters['audiobooks/getSeriesGroups']()
+        if (this.selectedSeries) {
+          var group = groups.find((g) => g.name === this.selectedSeries)
+          if (group) return group.books.length
+          return 0
+        }
+        return groups.length
+      }
+    },
+    entityName() {
+      if (!this.page) return 'Audiobooks'
+      if (this.page === 'series') return 'Series'
+      if (this.page === 'collections') return 'Collections'
+      return ''
    },
    _keywordFilter: {
      get() {
@@ -35,6 +84,13 @@ export default {
    }
  },
  methods: {
+    searchBackArrow() {
+      this.$router.replace('/library')
+    },
+    seriesBackArrow() {
+      this.$router.replace('/library/series')
+      this.$emit('update:selectedSeries', null)
+    },
    updateOrder() {
      this.saveSettings()
    },
@@ -66,6 +122,6 @@ export default {

 <style>
 #toolbar {
-  box-shadow: 0px 8px 8px #111111aa;
+  box-shadow: 0px 8px 6px #111111aa;
 }
 </style>
@@ -0,0 +1,85 @@
+<template>
+  <div class="w-20 bg-bg h-full relative box-shadow-side z-30" style="min-width: 80px">
+    <div class="absolute top-0 -right-4 w-4 bg-bg h-10 pointer-events-none" />
+    <nuxt-link to="/" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 1rem">Home</p>
+
+      <div v-show="homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link to="/library" class="w-full h-20 flex flex-col items-center justify-center text-white border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === '' && !homePage ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 1rem">Library</p>
+
+      <div v-show="paramId === '' && !homePage" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <nuxt-link to="/library/series" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'series' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 17V7m0 10a2 2 0 01-2 2H5a2 2 0 01-2-2V7a2 2 0 012-2h2a2 2 0 012 2m0 10a2 2 0 002 2h2a2 2 0 002-2M9 7a2 2 0 012-2h2a2 2 0 012 2m0 10V7m0 10a2 2 0 002 2h2a2 2 0 002-2V7a2 2 0 00-2-2h-2a2 2 0 00-2 2" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 1rem">Series</p>
+
+      <div v-show="paramId === 'series'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link>
+
+    <!-- <nuxt-link to="/library/collections" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'collections' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 11H5m14 0a2 2 0 012 2v6a2 2 0 01-2 2H5a2 2 0 01-2-2v-6a2 2 0 012-2m14 0V9a2 2 0 00-2-2M5 11V9a2 2 0 012-2m0 0V5a2 2 0 012-2h6a2 2 0 012 2v2M7 7h10" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 0.8rem">Collections</p>
+
+      <div v-show="paramId === 'collections'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link> -->
+
+    <!-- <nuxt-link to="/library/tags" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'tags' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 7h.01M7 3h5c.512 0 1.024.195 1.414.586l7 7a2 2 0 010 2.828l-7 7a2 2 0 01-2.828 0l-7-7A1.994 1.994 0 013 12V7a4 4 0 014-4z" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 0.8rem">Tags</p>
+
+      <div v-show="paramId === 'tags'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link> -->
+
+    <!-- <nuxt-link to="/library/authors" class="w-full h-20 flex flex-col items-center justify-center text-white text-opacity-80 border-b border-primary border-opacity-70 hover:bg-primary cursor-pointer relative" :class="paramId === 'authors' ? 'bg-primary bg-opacity-80' : 'bg-bg bg-opacity-60'">
+      <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
+      </svg>
+
+      <p class="font-book pt-1.5" style="font-size: 0.8rem">Authors</p>
+
+      <div v-show="paramId === 'authors'" class="h-full w-0.5 bg-yellow-400 absolute top-0 left-0" />
+    </nuxt-link> -->
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {}
+  },
+  computed: {
+    paramId() {
+      return this.$route.params ? this.$route.params.id || '' : ''
+    },
+    selectedClassName() {
+      return ''
+    },
+    homePage() {
+      return this.$route.name === 'index'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>
@@ -68,7 +68,7 @@ export default {
  methods: {
    filterByAuthor() {
      if (this.$route.name !== 'index') {
-        this.$router.push('/')
+        this.$router.push('/library')
      }
      var settingsUpdate = {
        filterBy: `authors.${this.$encode(this.author)}`
@@ -0,0 +1,254 @@
+<template>
+  <div ref="wrapper" class="relative pointer-events-none" :style="{ width: standardWidth * 0.8 * 1.1 * scale + 'px', height: standardHeight * 1.1 * scale + 'px', marginBottom: 20 + 'px', marginTop: 15 + 'px' }">
+    <div ref="card" class="wrap absolute origin-center transform duration-200" :style="{ transform: `scale(${scale * scaleMultiplier}) translateY(${hover2 ? '-40%' : '-50%'})` }">
+      <div class="perspective">
+        <div class="book-wrap transform duration-100 pointer-events-auto" :class="hover2 ? 'z-80' : 'rotate'" @mouseover="hover = true" @mouseout="hover = false">
+          <div class="book book-1 box-shadow-book3d" ref="front"></div>
+          <div class="title book-1 pointer-events-none" ref="left"></div>
+          <div class="bottom book-1 pointer-events-none" ref="bottom"></div>
+          <div class="book-back book-1 pointer-events-none">
+            <div class="text pointer-events-none">
+              <h3 class="mb-4">Book Back</h3>
+              <p>
+                <span>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt earum doloremque aliquam culpa dolor nostrum consequatur quas dicta? Molestias repellendus minima pariatur libero vel, reiciendis optio magnam rerum, labore corporis.</span>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: String,
+    width: {
+      type: Number,
+      default: 200
+    }
+  },
+  data() {
+    return {
+      hover: false,
+      hover2: false,
+      standardWidth: 200,
+      standardHeight: 320,
+      isAttached: true,
+      pageX: 0,
+      pageY: 0
+    }
+  },
+  watch: {
+    src(newVal) {
+      this.setCover()
+    },
+    width(newVal) {
+      this.init()
+    },
+    hover(newVal) {
+      if (newVal) {
+        this.unattach()
+      } else {
+        this.attach()
+      }
+      setTimeout(() => {
+        this.hover2 = newVal
+      }, 100)
+    }
+  },
+  computed: {
+    scaleMultiplier() {
+      return this.hover2 ? 1.25 : 1
+    },
+    scale() {
+      var scale = this.width / this.standardWidth
+      return scale
+    }
+  },
+  methods: {
+    unattach() {
+      if (this.$refs.card && this.isAttached) {
+        var bookshelf = document.getElementById('bookshelf')
+        if (bookshelf) {
+          var pos = this.$refs.wrapper.getBoundingClientRect()
+
+          this.pageX = pos.x
+          this.pageY = pos.y
+          document.body.appendChild(this.$refs.card)
+          this.$refs.card.style.left = this.pageX + 'px'
+          this.$refs.card.style.top = this.pageY + 'px'
+          this.$refs.card.style.zIndex = 50
+          this.isAttached = false
+        } else if (bookshelf) {
+          console.log(this.pageX, this.pageY)
+          this.isAttached = false
+        }
+      }
+    },
+    attach() {
+      if (this.$refs.card && !this.isAttached) {
+        if (this.$refs.wrapper) {
+          this.isAttached = true
+
+          this.$refs.wrapper.appendChild(this.$refs.card)
+          this.$refs.card.style.left = '0px'
+          this.$refs.card.style.top = '0px'
+        }
+      } else {
+        console.log('Is attached already', this.isAttached)
+      }
+    },
+    init() {
+      var standardWidth = this.standardWidth
+      document.documentElement.style.setProperty('--book-w', standardWidth + 'px')
+      document.documentElement.style.setProperty('--book-wx', standardWidth + 1 + 'px')
+      document.documentElement.style.setProperty('--book-h', standardWidth * 1.6 + 'px')
+      document.documentElement.style.setProperty('--book-d', 40 + 'px')
+    },
+    setElBg(el) {
+      el.style.backgroundImage = `url("${this.src}")`
+      el.style.backgroundSize = 'cover'
+      el.style.backgroundPosition = 'center center'
+      el.style.backgroundRepeat = 'no-repeat'
+    },
+    setCover() {
+      if (this.$refs.front) {
+        this.setElBg(this.$refs.front)
+      }
+      if (this.$refs.bottom) {
+        this.setElBg(this.$refs.bottom)
+        this.$refs.bottom.style.backgroundSize = '2000%'
+        this.$refs.bottom.style.filter = 'blur(1px)'
+      }
+      if (this.$refs.left) {
+        this.setElBg(this.$refs.left)
+        this.$refs.left.style.backgroundSize = '2000%'
+        this.$refs.left.style.filter = 'blur(1px)'
+      }
+    }
+  },
+  mounted() {
+    this.setCover()
+    this.init()
+  }
+}
+</script>
+
+<style>
+/* :root {
+  --book-w: 200px;
+  --book-h: 320px;
+  --book-d: 30px;
+  --book-wx: 201px;
+} */
+/* 
+.wrap {
+  width: calc(1.1 * var(--book-w));
+  height: calc(1.1 * var(--book-h));
+  margin: 0 auto;
+}
+.perspective {
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  perspective: 600px;
+  transform-style: preserve-3d;
+  overflow: hidden;
+}
+
+.book-wrap {
+  height: 100%;
+  width: 100%;
+  transform-style: preserve-3d;
+  transition: 'all ease-out 0.6s';
+}
+
+.book {
+  width: var(--book-w);
+  height: var(--book-h);
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: cover;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+}
+.title {
+  content: '';
+  height: var(--book-h);
+  width: var(--book-d);
+  position: absolute;
+  right: 0;
+  left: calc(var(--book-wx) * -1);
+  top: 0;
+  bottom: 0;
+  margin: auto;
+  background: #444;
+  transform: rotateY(-80deg) translateX(-14px);
+
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: 5000%;
+  filter: blur(1px);
+}
+
+.bottom {
+  content: '';
+  height: var(--book-d);
+  width: var(--book-w);
+  position: absolute;
+  right: 0;
+  bottom: var(--book-h);
+  top: 0;
+  left: 0;
+  margin: auto;
+  background: #444;
+  transform: rotateY(0deg) rotateX(90deg) translateY(-15px) translateX(-2.5px) skewX(10deg);
+
+  background: url(https://covers.openlibrary.org/b/id/8303020-L.jpg) no-repeat center center;
+  background-size: 5000%;
+  filter: blur(1px);
+}
+
+.book-back {
+  width: var(--book-w);
+  height: var(--book-h);
+  background-color: #444;
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  cursor: pointer;
+  transform: rotate(180deg) translateZ(-30px) translateX(5px);
+}
+.book-back .text {
+  transform: rotateX(180deg);
+  position: absolute;
+  bottom: 0px;
+  padding: 20px;
+  text-align: left;
+  font-size: 12px;
+}
+.book-back .text h3 {
+  color: #fff;
+}
+.book-back .text span {
+  display: block;
+  margin-bottom: 20px;
+  color: #fff;
+}
+
+.book-wrap.rotate {
+  transform: rotateY(30deg) rotateX(0deg);
+}
+.book-wrap.flip {
+  transform: rotateY(180deg);
+} */
+</style>
@@ -8,9 +8,9 @@
      <div class="absolute -bottom-4 left-0 triangle-right" />
    </div>

-    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
+    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @click.stop>
      <nuxt-link :to="isSelectionMode ? '' : `/audiobook/${audiobookId}`" class="cursor-pointer">
-        <div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }">
+        <div class="w-full relative box-shadow-book" :style="{ height: height + 'px' }" @click="clickCard" @mouseover="isHovering = true" @mouseleave="isHovering = false">
          <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />

          <div v-show="isHovering || isSelectionMode" class="absolute top-0 left-0 w-full h-full bg-black rounded" :class="overlayWrapperClasslist">
@@ -29,7 +29,15 @@
            </div>
          </div>

-          <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 shadow-sm" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>
+          <div v-if="volumeNumber && showVolumeNumber && !isHovering && !isSelectionMode" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md" :style="{ top: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+            <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">#{{ volumeNumber }}</p>
+          </div>
+
+          <!-- <div v-if="true && hasEbook" class="absolute rounded-lg bg-black bg-opacity-90 box-shadow-md" :style="{ bottom: 0.375 * sizeMultiplier + 'rem', right: 0.375 * sizeMultiplier + 'rem', padding: `${0.1 * sizeMultiplier}rem ${0.25 * sizeMultiplier}rem` }">
+            <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }">EBook</p>
+          </div> -->
+
+          <div v-show="!isSelectionMode" class="absolute bottom-0 left-0 h-1 shadow-sm max-w-full" :class="userIsRead ? 'bg-success' : 'bg-yellow-400'" :style="{ width: width * userProgressPercent + 'px' }"></div>

          <ui-tooltip v-if="showError" :text="errorText" class="absolute bottom-4 left-0">
            <div :style="{ height: 1.5 * sizeMultiplier + 'rem', width: 2.5 * sizeMultiplier + 'rem' }" class="bg-error rounded-r-full shadow-md flex items-center justify-end border-r border-b border-red-300">
@@ -56,7 +64,8 @@ export default {
    width: {
      type: Number,
      default: 120
-    }
+    },
+    showVolumeNumber: Boolean
  },
  data() {
    return {
@@ -73,8 +82,12 @@ export default {
    audiobookId() {
      return this.audiobook.id
    },
+    hasEbook() {
+      return this.audiobook.numEbooks
+    },
    isSelectionMode() {
-      return this.$store.getters['getNumAudiobooksSelected']
+      // return this.$store.getters['getNumAudiobooksSelected']
+      return !!this.selectedAudiobooks.length
    },
    selectedAudiobooks() {
      return this.$store.state.selectedAudiobooks
@@ -194,7 +207,6 @@ export default {
        this.selectBtnClick()
      }
    }
-  },
-  mounted() {}
+  }
 }
 </script>
@@ -4,7 +4,7 @@
      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
        <div class="w-full h-full z-0" ref="coverBg" />
      </div>
-      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+      <img ref="cover" :src="fullCoverUrl" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
    </div>

    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
@@ -53,6 +53,9 @@ export default {
    book() {
      return this.audiobook.book || {}
    },
+    bookLastUpdate() {
+      return this.book.lastUpdate || Date.now()
+    },
    title() {
      return this.book.title || 'No Title'
    },
@@ -76,15 +79,7 @@ export default {
      return '/book_placeholder.jpg'
    },
    fullCoverUrl() {
-      if (!this.cover || this.cover === this.placeholderUrl) return ''
-      if (this.cover.startsWith('http:') || this.cover.startsWith('https:')) return this.cover
-      try {
-        var url = new URL(this.cover, document.baseURI)
-        return url.href
-      } catch (err) {
-        console.error(err)
-        return ''
-      }
+      return this.$store.getters['audiobooks/getBookCoverSrc'](this.book, this.placeholderUrl)
    },
    cover() {
      return this.book.cover || this.placeholderUrl
@@ -106,6 +101,9 @@ export default {
    },
    authorBottom() {
      return 0.75 * this.sizeMultiplier
+    },
+    userToken() {
+      return this.$store.getters['user/getToken']
    }
  },
  methods: {
@@ -0,0 +1,98 @@
+<template>
+  <div class="relative">
+    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="isHovering = true" @mouseleave="isHovering = false" @click="clickCard">
+      <nuxt-link :to="`/library/series?${groupType}=${groupEncode}`" class="cursor-pointer">
+        <div class="w-full relative" :class="isHovering ? 'bg-black-400' : 'bg-primary'" :style="{ height: height + 'px', width: height + 'px' }">
+          <cards-group-cover ref="groupcover" :name="groupName" :book-items="bookItems" :width="height" :height="height" />
+
+          <div v-if="hasValidCovers" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
+            <p class="font-book" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ groupName }}</p>
+          </div>
+
+          <div class="absolute top-2 right-2 w-7 h-7 rounded-lg bg-black bg-opacity-90 text-gray-300 box-shadow-book flex items-center justify-center border border-white border-opacity-25 pointer-events-none">
+            <p class="font-book text-xl">{{ bookItems.length }}</p>
+          </div>
+          <div class="absolute bottom-0 left-0 w-full h-1 flex flex-nowrap">
+            <div v-for="userProgress in userProgressItems" :key="userProgress.audiobookId" class="h-full w-full" :class="userProgress.isRead ? 'bg-success' : userProgress.progress > 0 ? 'bg-yellow-400' : ''" />
+          </div>
+        </div>
+      </nuxt-link>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    group: {
+      type: Object,
+      default: () => null
+    },
+    width: {
+      type: Number,
+      default: 120
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  watch: {
+    width(newVal) {
+      this.$nextTick(() => {
+        if (this.$refs.groupcover) {
+          this.$refs.groupcover.init()
+        }
+      })
+    }
+  },
+  computed: {
+    _group() {
+      return this.group || {}
+    },
+    height() {
+      return this.width * 1.6
+    },
+    sizeMultiplier() {
+      return this.width / 120
+    },
+    paddingX() {
+      return 16 * this.sizeMultiplier
+    },
+    bookItems() {
+      return this._group.books || []
+    },
+    userAudiobooks() {
+      return Object.values(this.$store.state.user.user ? this.$store.state.user.user.audiobooks || {} : {})
+    },
+    userProgressItems() {
+      return this.bookItems.map((item) => {
+        var userAudiobook = this.userAudiobooks.find((ab) => ab.audiobookId === item.id)
+        return userAudiobook || {}
+      })
+    },
+    groupName() {
+      return this._group.name || 'No Name'
+    },
+    groupType() {
+      return this._group.type
+    },
+    groupEncode() {
+      return this.$encode(this.groupName)
+    },
+    filter() {
+      return `${this.groupType}.${this.$encode(this.groupName)}`
+    },
+    hasValidCovers() {
+      var validCovers = this.bookItems.map((bookItem) => bookItem.book.cover)
+      return !!validCovers.length
+    }
+  },
+  methods: {
+    clickCard() {
+      this.$emit('click', this.group)
+    }
+  }
+}
+</script>
@@ -0,0 +1,139 @@
+<template>
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
+    <div v-if="noValidCovers" class="absolute top-0 left-0 w-full h-full flex items-center justify-center box-shadow-book" :style="{ padding: `${sizeMultiplier}rem` }">
+      <p :style="{ fontSize: sizeMultiplier + 'rem' }">{{ name }}</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    name: String,
+    bookItems: {
+      type: Array,
+      default: () => []
+    },
+    width: Number,
+    height: Number
+  },
+  data() {
+    return {
+      noValidCovers: false,
+      coverDiv: null
+    }
+  },
+  watch: {
+    bookItems: {
+      immediate: true,
+      handler(newVal) {
+        if (newVal) {
+          // ensure wrapper is initialized
+          this.$nextTick(this.init)
+        }
+      }
+    }
+  },
+  computed: {
+    sizeMultiplier() {
+      return this.width / 192
+    }
+  },
+  methods: {
+    getCoverUrl(book) {
+      return this.$store.getters['audiobooks/getBookCoverSrc'](book, '')
+    },
+    async buildCoverImg(src, bgCoverWidth, offsetLeft, forceCoverBg = false) {
+      var showCoverBg =
+        forceCoverBg ||
+        (await new Promise((resolve) => {
+          var image = new Image()
+
+          image.onload = () => {
+            var { naturalWidth, naturalHeight } = image
+            var aspectRatio = naturalHeight / naturalWidth
+            var arDiff = Math.abs(aspectRatio - 1.6)
+
+            // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+            if (arDiff > 0.15) {
+              resolve(true)
+            } else {
+              resolve(false)
+            }
+          }
+          image.onerror = (err) => {
+            console.error(err)
+            resolve(false)
+          }
+          image.src = src
+        }))
+
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = bgCoverWidth + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.className = 'absolute top-0 box-shadow-book'
+      imgdiv.style.boxShadow = '-4px 0px 4px #11111166'
+      // imgdiv.style.transform = 'skew(0deg, 15deg)'
+
+      if (showCoverBg) {
+        var coverbgwrapper = document.createElement('div')
+        coverbgwrapper.className = 'absolute top-0 left-0 w-full h-full bg-primary'
+
+        var coverbg = document.createElement('div')
+        coverbg.className = 'w-full h-full'
+        coverbg.style.backgroundImage = `url("${src}")`
+        coverbg.style.backgroundSize = 'cover'
+        coverbg.style.backgroundPosition = 'center'
+        coverbg.style.opacity = 0.25
+        coverbg.style.filter = 'blur(1px)'
+
+        coverbgwrapper.appendChild(coverbg)
+        imgdiv.appendChild(coverbgwrapper)
+      }
+
+      var img = document.createElement('img')
+      img.src = src
+      img.className = 'absolute top-0 left-0 w-full h-full'
+      img.style.objectFit = showCoverBg ? 'contain' : 'cover'
+
+      imgdiv.appendChild(img)
+      return imgdiv
+    },
+    async init() {
+      if (this.coverDiv) {
+        this.coverDiv.remove()
+        this.coverDiv = null
+      }
+      var validCovers = this.bookItems.map((bookItem) => this.getCoverUrl(bookItem.book)).filter((b) => b !== '')
+      if (!validCovers.length) {
+        this.noValidCovers = true
+        return
+      }
+      this.noValidCovers = false
+
+      var coverWidth = this.width
+      var widthPer = this.width
+      if (validCovers.length > 1) {
+        coverWidth = this.height / 1.6
+        widthPer = (this.width - coverWidth) / (validCovers.length - 1)
+      }
+
+      var outerdiv = document.createElement('div')
+      outerdiv.className = 'w-full h-full relative'
+
+      for (let i = 0; i < validCovers.length; i++) {
+        var offsetLeft = widthPer * i
+        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, validCovers.length === 1)
+        outerdiv.appendChild(img)
+      }
+
+      if (this.$refs.wrapper) {
+        this.coverDiv = outerdiv
+        this.$refs.wrapper.appendChild(outerdiv)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -0,0 +1,82 @@
+<template>
+  <div class="relative rounded-sm overflow-hidden" :style="{ height: width * 1.6 + 'px', width: width + 'px', maxWidth: width + 'px', minWidth: width + 'px' }">
+    <div class="w-full h-full relative">
+      <div v-if="showCoverBg" class="bg-primary absolute top-0 left-0 w-full h-full">
+        <div class="w-full h-full z-0" ref="coverBg" />
+      </div>
+      <img ref="cover" :src="cover" @error="imageError" @load="imageLoaded" class="w-full h-full absolute top-0 left-0" :class="showCoverBg ? 'object-contain' : 'object-cover'" />
+    </div>
+
+    <div v-if="imageFailed" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full bg-red-100" :style="{ padding: placeholderCoverPadding + 'rem' }">
+      <div class="w-full h-full border-2 border-error flex flex-col items-center justify-center">
+        <img src="/Logo.png" class="mb-2" :style="{ height: 64 * sizeMultiplier + 'px' }" />
+        <p class="text-center font-book text-error" :style="{ fontSize: sizeMultiplier + 'rem' }">Invalid Cover</p>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    src: String,
+    width: {
+      type: Number,
+      default: 120
+    }
+  },
+  data() {
+    return {
+      imageFailed: false,
+      showCoverBg: false
+    }
+  },
+  watch: {
+    cover() {
+      this.imageFailed = false
+    }
+  },
+  computed: {
+    cover() {
+      return this.src
+    },
+    sizeMultiplier() {
+      return this.width / 120
+    },
+    placeholderCoverPadding() {
+      return 0.8 * this.sizeMultiplier
+    }
+  },
+  methods: {
+    setCoverBg() {
+      if (this.$refs.coverBg) {
+        this.$refs.coverBg.style.backgroundImage = `url("${this.src}")`
+        this.$refs.coverBg.style.backgroundSize = 'cover'
+        this.$refs.coverBg.style.backgroundPosition = 'center'
+        this.$refs.coverBg.style.opacity = 0.25
+        this.$refs.coverBg.style.filter = 'blur(1px)'
+      }
+    },
+    imageLoaded() {
+      if (this.$refs.cover) {
+        var { naturalWidth, naturalHeight } = this.$refs.cover
+        var aspectRatio = naturalHeight / naturalWidth
+        var arDiff = Math.abs(aspectRatio - 1.6)
+
+        // If image aspect ratio is <= 1.45 or >= 1.75 then use cover bg, otherwise stretch to fit
+        if (arDiff > 0.15) {
+          this.showCoverBg = true
+          this.$nextTick(this.setCoverBg)
+        } else {
+          this.showCoverBg = false
+        }
+      }
+    },
+    imageError(err) {
+      console.error('ImgError', err)
+      this.imageFailed = true
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -1,6 +1,8 @@
 <template>
  <div class="w-64 ml-8 relative">
-    <ui-text-input v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+    <form @submit.prevent="submitSearch">
+      <ui-text-input ref="input" v-model="search" placeholder="Search.." @input="inputUpdate" @focus="focussed" @blur="blurred" class="w-full h-8 text-sm" />
+    </form>
    <div class="absolute top-0 right-0 bottom-0 h-full flex items-center px-2 text-gray-400 cursor-pointer" @click="clickClear">
      <span v-if="!search" class="material-icons" style="font-size: 1.2rem">search</span>
      <span v-else class="material-icons" style="font-size: 1.2rem">close</span>
@@ -51,6 +53,19 @@ export default {
    }
  },
  methods: {
+    submitSearch() {
+      if (!this.search) return
+      this.$router.push(`/library/search?query=${this.search}`)
+
+      this.search = null
+      this.items = []
+      this.showMenu = false
+      this.$nextTick(() => {
+        if (this.$refs.input) {
+          this.$refs.input.blur()
+        }
+      })
+    },
    focussed() {
      this.isFocused = true
      this.showMenu = true
@@ -73,6 +88,10 @@ export default {
        return []
      })
      this.isFetching = false
+      if (!this.showMenu) {
+        return
+      }
+
      this.items = results.map((res) => {
        return {
          id: res.id,
@@ -1,11 +1,13 @@
 <template>
  <modals-modal v-model="show" :width="500" :height="'unset'">
-    <div class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 500px">
+    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <template v-for="chap in chapters">
-        <div :key="chap.id" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-bg bg-opacity-80' : 'bg-opacity-20'" @click="clickChapter(chap)">
+        <div :key="chap.id" :id="`chapter-row-${chap.id}`" class="flex items-center px-6 py-3 justify-start cursor-pointer hover:bg-bg relative" :class="chap.id === currentChapterId ? 'bg-bg bg-opacity-80' : 'bg-opacity-20'" @click="clickChapter(chap)">
          {{ chap.title }}
          <span class="flex-grow" />
          <span class="font-mono text-sm text-gray-300">{{ $secondsToTimestamp(chap.start) }}</span>
+
+          <div v-show="chap.id === currentChapterId" class="w-0.5 h-full absolute top-0 left-0 bg-yellow-400" />
        </div>
      </template>
    </div>
@@ -28,6 +30,11 @@ export default {
  data() {
    return {}
  },
+  watch: {
+    value(newVal) {
+      this.$nextTick(this.scrollToChapter)
+    }
+  },
  computed: {
    show: {
      get() {
@@ -44,8 +51,20 @@ export default {
  methods: {
    clickChapter(chap) {
      this.$emit('select', chap)
+    },
+    scrollToChapter() {
+      if (!this.currentChapterId) return
+
+      var container = this.$refs.container
+      if (container) {
+        var currChapterEl = document.getElementById(`chapter-row-${this.currentChapterId}`)
+        if (currChapterEl) {
+          var offsetTop = currChapterEl.offsetTop
+          var containerHeight = container.clientHeight
+          container.scrollTo({ top: offsetTop - containerHeight / 2 })
+        }
+      }
    }
-  },
-  mounted() {}
+  }
 }
 </script>
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6">
+  <div class="w-full h-full overflow-hidden overflow-y-auto px-4 py-6 relative">
    <div class="flex">
      <div class="relative">
        <cards-book-cover :audiobook="audiobook" />
@@ -12,12 +12,15 @@
        </div>
      </div>
      <div class="flex-grow pl-6 pr-2">
-        <form @submit.prevent="submitForm">
-          <div class="flex items-center">
+        <div class="flex items-center">
+          <div v-if="userCanUpload" class="w-40 pr-2" style="min-width: 160px">
+            <ui-file-input ref="fileInput" @change="fileUploadSelected" />
+          </div>
+          <form @submit.prevent="submitForm" class="flex flex-grow">
            <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
            <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
-          </div>
-        </form>
+          </form>
+        </div>

        <div v-if="localCovers.length" class="mb-4 mt-6 border-t border-b border-primary">
          <div class="flex items-center justify-center py-2">
@@ -63,6 +66,18 @@
        </div>
      </div>
    </div>
+
+    <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
+      <p class="text-lg">Preview Cover</p>
+      <span class="absolute top-4 right-4 material-icons text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
+      <div class="flex justify-center py-4">
+        <cards-preview-cover :src="previewUpload" :width="240" />
+      </div>
+      <div class="absolute bottom-0 right-0 flex py-4 px-5">
+        <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
+        <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
+      </div>
+    </div>
  </div>
 </template>

@@ -79,12 +94,15 @@ export default {
  },
  data() {
    return {
+      processingUpload: false,
      searchTitle: null,
      searchAuthor: null,
      imageUrl: null,
      coversFound: [],
      hasSearched: false,
-      showLocalCovers: false
+      showLocalCovers: false,
+      previewUpload: null,
+      selectedFile: null
    }
  },
  watch: {
@@ -112,6 +130,9 @@ export default {
    otherFiles() {
      return this.audiobook ? this.audiobook.otherFiles || [] : []
    },
+    userCanUpload() {
+      return this.$store.getters['user/getUserCanUpload']
+    },
    localCovers() {
      return this.otherFiles
        .filter((f) => f.filetype === 'image')
@@ -123,6 +144,39 @@ export default {
    }
  },
  methods: {
+    submitCoverUpload() {
+      this.processingUpload = true
+      var form = new FormData()
+      form.set('cover', this.selectedFile)
+
+      this.$axios
+        .$post(`/api/audiobook/${this.audiobook.id}/cover`, form)
+        .then((data) => {
+          if (data.error) {
+            this.$toast.error(data.error)
+          } else {
+            this.$toast.success('Cover Uploaded')
+            this.resetCoverPreview()
+          }
+          this.processingUpload = false
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.$toast.error('Oops, something went wrong...')
+          this.processingUpload = false
+        })
+    },
+    resetCoverPreview() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.reset()
+      }
+      this.previewUpload = null
+      this.selectedFile = null
+    },
+    fileUploadSelected(file) {
+      this.previewUpload = URL.createObjectURL(file)
+      this.selectedFile = file
+    },
    init() {
      this.showLocalCovers = false
      if (this.coversFound.length && (this.searchTitle !== this.book.title || this.searchAuthor !== this.book.author)) {
@@ -0,0 +1,39 @@
+<template>
+  <div>
+    <input ref="fileInput" id="hidden-input" type="file" :accept="inputAccept" class="hidden" @change="inputChanged" />
+    <ui-btn @click="clickUpload" color="primary" type="text">Upload Cover</ui-btn>
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      inputAccept: 'image/*'
+    }
+  },
+  computed: {},
+  methods: {
+    reset() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.value = ''
+      }
+    },
+    clickUpload() {
+      if (this.$refs.fileInput) {
+        this.$refs.fileInput.click()
+      }
+    },
+    inputChanged(e) {
+      if (!e.target || !e.target.files) return
+      var _files = Array.from(e.target.files)
+      if (_files && _files.length) {
+        var file = _files[0]
+        console.log('File', file)
+        this.$emit('change', file)
+      }
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -115,7 +115,10 @@ export default {
    clickedOption(e, item) {
      this.textInput = null
      this.currentSearch = null
-      this.input = this.textInput ? this.textInput.trim() : null
+      this.input = item
+
+      // this.input = this.textInput ? this.textInput.trim() : null
+      console.log('Clicked option', item)
      if (this.$refs.input) this.$refs.input.blur()
    }
  },
@@ -1,5 +1,5 @@
 <template>
-  <input v-model="inputValue" :type="type" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none border border-gray-600" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
+  <input ref="input" v-model="inputValue" :type="type" :readonly="readonly" :disabled="disabled" :placeholder="placeholder" class="rounded bg-primary text-gray-200 focus:border-gray-500 focus:outline-none border border-gray-600" :class="classList" @keyup="keyup" @change="change" @focus="focused" @blur="blurred" />
 </template>

 <script>
@@ -53,6 +53,9 @@ export default {
    },
    keyup(e) {
      this.$emit('keyup', e)
+    },
+    blur() {
+      if (this.$refs.input) this.$refs.input.blur()
    }
  },
  mounted() {}
@@ -53,7 +53,7 @@ export default {
      var tooltip = document.createElement('div')
      tooltip.className = 'absolute px-2 py-1 text-white pointer-events-none text-xs rounded shadow-lg max-w-xs'
      tooltip.style.zIndex = 100
-      tooltip.style.backgroundColor = 'rgba(0,0,0,0.75)'
+      tooltip.style.backgroundColor = 'rgba(0,0,0,0.85)'
      tooltip.innerHTML = this.text

      this.setTooltipPosition(tooltip)
@@ -1,7 +1,9 @@
 <template>
  <div class="text-white max-h-screen h-screen overflow-hidden bg-bg">
    <app-appbar />
+
    <Nuxt />
+
    <app-stream-container ref="streamContainer" />
    <modals-edit-modal />
    <widgets-scan-alert />
@@ -24,6 +26,9 @@ export default {
      if (this.$store.state.selectedAudiobooks) {
        this.$store.commit('setSelectedAudiobooks', [])
      }
+      if (this.$store.state.audiobooks.keywordFilter) {
+        this.$store.commit('audiobooks/setKeywordFilter', '')
+      }
    }
  },
  computed: {
@@ -84,7 +89,7 @@ export default {
    audiobookRemoved(audiobook) {
      if (this.$route.name.startsWith('audiobook')) {
        if (this.$route.params.id === audiobook.id) {
-          this.$router.replace('/')
+          this.$router.replace('/library')
        }
      }
      this.$store.commit('audiobooks/remove', audiobook)
@@ -1,7 +1,7 @@
-export default function ({ store, redirect, route }) {
+export default function ({ store, redirect, route, app }) {
  // If the user is not authenticated
  if (!store.state.user.user) {
-    if (route.name === 'batch') return redirect('/login')
-    return redirect(`/login?redirect=${route.path}`)
+    if (route.name === 'batch' || route.name === 'index') return redirect('/login')
+    return redirect(`/login?redirect=${route.fullPath}`)
  }
 }
@@ -0,0 +1,19 @@
+export default function (context) {
+  if (process.client) {
+    var route = context.route
+    var from = context.from
+    var store = context.store
+
+    if (route.name === 'login' || from.name === 'login') return
+
+    if (route.name === 'config' || route.name === 'upload' || route.name === 'account' || route.name.startsWith('audiobook-id')) {
+      if (from.name !== route.name && from.name !== 'audiobook-id-edit' && from.name !== 'config' && from.name !== 'upload' && from.name !== 'account') {
+        var _history = [...store.state.routeHistory]
+        if (!_history.length || _history[_history.length - 1] !== from.fullPath) {
+          _history.push(from.fullPath)
+          store.commit('setRouteHistory', _history)
+        }
+      }
+    }
+  }
+}
@@ -40,6 +40,10 @@ module.exports = {
    ]
  },

+  router: {
+    middleware: ['routed']
+  },
+
  // Global CSS: https://go.nuxtjs.dev/config-css
  css: [
    '@/assets/app.css'
@@ -71,7 +75,8 @@ module.exports = {

  proxy: {
    '/dev/': { target: 'http://localhost:3333', pathRewrite: { '^/dev/': '' } },
-    '/local/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/', pathRewrite: { '^/local/': '' } }
+    '/local/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/', pathRewrite: { '^/local/': '' } },
+    '/metadata/': { target: process.env.NODE_ENV !== 'production' ? 'http://localhost:3333' : '/' }
  },

  io: {
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-client",
-  "version": "1.1.13",
+  "version": "1.2.4",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf-client",
-  "version": "1.1.14",
+  "version": "1.2.7",
  "description": "Audiobook manager and player",
  "main": "index.js",
  "scripts": {
@@ -42,6 +42,11 @@
              Missing
            </ui-btn>

+            <!-- <ui-btn v-if="ebooks.length" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
+              <span class="material-icons -ml-2 pr-2 text-white">auto_stories</span>
+              Read
+            </ui-btn> -->
+
            <ui-tooltip v-if="userCanUpdate" text="Edit" direction="top">
              <ui-icon-btn icon="edit" class="mx-0.5" @click="editClick" />
            </ui-tooltip>
@@ -86,6 +91,8 @@
          <tables-other-files-table v-if="otherFiles.length" :audiobook-id="audiobook.id" :files="otherFiles" class="mt-6" />
        </div>
      </div>
+
+      <div id="area"></div>
    </div>
  </div>
 </template>
@@ -223,6 +230,9 @@ export default {
    audioFiles() {
      return this.audiobook.audioFiles || []
    },
+    ebooks() {
+      return this.audiobook.ebooks
+    },
    description() {
      return this.book.description || ''
    },
@@ -261,6 +271,18 @@ export default {
    }
  },
  methods: {
+    openEbook() {
+      var ebook = this.ebooks[0]
+      console.log('Ebook', ebook)
+      this.$axios
+        .$get(`/ebook/open/${this.audiobookId}/${ebook.ino}`)
+        .then(() => {
+          console.log('opened')
+        })
+        .catch((error) => {
+          console.error('failed', error)
+        })
+    },
    toggleRead() {
      var updatePayload = {
        isRead: !this.isRead
@@ -130,7 +130,7 @@ export default {
          this.isProcessing = false
          if (data.updates) {
            this.$toast.success(`Successfully updated ${data.updates} audiobooks`)
-            this.$router.replace('/')
+            this.$router.replace('/library')
          } else {
            this.$toast.warning('No updates were necessary')
          }
@@ -1,5 +1,5 @@
 <template>
-  <div id="page-wrapper" class="page p-6" :class="streamAudiobook ? 'streaming' : ''">
+  <div id="page-wrapper" class="page p-6 overflow-y-auto" :class="streamAudiobook ? 'streaming' : ''">
    <div class="w-full max-w-4xl mx-auto">
      <div class="flex items-center mb-2">
        <h1 class="text-2xl">Users</h1>
@@ -1,12 +1,28 @@
 <template>
  <div class="page" :class="streamAudiobook ? 'streaming' : ''">
-    <app-book-shelf-toolbar />
-    <app-book-shelf />
+    <!-- <app-book-shelf-toolbar /> -->
+    <!-- <div class="flex h-full">
+      <app-side-rail />
+      <div class="flex-grow"> -->
+    <!-- <app-book-shelf /> -->
+    <!-- </div> -->
+    <!-- </div> -->
+
+    <div class="flex h-full">
+      <app-side-rail />
+      <div class="flex-grow">
+        <app-book-shelf-toolbar is-home />
+        <app-book-shelf-categorized />
+      </div>
+    </div>
  </div>
 </template>

 <script>
 export default {
+  // asyncData({ redirect }) {
+  //   redirect('/library')
+  // },
  data() {
    return {}
  },
@@ -0,0 +1,70 @@
+<template>
+  <div class="page" :class="streamAudiobook ? 'streaming' : ''">
+    <div class="flex h-full">
+      <app-side-rail />
+      <div class="flex-grow">
+        <app-book-shelf-toolbar :page="id || ''" :search-results="searchResults" :search-query="searchQuery" :selected-series.sync="selectedSeries" />
+        <app-book-shelf :page="id || ''" :search-results="searchResults" :search-query="searchQuery" :selected-series.sync="selectedSeries" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  async asyncData({ params, query, store, app }) {
+    if (query.filter) {
+      store.dispatch('user/updateUserSettings', { filterBy: query.filter })
+    }
+    var searchResults = []
+    var searchQuery = null
+    if (params.id === 'search' && query.query) {
+      searchQuery = query.query
+      searchResults = await app.$axios.$get(`/api/audiobooks?q=${query.query}`).catch((error) => {
+        console.error('Search error', error)
+        return []
+      })
+      store.commit('audiobooks/setSearchResults', searchResults)
+    }
+    var selectedSeries = query.series ? app.$decode(query.series) : null
+    store.commit('audiobooks/setSelectedSeries', selectedSeries)
+    var libraryPage = params.id || ''
+    store.commit('audiobooks/setLibraryPage', libraryPage)
+
+    return {
+      id: libraryPage,
+      searchQuery,
+      searchResults,
+      selectedSeries
+    }
+  },
+  data() {
+    return {}
+  },
+  watch: {
+    '$route.query'(newVal) {
+      if (this.id === 'search' && this.$route.query.query) {
+        if (this.$route.query.query !== this.searchQuery) {
+          this.newQuery()
+        }
+      }
+    }
+  },
+  computed: {
+    streamAudiobook() {
+      return this.$store.state.streamAudiobook
+    }
+  },
+  methods: {
+    async newQuery() {
+      var query = this.$route.query.query
+      this.searchResults = await this.$axios.$get(`/api/audiobooks?q=${query}`).catch((error) => {
+        console.error('Search error', error)
+        return []
+      })
+      this.searchQuery = query
+    }
+  },
+  mounted() {}
+}
+</script>
@@ -77,7 +77,6 @@ export default {
        if (token) {
          this.processing = true

-          console.log('Authorize', token)
          this.$axios
            .$post('/api/authorize', null, {
              headers: {
@@ -124,4 +124,7 @@ Vue.prototype.$decode = decode
 export {
  encode,
  decode
+}
+export default ({ app }, inject) => {
+  app.$decode = decode
 }
@@ -5,7 +5,7 @@ function parseSemver(ver) {
  if (!ver) return null
  var groups = ver.match(/^v((([0-9]+)\.([0-9]+)\.([0-9]+)(?:-([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)(?:\+([0-9a-zA-Z-]+(?:\.[0-9a-zA-Z-]+)*))?)$/)
  if (groups && groups.length > 6) {
-    var total = Number(groups[3]) * 100 + Number(groups[4]) * 10 + Number(groups[5])
+    var total = Number(groups[3]) * 10000 + Number(groups[4]) * 100 + Number(groups[5])
    if (isNaN(total)) {
      console.warn('Invalid version total', groups[3], groups[4], groups[5])
      return null
@@ -5,17 +5,37 @@ const STANDARD_GENRES = ['Adventure', 'Autobiography', 'Biography', 'Childrens',

 export const state = () => ({
  audiobooks: [],
+  lastLoad: 0,
  listeners: [],
  genres: [...STANDARD_GENRES],
  tags: [],
  series: [],
-  keywordFilter: null
+  keywordFilter: null,
+  selectedSeries: null,
+  libraryPage: null,
+  searchResults: []
 })

 export const getters = {
  getAudiobook: (state) => id => {
    return state.audiobooks.find(ab => ab.id === id)
  },
+  getEntitiesShowing: (state, getters, rootState, rootGetters) => () => {
+    if (!state.libraryPage) {
+      return getters.getFiltered()
+    } else if (state.libraryPage === 'search') {
+      return state.searchResults
+    } else if (state.libraryPage === 'series') {
+      var series = getters.getSeriesGroups()
+      if (state.selectedSeries) {
+        var _series = series.find(__series => __series.name === state.selectedSeries)
+        if (!_series) return []
+        return _series.books || []
+      }
+      return series
+    }
+    return []
+  },
  getFiltered: (state, getters, rootState, rootGetters) => () => {
    var filtered = state.audiobooks
    var settings = rootState.user.settings || {}
@@ -63,6 +83,36 @@ export const getters = {
      return value
    })
  },
+  getSeriesGroups: (state, getters, rootState) => () => {
+    var series = {}
+    state.audiobooks.forEach((audiobook) => {
+      if (audiobook.book && audiobook.book.series) {
+        if (series[audiobook.book.series]) {
+          var bookLastUpdate = audiobook.book.lastUpdate
+          if (bookLastUpdate > series[audiobook.book.series].lastUpdate) series[audiobook.book.series].lastUpdate = bookLastUpdate
+          series[audiobook.book.series].books.push(audiobook)
+        } else {
+          series[audiobook.book.series] = {
+            type: 'series',
+            name: audiobook.book.series || '',
+            books: [audiobook],
+            lastUpdate: audiobook.book.lastUpdate
+          }
+        }
+      }
+    })
+    var seriesArray = Object.values(series).map((_series) => {
+      _series.books = sort(_series.books)['asc']((ab) => {
+        return ab.book && ab.book.volumeNumber && !isNaN(ab.book.volumeNumber) ? Number(ab.book.volumeNumber) : null
+      })
+      return _series
+    })
+    if (state.keywordFilter) {
+      const keywordFilter = state.keywordFilter.toLowerCase()
+      return seriesArray.filter((_series) => _series.name.toLowerCase().includes(keywordFilter))
+    }
+    return seriesArray
+  },
  getUniqueAuthors: (state) => {
    var _authors = state.audiobooks.filter(ab => !!(ab.book && ab.book.author)).map(ab => ab.book.author)
    return [...new Set(_authors)].sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : 1)
@@ -71,32 +121,75 @@ export const getters = {
    var _genres = []
    state.audiobooks.filter(ab => !!(ab.book && ab.book.genres)).forEach(ab => _genres = _genres.concat(ab.book.genres))
    return [...new Set(_genres)].sort((a, b) => a.toLowerCase() < b.toLowerCase() ? -1 : 1)
+  },
+  getBookCoverSrc: (state, getters, rootState, rootGetters) => (book, placeholder = '/book_placeholder.jpg') => {
+    if (!book || !book.cover || book.cover === placeholder) return placeholder
+    var cover = book.cover
+
+    // Absolute URL covers
+    if (cover.startsWith('http:') || cover.startsWith('https:')) return cover
+
+    // Server hosted covers
+    try {
+      // Ensure cover is refreshed if cached
+      var bookLastUpdate = book.lastUpdate || Date.now()
+      var userToken = rootGetters['user/getToken']
+
+      var url = new URL(cover, document.baseURI)
+      return url.href + `?token=${userToken}&ts=${bookLastUpdate}`
+    } catch (err) {
+      console.error(err)
+      return placeholder
+    }
  }
 }

 export const actions = {
-  load({ commit, rootState }) {
+  // Return true if calling load
+  load({ state, commit, rootState }) {
    if (!rootState.user || !rootState.user.user) {
      console.error('audiobooks/load - User not set')
-      return
+      return false
    }
+
+    // Don't load again if already loaded in the last 5 minutes
+    var lastLoadDiff = Date.now() - state.lastLoad
+    if (lastLoadDiff < 5 * 60 * 1000) {
+      // Already up to date
+      return false
+    }
+
    this.$axios
      .$get(`/api/audiobooks`)
      .then((data) => {
        commit('set', data)
+        commit('setLastLoad')
      })
      .catch((error) => {
        console.error('Failed', error)
        commit('set', [])
      })
+    return true
  },

 }

 export const mutations = {
+  setLastLoad(state) {
+    state.lastLoad = Date.now()
+  },
  setKeywordFilter(state, val) {
    state.keywordFilter = val
  },
+  setSelectedSeries(state, val) {
+    state.selectedSeries = val
+  },
+  setLibraryPage(state, val) {
+    state.libraryPage = val
+  },
+  setSearchResults(state, val) {
+    state.searchResults = val
+  },
  set(state, audiobooks) {
    // GENRES
    var genres = [...state.genres]
@@ -1,4 +1,5 @@
 import { checkForUpdate } from '@/plugins/version'
+import Vue from 'vue'

 export const state = () => ({
  versionData: null,
@@ -14,7 +15,9 @@ export const state = () => ({
  coverScanProgress: null,
  developerMode: false,
  selectedAudiobooks: [],
-  processingBatch: false
+  processingBatch: false,
+  previousPath: '/',
+  routeHistory: []
 })

 export const getters = {
@@ -51,10 +54,25 @@ export const actions = {
        console.error('Update check failed', error)
        return false
      })
+  },
+  popRoute({ commit, state }) {
+    if (!state.routeHistory.length) {
+      return null
+    }
+    var _history = [...state.routeHistory]
+    var last = _history.pop()
+    commit('setRouteHistory', _history)
+    return last
  }
 }

 export const mutations = {
+  setRouteHistory(state, val) {
+    state.routeHistory = val
+  },
+  setPreviousPath(state, val) {
+    state.previousPath = val
+  },
  setVersionData(state, versionData) {
    state.versionData = versionData
  },
@@ -112,13 +130,18 @@ export const mutations = {
    state.developerMode = val
  },
  setSelectedAudiobooks(state, audiobooks) {
-    state.selectedAudiobooks = audiobooks
+    Vue.set(state, 'selectedAudiobooks', audiobooks)
+    // state.selectedAudiobooks = audiobooks
  },
  toggleAudiobookSelected(state, audiobookId) {
    if (state.selectedAudiobooks.includes(audiobookId)) {
      state.selectedAudiobooks = state.selectedAudiobooks.filter(a => a !== audiobookId)
    } else {
-      state.selectedAudiobooks.push(audiobookId)
+      var newSel = state.selectedAudiobooks.concat([audiobookId])
+      // state.selectedAudiobooks = newSel
+      console.log('Setting toggle on sel', newSel)
+      Vue.set(state, 'selectedAudiobooks', newSel)
+      // state.selectedAudiobooks.push(audiobookId)
    }
  },
  setProcessingBatch(state, val) {
@@ -16,6 +16,12 @@ module.exports = {
      height: {
        '7.5': '1.75rem'
      },
+      spacing: {
+        '-54': '-13.5rem'
+      },
+      rotate: {
+        '-60': '-60deg'
+      },
      colors: {
        bg: '#373838',
        primary: '#232323',
@@ -1,6 +1,6 @@
 {
  "name": "audiobookshelf",
-  "version": "1.1.13",
+  "version": "1.2.4",
  "lockfileVersion": 1,
  "requires": true,
  "dependencies": {
@@ -69,6 +69,12 @@
        "@types/node": "*"
      }
    },
+    "abbrev": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
+      "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
+      "optional": true
+    },
    "aborter": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/aborter/-/aborter-1.1.0.tgz",
@@ -83,6 +89,23 @@
        "negotiator": "0.6.2"
      }
    },
+    "adm-zip": {
+      "version": "0.4.16",
+      "resolved": "https://registry.npmjs.org/adm-zip/-/adm-zip-0.4.16.tgz",
+      "integrity": "sha512-TFi4HBKSGfIKsK5YCkKaaFG2m4PEDyViZmEwof3MTIgzimHLto6muaHVpbrljdIvIrFZzEq/p4nafOeLcYegrg=="
+    },
+    "ansi-regex": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-2.1.1.tgz",
+      "integrity": "sha1-w7M6te42DYbg5ijwRorn7yfWVN8=",
+      "optional": true
+    },
+    "aproba": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/aproba/-/aproba-1.2.0.tgz",
+      "integrity": "sha512-Y9J6ZjXtoYh8RnXVCMOU/ttDmk1aBjunq9vO0ta5x85WDQiQfUF9sIPBITdbiiIVcBo03Hi3jMxigBtsddlXRw==",
+      "optional": true
+    },
    "archiver": {
      "version": "5.3.0",
      "resolved": "https://registry.npmjs.org/archiver/-/archiver-5.3.0.tgz",
@@ -138,6 +161,33 @@
        "is-primitive": "^3.0.1"
      }
    },
+    "are-we-there-yet": {
+      "version": "1.1.7",
+      "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.7.tgz",
+      "integrity": "sha512-nxwy40TuMiUGqMyRHgCSWZ9FM4VAoRP4xUYSTv5ImRog+h9yISPbVH7H8fASCIzYn9wlEv4zvFL7uKDMCFQm3g==",
+      "optional": true,
+      "requires": {
+        "delegates": "^1.0.0",
+        "readable-stream": "^2.0.6"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "optional": true,
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        }
+      }
+    },
    "array-back": {
      "version": "3.1.0",
      "resolved": "https://registry.npmjs.org/array-back/-/array-back-3.1.0.tgz",
@@ -285,6 +335,12 @@
        "responselike": "^2.0.0"
      }
    },
+    "chownr": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/chownr/-/chownr-1.1.4.tgz",
+      "integrity": "sha512-jJ0bqzaylmJtVnNgzTeSOs8DPavpbYgEr/b0YL8/2GO3xJEhInFmhKMUnEJQjZumK7KXGFhUy89PrsJWlakBVg==",
+      "optional": true
+    },
    "clone-response": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/clone-response/-/clone-response-1.0.2.tgz",
@@ -293,6 +349,12 @@
        "mimic-response": "^1.0.0"
      }
    },
+    "code-point-at": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/code-point-at/-/code-point-at-1.1.0.tgz",
+      "integrity": "sha1-DQcLTQQ6W+ozovGkDi7bPZpMz3c=",
+      "optional": true
+    },
    "command-line-args": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/command-line-args/-/command-line-args-5.2.0.tgz",
@@ -325,6 +387,12 @@
      "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
      "integrity": "sha1-2Klr13/Wjfd5OnMDajug1UBdR3s="
    },
+    "console-control-strings": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/console-control-strings/-/console-control-strings-1.1.0.tgz",
+      "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=",
+      "optional": true
+    },
    "content-disposition": {
      "version": "0.5.3",
      "resolved": "https://registry.npmjs.org/content-disposition/-/content-disposition-0.5.3.tgz",
@@ -417,11 +485,23 @@
        }
      }
    },
+    "deep-extend": {
+      "version": "0.6.0",
+      "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.6.0.tgz",
+      "integrity": "sha512-LOHxIOaPYdHlJRtCQfDIVZtfw/ufM8+rVj649RIHzcm/vGwQRXFt6OPqIFWsm2XEMrNIEtWR64sY1LEKD2vAOA==",
+      "optional": true
+    },
    "defer-to-connect": {
      "version": "2.0.1",
      "resolved": "https://registry.npmjs.org/defer-to-connect/-/defer-to-connect-2.0.1.tgz",
      "integrity": "sha512-4tvttepXG1VaYGrRibk5EwJd1t4udunSOVMdLSAL6mId1ix438oPwPZMALY41FCijukO1L0twNcGsdzS7dHgDg=="
    },
+    "delegates": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
+      "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
+      "optional": true
+    },
    "depd": {
      "version": "1.1.2",
      "resolved": "https://registry.npmjs.org/depd/-/depd-1.1.2.tgz",
@@ -432,6 +512,12 @@
      "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
      "integrity": "sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA="
    },
+    "detect-libc": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
+      "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
+      "optional": true
+    },
    "dicer": {
      "version": "0.3.0",
      "resolved": "https://registry.npmjs.org/dicer/-/dicer-0.3.0.tgz",
@@ -629,11 +715,36 @@
        "universalify": "^2.0.0"
      }
    },
+    "fs-minipass": {
+      "version": "1.2.7",
+      "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.7.tgz",
+      "integrity": "sha512-GWSSJGFy4e9GUeCcbIkED+bgAoFyj7XF1mV8rma3QW4NIqX9Kyx79N/PF61H5udOV3aY1IaMLs6pGbH71nlCTA==",
+      "optional": true,
+      "requires": {
+        "minipass": "^2.6.0"
+      }
+    },
    "fs.realpath": {
      "version": "1.0.0",
      "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz",
      "integrity": "sha1-FQStJSMVjKpA20onh8sBQRmU6k8="
    },
+    "gauge": {
+      "version": "2.7.4",
+      "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
+      "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
+      "optional": true,
+      "requires": {
+        "aproba": "^1.0.3",
+        "console-control-strings": "^1.0.0",
+        "has-unicode": "^2.0.0",
+        "object-assign": "^4.1.0",
+        "signal-exit": "^3.0.0",
+        "string-width": "^1.0.1",
+        "strip-ansi": "^3.0.1",
+        "wide-align": "^1.1.0"
+      }
+    },
    "get-stream": {
      "version": "5.2.0",
      "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-5.2.0.tgz",
@@ -679,6 +790,12 @@
      "resolved": "https://registry.npmjs.org/graceful-fs/-/graceful-fs-4.2.6.tgz",
      "integrity": "sha512-nTnJ528pbqxYanhpDYsi4Rd8MAeaBA67+RZ10CM1m3bTAVFEDcd5AuA4a6W5YkGZ1iNXHzZz8T6TBKLeBuNriQ=="
    },
+    "has-unicode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
+      "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
+      "optional": true
+    },
    "http-cache-semantics": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/http-cache-semantics/-/http-cache-semantics-4.1.0.tgz",
@@ -718,6 +835,15 @@
      "resolved": "https://registry.npmjs.org/ieee754/-/ieee754-1.2.1.tgz",
      "integrity": "sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA=="
    },
+    "ignore-walk": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.4.tgz",
+      "integrity": "sha512-PY6Ii8o1jMRA1z4F2hRkH/xN59ox43DavKvD3oDpfurRlOJyAHpifIwpbdv1n4jt4ov0jSpw3kQ4GhJnpBL6WQ==",
+      "optional": true,
+      "requires": {
+        "minimatch": "^3.0.4"
+      }
+    },
    "inflight": {
      "version": "1.0.6",
      "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -732,6 +858,12 @@
      "resolved": "https://registry.npmjs.org/inherits/-/inherits-2.0.3.tgz",
      "integrity": "sha1-Yzwsg+PaQqUC9SRmAiSA9CCCYd4="
    },
+    "ini": {
+      "version": "1.3.8",
+      "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz",
+      "integrity": "sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==",
+      "optional": true
+    },
    "ip": {
      "version": "1.1.5",
      "resolved": "https://registry.npmjs.org/ip/-/ip-1.1.5.tgz",
@@ -742,6 +874,15 @@
      "resolved": "https://registry.npmjs.org/ipaddr.js/-/ipaddr.js-1.9.1.tgz",
      "integrity": "sha512-0KI/607xoxSToH7GjN1FfSbLoU0+btTicjsQSWQlh/hZykN8KpmMf7uYwPW3R+akZ6R/w18ZlXSHBYXiYUPO3g=="
    },
+    "is-fullwidth-code-point": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
+      "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
+      "optional": true,
+      "requires": {
+        "number-is-nan": "^1.0.0"
+      }
+    },
    "is-primitive": {
      "version": "3.0.1",
      "resolved": "https://registry.npmjs.org/is-primitive/-/is-primitive-3.0.1.tgz",
@@ -965,11 +1106,79 @@
        "brace-expansion": "^1.1.7"
      }
    },
+    "minimist": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.5.tgz",
+      "integrity": "sha512-FM9nNUYrRBAELZQT3xeZQ7fmMOBg6nWNmJKTcgsJeaLstP/UODVpGsr5OhXhhXg6f+qtJ8uiZ+PUxkDWcgIXLw==",
+      "optional": true
+    },
+    "minipass": {
+      "version": "2.9.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-2.9.0.tgz",
+      "integrity": "sha512-wxfUjg9WebH+CUDX/CdbRlh5SmfZiy/hpkxaRI16Y9W56Pa75sWgd/rvFilSgrauD9NyFymP/+JFV3KwzIsJeg==",
+      "optional": true,
+      "requires": {
+        "safe-buffer": "^5.1.2",
+        "yallist": "^3.0.0"
+      }
+    },
+    "minizlib": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.3.3.tgz",
+      "integrity": "sha512-6ZYMOEnmVsdCeTJVE0W9ZD+pVnE8h9Hma/iOwwRDsdQoePpoX56/8B6z3P9VNwppJuBKNRuFDRNRqRWexT9G9Q==",
+      "optional": true,
+      "requires": {
+        "minipass": "^2.9.0"
+      }
+    },
+    "mkdirp": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.5.tgz",
+      "integrity": "sha512-NKmAlESf6jMGym1++R0Ra7wvhV+wFW63FaSOFPwRahvea0gMUcGUhVeAg/0BC0wiv9ih5NYPB1Wn1UEI1/L+xQ==",
+      "optional": true,
+      "requires": {
+        "minimist": "^1.2.5"
+      }
+    },
    "ms": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
      "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
    },
+    "nan": {
+      "version": "2.10.0",
+      "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
+      "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
+      "optional": true
+    },
+    "needle": {
+      "version": "2.9.1",
+      "resolved": "https://registry.npmjs.org/needle/-/needle-2.9.1.tgz",
+      "integrity": "sha512-6R9fqJ5Zcmf+uYaFgdIHmLwNldn5HbK8L5ybn7Uz+ylX/rnOsSp1AHcvQSrCaFN+qNM1wpymHqD7mVasEOlHGQ==",
+      "optional": true,
+      "requires": {
+        "debug": "^3.2.6",
+        "iconv-lite": "^0.4.4",
+        "sax": "^1.2.4"
+      },
+      "dependencies": {
+        "debug": {
+          "version": "3.2.7",
+          "resolved": "https://registry.npmjs.org/debug/-/debug-3.2.7.tgz",
+          "integrity": "sha512-CFjzYYAi4ThfiQvizrFQevTTXHtnCqWfe7x1AhgEscTz6ZbLbfoLRLPugTQyBth6f8ZERVUSyWHFD/7Wu4t1XQ==",
+          "optional": true,
+          "requires": {
+            "ms": "^2.1.1"
+          }
+        },
+        "ms": {
+          "version": "2.1.3",
+          "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
+          "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
+          "optional": true
+        }
+      }
+    },
    "negotiator": {
      "version": "0.6.2",
      "resolved": "https://registry.npmjs.org/negotiator/-/negotiator-0.6.2.tgz",
@@ -991,6 +1200,34 @@
        "minimatch": "^3.0.2"
      }
    },
+    "node-pre-gyp": {
+      "version": "0.10.3",
+      "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.10.3.tgz",
+      "integrity": "sha512-d1xFs+C/IPS8Id0qPTZ4bUT8wWryfR/OzzAFxweG+uLN85oPzyo2Iw6bVlLQ/JOdgNonXLCoRyqDzDWq4iw72A==",
+      "optional": true,
+      "requires": {
+        "detect-libc": "^1.0.2",
+        "mkdirp": "^0.5.1",
+        "needle": "^2.2.1",
+        "nopt": "^4.0.1",
+        "npm-packlist": "^1.1.6",
+        "npmlog": "^4.0.2",
+        "rc": "^1.2.7",
+        "rimraf": "^2.6.1",
+        "semver": "^5.3.0",
+        "tar": "^4"
+      }
+    },
+    "nopt": {
+      "version": "4.0.3",
+      "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.3.tgz",
+      "integrity": "sha512-CvaGwVMztSMJLOeXPrez7fyfObdZqNUK1cPAEzLHrTybIua9pMdmmPR5YwtfNftIOMv3DPUhFaxsZMNTQO20Kg==",
+      "optional": true,
+      "requires": {
+        "abbrev": "1",
+        "osenv": "^0.1.4"
+      }
+    },
    "normalize-path": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
@@ -1001,6 +1238,50 @@
      "resolved": "https://registry.npmjs.org/normalize-url/-/normalize-url-6.1.0.tgz",
      "integrity": "sha512-DlL+XwOy3NxAQ8xuC0okPgK46iuVNAK01YN7RueYBqqFeGsBjV9XmCAzAdgt+667bCl5kPh9EqKKDwnaPG1I7A=="
    },
+    "npm-bundled": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.1.2.tgz",
+      "integrity": "sha512-x5DHup0SuyQcmL3s7Rx/YQ8sbw/Hzg0rj48eN0dV7hf5cmQq5PXIeioroH3raV1QC1yh3uTYuMThvEQF3iKgGQ==",
+      "optional": true,
+      "requires": {
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npm-normalize-package-bin": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/npm-normalize-package-bin/-/npm-normalize-package-bin-1.0.1.tgz",
+      "integrity": "sha512-EPfafl6JL5/rU+ot6P3gRSCpPDW5VmIzX959Ob1+ySFUuuYHWHekXpwdUZcKP5C+DS4GEtdJluwBjnsNDl+fSA==",
+      "optional": true
+    },
+    "npm-packlist": {
+      "version": "1.4.8",
+      "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.4.8.tgz",
+      "integrity": "sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==",
+      "optional": true,
+      "requires": {
+        "ignore-walk": "^3.0.1",
+        "npm-bundled": "^1.0.1",
+        "npm-normalize-package-bin": "^1.0.1"
+      }
+    },
+    "npmlog": {
+      "version": "4.1.2",
+      "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
+      "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
+      "optional": true,
+      "requires": {
+        "are-we-there-yet": "~1.1.2",
+        "console-control-strings": "~1.1.0",
+        "gauge": "~2.7.3",
+        "set-blocking": "~2.0.0"
+      }
+    },
+    "number-is-nan": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/number-is-nan/-/number-is-nan-1.0.1.tgz",
+      "integrity": "sha1-CXtgK1NCKlIsGvuHkDGDNpQaAR0=",
+      "optional": true
+    },
    "object-assign": {
      "version": "4.1.1",
      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
@@ -1022,6 +1303,28 @@
        "wrappy": "1"
      }
    },
+    "os-homedir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-homedir/-/os-homedir-1.0.2.tgz",
+      "integrity": "sha1-/7xJiDNuDoM94MFox+8VISGqf7M=",
+      "optional": true
+    },
+    "os-tmpdir": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/os-tmpdir/-/os-tmpdir-1.0.2.tgz",
+      "integrity": "sha1-u+Z0BseaqFxc/sdm/lc0VV36EnQ=",
+      "optional": true
+    },
+    "osenv": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
+      "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
+      "optional": true,
+      "requires": {
+        "os-homedir": "^1.0.0",
+        "os-tmpdir": "^1.0.0"
+      }
+    },
    "p-cancelable": {
      "version": "2.1.1",
      "resolved": "https://registry.npmjs.org/p-cancelable/-/p-cancelable-2.1.1.tgz",
@@ -1119,6 +1422,18 @@
        "unpipe": "1.0.0"
      }
    },
+    "rc": {
+      "version": "1.2.8",
+      "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz",
+      "integrity": "sha512-y3bGgqKj3QBdxLbLkomlohkvsA8gdAiUQlSBJnBhfn+BPxg4bc62d8TcBW15wavDfgexCgccckhcZvywyQYPOw==",
+      "optional": true,
+      "requires": {
+        "deep-extend": "^0.6.0",
+        "ini": "~1.3.0",
+        "minimist": "^1.2.0",
+        "strip-json-comments": "~2.0.1"
+      }
+    },
    "readable-stream": {
      "version": "3.6.0",
      "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -1155,6 +1470,15 @@
      "resolved": "https://registry.npmjs.org/retry/-/retry-0.12.0.tgz",
      "integrity": "sha1-G0KmJmoh8HQh0bC1S33BZ7AcATs="
    },
+    "rimraf": {
+      "version": "2.7.1",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-2.7.1.tgz",
+      "integrity": "sha512-uWjbaKIK3T1OSVptzX7Nl6PvQ3qAGtKEtVRjRuazjfL3Bx5eI409VZSqgND+4UNnmzLVdPj9FqFJNPqBZFve4w==",
+      "optional": true,
+      "requires": {
+        "glob": "^7.1.3"
+      }
+    },
    "ripstat": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/ripstat/-/ripstat-1.1.1.tgz",
@@ -1197,6 +1521,11 @@
      "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg=="
    },
+    "sax": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.2.4.tgz",
+      "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw=="
+    },
    "semver": {
      "version": "5.7.1",
      "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz",
@@ -1240,6 +1569,12 @@
        "send": "0.17.1"
      }
    },
+    "set-blocking": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/set-blocking/-/set-blocking-2.0.0.tgz",
+      "integrity": "sha1-BF+XgtARrppoA93TgrJDkrPYkPc=",
+      "optional": true
+    },
    "setprototypeof": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/setprototypeof/-/setprototypeof-1.1.1.tgz",
@@ -1326,6 +1661,17 @@
      "resolved": "https://registry.npmjs.org/string-indexes/-/string-indexes-1.0.0.tgz",
      "integrity": "sha512-RUlx+2YydZJNlRAvoh1siPYWj/Xfk6t1sQLkA5n1tMGRCKkRLzkRtJhHk4qRmKergEBh8R3pWhsUsDqia/bolw=="
    },
+    "string-width": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
+      "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
+      "optional": true,
+      "requires": {
+        "code-point-at": "^1.0.0",
+        "is-fullwidth-code-point": "^1.0.0",
+        "strip-ansi": "^3.0.0"
+      }
+    },
    "string_decoder": {
      "version": "1.1.1",
      "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
@@ -1334,6 +1680,44 @@
        "safe-buffer": "~5.1.0"
      }
    },
+    "strip-ansi": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-3.0.1.tgz",
+      "integrity": "sha1-ajhfuIU9lS1f8F0Oiq+UJ43GPc8=",
+      "optional": true,
+      "requires": {
+        "ansi-regex": "^2.0.0"
+      }
+    },
+    "strip-json-comments": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-2.0.1.tgz",
+      "integrity": "sha1-PFMZQukIwml8DsNEhYwobHygpgo=",
+      "optional": true
+    },
+    "tar": {
+      "version": "4.4.19",
+      "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.19.tgz",
+      "integrity": "sha512-a20gEsvHnWe0ygBY8JbxoM4w3SJdhc7ZAuxkLqh+nvNQN2IOt0B5lLgM490X5Hl8FF0dl0tOf2ewFYAlIFgzVA==",
+      "optional": true,
+      "requires": {
+        "chownr": "^1.1.4",
+        "fs-minipass": "^1.2.7",
+        "minipass": "^2.9.0",
+        "minizlib": "^1.3.3",
+        "mkdirp": "^0.5.5",
+        "safe-buffer": "^5.2.1",
+        "yallist": "^3.1.1"
+      },
+      "dependencies": {
+        "safe-buffer": {
+          "version": "5.2.1",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.2.1.tgz",
+          "integrity": "sha512-rp3So07KcdmmKbGvgaNxQSJr7bGVSVk5S9Eq1F+ppbRo70+YeaDxkw5Dd8NPN+GD6bjnYm2VuPuCXmpuYvmCXQ==",
+          "optional": true
+        }
+      }
+    },
    "tar-stream": {
      "version": "2.2.0",
      "resolved": "https://registry.npmjs.org/tar-stream/-/tar-stream-2.2.0.tgz",
@@ -1419,6 +1803,15 @@
        "isexe": "^2.0.0"
      }
    },
+    "wide-align": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.3.tgz",
+      "integrity": "sha512-QGkOQc8XL6Bt5PwnsExKBPuMKBxnGxWWW3fU55Xt4feHozMUhdUMaBCk290qpm/wG5u/RSKzwdAC4i51YigihA==",
+      "optional": true,
+      "requires": {
+        "string-width": "^1.0.2 || 2"
+      }
+    },
    "wrappy": {
      "version": "1.0.2",
      "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
@@ -1434,6 +1827,26 @@
      "resolved": "https://registry.npmjs.org/xml/-/xml-1.0.1.tgz",
      "integrity": "sha1-eLpyAgApxbyHuKgaPPzXS0ovweU="
    },
+    "xml2js": {
+      "version": "0.4.23",
+      "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
+      "integrity": "sha512-ySPiMjM0+pLDftHgXY4By0uswI3SPKLDw/i3UXbnO8M/p28zqexCUoPmQFrYD+/1BzhGJSs2i1ERWKJAtiLrug==",
+      "requires": {
+        "sax": ">=0.6.0",
+        "xmlbuilder": "~11.0.0"
+      }
+    },
+    "xmlbuilder": {
+      "version": "11.0.1",
+      "resolved": "https://registry.npmjs.org/xmlbuilder/-/xmlbuilder-11.0.1.tgz",
+      "integrity": "sha512-fDlsI/kFEx7gLvbecc0/ohLG50fugQp8ryHzMTuW9vSa1GJ0XYWKnhsUx7oie3G98+r56aTQIUB4kht42R3JvA=="
+    },
+    "yallist": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
+      "integrity": "sha512-a4UGQaWPH59mOXUYnAG2ewncQS4i4F43Tv3JoAM+s2VDAmS9NsK8GpDMLrCHPksFT7h3K6TOoUNn2pb7RoXx4g==",
+      "optional": true
+    },
    "zip-stream": {
      "version": "4.1.0",
      "resolved": "https://registry.npmjs.org/zip-stream/-/zip-stream-4.1.0.tgz",
@@ -1443,6 +1856,16 @@
        "compress-commons": "^4.1.0",
        "readable-stream": "^3.6.0"
      }
+    },
+    "zipfile": {
+      "version": "0.5.12",
+      "resolved": "https://registry.npmjs.org/zipfile/-/zipfile-0.5.12.tgz",
+      "integrity": "sha512-zA60gW+XgQBu/Q4qV3BCXNIDRald6Xi5UOPj3jWGlnkjmBHaKDwIz7kyXWV3kq7VEsQN/2t/IWjdXdKeVNm6Eg==",
+      "optional": true,
+      "requires": {
+        "nan": "~2.10.0",
+        "node-pre-gyp": "~0.10.2"
+      }
    }
  }
-}
+}
@@ -1,13 +1,23 @@
 {
  "name": "audiobookshelf",
-  "version": "1.1.14",
-  "description": "Self-hosted audiobook server for managing and playing audiobooks.",
+  "version": "1.2.7",
+  "description": "Self-hosted audiobook server for managing and playing audiobooks",
  "main": "index.js",
  "scripts": {
    "dev": "node index.js",
+    "start": "node index.js",
    "client": "cd client && npm install && npm run generate",
    "prod": "npm run client && npm install && node prod.js",
-    "start": "node prod.js"
+    "build-win": "npm run build-prep && pkg -t node12-win-x64 -o ./dist/win/audiobookshelf .",
+    "build-linux": "build/linuxpackager"
+  },
+  "bin": "prod.js",
+  "pkg": {
+    "assets": "client/dist/**/*",
+    "scripts": [
+      "prod.js",
+      "server/**/*.js"
+    ]
  },
  "author": "advplyr",
  "license": "ISC",
@@ -13,6 +13,7 @@ process.env.TOKEN_SECRET = '09f26e402586e2faa8da4c98a35f1b20d6b033c6097befa8be34
 process.env.NODE_ENV = 'production'

 const server = require('./server/Server')
+
 global.appRoot = __dirname

 var inputConfig = options.config ? Path.resolve(options.config) : null
@@ -24,7 +25,7 @@ const CONFIG_PATH = inputConfig || process.env.CONFIG_PATH || Path.resolve('conf
 const AUDIOBOOK_PATH = inputAudiobook || process.env.AUDIOBOOK_PATH || Path.resolve('audiobooks')
 const METADATA_PATH = inputMetadata || process.env.METADATA_PATH || Path.resolve('metadata')

-console.log('Config', CONFIG_PATH, METADATA_PATH, AUDIOBOOK_PATH)
+console.log(process.env.NODE_ENV, 'Config', CONFIG_PATH, METADATA_PATH, AUDIOBOOK_PATH)

 const Server = new server(PORT, CONFIG_PATH, METADATA_PATH, AUDIOBOOK_PATH)
 Server.start()
@@ -2,6 +2,8 @@

 AudioBookshelf is a self-hosted audiobook server for managing and playing your audiobooks.

+See [Install guides](https://audiobookshelf.org/install) and [documentation](https://audiobookshelf.org/docs)
+
 Android app is in beta, try it out on the [Google Play Store](https://play.google.com/store/apps/details?id=com.audiobookshelf.app)

 **Free & open source Android/iOS app is in development**
@@ -11,6 +13,8 @@ Android app is in beta, try it out on the [Google Play Store](https://play.googl

 ## Directory Structure

+ See [documentation](https://audiobookshelf.org/docs) for directory structure and naming.
+
 Author, Series, Volume Number, Title and Publish Year can all be parsed from your folder structure.

 **Note**: Files in the root directory `/audiobooks` will be ignored, all audiobooks should be in a directory
@@ -66,13 +70,71 @@ Will save the title as `Hackers` and the subtitle as `Heroes of the Computer Rev

 ## Installation

-Built to run in Docker for now (also on Unraid server Community Apps)
+### Docker Install
+Available in Unraid Community Apps

 ```bash
-docker run -d -p 1337:80 -v /audiobooks:/audiobooks -v /config:/config -v /metadata:/metadata --name audiobookshelf --rm advplyr/audiobookshelf
+docker pull advplyr/audiobookshelf
+
+docker run -d \
+  -p 1337:80 \
+  -v </path/to/audiobooks>:/audiobooks \
+  -v </path/to/config>:/config \
+  -v </path/to/metadata>:/metadata \
+  --name audiobookshelf \
+  --rm advplyr/audiobookshelf
 ```

-## Running on your local
+### Linux (amd64) Install
+
+A simple installer is added to setup the initial config. If you already have audiobooks, you can enter the path to your audiobooks during the install. The installer will create a user and group named `audiobookshelf`.
+
+
+
+### Ubuntu Install via PPA
+
+A PPA is hosted on [github](https://github.com/advplyr/audiobookshelf-ppa), add and install:
+
+```bash
+curl -s --compressed "https://advplyr.github.io/audiobookshelf-ppa/KEY.gpg" | sudo apt-key add - 
+
+sudo curl -s --compressed -o /etc/apt/sources.list.d/audiobookshelf.list "https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf.list" 
+
+sudo apt update 
+
+sudo apt install audiobookshelf
+```
+
+or use a single command
+
+```bash
+curl -s --compressed "https://advplyr.github.io/audiobookshelf-ppa/KEY.gpg" | sudo apt-key add - && sudo curl -s --compressed -o /etc/apt/sources.list.d/audiobookshelf.list "https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf.list" && sudo apt update && sudo apt install audiobookshelf
+```
+
+### Install via debian package
+
+Get the `deb` file from the [github repo](https://github.com/advplyr/audiobookshelf-ppa).
+
+```bash
+wget https://advplyr.github.io/audiobookshelf-ppa/audiobookshelf_1.2.3_amd64.deb
+
+sudo apt install ./audiobookshelf_1.2.3_amd64.deb
+```
+
+
+#### File locations
+
+Project directory: `/usr/share/audiobookshelf/`
+
+Config file: `/etc/default/audiobookshelf`
+
+System Service: `/lib/systemd/system/audiobookshelf.service`
+
+Ffmpeg static build: `/usr/lib/audiobookshelf-ffmpeg/`
+
+## Run from source
+
+Note: you will need `npm`, `node12`, and `ffmpeg` to run this project locally

 ```bash
 git clone https://github.com/advplyr/audiobookshelf.git
@@ -82,9 +144,6 @@ cd audiobookshelf
 # Directories will be created if they don't exist
 # Paths are relative to the root directory, so "../Audiobooks" would be a valid path
 npm run prod -- -p [PORT] --audiobooks [AUDIOBOOKS_PATH] --config [CONFIG_PATH] --metadata [METADATA_PATH]
-
-# You only need to use `npm run prod` the first time, after that use `npm run start`
-npm run start -- -p [PORT] --audiobooks [AUDIOBOOKS_PATH] --config [CONFIG_PATH] --metadata [METADATA_PATH]
 ```

 ## Contributing
@@ -1,10 +1,13 @@
 const express = require('express')
+const Path = require('path')
+const fs = require('fs-extra')
 const Logger = require('./Logger')
 const User = require('./objects/User')
-const { isObject } = require('./utils/index')
+const { isObject, isAcceptableCoverMimeType } = require('./utils/index')
+const { CoverDestination } = require('./utils/constants')

 class ApiController {
-  constructor(db, scanner, auth, streamManager, rssFeeds, downloadManager, emitter, clientEmitter) {
+  constructor(MetadataPath, db, scanner, auth, streamManager, rssFeeds, downloadManager, emitter, clientEmitter) {
    this.db = db
    this.scanner = scanner
    this.auth = auth
@@ -13,6 +16,7 @@ class ApiController {
    this.downloadManager = downloadManager
    this.emitter = emitter
    this.clientEmitter = clientEmitter
+    this.MetadataPath = MetadataPath

    this.router = express()
    this.init()
@@ -30,6 +34,7 @@ class ApiController {
    this.router.get('/audiobook/:id', this.getAudiobook.bind(this))
    this.router.delete('/audiobook/:id', this.deleteAudiobook.bind(this))
    this.router.patch('/audiobook/:id/tracks', this.updateAudiobookTracks.bind(this))
+    this.router.post('/audiobook/:id/cover', this.uploadAudiobookCover.bind(this))
    this.router.patch('/audiobook/:id', this.updateAudiobook.bind(this))

    this.router.get('/metadata/:id/:trackIndex', this.getMetadata.bind(this))
@@ -217,6 +222,85 @@ class ApiController {
    res.json(audiobook.toJSON())
  }

+  async uploadAudiobookCover(req, res) {
+    if (!req.user.canUpload || !req.user.canUpdate) {
+      Logger.warn('User attempted to upload a cover without permission', req.user)
+      return res.sendStatus(403)
+    }
+    if (!req.files || !req.files.cover) {
+      return res.status(400).send('No files were uploaded')
+    }
+    var audiobookId = req.params.id
+    var audiobook = this.db.audiobooks.find(ab => ab.id === audiobookId)
+    if (!audiobook) {
+      return res.status(404).send('Audiobook not found')
+    }
+
+    var coverFile = req.files.cover
+    var mimeType = coverFile.mimetype
+    var extname = Path.extname(coverFile.name.toLowerCase()) || '.jpg'
+    if (!isAcceptableCoverMimeType(mimeType)) {
+      return res.status(400).send('Invalid image file type: ' + mimeType)
+    }
+
+    var coverDestination = this.db.serverSettings ? this.db.serverSettings.coverDestination : CoverDestination.METADATA
+    Logger.info(`[ApiController] Cover Upload destination ${coverDestination}`)
+
+    var coverDirpath = audiobook.fullPath
+    var coverRelDirpath = Path.join('/local', audiobook.path)
+    if (coverDestination === CoverDestination.METADATA) {
+      coverDirpath = Path.join(this.MetadataPath, 'books', audiobookId)
+      coverRelDirpath = Path.join('/metadata', 'books', audiobookId)
+      Logger.debug(`[ApiController] storing in metadata | ${coverDirpath}`)
+      await fs.ensureDir(coverDirpath)
+    } else {
+      Logger.debug(`[ApiController] storing in audiobook | ${coverRelDirpath}`)
+    }
+
+    var coverFilename = `cover${extname}`
+    var coverFullPath = Path.join(coverDirpath, coverFilename)
+    var coverPath = Path.join(coverRelDirpath, coverFilename)
+
+    // If current cover is a metadata cover and does not match replacement, then remove it
+    var currentBookCover = audiobook.book.cover
+    if (currentBookCover && currentBookCover.startsWith(Path.sep + 'metadata')) {
+      Logger.debug(`Current Book Cover is metadata ${currentBookCover}`)
+      if (currentBookCover !== coverPath) {
+        Logger.info(`[ApiController] removing old metadata cover "${currentBookCover}"`)
+        var oldFullBookCoverPath = Path.join(this.MetadataPath, currentBookCover.replace(Path.sep + 'metadata', ''))
+
+        // Metadata path may have changed, check if exists first
+        var exists = await fs.pathExists(oldFullBookCoverPath)
+        if (exists) {
+          try {
+            await fs.remove(oldFullBookCoverPath)
+          } catch (error) {
+            Logger.error(`[ApiController] Failed to remove old metadata book cover ${oldFullBookCoverPath}`)
+          }
+        }
+      }
+    }
+
+    var success = await coverFile.mv(coverFullPath).then(() => true).catch((error) => {
+      Logger.error('Failed to move cover file', path, error)
+      return false
+    })
+
+    if (!success) {
+      return res.status(500).send('Failed to move cover into destination')
+    }
+
+    Logger.info(`[ApiController] Uploaded audiobook cover "${coverPath}" for "${audiobook.title}"`)
+
+    audiobook.updateBookCover(coverPath)
+    await this.db.updateAudiobook(audiobook)
+    this.emitter('audiobook_updated', audiobook.toJSONMinified())
+    res.json({
+      success: true,
+      cover: coverPath
+    })
+  }
+
  async updateAudiobook(req, res) {
    if (!req.user.canUpdate) {
      Logger.warn('User attempted to update without permission', req.user)
@@ -38,8 +38,16 @@ class Auth {
  }

  async authMiddleware(req, res, next) {
-    const authHeader = req.headers['authorization']
-    const token = authHeader && authHeader.split(' ')[1]
+    var token = null
+
+    // If using a get request, the token can be passed as a query string
+    if (req.method === 'GET' && req.query && req.query.token) {
+      token = req.query.token
+    } else {
+      const authHeader = req.headers['authorization']
+      token = authHeader && authHeader.split(' ')[1]
+    }
+
    if (token == null) {
      Logger.error('Api called without a token', req.path)
      return res.sendStatus(401)
@@ -7,7 +7,7 @@ const Logger = require('./Logger')
 const Download = require('./objects/Download')
 const { writeConcatFile, writeMetadataFile } = require('./utils/ffmpegHelpers')
 const { getFileSize } = require('./utils/fileUtils')
-
+const TAG = 'DownloadManager'
 class DownloadManager {
  constructor(db, MetadataPath, AudiobookPath, emitter) {
    this.db = db
@@ -260,7 +260,21 @@ class DownloadManager {
      output: download.fullPath,
    }

-    var worker = new workerThreads.Worker('./server/utils/downloadWorker.js', { workerData })
+    var worker = null
+    try {
+      var workerPath = Path.join(global.appRoot, 'server/utils/downloadWorker.js')
+      worker = new workerThreads.Worker(workerPath, { workerData })
+    } catch (error) {
+      Logger.error(`[${TAG}] Start worker thread failed`, error)
+      if (download.socket) {
+        var downloadJson = download.toJSON()
+        download.socket.emit('download_failed', downloadJson)
+      }
+      this.removeDownload(download)
+      return
+    }
+
+
    worker.on('message', (message) => {
      if (message != null && typeof message === 'object') {
        if (message.type === 'RESULT') {
@@ -0,0 +1,42 @@
+// const express = require('express')
+// const EPub = require('epub')
+// const Logger = require('./Logger')
+
+// class EbookReader {
+//   constructor(db, MetadataPath, AudiobookPath) {
+//     this.db = db
+//     this.MetadataPath = MetadataPath
+//     this.AudiobookPath = AudiobookPath
+
+//     this.router = express()
+//     this.init()
+//   }
+
+//   init() {
+//     this.router.get('/open/:id/:ino', this.openRequest.bind(this))
+//   }
+
+//   openRequest(req, res) {
+//     Logger.info('Open request received', req.params)
+//     var audiobookId = req.params.id
+//     var fileIno = req.params.ino
+//     var audiobook = this.db.audiobooks.find(ab => ab.id === audiobookId)
+//     if (!audiobook) {
+//       return res.sendStatus(404)
+//     }
+//     var ebook = audiobook.ebooks.find(eb => eb.ino === fileIno)
+//     if (!ebook) {
+//       Logger.error('Ebook file not found', fileIno)
+//       return res.sendStatus(404)
+//     }
+//     Logger.info('Ebook found', ebook)
+//     this.open(ebook.fullPath)
+//     res.sendStatus(200)
+//   }
+
+//   open(path) {
+//     var epub = new EPub(path)
+//     console.log('epub', epub)
+//   }
+// }
+// module.exports = EbookReader
@@ -4,13 +4,13 @@ const fs = require('fs-extra')
 const Logger = require('./Logger')

 class HlsController {
-  constructor(db, scanner, auth, streamManager, emitter, MetadataPath) {
+  constructor(db, scanner, auth, streamManager, emitter, StreamsPath) {
    this.db = db
    this.scanner = scanner
    this.auth = auth
    this.streamManager = streamManager
    this.emitter = emitter
-    this.MetadataPath = MetadataPath
+    this.StreamsPath = StreamsPath

    this.router = express()
    this.init()
@@ -28,7 +28,7 @@ class HlsController {

  async streamFileRequest(req, res) {
    var streamId = req.params.stream
-    var fullFilePath = Path.join(this.MetadataPath, streamId, req.params.file)
+    var fullFilePath = Path.join(this.StreamsPath, streamId, req.params.file)

    // development test stream - ignore
    if (streamId === 'test') {
@@ -25,25 +25,6 @@ class Scanner {
    return this.db.audiobooks
  }

-  async setAudiobookDataInos(audiobookData) {
-    for (let i = 0; i < audiobookData.length; i++) {
-      var abd = audiobookData[i]
-      var matchingAB = this.db.audiobooks.find(_ab => comparePaths(_ab.path, abd.path))
-      if (matchingAB) {
-        if (!matchingAB.ino) {
-          matchingAB.ino = await getIno(matchingAB.fullPath)
-        }
-        abd.ino = matchingAB.ino
-      } else {
-        abd.ino = await getIno(abd.fullPath)
-        if (!abd.ino) {
-          Logger.error('[Scanner] Invalid ino - ignoring audiobook data', abd.path)
-        }
-      }
-    }
-    return audiobookData.filter(abd => !!abd.ino)
-  }
-
  async setAudioFileInos(audiobookDataAudioFiles, audiobookAudioFiles) {
    for (let i = 0; i < audiobookDataAudioFiles.length; i++) {
      var abdFile = audiobookDataAudioFiles[i]
@@ -68,7 +49,6 @@ class Scanner {
    Logger.debug(`[Scanner] Scanning "${audiobookData.title}" (${audiobookData.ino}) - ${!!existingAudiobook ? 'Exists' : 'New'}`)

    if (existingAudiobook) {
-
      // REMOVE: No valid audio files
      // TODO: Label as incomplete, do not actually delete
      if (!audiobookData.audioFiles.length) {
@@ -80,7 +60,10 @@ class Scanner {
        return ScanResult.REMOVED
      }

-      audiobookData.audioFiles = await this.setAudioFileInos(audiobookData.audioFiles, existingAudiobook.audioFiles)
+      // ino is now set for every file in scandir
+      audiobookData.audioFiles = audiobookData.audioFiles.filter(af => af.ino)
+      // audiobookData.audioFiles = await this.setAudioFileInos(audiobookData.audioFiles, existingAudiobook.audioFiles)
+

      // Check for audio files that were removed
      var abdAudioFileInos = audiobookData.audioFiles.map(af => af.ino)
@@ -90,6 +73,14 @@ class Scanner {
        removedAudioFiles.forEach((af) => existingAudiobook.removeAudioFile(af))
      }

+      // Check for mismatched audio tracks - tracks with no matching audio file
+      var removedAudioTracks = existingAudiobook.tracks.filter(track => !abdAudioFileInos.includes(track.ino))
+      if (removedAudioTracks.length) {
+        Logger.info(`[Scanner] ${removedAudioTracks.length} tracks removed no matching audio file for audiobook "${existingAudiobook.title}"`)
+        removedAudioTracks.forEach((at) => existingAudiobook.removeAudioTrack(at))
+      }
+
+
      // Check for new audio files and sync existing audio files
      var newAudioFiles = []
      var hasUpdatedAudioFiles = false
@@ -100,7 +91,12 @@ class Scanner {
            hasUpdatedAudioFiles = true
          }
        } else {
-          newAudioFiles.push(file)
+          var audioFileWithMatchingPath = existingAudiobook.getAudioFileByPath(file.fullPath)
+          if (audioFileWithMatchingPath) {
+            Logger.warn(`[Scanner] Audio file with path already exists with different inode, New: "${file.filename}" (${file.ino}) | Existing: ${audioFileWithMatchingPath.filename} (${audioFileWithMatchingPath.ino})`)
+          } else {
+            newAudioFiles.push(file)
+          }
        }
      })
      if (newAudioFiles.length) {
@@ -119,7 +115,7 @@ class Scanner {
        return ScanResult.REMOVED
      }

-      var hasUpdates = removedAudioFiles.length || newAudioFiles.length || hasUpdatedAudioFiles
+      var hasUpdates = removedAudioFiles.length || removedAudioTracks.length || newAudioFiles.length || hasUpdatedAudioFiles

      if (existingAudiobook.checkUpdateMissingParts()) {
        Logger.info(`[Scanner] "${existingAudiobook.title}" missing parts updated`)
@@ -182,27 +178,28 @@ class Scanner {
    // TODO: This temporary fix from pre-release should be removed soon, including the "fixRelativePath" and "checkUpdateInos"
    // TEMP - fix relative file paths
    // TEMP - update ino for each audiobook
-    // if (this.audiobooks.length) {
-    //   for (let i = 0; i < this.audiobooks.length; i++) {
-    //     var ab = this.audiobooks[i]
-    //     var shouldUpdate = ab.fixRelativePath(this.AudiobookPath) || !ab.ino
+    if (this.audiobooks.length) {
+      for (let i = 0; i < this.audiobooks.length; i++) {
+        var ab = this.audiobooks[i]
+        // var shouldUpdate = ab.fixRelativePath(this.AudiobookPath) || !ab.ino

-    //     // Update ino if an audio file has the same ino as the audiobook
-    //     var shouldUpdateIno = !ab.ino || (ab.audioFiles || []).find(abf => abf.ino === ab.ino)
-    //     if (shouldUpdateIno) {
-    //       await ab.checkUpdateInos()
-    //     }
-    //     if (shouldUpdate) {
-    //       await this.db.updateAudiobook(ab)
-    //     }
-    //   }
-    // }
+        // Update ino if inos are not set
+        var shouldUpdateIno = ab.hasMissingIno
+        if (shouldUpdateIno) {
+          Logger.debug(`Updating inos for ${ab.title}`)
+          var hasUpdates = await ab.checkUpdateInos()
+          if (hasUpdates) {
+            await this.db.updateAudiobook(ab)
+          }
+        }
+      }
+    }

    const scanStart = Date.now()
    var audiobookDataFound = await scanRootDir(this.AudiobookPath, this.db.serverSettings)

-    // Set ino for each ab data as a string
-    audiobookDataFound = await this.setAudiobookDataInos(audiobookDataFound)
+    // Remove audiobooks with no inode
+    audiobookDataFound = audiobookDataFound.filter(abd => abd.ino)

    if (this.cancelScan) {
      this.cancelScan = false
@@ -318,7 +315,11 @@ class Scanner {
  async filesChanged(filepaths) {
    if (!filepaths.length) return ScanResult.NOTHING
    var relfilepaths = filepaths.map(path => path.replace(this.AudiobookPath, ''))
-    var fileGroupings = groupFilesIntoAudiobookPaths(relfilepaths)
+    var fileGroupings = groupFilesIntoAudiobookPaths(relfilepaths, true)
+
+
+    Logger.debug(`[Scanner] fileGroupings `, filepaths, fileGroupings)
+

    var results = []
    for (const dir in fileGroupings) {
@@ -14,6 +14,7 @@ const HlsController = require('./HlsController')
 const StreamManager = require('./StreamManager')
 const RssFeeds = require('./RssFeeds')
 const DownloadManager = require('./DownloadManager')
+// const EbookReader = require('./EbookReader')
 const Logger = require('./Logger')

 class Server {
@@ -35,8 +36,9 @@ class Server {
    this.streamManager = new StreamManager(this.db, this.MetadataPath)
    this.rssFeeds = new RssFeeds(this.Port, this.db)
    this.downloadManager = new DownloadManager(this.db, this.MetadataPath, this.AudiobookPath, this.emitter.bind(this))
-    this.apiController = new ApiController(this.db, this.scanner, this.auth, this.streamManager, this.rssFeeds, this.downloadManager, this.emitter.bind(this), this.clientEmitter.bind(this))
-    this.hlsController = new HlsController(this.db, this.scanner, this.auth, this.streamManager, this.emitter.bind(this), this.MetadataPath)
+    this.apiController = new ApiController(this.MetadataPath, this.db, this.scanner, this.auth, this.streamManager, this.rssFeeds, this.downloadManager, this.emitter.bind(this), this.clientEmitter.bind(this))
+    this.hlsController = new HlsController(this.db, this.scanner, this.auth, this.streamManager, this.emitter.bind(this), this.streamManager.StreamsPath)
+    // this.ebookReader = new EbookReader(this.db, this.MetadataPath, this.AudiobookPath)

    this.server = null
    this.io = null
@@ -110,8 +112,10 @@ class Server {

  async init() {
    Logger.info('[Server] Init')
+    await this.streamManager.ensureStreamsDir()
    await this.streamManager.removeOrphanStreams()
    await this.downloadManager.removeOrphanDownloads()
+
    await this.db.init()
    this.auth.init()

@@ -170,7 +174,6 @@ class Server {

  async start() {
    Logger.info('=== Starting Server ===')
-
    await this.init()

    const app = express()
@@ -189,6 +192,8 @@ class Server {
      app.use(express.static(this.AudiobookPath))
    }

+    app.use('/metadata', this.authMiddleware.bind(this), express.static(this.MetadataPath))
+
    app.use(express.static(this.MetadataPath))
    app.use(express.static(Path.join(global.appRoot, 'static')))
    app.use(express.urlencoded({ extended: true }));
@@ -196,10 +201,12 @@ class Server {

    // Dynamic routes are not generated on client
    app.get('/audiobook/:id', (req, res) => res.sendFile(Path.join(distPath, 'index.html')))
+    app.get('/library/:id', (req, res) => res.sendFile(Path.join(distPath, 'index.html')))
+    app.get('/library', (req, res) => res.sendFile(Path.join(distPath, 'index.html')))

    app.use('/api', this.authMiddleware.bind(this), this.apiController.router)
    app.use('/hls', this.authMiddleware.bind(this), this.hlsController.router)
-    // app.use('/hls', this.hlsController.router)
+    // app.use('/ebook', this.ebookReader.router)
    app.use('/feeds', this.rssFeeds.router)

    app.post('/upload', this.authMiddleware.bind(this), this.handleUpload.bind(this))
@@ -5,11 +5,12 @@ const fs = require('fs-extra')
 const Path = require('path')

 class StreamManager {
-  constructor(db, STREAM_PATH) {
+  constructor(db, MetadataPath) {
    this.db = db

+    this.MetadataPath = MetadataPath
    this.streams = []
-    this.streamPath = STREAM_PATH
+    this.StreamsPath = Path.join(this.MetadataPath, 'streams')
  }

  get audiobooks() {
@@ -25,7 +26,7 @@ class StreamManager {
  }

  async openStream(client, audiobook) {
-    var stream = new Stream(this.streamPath, client, audiobook)
+    var stream = new Stream(this.StreamsPath, client, audiobook)

    stream.on('closed', () => {
      this.removeStream(stream)
@@ -44,29 +45,54 @@ class StreamManager {
    return stream
  }

+  ensureStreamsDir() {
+    return fs.ensureDir(this.StreamsPath)
+  }
+
  removeOrphanStreamFiles(streamId) {
    try {
-      var streamPath = Path.join(this.streamPath, streamId)
-      return fs.remove(streamPath)
+      var StreamsPath = Path.join(this.StreamsPath, streamId)
+      return fs.remove(StreamsPath)
    } catch (error) {
      Logger.debug('No orphan stream', streamId)
      return false
    }
  }

-  async removeOrphanStreams() {
+  async tempCheckStrayStreams() {
    try {
-      var dirs = await fs.readdir(this.streamPath)
+      var dirs = await fs.readdir(this.MetadataPath)
      if (!dirs || !dirs.length) return true

      await Promise.all(dirs.map(async (dirname) => {
-        var fullPath = Path.join(this.streamPath, dirname)
+        if (dirname !== 'streams' && dirname !== 'books' && dirname !== 'downloads') {
+          var fullPath = Path.join(this.MetadataPath, dirname)
+          Logger.warn(`Removing OLD Orphan Stream ${dirname}`)
+          return fs.remove(fullPath)
+        }
+      }))
+
+      return true
+    } catch (error) {
+      Logger.debug('No old orphan streams', error)
+      return false
+    }
+  }
+
+  async removeOrphanStreams() {
+    await this.tempCheckStrayStreams()
+    try {
+      var dirs = await fs.readdir(this.StreamsPath)
+      if (!dirs || !dirs.length) return true
+
+      await Promise.all(dirs.map(async (dirname) => {
+        var fullPath = Path.join(this.StreamsPath, dirname)
        Logger.info(`Removing Orphan Stream ${dirname}`)
        return fs.remove(fullPath)
      }))
      return true
    } catch (error) {
-      Logger.debug('No orphan stream', streamId)
+      Logger.debug('No orphan stream', error)
      return false
    }
  }
@@ -102,10 +128,10 @@ class StreamManager {
    this.db.updateUserStream(client.user.id, null)
  }

-  async openTestStream(streamPath, audiobookId) {
+  async openTestStream(StreamsPath, audiobookId) {
    Logger.info('Open Stream Test Request', audiobookId)
    // var audiobook = this.audiobooks.find(ab => ab.id === audiobookId)
-    // var stream = new StreamTest(streamPath, audiobook)
+    // var stream = new StreamTest(StreamsPath, audiobook)

    // stream.on('closed', () => {
    //   console.log('Stream closed')
@@ -106,6 +106,14 @@ class Audiobook {
    return (this.audioFiles || []).filter(af => af.invalid).map(af => ({ filename: af.filename, error: af.error || 'Unknown Error' }))
  }

+  get ebooks() {
+    return this.otherFiles.filter(file => file.filetype === 'ebook')
+  }
+
+  get hasMissingIno() {
+    return !this.ino || (this.audioFiles || []).find(abf => !abf.ino) || (this.otherFiles || []).find(f => !f.ino) || (this.tracks || []).find(t => !t.ino)
+  }
+
  bookToJSON() {
    return this.book ? this.book.toJSON() : null
  }
@@ -152,6 +160,7 @@ class Audiobook {
      hasBookMatch: !!this.book,
      hasMissingParts: this.missingParts ? this.missingParts.length : 0,
      hasInvalidParts: this.invalidParts ? this.invalidParts.length : 0,
+      numEbooks: this.ebooks.length,
      numTracks: this.tracks.length,
      chapters: this.chapters || [],
      isMissing: !!this.isMissing
@@ -173,6 +182,7 @@ class Audiobook {
      invalidParts: this.invalidParts,
      audioFiles: (this.audioFiles || []).map(audioFile => audioFile.toJSON()),
      otherFiles: (this.otherFiles || []).map(otherFile => otherFile.toJSON()),
+      ebooks: (this.ebooks || []).map(ebook => ebook.toJSON()),
      tags: this.tags,
      book: this.bookToJSON(),
      tracks: this.tracksToJSON(),
@@ -195,7 +205,8 @@ class Audiobook {
    return false
  }

-  // Update was made to add ino values, ensure they are set
+  // Originally files did not store the inode value
+  // this function checks all files and sets the inode
  async checkUpdateInos() {
    var hasUpdates = false
    if (!this.ino) {
@@ -204,15 +215,55 @@ class Audiobook {
    }
    for (let i = 0; i < this.audioFiles.length; i++) {
      var af = this.audioFiles[i]
+      var at = this.tracks.find(t => t.ino === af.ino)
+      if (!at) {
+        at = this.tracks.find(t => comparePaths(t.path, af.path))
+      }
      if (!af.ino || af.ino === this.ino) {
        af.ino = await getIno(af.fullPath)
        if (!af.ino) {
          Logger.error('[Audiobook] checkUpdateInos: Failed to set ino for audio file', af.fullPath)
        } else {
-          var track = this.tracks.find(t => comparePaths(t.path, af.path))
-          if (track) {
-            track.ino = af.ino
+          Logger.debug(`[Audiobook] Set INO For audio file ${af.path}`)
+          if (at) at.ino = af.ino
+        }
+        hasUpdates = true
+      } else if (at && at.ino !== af.ino) {
+        at.ino = af.ino
+        hasUpdates = true
+      }
+    }
+    for (let i = 0; i < this.tracks.length; i++) {
+      var at = this.tracks[i]
+      if (!at.ino) {
+        Logger.debug(`[Audiobook] Track ${at.filename} still does not have ino`)
+        var atino = await getIno(at.fullPath)
+        var af = this.audioFiles.find(_af => _af.ino === atino)
+        if (!af) {
+          Logger.debug(`[Audiobook] Track ${at.filename} no matching audio file with ino ${atino}`)
+          af = this.audioFiles.find(_af => _af.filename === at.filename)
+          if (!af) {
+            Logger.debug(`[Audiobook] Track ${at.filename} no matching audio file with filename`)
+          } else {
+            Logger.debug(`[Audiobook] Track ${at.filename} found matching filename but mismatch ino ${atino}/${af.ino}`)
+            // at.ino = af.ino
+            // at.path = af.path
+            // at.fullPath = af.fullPath
+            // hasUpdates = true
          }
+        } else {
+          Logger.debug(`[Audiobook] Track ${at.filename} found audio file with matching ino ${at.path}/${af.path}`)
+        }
+      }
+    }
+    for (let i = 0; i < this.otherFiles.length; i++) {
+      var file = this.otherFiles[i]
+      if (!file.ino || file.ino === this.ino) {
+        file.ino = await getIno(file.fullPath)
+        if (!file.ino) {
+          Logger.error('[Audiobook] checkUpdateInos: Failed to set ino for other file', file.fullPath)
+        } else {
+          Logger.debug(`[Audiobook] Set INO For other file ${file.path}`)
        }
        hasUpdates = true
      }
@@ -288,6 +339,12 @@ class Audiobook {
    return hasUpdates
  }

+  // Cover Url may be the same, this ensures the lastUpdate is updated
+  updateBookCover(cover) {
+    if (!this.book) return false
+    return this.book.updateCover(cover)
+  }
+
  updateAudioTracks(orderedFileData) {
    var index = 1
    this.audioFiles = orderedFileData.map((fileData) => {
@@ -323,6 +380,11 @@ class Audiobook {
    this.audioFiles = this.audioFiles.filter(f => f.ino !== audioFile.ino)
  }

+  removeAudioTrack(track) {
+    this.tracks = this.tracks.filter(t => t.ino !== track.ino)
+    this.audioFiles = this.audioFiles.filter(f => f.ino !== track.ino)
+  }
+
  checkUpdateMissingParts() {
    var currMissingParts = (this.missingParts || []).join(',') || ''

@@ -357,6 +419,7 @@ class Audiobook {
    var newOtherFilePaths = newOtherFiles.map(f => f.path)
    this.otherFiles = this.otherFiles.filter(f => newOtherFilePaths.includes(f.path))

+    // TODO: Should use inode
    newOtherFiles.forEach((file) => {
      var existingOtherFile = this.otherFiles.find(f => f.path === file.path)
      if (!existingOtherFile) {
@@ -419,9 +482,12 @@ class Audiobook {
    return this.audioFiles.find(af => af.ino === ino)
  }

+  getAudioFileByPath(fullPath) {
+    return this.audioFiles.find(af => af.fullPath === fullPath)
+  }
+
  setChapters() {
    // If 1 audio file without chapters, then no chapters will be set
-
    var includedAudioFiles = this.audioFiles.filter(af => !af.exclude)
    if (includedAudioFiles.length === 1) {
      // 1 audio file with chapters
@@ -457,7 +523,7 @@ class Audiobook {
            id: currChapterId++,
            start: currStartTime,
            end: currStartTime + file.duration,
-            title: `Chapter ${currChapterId}`
+            title: file.filename ? Path.basename(file.filename, Path.extname(file.filename)) : `Chapter ${currChapterId}`
          })
          currStartTime += file.duration
        }
@@ -18,6 +18,7 @@ class Book {
    this.description = null
    this.cover = null
    this.genres = []
+    this.lastUpdate = null

    if (book) {
      this.construct(book)
@@ -45,6 +46,7 @@ class Book {
    this.description = book.description
    this.cover = book.cover
    this.genres = book.genres
+    this.lastUpdate = book.lastUpdate || Date.now()
  }

  toJSON() {
@@ -62,7 +64,8 @@ class Book {
      publisher: this.publisher,
      description: this.description,
      cover: this.cover,
-      genres: this.genres
+      genres: this.genres,
+      lastUpdate: this.lastUpdate
    }
  }

@@ -97,6 +100,7 @@ class Book {
    this.description = data.description || null
    this.cover = data.cover || null
    this.genres = data.genres || []
+    this.lastUpdate = Date.now()

    if (data.author) {
      this.setParseAuthor(this.author)
@@ -145,9 +149,24 @@ class Book {
        hasUpdates = true
      }
    }
+
+    if (hasUpdates) {
+      this.lastUpdate = Date.now()
+    }
+
    return hasUpdates
  }

+  updateCover(cover) {
+    if (!cover) return false
+    if (!cover.startsWith('http:') && !cover.startsWith('https:')) {
+      cover = Path.normalize(cover)
+    }
+    this.cover = cover
+    this.lastUpdate = Date.now()
+    return true
+  }
+
  // If audiobook directory path was changed, check and update properties set from dirnames
  // May be worthwhile checking if these were manually updated and not override manual updates
  syncPathsUpdated(audiobookData) {
@@ -1,9 +1,12 @@
+const { CoverDestination } = require('../utils/constants')
+
 class ServerSettings {
  constructor(settings) {
    this.id = 'server-settings'
    this.autoTagNew = false
    this.newTagExpireDays = 15
    this.scannerParseSubtitle = false
+    this.coverDestination = CoverDestination.METADATA

    if (settings) {
      this.construct(settings)
@@ -14,6 +17,7 @@ class ServerSettings {
    this.autoTagNew = settings.autoTagNew
    this.newTagExpireDays = settings.newTagExpireDays
    this.scannerParseSubtitle = settings.scannerParseSubtitle
+    this.coverDestination = settings.coverDestination || CoverDestination.METADATA
  }

  toJSON() {
@@ -21,7 +25,8 @@ class ServerSettings {
      id: this.id,
      autoTagNew: this.autoTagNew,
      newTagExpireDays: this.newTagExpireDays,
-      scannerParseSubtitle: this.scannerParseSubtitle
+      scannerParseSubtitle: this.scannerParseSubtitle,
+      coverDestination: this.coverDestination
    }
  }

@@ -189,7 +189,7 @@ class Stream extends EventEmitter {

      var perc = (this.segmentsCreated.size * 100 / this.numSegments).toFixed(2) + '%'
      Logger.info('[STREAM-CHECK] Check Files', this.segmentsCreated.size, 'of', this.numSegments, perc, `Furthest Segment: ${this.furthestSegmentCreated}`)
-      Logger.info('[STREAM-CHECK] Chunks', chunks.join(', '))
+      Logger.debug('[STREAM-CHECK] Chunks', chunks.join(', '))

      this.socket.emit('stream_progress', {
        stream: this.id,
@@ -198,7 +198,7 @@ class Stream extends EventEmitter {
        numSegments: this.numSegments
      })
    } catch (error) {
-      Logger.error('Failed checkign files', error)
+      Logger.error('Failed checking files', error)
    }
  }

@@ -85,7 +85,7 @@ function getTrackNumberFromFilename(title, author, series, publishYear, filename

 async function scanAudioFiles(audiobook, newAudioFiles) {
  if (!newAudioFiles || !newAudioFiles.length) {
-    Logger.error('[AudioFileScanner] Scan Audio Files no files', audiobook.title)
+    Logger.error('[AudioFileScanner] Scan Audio Files no new files', audiobook.title)
    return
  }
  var tracks = []
@@ -4,4 +4,9 @@ module.exports.ScanResult = {
  UPDATED: 2,
  REMOVED: 3,
  UPTODATE: 4
+}
+
+module.exports.CoverDestination = {
+  METADATA: 0,
+  AUDIOBOOK: 1
 }
@@ -62,4 +62,8 @@ module.exports.getIno = (path) => {
    Logger.error('[Utils] Failed to get ino for path', path, err)
    return null
  })
+}
+
+module.exports.isAcceptableCoverMimeType = (mimeType) => {
+  return mimeType && mimeType.startsWith('image/')
 }
@@ -1,6 +1,7 @@
 const Path = require('path')
 const dir = require('node-dir')
 const Logger = require('../Logger')
+const { getIno } = require('./index')

 const AUDIO_FORMATS = ['m4b', 'mp3', 'm4a']
 const INFO_FORMATS = ['nfo']
@@ -26,7 +27,7 @@ function isAudioFile(path) {
  return AUDIO_FORMATS.includes(ext.slice(1).toLowerCase())
 }

-function groupFilesIntoAudiobookPaths(paths) {
+function groupFilesIntoAudiobookPaths(paths, useAllFileTypes = false) {
  // Step 1: Normalize path, Remove leading "/", Filter out files in root dir
  var pathsFiltered = paths.map(path => Path.normalize(path.slice(1))).filter(path => Path.parse(path).dir)

@@ -37,11 +38,11 @@ function groupFilesIntoAudiobookPaths(paths) {
    return pathsA - pathsB
  })

-  // Step 2.5: Seperate audio files and other files
+  // Step 2.5: Seperate audio files and other files (optional)
  var audioFilePaths = []
  var otherFilePaths = []
  pathsFiltered.forEach(path => {
-    if (isAudioFile(path)) audioFilePaths.push(path)
+    if (isAudioFile(path) || useAllFileTypes) audioFilePaths.push(path)
    else otherFilePaths.push(path)
  })

@@ -134,7 +135,12 @@ async function scanRootDir(abRootPath, serverSettings = {}) {
    var audiobookData = getAudiobookDataFromDir(abRootPath, audiobookPath, parseSubtitle)

    var fileObjs = cleanFileObjects(audiobookData.fullPath, audiobookPath, audiobookGrouping[audiobookPath])
+    for (let i = 0; i < fileObjs.length; i++) {
+      fileObjs[i].ino = await getIno(fileObjs[i].fullPath)
+    }
+    var audiobookIno = await getIno(audiobookData.fullPath)
    audiobooks.push({
+      ino: audiobookIno,
      ...audiobookData,
      audioFiles: fileObjs.filter(f => f.filetype === 'audio'),
      otherFiles: fileObjs.filter(f => f.filetype !== 'audio')
@@ -241,11 +247,15 @@ async function getAudiobookFileData(abRootPath, audiobookPath, serverSettings =
    otherFiles: []
  }

-  filepaths.forEach((filepath) => {
+  for (let i = 0; i < filepaths.length; i++) {
+    var filepath = filepaths[i]
+
    var relpath = Path.normalize(filepath).replace(abRootPath, '').slice(1)
    var extname = Path.extname(filepath)
    var basename = Path.basename(filepath)
+    var ino = await getIno(filepath)
    var fileObj = {
+      ino,
      filetype: getFileType(extname),
      filename: basename,
      path: relpath,
@@ -257,7 +267,7 @@ async function getAudiobookFileData(abRootPath, audiobookPath, serverSettings =
    } else {
      audiobook.otherFiles.push(fileObj)
    }
-  })
+  }
  return audiobook
 }
 module.exports.getAudiobookFileData = getAudiobookFileData
Author	SHA1	Message	Date
Mark Cooper	0da327222e	Fix config page not scrolling, add scroll arrows on home page, fix routing issue on back button, fix continue reading shelf	2021-09-28 17:36:41 -05:00
Mark Cooper	868e1af28a	Starting point for home page	2021-09-28 06:44:40 -05:00
Mark Cooper	a343a1038c	Remove ino from file tables	2021-09-27 07:02:31 -05:00
Mark Cooper	3e5338ec8e	Fixing scanner inodes, select all fix, starting ebook reader	2021-09-27 06:52:21 -05:00
Mark Cooper	01fdca4bf9	Fix docs link url	2021-09-26 17:21:10 -05:00
Mark Cooper	ed96dd7c81	Readme update docs	2021-09-26 17:20:41 -05:00
Mark Cooper	1ead5de9f5	Hide volume number on selection mode	2021-09-26 15:44:25 -05:00
Mark Cooper	06554811e2	Series order by volume number, show volume number, keyword filter, fix overflow bug	2021-09-26 15:34:08 -05:00
Mark Cooper	9935bd2ffa	Readme audiobookshelf.org	2021-09-26 12:08:48 -05:00
Mark Cooper	4260903bbe	Readme update install instructions	2021-09-25 17:58:06 -05:00
Mark Cooper	64ae8ef849	linux installer use existing config	2021-09-25 17:37:21 -05:00
Mark Cooper	be15f2f5a0	Fix installer	2021-09-25 17:14:06 -05:00
Mark Cooper	341de6a196	Fix linuxpackager control file	2021-09-25 17:10:02 -05:00
Mark Cooper	740f6966ba	Linuxpackager create debian control file	2021-09-25 17:07:48 -05:00
Mark Cooper	2e889ff9fe	Increment version, linuxpacakger executable permissions	2021-09-25 16:45:53 -05:00
Mark Cooper	d123abd4cd	Linuxpackager to use /dist directory	2021-09-25 16:34:36 -05:00
Mark Cooper	cc84349d6d	Adding linux and ppa install to readme	2021-09-25 16:23:57 -05:00
Mark Cooper	b5e83d8866	Preinstall prompt more readable	2021-09-25 14:14:22 -05:00
Mark Cooper	ca9521ac9a	Debian package remove conf file, generate in preinst now	2021-09-25 14:05:27 -05:00
Mark Cooper	078f404fe4	Linux builder bash script	2021-09-25 14:02:50 -05:00
Mark Cooper	bc47dfa343	Debian preinstall script for config and ffmpeg	2021-09-25 13:01:53 -05:00
Mark Cooper	03f39d71e3	Fix check old streams in metadata, download manager worker thread path	2021-09-25 10:35:33 -05:00
Mark Cooper	69cd6aa4d0	Update debian build	2021-09-24 20:18:02 -05:00
Mark Cooper	e161f70710	Debian package builder	2021-09-24 19:37:35 -05:00
Mark Cooper	3ef0173226	build script permissions workaround	2021-09-24 17:38:35 -05:00
Mark Cooper	87a308f749	Fix build script	2021-09-24 17:26:10 -05:00
Mark Cooper	f45a1c4161	Ignore dist dir	2021-09-24 17:23:40 -05:00
Mark Cooper	5e15695f64	Build scripts	2021-09-24 17:21:47 -05:00
Mark Cooper	b35997e8be	Update chapters modal, search page, fix version check, ignore matching audio file paths on rescan	2021-09-24 16:14:33 -05:00
Mark Cooper	fcd664c16e	Side rail, book group cards, fix dropdown select	2021-09-24 07:32:38 -05:00
Mark Cooper	94741598af	Pkg scripts win/linux	2021-09-22 20:40:35 -05:00
Mark Cooper	6cb418a871	Book cover uploader, moving streams to /metadata/streams, adding jwt auth from query string, auth check static metadata	2021-09-21 20:57:33 -05:00
Mark Cooper	d234fdea11	Fix player track tooltip overflowing page	2021-09-21 17:28:43 -05:00
Mark Cooper	13ac5f1d2a	Fix package.json script	2021-09-21 16:55:32 -05:00