Version bump 1.6.0

client/assets/app.css

@@ -19,6 +19,9 @@
 ::-webkit-scrollbar {
   width: 8px;
 }
+::-webkit-scrollbar:horizontal {
+  height: 8px;
+}
 /* ::-webkit-scrollbar:horizontal { */
   /* height: 16px; */
   /* height: 24px;

client/components/AudioPlayer.vue

@@ -13,12 +13,12 @@
           <span class="material-icons text-3xl">format_list_bulleted</span>
         </div>
       </div>
-      <div v-if="showExperimentalFeatures" class="absolute top-0 bottom-0 h-full flex items-end" :class="chapters.length ? ' right-32' : 'right-20'">
+      <div class="absolute top-0 bottom-0 h-full flex items-end" :class="chapters.length ? ' right-32' : 'right-20'">
         <div class="cursor-pointer text-gray-300" @mousedown.prevent @mouseup.prevent @click.stop="showBookmarks">
           <span class="material-icons" style="font-size: 1.7rem">{{ bookmarks.length ? 'bookmarks' : 'bookmark_border' }}</span>
         </div>
       </div>
-      <div class="absolute top-0 bottom-0 h-full flex items-end" :class="!showExperimentalFeatures ? (chapters.length ? ' right-32' : 'right-20') : chapters.length ? ' right-44' : 'right-32'">
+      <div class="absolute top-0 bottom-0 h-full flex items-end" :class="chapters.length ? ' right-44' : 'right-32'">
         <controls-volume-control ref="volumeControl" v-model="volume" @input="updateVolume" />
       </div>
 

client/components/app/BookList.vue

@@ -0,0 +1,127 @@
+<template>
+  <div class="outer-container">
+    <!-- absolute positioned container -->
+    <div class="inner-container">
+      <div class="relative h-10">
+        <div class="table-header" id="headerdiv">
+          <table id="headertable" width="100%" cellpadding="0" cellspacing="0">
+            <thead>
+              <tr>
+                <th class="header-cell min-w-12 max-w-12"></th>
+                <th class="header-cell min-w-6 max-w-6"></th>
+                <th class="header-cell min-w-64 max-w-64 px-2">Title</th>
+                <th class="header-cell min-w-48 max-w-48 px-2">Author</th>
+                <th class="header-cell min-w-48 max-w-48 px-2">Series</th>
+                <th class="header-cell min-w-24 max-w-24 px-2">Year</th>
+                <th class="header-cell min-w-80 max-w-80 px-2">Description</th>
+                <th class="header-cell min-w-48 max-w-48 px-2">Narrator</th>
+                <th class="header-cell min-w-48 max-w-48 px-2">Genres</th>
+                <th class="header-cell min-w-48 max-w-48 px-2">Tags</th>
+                <th class="header-cell min-w-24 max-w-24 px-2"></th>
+              </tr>
+            </thead>
+          </table>
+        </div>
+        <div class="absolute top-0 left-0 w-full h-full pointer-events-none" :class="isScrollable ? 'header-shadow' : ''" />
+      </div>
+
+      <div ref="tableBody" class="table-body" onscroll="document.getElementById('headerdiv').scrollLeft = this.scrollLeft;" @scroll="tableScrolled">
+        <table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
+          <tbody>
+            <template v-for="book in books">
+              <app-book-list-row :key="book.id" :book="book" @edit="editBook" />
+            </template>
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    books: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isScrollable: false
+    }
+  },
+  computed: {},
+  methods: {
+    checkIsScrolled() {
+      if (!this.$refs.tableBody) return
+      this.isScrollable = this.$refs.tableBody.scrollTop > 0
+    },
+    tableScrolled() {
+      this.checkIsScrolled()
+    },
+    editBook(book) {
+      var bookIds = this.books.map((e) => e.id)
+      this.$store.commit('setBookshelfBookIds', bookIds)
+      this.$store.commit('showEditModal', book)
+    }
+  },
+  mounted() {
+    this.checkIsScrolled()
+  },
+  beforeDestroy() {}
+}
+</script>
+
+<style>
+.outer-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  overflow: visible;
+  height: calc(100% - 50px);
+  width: calc(100% - 10px);
+  margin: 10px;
+}
+.inner-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+}
+.table-header {
+  float: left;
+  overflow: hidden;
+  width: 100%;
+}
+.header-shadow {
+  box-shadow: 3px 8px 3px #11111155;
+}
+.table-body {
+  float: left;
+  height: 100%;
+  width: inherit;
+  overflow-y: scroll;
+  padding-right: 0px;
+}
+.header-cell {
+  background-color: #22222288;
+  padding: 0px 4px;
+  text-align: left;
+  height: 40px;
+  font-size: 0.9rem;
+  font-weight: semi-bold;
+}
+.body-cell {
+  text-align: left;
+  font-size: 0.9rem;
+}
+.book-row {
+  background-color: #22222288;
+}
+.book-row:nth-child(odd) {
+  background-color: #333;
+}
+.book-row.selected {
+  background-color: rgba(0, 255, 0, 0.05);
+}
+</style>

client/components/app/BookListRow.vue

@@ -0,0 +1,186 @@
+<template>
+  <tr class="book-row" :class="selected ? 'selected' : ''">
+    <td class="body-cell min-w-12 max-w-12">
+      <div class="flex justify-center">
+        <div class="bg-white border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500 w-4 h-4" @click="selectBtnClick">
+          <svg v-if="selected" class="fill-current text-green-500 pointer-events-none w-2.5 h-2.5" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+        </div>
+      </div>
+    </td>
+    <td class="body-cell min-w-6 max-w-6">
+      <cards-hover-book-cover :audiobook="book" />
+    </td>
+    <td class="body-cell min-w-64 max-w-64 px-2">
+      <nuxt-link :to="`/audiobook/${book.id}`" class="hover:underline">
+        <p class="truncate">
+          {{ book.book.title }}<span v-if="book.book.subtitle">: {{ book.book.subtitle }}</span>
+        </p>
+      </nuxt-link>
+    </td>
+    <td class="body-cell min-w-48 max-w-48 px-2">
+      <p class="truncate">{{ book.book.authorFL }}</p>
+    </td>
+    <td class="body-cell min-w-48 max-w-48 px-2">
+      <p class="truncate">{{ seriesText }}</p>
+    </td>
+    <td class="body-cell min-w-24 max-w-24 px-2">
+      <p class="truncate">{{ book.book.publishYear }}</p>
+    </td>
+    <td class="body-cell min-w-80 max-w-80 px-2">
+      <p class="truncate">{{ book.book.description }}</p>
+    </td>
+    <td class="body-cell min-w-48 max-w-48 px-2">
+      <p class="truncate">{{ book.book.narrator }}</p>
+    </td>
+    <td class="body-cell min-w-48 max-w-48 px-2">
+      <p class="truncate">{{ genresText }}</p>
+    </td>
+    <td class="body-cell min-w-48 max-w-48 px-2">
+      <p class="truncate">{{ tagsText }}</p>
+    </td>
+    <td class="body-cell min-w-24 max-w-24 px-2">
+      <div class="flex">
+        <span v-if="userCanUpdate" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-xl" @click="editClick">edit</span>
+        <span v-if="showPlayButton" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-2xl mx-1" @click="startStream">play_arrow</span>
+        <span v-if="showReadButton" class="material-icons cursor-pointer text-white text-opacity-60 hover:text-opacity-100 text-xl" @click="openEbook">auto_stories</span>
+      </div>
+    </td>
+  </tr>
+</template>
+
+<script>
+export default {
+  props: {
+    book: {
+      type: Object,
+      default: () => {}
+    },
+    userAudiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isProcessingReadUpdate: false
+    }
+  },
+  computed: {
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
+    audiobookId() {
+      return this.book.id
+    },
+    isSelectionMode() {
+      return !!this.selectedAudiobooks.length
+    },
+    selectedAudiobooks() {
+      return this.$store.state.selectedAudiobooks
+    },
+    selected: {
+      get() {
+        return this.$store.getters['getIsAudiobookSelected'](this.audiobookId)
+      },
+      set(val) {
+        if (this.processingBatch) return
+        this.$store.commit('setAudiobookSelected', { audiobookId: this.audiobookId, selected: val })
+      }
+    },
+    processingBatch() {
+      return this.$store.state.processingBatch
+    },
+    bookObj() {
+      return this.book.book || {}
+    },
+    series() {
+      return this.bookObj.series || null
+    },
+    volumeNumber() {
+      return this.bookObj.volumeNumber || null
+    },
+    seriesText() {
+      if (!this.series) return ''
+      if (!this.volumeNumber) return this.series
+      return `${this.series} #${this.volumeNumber}`
+    },
+    genresText() {
+      if (!this.bookObj.genres) return ''
+      return this.bookObj.genres.join(', ')
+    },
+    tagsText() {
+      return (this.book.tags || []).join(', ')
+    },
+    isMissing() {
+      return this.book.isMissing
+    },
+    isIncomplete() {
+      return this.book.isIncomplete
+    },
+    numEbooks() {
+      return this.book.numEbooks
+    },
+    numTracks() {
+      return this.book.numTracks
+    },
+    isStreaming() {
+      return this.$store.getters['getAudiobookIdStreaming'] === this.audiobookId
+    },
+    showReadButton() {
+      return this.showExperimentalFeatures && this.numEbooks
+    },
+    showPlayButton() {
+      return !this.isMissing && !this.isIncomplete && this.numTracks && !this.isStreaming
+    },
+    userIsRead() {
+      return this.userAudiobook ? !!this.userAudiobook.isRead : false
+    },
+    userCanUpdate() {
+      return this.$store.getters['user/getUserCanUpdate']
+    },
+    userCanDelete() {
+      return this.$store.getters['user/getUserCanDelete']
+    },
+    userCanDownload() {
+      return this.$store.getters['user/getUserCanDownload']
+    }
+  },
+  methods: {
+    selectBtnClick() {
+      if (this.processingBatch) return
+      this.$store.commit('toggleAudiobookSelected', this.audiobookId)
+    },
+    openEbook() {
+      this.$store.commit('showEReader', this.book)
+    },
+    downloadClick() {
+      this.$store.commit('showEditModalOnTab', { audiobook: this.book, tab: 'download' })
+    },
+    toggleRead() {
+      var updatePayload = {
+        isRead: !this.userIsRead
+      }
+      this.isProcessingReadUpdate = true
+      this.$axios
+        .$patch(`/api/user/audiobook/${this.audiobookId}`, updatePayload)
+        .then(() => {
+          this.isProcessingReadUpdate = false
+          this.$toast.success(`"${this.title}" Marked as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+        .catch((error) => {
+          console.error('Failed', error)
+          this.isProcessingReadUpdate = false
+          this.$toast.error(`Failed to mark as ${updatePayload.isRead ? 'Read' : 'Not Read'}`)
+        })
+    },
+    startStream() {
+      this.$store.commit('setStreamAudiobook', this.book)
+      this.$root.socket.emit('open_stream', this.book.id)
+    },
+    editClick() {
+      this.$emit('edit', this.book)
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/app/BookShelf.vue

@@ -1,47 +1,56 @@
 <template>
-  <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-30">
-      <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 class="bookshelf overflow-hidden relative block max-h-full">
+    <div ref="wrapper" class="h-full w-full relative" :class="isGridMode ? 'overflow-y-scroll' : 'overflow-hidden'">
+      <!-- Cover size widget -->
+      <div v-show="!isSelectionMode && isGridMode" class="fixed bottom-2 right-4 z-30">
+        <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>
 
-    <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 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>
-    <div v-else-if="page === 'search'" id="bookshelf-categorized" class="w-full flex flex-col items-center">
-      <template v-for="(shelf, index) in categorizedShelves">
-        <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
-      </template>
-      <div v-show="!categorizedShelves.length" class="w-full py-16 text-center text-xl">
-        <div class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
+      <div v-else-if="page === 'search'" id="bookshelf-categorized" class="w-full flex flex-col items-center">
+        <template v-for="(shelf, index) in categorizedShelves">
+          <app-book-shelf-row :key="index" :index="index" :shelf="shelf" :size-multiplier="sizeMultiplier" :book-cover-width="bookCoverWidth" />
+        </template>
+        <div v-show="!categorizedShelves.length" class="w-full py-16 text-center text-xl">
+          <div class="py-4 mb-6"><p class="text-2xl">No Results</p></div>
+        </div>
       </div>
-    </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="w-full bookshelfRow relative">
-          <div class="flex justify-center items-center">
-            <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" @edit="editBook" />
+      <div v-else class="w-full">
+        <template v-if="viewMode === 'grid'">
+          <div 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="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" @edit="editBook" />
+                  </template>
+                </div>
+                <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
+              </div>
             </template>
           </div>
-          <div class="bookshelfDivider h-4 w-full absolute bottom-0 left-0 right-0 z-10" />
+        </template>
+        <template v-else>
+          <app-book-list :books="entities" />
+        </template>
+        <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>
-      </template>
-      <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>
@@ -56,7 +65,8 @@ export default {
       type: Object,
       default: () => {}
     },
-    searchQuery: String
+    searchQuery: String,
+    viewMode: String
   },
   data() {
     return {
@@ -95,6 +105,9 @@ export default {
     }
   },
   computed: {
+    isGridMode() {
+      return this.viewMode === 'grid'
+    },
     keywordFilter() {
       return this.$store.state.audiobooks.keywordFilter
     },
@@ -108,7 +121,8 @@ export default {
       return this.bookCoverWidth / 120
     },
     bookCoverWidth() {
-      return this.availableSizes[this.selectedSizeIndex]
+      var coverWidth = this.availableSizes[this.selectedSizeIndex]
+      return coverWidth
     },
     sizeMultiplier() {
       return this.bookCoverWidth / 120
@@ -347,8 +361,9 @@ export default {
 </script>
 
 <style>
-#bookshelf {
+.bookshelf {
   height: calc(100% - 40px);
+  width: calc(100vw - 80px);
 }
 .bookshelfRow {
   background-image: url(/wood_panels.jpg);

client/components/app/BookShelfToolbar.vue

@@ -20,6 +20,14 @@
         <ui-text-input v-show="!selectedSeries" v-model="_keywordFilter" placeholder="Keyword Filter" :padding-y="1.5" clearable 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" />
+        <div class="h-7 ml-4 flex border border-white border-opacity-25 rounded-md">
+          <div class="h-full px-2 text-white flex items-center rounded-l-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'grid')">
+            <span class="material-icons" style="font-size: 1.4rem">view_module</span>
+          </div>
+          <div class="h-full px-2 text-white flex items-center rounded-r-md hover:bg-primary hover:bg-opacity-75 cursor-pointer" :class="!isGridMode ? 'bg-primary' : 'text-opacity-70'" @click="$emit('update:viewMode', 'list')">
+            <span class="material-icons" style="font-size: 1.4rem">view_list</span>
+          </div>
+        </div>
       </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">
@@ -44,7 +52,8 @@ export default {
       type: Object,
       default: () => {}
     },
-    searchQuery: String
+    searchQuery: String,
+    viewMode: String
   },
   data() {
     return {
@@ -53,6 +62,9 @@ export default {
     }
   },
   computed: {
+    isGridMode() {
+      return this.viewMode === 'grid'
+    },
     showSortFilters() {
       return this.page === ''
     },

client/components/cards/BookCard.vue

@@ -8,7 +8,7 @@
       <div class="absolute -bottom-4 left-0 triangle-right" />
     </div>
 
-    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `16px ${paddingX}px` }" @click.stop>
+    <div class="rounded-sm h-full overflow-hidden relative" :style="{ padding: `${paddingY}px ${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" @mouseover="isHovering = true" @mouseleave="isHovering = false">
           <cards-book-cover :audiobook="audiobook" :author-override="authorFormat" :width="width" />
@@ -77,6 +77,10 @@ export default {
       type: Number,
       default: 120
     },
+    paddingY: {
+      type: Number,
+      default: 16
+    },
     showVolumeNumber: Boolean
   },
   data() {

client/components/cards/BookMatchCard.vue

@@ -6,11 +6,11 @@
         <div class="flex items-center">
           <h1>{{ book.title }}</h1>
           <div class="flex-grow" />
-          <p>{{ book.year || book.first_publish_date }}</p>
+          <p>{{ book.publishYear }}</p>
         </div>
         <p class="text-gray-400">{{ book.author }}</p>
         <div class="w-full max-h-12 overflow-hidden">
-          <p class="text-gray-500 text-xs" v-html="book.description"></p>
+          <p class="text-gray-500 text-xs">{{ book.description }}</p>
         </div>
       </div>
     </div>
@@ -53,7 +53,7 @@ export default {
     }
   },
   mounted() {
-    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : null
+    this.selectedCover = this.bookCovers.length ? this.bookCovers[0] : this.book.cover || null
   }
 }
 </script>

client/components/cards/GroupCard.vue

@@ -1,11 +1,11 @@
 <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">
+    <div class="rounded-sm h-full relative" :style="{ padding: `16px ${paddingX}px` }" @mouseover="mouseoverCard" @mouseleave="mouseleaveCard" @click="clickCard">
       <nuxt-link :to="groupTo" 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" />
+          <cards-group-cover ref="groupcover" :name="groupName" :group-to="groupTo" :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` }">
+          <div v-if="hasValidCovers && !showExperimentalFeatures" class="bg-black bg-opacity-60 absolute top-0 left-0 w-full h-full flex items-center justify-center text-center transition-opacity z-30" :class="isHovering ? '' : 'opacity-0'" :style="{ padding: `${sizeMultiplier}rem` }">
             <p class="font-book" :style="{ fontSize: sizeMultiplier + 'rem' }">{{ groupName }}</p>
           </div>
 
@@ -100,9 +100,20 @@ export default {
     hasValidCovers() {
       var validCovers = this.bookItems.map((bookItem) => bookItem.book.cover)
       return !!validCovers.length
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
     }
   },
   methods: {
+    mouseoverCard() {
+      this.isHovering = true
+      // if (this.$refs.groupcover) this.$refs.groupcover.setHover(true)
+    },
+    mouseleaveCard() {
+      this.isHovering = false
+      // if (this.$refs.groupcover) this.$refs.groupcover.setHover(false)
+    },
     clickCard() {
       this.$emit('click', this.group)
     }

client/components/cards/GroupCover.vue

@@ -1,5 +1,5 @@
 <template>
-  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative">
+  <div ref="wrapper" :style="{ height: height + 'px', width: width + 'px' }" class="relative" @mouseover="mouseoverCover" @mouseleave="mouseleaveCover">
     <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>
@@ -15,12 +15,21 @@ export default {
       default: () => []
     },
     width: Number,
-    height: Number
+    height: Number,
+    groupTo: String
   },
   data() {
     return {
       noValidCovers: false,
-      coverDiv: null
+      coverDiv: null,
+      isHovering: false,
+      coverWrapperEl: null,
+      coverImageEls: [],
+      coverWidth: 0,
+      offsetIncrement: 0,
+      isFannedOut: false,
+      isDetached: false,
+      isAttaching: false
     }
   },
   watch: {
@@ -37,13 +46,152 @@ export default {
   computed: {
     sizeMultiplier() {
       return this.width / 192
+    },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
     }
   },
   methods: {
+    mouseoverCover() {
+      if (this.showExperimentalFeatures) this.setHover(true)
+    },
+    mouseleaveCover() {
+      if (this.showExperimentalFeatures) this.setHover(false)
+    },
+    detchCoverWrapper() {
+      if (!this.coverWrapperEl || !this.$refs.wrapper || this.isDetached) return
+
+      this.coverWrapperEl.remove()
+
+      this.isDetached = true
+      document.body.appendChild(this.coverWrapperEl)
+      this.coverWrapperEl.addEventListener('mouseleave', this.mouseleaveCover)
+
+      this.coverWrapperEl.style.position = 'absolute'
+      this.coverWrapperEl.style.zIndex = 40
+
+      this.updatePosition()
+    },
+    attachCoverWrapper() {
+      if (!this.coverWrapperEl || !this.$refs.wrapper || !this.isDetached) return
+
+      this.coverWrapperEl.remove()
+      this.coverWrapperEl.style.position = 'relative'
+      this.coverWrapperEl.style.left = 'unset'
+      this.coverWrapperEl.style.top = 'unset'
+      this.coverWrapperEl.style.width = this.$refs.wrapper.clientWidth + 'px'
+
+      this.$refs.wrapper.appendChild(this.coverWrapperEl)
+      console.log('Appended to wrapper', this.$refs.wrapper.children)
+      this.isDetached = false
+    },
+    updatePosition() {
+      var rect = this.$refs.wrapper.getBoundingClientRect()
+      this.coverWrapperEl.style.top = rect.top + window.scrollY + 'px'
+
+      this.coverWrapperEl.style.left = rect.left + window.scrollX + 4 + 'px'
+
+      this.coverWrapperEl.style.height = rect.height + 'px'
+      this.coverWrapperEl.style.width = rect.width + 'px'
+    },
+    setHover(val) {
+      if (this.isAttaching) return
+      if (val && !this.isHovering) {
+        this.detchCoverWrapper()
+        this.fanOutCovers()
+      } else if (!val && this.isHovering) {
+        this.isAttaching = true
+        this.reverseFan()
+        setTimeout(() => {
+          this.attachCoverWrapper()
+          this.isAttaching = false
+        }, 100)
+      }
+      this.isHovering = val
+    },
+    fanOutCovers() {
+      if (this.coverImageEls.length < 2 || this.isFannedOut) return
+      this.isFannedOut = true
+      var fanCoverWidth = this.coverWidth * 0.75
+      var maximumWidth = window.innerWidth - 80
+
+      var totalFanWidth = (this.coverImageEls.length + 1) * fanCoverWidth
+
+      // If Fan width is too large, set new fan cover width
+      if (totalFanWidth > maximumWidth) {
+        fanCoverWidth = maximumWidth / (this.coverImageEls.length + 1)
+      }
+
+      var fanWidth = (this.coverImageEls.length - 1) * fanCoverWidth
+      var offsetLeft = (-1 * fanWidth) / 2
+
+      var rect = this.$refs.wrapper.getBoundingClientRect()
+
+      // If fan is going off page left or right, make adjustment
+      var leftEdge = rect.left + offsetLeft
+      var rightEdge = rect.left + rect.width - offsetLeft
+      if (leftEdge < 0) {
+        offsetLeft += leftEdge * -1
+      }
+      if (rightEdge + 80 > window.innerWidth) {
+        var difference = rightEdge + 80 - window.innerWidth
+        offsetLeft -= difference / 2
+      }
+
+      for (let i = 0; i < this.coverImageEls.length; i++) {
+        var coverEl = this.coverImageEls[i]
+
+        // Series name card pop out further
+        if (i === this.coverImageEls.length - 1) {
+          offsetLeft += fanCoverWidth * 0.25
+        }
+
+        coverEl.style.transform = `translateX(${offsetLeft}px)`
+        offsetLeft += fanCoverWidth
+
+        var coverOverlay = document.createElement('div')
+        coverOverlay.className = 'absolute top-0 left-0 w-full h-full hover:bg-black hover:bg-opacity-40 text-white text-opacity-0 hover:text-opacity-100 flex items-center justify-center cursor-pointer'
+
+        if (coverEl.dataset.volumeNumber) {
+          var pEl = document.createElement('p')
+          pEl.className = 'text-2xl'
+          pEl.textContent = `#${coverEl.dataset.volumeNumber}`
+          coverOverlay.appendChild(pEl)
+        }
+        if (coverEl.dataset.audiobookId) {
+          let audiobookId = coverEl.dataset.audiobookId
+          coverOverlay.addEventListener('click', (e) => {
+            this.$router.push(`/audiobook/${audiobookId}`)
+            e.stopPropagation()
+            e.preventDefault()
+          })
+        } else {
+          // Is Series
+          coverOverlay.addEventListener('click', (e) => {
+            this.$router.push(this.groupTo)
+            e.stopPropagation()
+            e.preventDefault()
+          })
+        }
+
+        coverEl.appendChild(coverOverlay)
+      }
+    },
+    reverseFan() {
+      if (this.coverImageEls.length < 2 || !this.isFannedOut) return
+      this.isFannedOut = false
+      for (let i = 0; i < this.coverImageEls.length; i++) {
+        var coverEl = this.coverImageEls[i]
+        coverEl.style.transform = 'translateX(0px)'
+        if (coverEl.lastChild) coverEl.lastChild.remove() // Remove cover overlay
+      }
+    },
     getCoverUrl(book) {
       return this.$store.getters['audiobooks/getBookCoverSrc'](book, '')
     },
-    async buildCoverImg(src, bgCoverWidth, offsetLeft, forceCoverBg = false) {
+    async buildCoverImg(coverData, bgCoverWidth, offsetLeft, zIndex, forceCoverBg = false) {
+      var src = coverData.coverUrl
+
       var showCoverBg =
         forceCoverBg ||
         (await new Promise((resolve) => {
@@ -72,8 +220,11 @@ export default {
       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.zIndex = zIndex
+      imgdiv.dataset.audiobookId = coverData.id
+      imgdiv.dataset.volumeNumber = coverData.volumeNumber || ''
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
       // imgdiv.style.transform = 'skew(0deg, 15deg)'
 
       if (showCoverBg) {
@@ -100,12 +251,36 @@ export default {
       imgdiv.appendChild(img)
       return imgdiv
     },
+    createSeriesNameCover(offsetLeft) {
+      var imgdiv = document.createElement('div')
+      imgdiv.style.height = this.height + 'px'
+      imgdiv.style.width = this.height / 1.6 + 'px'
+      imgdiv.style.left = offsetLeft + 'px'
+      imgdiv.className = 'absolute top-0 box-shadow-book transition-transform flex items-center justify-center'
+      imgdiv.style.boxShadow = '4px 0px 4px #11111166'
+      imgdiv.style.backgroundColor = '#111'
+
+      var innerP = document.createElement('p')
+      innerP.textContent = this.name
+      innerP.className = 'text-sm font-book text-white'
+      imgdiv.appendChild(innerP)
+
+      return imgdiv
+    },
     async init() {
       if (this.coverDiv) {
         this.coverDiv.remove()
         this.coverDiv = null
       }
-      var validCovers = this.bookItems.map((bookItem) => this.getCoverUrl(bookItem)).filter((b) => b !== '')
+      var validCovers = this.bookItems
+        .map((bookItem) => {
+          return {
+            id: bookItem.id,
+            volumeNumber: bookItem.book ? bookItem.book.volumeNumber : null,
+            coverUrl: this.getCoverUrl(bookItem)
+          }
+        })
+        .filter((b) => b.coverUrl !== '')
       if (!validCovers.length) {
         this.noValidCovers = true
         return
@@ -118,22 +293,40 @@ export default {
         coverWidth = this.height / 1.6
         widthPer = (this.width - coverWidth) / (validCovers.length - 1)
       }
+      this.coverWidth = coverWidth
+      this.offsetIncrement = widthPer
 
       var outerdiv = document.createElement('div')
+      this.coverWrapperEl = outerdiv
       outerdiv.className = 'w-full h-full relative'
 
+      var coverImageEls = []
+      var offsetLeft = 0
       for (let i = 0; i < validCovers.length; i++) {
-        var offsetLeft = widthPer * i
-        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, validCovers.length === 1)
+        offsetLeft = widthPer * i
+        var zIndex = validCovers.length - i
+        var img = await this.buildCoverImg(validCovers[i], coverWidth, offsetLeft, zIndex, validCovers.length === 1)
         outerdiv.appendChild(img)
+        coverImageEls.push(img)
       }
 
+      if (this.showExperimentalFeatures) {
+        var seriesNameCover = this.createSeriesNameCover(offsetLeft)
+        outerdiv.appendChild(seriesNameCover)
+        coverImageEls.push(seriesNameCover)
+      }
+
+      this.coverImageEls = coverImageEls
+
       if (this.$refs.wrapper) {
         this.coverDiv = outerdiv
         this.$refs.wrapper.appendChild(outerdiv)
       }
     }
   },
-  mounted() {}
+  mounted() {},
+  beforeDestroy() {
+    if (this.coverWrapperEl) this.coverWrapperEl.remove()
+  }
 }
 </script>

client/components/cards/HoverBookCover.vue

@@ -0,0 +1,41 @@
+<template>
+  <div ref="container" @mouseover="mouseover" @mouseleave="mouseleave" class="relative">
+    <cards-book-cover :width="24" :audiobook="audiobook" />
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    audiobook: {
+      type: Object,
+      default: () => {}
+    }
+  },
+  data() {
+    return {
+      isHovering: false
+    }
+  },
+  computed: {
+    placeholderUrl() {
+      return '/book_placeholder.jpg'
+    },
+    fullCoverUrl() {
+      return this.$store.getters['audiobooks/getBookCoverSrc'](this.audiobook, this.placeholderUrl)
+    },
+    hasCover() {
+      return !!this.audiobook.book.cover
+    }
+  },
+  methods: {
+    mouseover() {
+      this.isHovering = true
+    },
+    mouseleave() {
+      this.isHovering = false
+    }
+  },
+  mounted() {}
+}
+</script>

client/components/modals/EditModal.vue

@@ -20,7 +20,7 @@
 
     <div class="w-full h-full text-sm rounded-b-lg rounded-tr-lg bg-bg shadow-lg border border-black-300">
       <keep-alive>
-        <component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" />
+        <component v-if="audiobook" :is="tabName" :audiobook="audiobook" :processing.sync="processing" @close="show = false" @selectTab="selectTab" />
       </keep-alive>
     </div>
   </modals-modal>
@@ -44,11 +44,6 @@ export default {
           title: 'Cover',
           component: 'modals-edit-tabs-cover'
         },
-        // {
-        //   id: 'match',
-        //   title: 'Match',
-        //   component: 'modals-edit-tabs-match'
-        // },
         {
           id: 'tracks',
           title: 'Tracks',
@@ -68,6 +63,11 @@ export default {
           id: 'download',
           title: 'Download',
           component: 'modals-edit-tabs-download'
+        },
+        {
+          id: 'match',
+          title: 'Match',
+          component: 'modals-edit-tabs-match'
         }
       ]
     }
@@ -123,12 +123,16 @@ export default {
     userCanDownload() {
       return this.$store.getters['user/getUserCanDownload']
     },
+    showExperimentalFeatures() {
+      return this.$store.state.showExperimentalFeatures
+    },
     availableTabs() {
       if (!this.userCanUpdate && !this.userCanDownload) return []
       return this.tabs.filter((tab) => {
         if (tab.id === 'download' && this.isMissing) return false
         if ((tab.id === 'download' || tab.id === 'tracks') && this.userCanDownload) return true
         if (tab.id !== 'download' && tab.id !== 'tracks' && this.userCanUpdate) return true
+        if (tab.id === 'match' && this.showExperimentalFeatures) return true
         return false
       })
     },
@@ -194,7 +198,9 @@ export default {
       }
     },
     selectTab(tab) {
-      this.selectedTab = tab
+      if (this.availableTabs.find((t) => t.id === tab)) {
+        this.selectedTab = tab
+      }
     },
     audiobookUpdated() {
       if (!this.show) this.fetchOnShow = true

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

@@ -1,15 +1,17 @@
 <template>
-  <div class="w-full h-full overflow-hidden px-4 py-6">
+  <div class="w-full h-full overflow-hidden px-4 py-6 relative">
     <form @submit.prevent="submitSearch">
       <div class="flex items-center justify-start -mx-1 h-20">
-        <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" :disabled="processing" />
+        <div class="w-40 px-1">
+          <ui-dropdown v-model="provider" :items="providers" label="Provider" small />
         </div>
         <div class="w-72 px-1">
-          <ui-text-input-with-label v-model="searchAuthor" label="Author" :disabled="processing" />
+          <ui-text-input-with-label v-model="searchTitle" label="Search Title" placeholder="Search" />
+        </div>
+        <div class="w-72 px-1">
+          <ui-text-input-with-label v-model="searchAuthor" label="Author" />
         </div>
         <ui-btn class="mt-5 ml-1" type="submit">Search</ui-btn>
-        <div class="flex-grow" />
       </div>
     </form>
     <div v-show="processing" class="flex h-full items-center justify-center">
@@ -23,6 +25,51 @@
         <cards-book-match-card :key="index" :book="res" @select="selectMatch" />
       </template>
     </div>
+    <div v-if="selectedMatch" class="absolute top-0 left-0 w-full bg-bg h-full p-8 max-h-full overflow-y-auto overflow-x-hidden">
+      <div class="flex mb-2">
+        <div class="w-8 h-8 rounded-full hover:bg-white hover:bg-opacity-10 flex items-center justify-center cursor-pointer" @click="selectedMatch = null">
+          <span class="material-icons text-3xl">arrow_back</span>
+        </div>
+        <p class="text-xl pl-3">Update Book Details</p>
+      </div>
+      <form @submit.prevent="submitMatchUpdate">
+        <div v-if="selectedMatch.cover" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.cover" />
+          <ui-text-input-with-label v-model="selectedMatch.cover" :disabled="!selectedMatchUsage.cover" label="Cover" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.title" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.title" />
+          <ui-text-input-with-label v-model="selectedMatch.title" :disabled="!selectedMatchUsage.title" label="Title" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.subtitle" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.subtitle" />
+          <ui-text-input-with-label v-model="selectedMatch.subtitle" :disabled="!selectedMatchUsage.subtitle" label="Subtitle" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.author" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.author" />
+          <ui-text-input-with-label v-model="selectedMatch.author" :disabled="!selectedMatchUsage.author" label="Author" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.description" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.description" />
+          <ui-textarea-with-label v-model="selectedMatch.description" :rows="3" :disabled="!selectedMatchUsage.description" label="Description" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.publisher" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publisher" />
+          <ui-text-input-with-label v-model="selectedMatch.publisher" :disabled="!selectedMatchUsage.publisher" label="Publisher" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.publishYear" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.publishYear" />
+          <ui-text-input-with-label v-model="selectedMatch.publishYear" :disabled="!selectedMatchUsage.publishYear" label="Publish Year" class="flex-grow ml-4" />
+        </div>
+        <div v-if="selectedMatch.isbn" class="flex items-center py-2">
+          <ui-checkbox v-model="selectedMatchUsage.isbn" />
+          <ui-text-input-with-label v-model="selectedMatch.isbn" :disabled="!selectedMatchUsage.isbn" label="ISBN" class="flex-grow ml-4" />
+        </div>
+        <div class="flex items-center justify-end py-2">
+          <ui-btn color="success" type="submit">Update</ui-btn>
+        </div>
+      </form>
+    </div>
   </div>
 </template>
 
@@ -41,9 +88,30 @@ export default {
       searchTitle: null,
       searchAuthor: null,
       lastSearch: null,
-      provider: 'best',
+      providers: [
+        {
+          text: 'Google Books',
+          value: 'google'
+        },
+        {
+          text: 'Open Library',
+          value: 'openlibrary'
+        }
+      ],
+      provider: 'google',
       searchResults: [],
-      hasSearched: false
+      hasSearched: false,
+      selectedMatch: null,
+      selectedMatchUsage: {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        description: true,
+        isbn: true,
+        publisher: true,
+        publishYear: true
+      }
     }
   },
   watch: {
@@ -95,6 +163,18 @@ export default {
       this.hasSearched = true
     },
     init() {
+      this.selectedMatch = null
+      this.selectedMatchUsage = {
+        title: true,
+        subtitle: true,
+        cover: true,
+        author: true,
+        description: true,
+        isbn: true,
+        publisher: true,
+        publishYear: true
+      }
+
       if (this.audiobook.id !== this.audiobookId) {
         this.searchResults = []
         this.hasSearched = false
@@ -107,31 +187,63 @@ export default {
         return
       }
       this.searchTitle = this.audiobook.book.title
-      this.searchAuthor = this.audiobook.book.author || ''
+      this.searchAuthor = this.audiobook.book.authorFL || ''
     },
-    async selectMatch(match) {
+    selectMatch(match) {
+      this.selectedMatch = match
+    },
+    buildMatchUpdatePayload() {
+      var updatePayload = {}
+      for (const key in this.selectedMatchUsage) {
+        if (this.selectedMatchUsage[key] && this.selectedMatch[key]) {
+          updatePayload[key] = this.selectedMatch[key]
+        }
+      }
+      return updatePayload
+    },
+    async submitMatchUpdate() {
+      var updatePayload = this.buildMatchUpdatePayload()
+      if (!Object.keys(updatePayload).length) {
+        return
+      }
       this.isProcessing = true
-      const updatePayload = {
-        book: {}
+
+      if (updatePayload.cover) {
+        var coverPayload = {
+          url: updatePayload.cover
+        }
+        var success = await this.$axios.$post(`/api/audiobook/${this.audiobook.id}/cover`, coverPayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success('Book Cover Updated')
+        } else {
+          this.$toast.error('Book Cover Failed to Update')
+        }
+        console.log('Updated cover')
+        delete updatePayload.cover
       }
-      if (match.cover) {
-        updatePayload.book.cover = match.cover
+
+      if (Object.keys(updatePayload).length) {
+        var bookUpdatePayload = {
+          book: updatePayload
+        }
+        var success = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, bookUpdatePayload).catch((error) => {
+          console.error('Failed to update', error)
+          return false
+        })
+        if (success) {
+          this.$toast.success('Book Details Updated')
+          this.selectedMatch = null
+          this.$emit('selectTab', 'details')
+        } else {
+          this.$toast.error('Book Details Failed to Update')
+        }
+      } else {
+        this.selectedMatch = null
       }
-      if (match.title) {
-        updatePayload.book.title = match.title
-      }
-      if (match.description) {
-        updatePayload.book.description = match.description
-      }
-      var updatedAudiobook = await this.$axios.$patch(`/api/audiobook/${this.audiobook.id}`, updatePayload).catch((error) => {
-        console.error('Failed to update', error)
-        return false
-      })
       this.isProcessing = false
-      if (updatedAudiobook) {
-        this.$toast.success('Update Successful')
-        this.$emit('close')
-      }
     }
   }
 }

client/components/tables/BackupsTable.vue

@@ -102,7 +102,7 @@ export default {
     applyBackupComplete(success) {
       if (success) {
         // this.$toast.success('Backup Applied, refresh the page')
-        location.replace('/config?backup=1')
+        location.replace('/config/backups?backup=1')
       } else {
         this.$toast.error('Failed to apply backup')
       }

client/components/ui/Checkbox.vue

@@ -0,0 +1,42 @@
+<template>
+  <label class="flex justify-start items-start">
+    <div class="bg-white border-2 rounded border-gray-400 flex flex-shrink-0 justify-center items-center focus-within:border-blue-500" :class="wrapperClass">
+      <input v-model="selected" type="checkbox" class="opacity-0 absolute" />
+      <svg v-if="selected" class="fill-current text-green-500 pointer-events-none" :class="svgClass" viewBox="0 0 20 20"><path d="M0 11l2-2 5 5L18 3l2 2L7 18z" /></svg>
+    </div>
+    <div v-if="label" class="select-none">{{ label }}</div>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    value: Boolean,
+    label: Boolean,
+    small: Boolean
+  },
+  data() {
+    return {}
+  },
+  computed: {
+    selected: {
+      get() {
+        return this.value
+      },
+      set(val) {
+        this.$emit('input', !!val)
+      }
+    },
+    wrapperClass() {
+      if (this.small) return 'w-4 h-4'
+      return 'w-6 h-6'
+    },
+    svgClass() {
+      if (this.small) return 'w-3 h-3'
+      return 'w-4 h-4'
+    }
+  },
+  methods: {},
+  mounted() {}
+}
+</script>

client/components/ui/Dropdown.vue

@@ -1,9 +1,9 @@
 <template>
   <div class="relative w-full" v-click-outside="clickOutside">
-    <p class="text-sm text-opacity-75 mb-1">{{ label }}</p>
-    <button type="button" :disabled="disabled" class="relative h-10 w-full border border-gray-500 rounded shadow-sm pl-3 pr-10 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
+    <p class="text-sm font-semibold">{{ label }}</p>
+    <button type="button" :disabled="disabled" class="relative w-full border border-gray-500 rounded shadow-sm pl-3 pr-8 py-2 text-left focus:outline-none sm:text-sm cursor-pointer bg-primary" :class="small ? 'h-9' : 'h-10'" aria-haspopup="listbox" aria-expanded="true" @click.stop.prevent="clickShowMenu">
       <span class="flex items-center">
-        <span class="block truncate">{{ selectedText }}</span>
+        <span class="block truncate" :class="small ? 'text-sm' : ''">{{ selectedText }}</span>
       </span>
       <span class="ml-3 absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
         <span class="material-icons text-gray-100">expand_more</span>
@@ -36,7 +36,8 @@ export default {
       type: Array,
       default: () => []
     },
-    disabled: Boolean
+    disabled: Boolean,
+    small: Boolean
   },
   data() {
     return {

client/components/ui/IconBtn.vue

@@ -1,6 +1,6 @@
 <template>
   <button class="icon-btn rounded-md border border-gray-600 flex items-center justify-center h-9 w-9 relative" :disabled="disabled" :class="className" @click="clickBtn">
-    <span class="material-icons icon-text">{{ icon }}</span>
+    <span class="material-icons" :style="{ fontSize }">{{ icon }}</span>
   </button>
 </template>
 
@@ -22,6 +22,10 @@ export default {
       var classes = []
       classes.push(`bg-${this.bgColor}`)
       return classes.join(' ')
+    },
+    fontSize() {
+      if (this.icon === 'edit') return '1.25rem'
+      return '1.4rem'
     }
   },
   methods: {

client/components/ui/TextInput.vue

@@ -80,6 +80,7 @@ input {
   border-style: inherit !important;
 }
 input:read-only {
+  color: #aaa;
   background-color: #444;
 }
 </style>

client/components/ui/TextInputWithLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">
       {{ label }}<em v-if="note" class="font-normal text-xs pl-2">{{ note }}</em>
     </p>
     <ui-text-input v-model="inputValue" :disabled="disabled" :type="type" class="w-full" />

client/components/ui/TextareaInput.vue

@@ -38,10 +38,11 @@ export default {
 </script>
 
 <style scoped>
-input {
+textarea {
   border-style: inherit !important;
 }
-input:read-only {
-  background-color: #eee;
+textarea:read-only {
+  color: #aaa;
+  background-color: #444;
 }
 </style>

client/components/ui/TextareaWithLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="w-full">
-    <p class="px-1 text-sm font-semibold">{{ label }}</p>
-    <ui-textarea-input v-model="inputValue" :rows="rows" class="w-full" />
+    <p class="px-1 text-sm font-semibold" :class="disabled ? 'text-gray-400' : ''">{{ label }}</p>
+    <ui-textarea-input v-model="inputValue" :disabled="disabled" :rows="rows" class="w-full" />
   </div>
 </template>
 
@@ -10,6 +10,7 @@ export default {
   props: {
     value: [String, Number],
     label: String,
+    disabled: Boolean,
     rows: {
       type: Number,
       default: 2

client/package.json

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

client/pages/audiobook/_id/index.vue

@@ -13,7 +13,7 @@
             <div class="mb-4">
               <div class="flex items-end">
                 <h1 class="text-3xl font-sans">
-                  {{ title }}<span v-if="isDeveloperMode"> ({{ audiobook.ino }})</span>
+                  {{ title }}
                 </h1>
                 <p v-if="subtitle" class="ml-4 text-gray-400 text-2xl">{{ subtitle }}</p>
               </div>
@@ -316,9 +316,6 @@ export default {
     numEbooks() {
       return this.audiobook.numEbooks
     },
-    userToken() {
-      return this.$store.getters['user/getToken']
-    },
     description() {
       return this.book.description || ''
     },
@@ -413,7 +410,7 @@ export default {
       if (confirm(`Are you sure you want to reset your progress?`)) {
         this.resettingProgress = true
         this.$axios
-          .$delete(`/api/user/audiobook/${this.audiobookId}`)
+          .$patch(`/api/user/audiobook/${this.audiobookId}/reset-progress`)
           .then(() => {
             console.log('Progress reset complete')
             this.$toast.success(`Your progress was reset`)

client/pages/index.vue

@@ -1,13 +1,5 @@
 <template>
   <div class="page" :class="streamAudiobook ? 'streaming' : ''">
-    <!-- <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">

client/pages/library/_library/bookshelf/_id.vue

@@ -3,8 +3,8 @@
     <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" />
+        <app-book-shelf-toolbar :page="id || ''" :search-results="searchResults" :search-query="searchQuery" :selected-series.sync="selectedSeries" :view-mode.sync="viewMode" />
+        <app-book-shelf :page="id || ''" :search-results="searchResults" :search-query="searchQuery" :selected-series.sync="selectedSeries" :view-mode="viewMode" />
       </div>
     </div>
   </div>
@@ -56,7 +56,9 @@ export default {
     }
   },
   data() {
-    return {}
+    return {
+      viewMode: 'grid'
+    }
   },
   watch: {
     '$route.query'(newVal) {

client/store/index.js

@@ -150,6 +150,15 @@ export const mutations = {
       Vue.set(state, 'selectedAudiobooks', newSel)
     }
   },
+  setAudiobookSelected(state, { audiobookId, selected }) {
+    var isThere = state.selectedAudiobooks.includes(audiobookId)
+    if (isThere && !selected) {
+      state.selectedAudiobooks = state.selectedAudiobooks.filter(a => a !== audiobookId)
+    } else if (selected && !isThere) {
+      var newSel = state.selectedAudiobooks.concat([audiobookId])
+      Vue.set(state, 'selectedAudiobooks', newSel)
+    }
+  },
   setProcessingBatch(state, val) {
     state.processingBatch = val
   },

client/tailwind.config.js

@@ -17,6 +17,24 @@ module.exports = {
       height: {
         '7.5': '1.75rem'
       },
+      maxWidth: {
+        '6': '1.5rem',
+        '12': '3rem',
+        '24': '6rem',
+        '32': '8rem',
+        '48': '12rem',
+        '64': '16rem',
+        '80': '20rem'
+      },
+      minWidth: {
+        '6': '1.5rem',
+        '12': '3rem',
+        '24': '6rem',
+        '32': '8rem',
+        '48': '12rem',
+        '64': '16rem',
+        '80': '20rem'
+      },
       spacing: {
         '-54': '-13.5rem'
       },

docker-compose.yml

@@ -0,0 +1,12 @@
+### EXAMPLE DOCKER COMPOSE ###
+version: "3.7"
+
+services:
+  audiobookshelf:
+    image: advplyr/audiobookshelf
+    ports:
+      - 13378:80
+    volumes:
+      - /audiobooks:/audiobooks
+      - /metadata:/metadata
+      - /config:/config

package.json

@@ -1,6 +1,6 @@
 {
   "name": "audiobookshelf",
-  "version": "1.5.5",
+  "version": "1.6.0",
   "description": "Self-hosted audiobook server for managing and playing audiobooks",
   "main": "index.js",
   "scripts": {
@@ -9,7 +9,8 @@
     "client": "cd client && npm install && npm run generate",
     "prod": "npm run client && npm install && node prod.js",
     "build-win": "pkg -t node12-win-x64 -o ./dist/win/audiobookshelf .",
-    "build-linux": "build/linuxpackager"
+    "build-linux": "build/linuxpackager",
+    "docker": "docker buildx build -t advplyr/audiobookshelf --platform linux/amd64,linux/arm64 --push ."
   },
   "bin": "prod.js",
   "pkg": {

readme.md

@@ -58,6 +58,22 @@ docker run -d \
   --rm advplyr/audiobookshelf
 ```
 
+### Running with Docker Compose
+
+```bash
+### docker-compose.yml ###
+services:
+  audiobookshelf:
+    image: advplyr/audiobookshelf
+    ports:
+      - 13378:80
+    volumes:
+      - <path/to/your/audiobooks>:/audiobooks
+      - <path/to/metadata>:/metadata
+      - <path/to/config>:/config
+```
+
+
 ### 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`.

server/ApiController.js

@@ -6,6 +6,8 @@ const Logger = require('./Logger')
 const { isObject } = require('./utils/index')
 const audioFileScanner = require('./utils/audioFileScanner')
 
+const BookFinder = require('./BookFinder')
+
 const Library = require('./objects/Library')
 const User = require('./objects/User')
 
@@ -24,6 +26,8 @@ class ApiController {
     this.clientEmitter = clientEmitter
     this.MetadataPath = MetadataPath
 
+    this.bookFinder = new BookFinder()
+
     this.router = express()
     this.init()
   }
@@ -51,13 +55,17 @@ class ApiController {
     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/coverfile', this.updateAudiobookCoverFromFile.bind(this))
+    this.router.get('/audiobook/:id/match', this.matchAudiobookBook.bind(this))
     this.router.patch('/audiobook/:id', this.updateAudiobook.bind(this))
 
     this.router.patch('/match/:id', this.match.bind(this))
 
+    // Old Route : Wait until refactor of mobile app to replace with path /reset-progress
     this.router.delete('/user/audiobook/:id', this.resetUserAudiobookProgress.bind(this))
-    this.router.patch('/user/audiobook/:id', this.updateUserAudiobookProgress.bind(this))
-    this.router.patch('/user/audiobooks', this.batchUpdateUserAudiobooksProgress.bind(this))
+
+    this.router.patch('/user/audiobook/:id/reset-progress', this.resetUserAudiobookProgress.bind(this))
+    this.router.patch('/user/audiobook/:id', this.updateUserAudiobookData.bind(this))
+    this.router.patch('/user/audiobooks', this.batchUpdateUserAudiobookData.bind(this))
 
     this.router.patch('/user/password', this.userChangePassword.bind(this))
     this.router.patch('/user/settings', this.userUpdateSettings.bind(this))
@@ -85,8 +93,12 @@ class ApiController {
     this.router.get('/scantracks/:id', this.scanAudioTrackNums.bind(this))
   }
 
-  find(req, res) {
-    this.scanner.find(req, res)
+  async find(req, res) {
+    var provider = req.query.provider || 'google'
+    var title = req.query.title || ''
+    var author = req.query.author || ''
+    var results = await this.bookFinder.search(provider, title, author)
+    res.json(results)
   }
 
   findCovers(req, res) {
@@ -333,7 +345,7 @@ class ApiController {
     // Remove audiobook from users
     for (let i = 0; i < this.db.users.length; i++) {
       var user = this.db.users[i]
-      var madeUpdates = user.deleteAudiobookProgress(audiobook.id)
+      var madeUpdates = user.deleteAudiobookData(audiobook.id)
       if (madeUpdates) {
         await this.db.updateEntity('user', user)
       }
@@ -497,6 +509,18 @@ class ApiController {
     else res.status(200).send('No update was made to cover')
   }
 
+  async matchAudiobookBook(req, res) {
+    var audiobook = this.db.audiobooks.find(a => a.id === req.params.id)
+    if (!audiobook) return res.sendStatus(404)
+
+    var provider = req.query.provider || 'google'
+    var excludeAuthor = req.query.excludeAuthor === '1'
+    var authorSearch = excludeAuthor ? null : audiobook.authorFL
+
+    var results = await this.bookFinder.search(provider, audiobook.title, authorSearch)
+    res.json(results)
+  }
+
   async updateAudiobook(req, res) {
     if (!req.user.canUpdate) {
       Logger.warn('User attempted to update without permission', req.user)
@@ -543,12 +567,12 @@ class ApiController {
     res.sendStatus(200)
   }
 
-  async updateUserAudiobookProgress(req, res) {
+  async updateUserAudiobookData(req, res) {
     var audiobook = this.db.audiobooks.find(ab => ab.id === req.params.id)
     if (!audiobook) {
       return res.status(404).send('Audiobook not found')
     }
-    var wasUpdated = req.user.updateAudiobookProgress(audiobook, req.body)
+    var wasUpdated = req.user.updateAudiobookData(audiobook, req.body)
     if (wasUpdated) {
       await this.db.updateEntity('user', req.user)
       this.clientEmitter(req.user.id, 'user_updated', req.user.toJSONForBrowser())
@@ -556,17 +580,17 @@ class ApiController {
     res.sendStatus(200)
   }
 
-  async batchUpdateUserAudiobooksProgress(req, res) {
-    var abProgresses = req.body
-    if (!abProgresses || !abProgresses.length) {
+  async batchUpdateUserAudiobookData(req, res) {
+    var userAbDataPayloads = req.body
+    if (!userAbDataPayloads || !userAbDataPayloads.length) {
       return res.sendStatus(500)
     }
 
     var shouldUpdate = false
-    abProgresses.forEach((progress) => {
-      var audiobook = this.db.audiobooks.find(ab => ab.id === progress.audiobookId)
+    userAbDataPayloads.forEach((userAbData) => {
+      var audiobook = this.db.audiobooks.find(ab => ab.id === userAbData.audiobookId)
       if (audiobook) {
-        var wasUpdated = req.user.updateAudiobookProgress(audiobook, progress)
+        var wasUpdated = req.user.updateAudiobookData(audiobook, userAbData)
         if (wasUpdated) shouldUpdate = true
       }
     })

server/BookFinder.js

@@ -1,5 +1,6 @@
 const OpenLibrary = require('./providers/OpenLibrary')
 const LibGen = require('./providers/LibGen')
+const GoogleBooks = require('./providers/GoogleBooks')
 const Logger = require('./Logger')
 const { levenshteinDistance } = require('./utils/index')
 
@@ -7,6 +8,7 @@ class BookFinder {
   constructor() {
     this.openLibrary = new OpenLibrary()
     this.libGen = new LibGen()
+    this.googleBooks = new GoogleBooks()
 
     this.verbose = false
   }
@@ -143,13 +145,26 @@ class BookFinder {
     return booksFiltered
   }
 
+  async getGoogleBooksResults(title, author, maxTitleDistance, maxAuthorDistance) {
+    var books = await this.googleBooks.search(title, author)
+    if (this.verbose) Logger.debug(`GoogleBooks Book Search Results: ${books.length || 0}`)
+    if (books.errorCode) {
+      Logger.error(`GoogleBooks Search Error ${books.errorCode}`)
+      return []
+    }
+    // Google has good sort
+    return books
+  }
+
   async search(provider, title, author, options = {}) {
     var books = []
     var maxTitleDistance = !isNaN(options.titleDistance) ? Number(options.titleDistance) : 4
     var maxAuthorDistance = !isNaN(options.authorDistance) ? Number(options.authorDistance) : 4
     Logger.debug(`Cover Search: title: "${title}", author: "${author}", provider: ${provider}`)
 
-    if (provider === 'libgen') {
+    if (provider === 'google') {
+      return this.getGoogleBooksResults(title, author, maxTitleDistance, maxAuthorDistance)
+    } else if (provider === 'libgen') {
       books = await this.getLibGenResults(title, author, maxTitleDistance, maxAuthorDistance)
     } else if (provider === 'openlibrary') {
       books = await this.getOpenLibResults(title, author, maxTitleDistance, maxAuthorDistance)

server/RssFeeds.js

@@ -19,6 +19,8 @@ class RssFeeds {
   }
 
   getFeed(req, res) {
+    Logger.info('Get Feed', req.params.id, this.feeds[req.params.id])
+
     var feed = this.feeds[req.params.id]
     if (!feed) return null
     var xml = feed.buildXml()
@@ -27,15 +29,16 @@ class RssFeeds {
   }
 
   openFeed(audiobook) {
-    var serverAddress = 'http://' + ip.address('public', 'ipv4') + ':' + this.Port
+    var ipAddress = ip.address('public', 'ipv4')
+    var serverAddress = 'http://' + ipAddress + ':' + this.Port
     Logger.info('Open RSS Feed', 'Server address', serverAddress)
 
     var feedId = (Date.now() + Math.floor(Math.random() * 1000)).toString(36)
     const feed = new Podcast({
       title: audiobook.title,
       description: 'AudioBookshelf RSS Feed',
-      feedUrl: `${serverAddress}/feeds/${feedId}`,
-      imageUrl: `${serverAddress}/Logo.png`,
+      feed_url: `${serverAddress}/feeds/${feedId}`,
+      image_url: `${serverAddress}/Logo.png`,
       author: 'advplyr',
       language: 'en'
     })

server/Scanner.js

@@ -10,7 +10,6 @@ const { comparePaths, getIno } = require('./utils/index')
 const { secondsToTimestamp } = require('./utils/fileUtils')
 const { ScanResult, CoverDestination } = require('./utils/constants')
 
-// Classes
 const BookFinder = require('./BookFinder')
 const Audiobook = require('./objects/Audiobook')
 

server/Server.js

@@ -462,14 +462,9 @@ class Server {
       Logger.error('[Server] audiobookProgressUpdate invalid socket client')
       return
     }
-    var audiobookProgress = client.user.updateAudiobookProgress(progressPayload.audiobookId, progressPayload)
+    var audiobookProgress = client.user.updateAudiobookData(progressPayload.audiobookId, progressPayload)
     if (audiobookProgress) {
       await this.db.updateEntity('user', client.user)
-
-      // This audiobook progress is out of date, why?
-      // var userAudiobook = client.user.getAudiobookJSON(progressPayload.audiobookId)
-      // Logger.debug(`[Server] Emitting audiobook progress update to clients ${this.getClientsForUser(client.user.id).length}: ${JSON.stringify(userAudiobook)}`)
-
       this.clientEmitter(client.user.id, 'current_user_audiobook_update', {
         id: progressPayload.audiobookId,
         data: audiobookProgress || null

server/objects/Audiobook.js

@@ -91,6 +91,10 @@ class Audiobook {
     return this.book ? this.book.authorLF : null
   }
 
+  get authorFL() {
+    return this.book ? this.book.authorFL : null
+  }
+
   get genres() {
     return this.book ? this.book.genres || [] : []
   }

server/objects/Book.js

@@ -1,4 +1,3 @@
-const fs = require('fs-extra')
 const Path = require('path')
 const Logger = require('../Logger')
 const parseAuthors = require('../utils/parseAuthors')
@@ -16,6 +15,7 @@ class Book {
     this.publishYear = null
     this.publisher = null
     this.description = null
+    this.isbn = null
     this.cover = null
     this.coverFullPath = null
     this.genres = []
@@ -56,6 +56,7 @@ class Book {
     this.publishYear = book.publishYear
     this.publisher = book.publisher
     this.description = book.description
+    this.isbn = book.isbn || null
     this.cover = book.cover
     this.coverFullPath = book.coverFullPath || null
     this.genres = book.genres
@@ -78,6 +79,7 @@ class Book {
       publishYear: this.publishYear,
       publisher: this.publisher,
       description: this.description,
+      isbn: this.isbn,
       cover: this.cover,
       coverFullPath: this.coverFullPath,
       genres: this.genres,
@@ -116,6 +118,7 @@ class Book {
     this.volumeNumber = data.volumeNumber || null
     this.publishYear = data.publishYear || null
     this.description = data.description || null
+    this.isbn = data.isbn || null
     this.cover = data.cover || null
     this.coverFullPath = data.coverFullPath || null
     this.genres = data.genres || []

server/objects/User.js

@@ -1,5 +1,5 @@
 const Logger = require('../Logger')
-const AudiobookProgress = require('./AudiobookProgress')
+const UserAudiobookData = require('./UserAudiobookData')
 
 class User {
   constructor(user) {
@@ -141,7 +141,7 @@ class User {
       this.audiobooks = {}
       for (const key in user.audiobooks) {
         if (user.audiobooks[key]) {
-          this.audiobooks[key] = new AudiobookProgress(user.audiobooks[key])
+          this.audiobooks[key] = new UserAudiobookData(user.audiobooks[key])
         }
       }
     }
@@ -201,21 +201,21 @@ class User {
   updateAudiobookProgressFromStream(stream) {
     if (!this.audiobooks) this.audiobooks = {}
     if (!this.audiobooks[stream.audiobookId]) {
-      this.audiobooks[stream.audiobookId] = new AudiobookProgress()
+      this.audiobooks[stream.audiobookId] = new UserAudiobookData()
     }
-    this.audiobooks[stream.audiobookId].updateFromStream(stream)
+    this.audiobooks[stream.audiobookId].updateProgressFromStream(stream)
     return this.audiobooks[stream.audiobookId]
   }
 
-  updateAudiobookProgress(audiobook, updatePayload) {
+  updateAudiobookData(audiobook, updatePayload) {
     if (!this.audiobooks) this.audiobooks = {}
     if (!this.audiobooks[audiobook.id]) {
-      this.audiobooks[audiobook.id] = new AudiobookProgress()
+      this.audiobooks[audiobook.id] = new UserAudiobookData()
       this.audiobooks[audiobook.id].audiobookId = audiobook.id
     }
     var wasUpdated = this.audiobooks[audiobook.id].update(updatePayload)
     if (wasUpdated) {
-      Logger.debug(`[User] Audiobook progress was updated ${JSON.stringify(this.audiobooks[audiobook.id])}`)
+      Logger.debug(`[User] UserAudiobookData was updated ${JSON.stringify(this.audiobooks[audiobook.id])}`)
       return this.audiobooks[audiobook.id]
     }
     return false
@@ -251,7 +251,7 @@ class User {
     if (!this.audiobooks || !this.audiobooks[audiobook.id]) {
       return false
     }
-    return this.updateAudiobookProgress(audiobook, {
+    return this.updateAudiobookData(audiobook, {
       progress: 0,
       currentTime: 0,
       isRead: false,
@@ -261,7 +261,7 @@ class User {
     })
   }
 
-  deleteAudiobookProgress(audiobookId) {
+  deleteAudiobookData(audiobookId) {
     if (!this.audiobooks || !this.audiobooks[audiobookId]) {
       return false
     }

server/objects/UserAudiobookData.js

@@ -1,7 +1,7 @@
 const Logger = require('../Logger')
 const AudioBookmark = require('./AudioBookmark')
 
-class AudiobookProgress {
+class UserAudiobookData {
   constructor(progress) {
     this.audiobookId = null
 
@@ -22,7 +22,13 @@ class AudiobookProgress {
 
   bookmarksToJSON() {
     if (!this.bookmarks) return []
-    return this.bookmarks.map(b => b.toJSON())
+    return this.bookmarks.filter((b) => {
+      if (!b.toJSON) {
+        Logger.error(`[UserAudiobookData] Invalid bookmark ${JSON.stringify(b)}`)
+        return false
+      }
+      return true
+    }).map(b => b.toJSON())
   }
 
   toJSON() {
@@ -55,7 +61,7 @@ class AudiobookProgress {
     }
   }
 
-  updateFromStream(stream) {
+  updateProgressFromStream(stream) {
     this.audiobookId = stream.audiobookId
     this.totalDuration = stream.totalDuration
     this.progress = stream.clientProgress
@@ -80,7 +86,7 @@ class AudiobookProgress {
 
   update(payload) {
     var hasUpdates = false
-    Logger.debug(`[AudiobookProgress] Update called ${JSON.stringify(payload)}`)
+    Logger.debug(`[UserAudiobookData] Update called ${JSON.stringify(payload)}`)
     for (const key in payload) {
       if (payload[key] !== this[key]) {
         if (key === 'isRead') {
@@ -129,4 +135,4 @@ class AudiobookProgress {
     this.bookmarks = this.bookmarks.filter(bm => bm.time !== time)
   }
 }
-module.exports = AudiobookProgress
+module.exports = UserAudiobookData

server/providers/GoogleBooks.js

@@ -0,0 +1,50 @@
+const axios = require('axios')
+const Logger = require('../Logger')
+
+class GoogleBooks {
+  constructor() { }
+
+  extractIsbn(industryIdentifiers) {
+    if (!industryIdentifiers || !industryIdentifiers.length) return null
+
+    var isbnObj = industryIdentifiers.find(i => i.type === 'ISBN_13') || industryIdentifiers.find(i => i.type === 'ISBN_10')
+    if (isbnObj && isbnObj.identifier) return isbnObj.identifier
+    return null
+  }
+
+  cleanResult(item) {
+    var { id, volumeInfo } = item
+    if (!volumeInfo) return null
+    var { title, subtitle, authors, publisher, publisherDate, description, industryIdentifiers, categories, imageLinks } = volumeInfo
+
+    return {
+      id,
+      title,
+      subtitle: subtitle || null,
+      author: authors ? authors.join(', ') : null,
+      publisher,
+      publishYear: publisherDate ? publisherDate.split('-')[0] : null,
+      description,
+      cover: imageLinks && imageLinks.thumbnail ? imageLinks.thumbnail : null,
+      genres: categories ? categories.join(', ') : null,
+      isbn: this.extractIsbn(industryIdentifiers)
+    }
+  }
+
+  async search(title, author) {
+    var queryString = `q=intitle:${title}`
+    if (author) queryString += `+inauthor:${author}`
+    var url = `https://www.googleapis.com/books/v1/volumes?${queryString}`
+    Logger.debug(`[GoogleBooks] Search url: ${url}`)
+    var items = await axios.get(url).then((res) => {
+      if (!res || !res.data || !res.data.items) return []
+      return res.data.items
+    }).catch(error => {
+      Logger.error('[GoogleBooks] Volume search error', error)
+      return []
+    })
+    return items.map(item => this.cleanResult(item))
+  }
+}
+
+module.exports = GoogleBooks

server/providers/OpenLibrary.js

@@ -51,12 +51,21 @@ class OpenLibrary {
     }
   }
 
+  parsePublishYear(doc, worksData) {
+    if (doc.first_publish_year && !isNaN(doc.first_publish_year)) return doc.first_publish_year
+    if (worksData.first_publish_date) {
+      var year = worksData.first_publish_date.split('-')[0]
+      if (!isNaN(year)) return year
+    }
+    return null
+  }
+
   async cleanSearchDoc(doc) {
     var worksData = await this.getWorksData(doc.key)
     return {
       title: doc.title,
       author: doc.author_name ? doc.author_name.join(', ') : null,
-      year: doc.first_publish_year,
+      publishYear: this.parsePublishYear(doc, worksData),
       edition: doc.cover_edition_key,
       cover: doc.cover_edition_key ? `https://covers.openlibrary.org/b/OLID/${doc.cover_edition_key}-L.jpg` : null,
       ...worksData

server/utils/parseAuthors.js

@@ -24,34 +24,42 @@ function checkIsALastName(name) {
 
 module.exports = (author) => {
   if (!author) return null
-  var splitByComma = author.split(', ')
+
+  var splitAuthors = []
+  // Example &LF: Friedman, Milton & Friedman, Rose
+  if (author.includes('&')) {
+    author.split('&').forEach((asa) => splitAuthors = splitAuthors.concat(asa.split(',')))
+  } else {
+    splitAuthors = author.split(',')
+  }
+  if (splitAuthors.length) splitAuthors = splitAuthors.map(a => a.trim())
 
   var authors = []
 
   // 1 author FIRST LAST
-  if (splitByComma.length === 1) {
+  if (splitAuthors.length === 1) {
     authors.push(parseName(author))
   } else {
-    var firstChunkIsALastName = checkIsALastName(splitByComma[0])
-    var isEvenNum = splitByComma.length % 2 === 0
+    var firstChunkIsALastName = checkIsALastName(splitAuthors[0])
+    var isEvenNum = splitAuthors.length % 2 === 0
 
     if (!isEvenNum && firstChunkIsALastName) {
       // console.error('Multi-author LAST,FIRST entry has a straggler (could be roman numerals or a suffix), ignore it', splitByComma[splitByComma.length - 1])
-      splitByComma = splitByComma.slice(0, splitByComma.length - 1)
+      splitAuthors = splitAuthors.slice(0, splitAuthors.length - 1)
     }
 
     if (firstChunkIsALastName) {
-      var numAuthors = splitByComma.length / 2
+      var numAuthors = splitAuthors.length / 2
       for (let i = 0; i < numAuthors; i++) {
-        var last = splitByComma.shift()
-        var first = splitByComma.shift()
+        var last = splitAuthors.shift()
+        var first = splitAuthors.shift()
         authors.push({
           first_name: first,
           last_name: last
         })
       }
     } else {
-      splitByComma.forEach((segment) => {
+      splitAuthors.forEach((segment) => {
         authors.push(parseName(segment))
       })
     }