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

client/components/app/Appbar.vue

@@ -120,12 +120,10 @@ export default {
     }
   },
   methods: {
-    back() {
+    async back() {
-      if (this.$route.name === 'audiobook-id-edit') {
+      var popped = await this.$store.dispatch('popRoute')
-        this.$router.push(`/audiobook/${this.$route.params.id}`)
+      var backTo = popped || '/'
-      } else {
+      this.$router.push(backTo)
-        this.$router.push('/library')
-      }
     },
     cancelSelectionMode() {
       if (this.processingBatchDelete) return

client/components/app/BookShelfCategorized.vue

@@ -18,43 +18,7 @@
     </div>
     <div v-else id="bookshelf" class="w-full flex flex-col items-center">
       <template v-for="(shelf, index) in shelves">
-        <div :key="index" class="relative">
+        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
-          <div class="w-full bookshelfRowCategorized relative overflow-x-scroll overflow-y-hidden z-10" :style="{ paddingLeft: 4 * sizeMultiplier + 'rem' }">
-            <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" />
-                </template>
-              </div>
-            </div>
-          </div>
-          <!-- <div class="absolute text-center box-shadow-book categoryPlacard font-book transform z-30" :style="{ top: sizeMultiplier + 'rem', left: 1.5 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
-            <div class="w-px bg-white shadow-sm bg-opacity-60 absolute transform skew-x-6" :style="{ height: sizeMultiplier + 'rem', top: -sizeMultiplier + 'rem', left: 1.25 * signSizeMultiplier + 'rem' }" />
-            <div class="w-px bg-white shadow-sm bg-opacity-60 absolute transform -skew-x-6" :style="{ height: sizeMultiplier + 'rem', top: -sizeMultiplier + 'rem', right: 1.25 * signSizeMultiplier + 'rem' }" />
-            <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
-              <p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
-            </div>
-          </div> -->
-
-          <!-- <div class="absolute text-center box-shadow-side categoryPlacard font-book transform z-30 bottom-4" :style="{ left: 0.5 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
-            <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
-              <p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
-            </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="absolute text-center box-shadow-book categoryPlacard font-book transform z-30 -rotate-45 origin-bottom-right" :style="{ top: -1 * sizeMultiplier + 'rem', left: -1 * signSizeMultiplier + 'rem', height: 2 * signSizeMultiplier + 'rem', width: 9 * signSizeMultiplier + 'rem', padding: 0.25 * signSizeMultiplier + 'rem', borderRadius: 0.375 * signSizeMultiplier + 'rem' }">
-            <div class="w-full h-full shinyBlack flex items-center justify-center rounded-sm" :style="{ borderWidth: 0.125 * signSizeMultiplier + 'rem' }">
-              <p class="transform" :style="{ fontSize: 0.875 * signSizeMultiplier + 'rem' }">{{ shelf.label }}</p>
-            </div>
-          </div> -->
-          <div class="bookshelfDividerCategorized h-6 w-full absolute bottom-0 left-0 right-0 z-20"></div>
-        </div>
       </template>
     </div>
   </div>
@@ -69,7 +33,9 @@ export default {
       rowPaddingX: 40,
       keywordFilterTimeout: null,
       scannerParseSubtitle: false,
-      wrapperClientWidth: 0
+      wrapperClientWidth: 0,
+      overflowingShelvesRight: {},
+      overflowingShelvesLeft: {}
     }
   },
   computed: {
@@ -95,7 +61,7 @@ export default {
       return this.bookCoverWidth + this.paddingX * 2
     },
     mostRecentPlayed() {
-      var audiobooks = this.audiobooks.filter((ab) => this.userAudiobooks[ab.id] && this.userAudiobooks[ab.id].lastUpdate > 0).map((ab) => ({ ...ab }))
+      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
       })
@@ -190,45 +156,3 @@ export default {
   }
 }
 </script>
-
-<style>
-.bookshelfRowCategorized {
-  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: #daa520; */
-  /* border-color: #ebc463af; */
-  border-color: rgba(255, 244, 182, 0.6);
-  border-style: solid;
-  /* color: rgba(255, 244, 182, 1); */
-  color: #fce3a6;
-}
-
-.shinyWhite {
-  background-color: #ffffff;
-  background-image: linear-gradient(315deg, #ffffff 0%, #ebebeb 74%);
-
-  /* border-color: #cc9917aa; */
-  border-style: solid;
-  color: rgba(19, 19, 19, 1);
-
-  font-weight: 600;
-}
-</style>

client/components/app/BookShelfRow.vue

@@ -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>

client/components/cards/BookCard.vue

@@ -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.stop>
+    <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' }" @click="clickCard">
+        <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">

client/middleware/routed.js

@@ -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)
+        }
+      }
+    }
+  }
+}

client/nuxt.config.js

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

client/package.json

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

client/pages/config/index.vue

@@ -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>

client/store/index.js

@@ -15,7 +15,9 @@ export const state = () => ({
   coverScanProgress: null,
   developerMode: false,
   selectedAudiobooks: [],
-  processingBatch: false
+  processingBatch: false,
+  previousPath: '/',
+  routeHistory: []
 })
 
 export const getters = {
@@ -52,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
   },

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.2.6",
+  "version": "1.2.7",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {

server/objects/Audiobook.js

@@ -488,7 +488,6 @@ class Audiobook {
 
   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
@@ -524,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
         }