Fix experimental e-reader with new data model

client/components/cards/BookMatchCard.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="w-full border-b border-gray-700 pb-2">
     <div class="flex py-1 hover:bg-gray-300 hover:bg-opacity-10 cursor-pointer" @click="selectMatch">
-      <img :src="selectedCover || '/book_placeholder.jpg'" class="h-24 object-cover" :style="{ width: 96 / bookCoverAspectRatio + 'px' }" />
+      <div class="h-24 bg-primary" :style="{ minWidth: 96 / bookCoverAspectRatio + 'px' }">
+        <img v-if="selectedCover" :src="selectedCover" class="h-full w-full object-contain" />
+      </div>
       <div class="px-4 flex-grow">
         <div class="flex items-center">
           <h1>{{ book.title }}</h1>

client/components/cards/LazyBookCard.vue

@@ -177,7 +177,7 @@ export default {
       return this._libraryItem.libraryId
     },
     hasEbook() {
-      return this.media.ebookFile
+      return this.media.ebookFormat
     },
     numTracks() {
       if (this.media.tracks) return this.media.tracks.length
@@ -522,8 +522,14 @@ export default {
     clickShowMore() {
       this.createMoreMenu()
     },
-    clickReadEBook() {
-      this.store.commit('showEReader', this.media.ebookFile)
+    async clickReadEBook() {
+      var libraryItem = await this.$axios.$get(`/api/items/${this.libraryItemId}?expanded=1`).catch((error) => {
+        console.error('Failed to get lirbary item', this.libraryItemId)
+        return null
+      })
+      if (!libraryItem) return
+      console.log('Got library itemn', libraryItem)
+      this.store.commit('showEReader', libraryItem)
     },
     selectBtnClick() {
       if (this.processingBatch) return

client/components/modals/item/tabs/Files.vue

@@ -4,7 +4,7 @@
       <tables-tracks-table :key="audiobook.id" :title="`Audiobook Tracks (${audiobook.name})`" :audiobook-id="audiobook.id" :tracks="audiobook.tracks" class="mb-4" />
     </template>
 
-    <tables-library-files-table :files="libraryFiles" :library-item-id="libraryItem.id" :is-missing="isMissing" />
+    <tables-library-files-table expanded :files="libraryFiles" :library-item-id="libraryItem.id" :is-missing="isMissing" />
   </div>
 </template>
 

client/components/readers/Reader.vue

@@ -18,10 +18,7 @@
 <script>
 export default {
   data() {
-    return {
-      ebookType: '',
-      ebookUrl: ''
-    }
+    return {}
   },
   watch: {
     show(newVal) {
@@ -47,13 +44,19 @@ export default {
       return null
     },
     abTitle() {
-      return this.selectedLibraryItem.media.metadata.title
+      return this.mediaMetadata.title
     },
     abAuthor() {
-      return this.selectedLibraryItem.media.metadata.authorName
+      return this.mediaMetadata.authorName
     },
     selectedLibraryItem() {
-      return this.$store.state.selectedLibraryItem
+      return this.$store.state.selectedLibraryItem || {}
+    },
+    media() {
+      return this.selectedLibraryItem.media || {}
+    },
+    mediaMetadata() {
+      return this.media.metadata || {}
     },
     libraryId() {
       return this.selectedLibraryItem.libraryId
@@ -61,32 +64,45 @@ export default {
     folderId() {
       return this.selectedLibraryItem.folderId
     },
-    ebooks() {
-      return this.selectedLibraryItem.media.ebooks || []
+    ebookFile() {
+      return this.media.ebookFile
     },
-    epubEbook() {
-      return this.ebooks.find((eb) => eb.ext === '.epub')
+    ebookFormat() {
+      if (!this.ebookFile) return null
+      return this.ebookFile.ebookFormat
     },
-    mobiEbook() {
-      return this.ebooks.find((eb) => eb.ext === '.mobi' || eb.ext === '.azw3')
+    ebookType() {
+      if (this.isMobi) return 'mobi'
+      else if (this.isEpub) return 'epub'
+      else if (this.isPdf) return 'pdf'
+      else if (this.isComic) return 'comic'
+      return null
     },
-    pdfEbook() {
-      return this.ebooks.find((eb) => eb.ext === '.pdf')
+    isEpub() {
+      return this.ebookFormat == 'epub'
     },
-    comicEbook() {
-      return this.ebooks.find((eb) => eb.ext === '.cbz' || eb.ext === '.cbr')
+    isMobi() {
+      return this.ebookFormat == 'mobi' || this.ebookFormat == 'azw3'
+    },
+    isPdf() {
+      return this.ebookFormat == 'pdf'
+    },
+    isComic() {
+      return this.ebookFormat == 'cbz' || this.ebookFormat == 'cbr'
+    },
+    ebookUrl() {
+      if (!this.ebookFile) return null
+      var itemRelPath = this.selectedLibraryItem.relPath
+      if (itemRelPath.startsWith('/')) itemRelPath = itemRelPath.slice(1)
+      var relPath = this.ebookFile.metadata.relPath
+      if (relPath.startsWith('/')) relPath = relPath.slice(1)
+      return `/ebook/${this.libraryId}/${this.folderId}/${itemRelPath}/${relPath}`
     },
     userToken() {
       return this.$store.getters['user/getToken']
-    },
-    selectedAudiobookFile() {
-      return this.$store.state.selectedAudiobookFile
     }
   },
   methods: {
-    getEbookUrl(path) {
-      return `/ebook/${this.libraryId}/${this.folderId}/${path}`
-    },
     hotkey(action) {
       console.log('Reader hotkey', action)
       if (!this.$refs.readerComponent) return
@@ -107,31 +123,6 @@ export default {
     },
     init() {
       this.registerListeners()
-
-      if (this.selectedAudiobookFile) {
-        this.ebookUrl = this.getEbookUrl(this.selectedAudiobookFile.path)
-        if (this.selectedAudiobookFile.ext === '.pdf') {
-          this.ebookType = 'pdf'
-        } else if (this.selectedAudiobookFile.ext === '.mobi' || this.selectedAudiobookFile.ext === '.azw3') {
-          this.ebookType = 'mobi'
-        } else if (this.selectedAudiobookFile.ext === '.epub') {
-          this.ebookType = 'epub'
-        } else if (this.selectedAudiobookFile.ext === '.cbr' || this.selectedAudiobookFile.ext === '.cbz') {
-          this.ebookType = 'comic'
-        }
-      } else if (this.epubEbook) {
-        this.ebookType = 'epub'
-        this.ebookUrl = this.getEbookUrl(this.epubEbook.path)
-      } else if (this.mobiEbook) {
-        this.ebookType = 'mobi'
-        this.ebookUrl = this.getEbookUrl(this.mobiEbook.path)
-      } else if (this.pdfEbook) {
-        this.ebookType = 'pdf'
-        this.ebookUrl = this.getEbookUrl(this.pdfEbook.path)
-      } else if (this.comicEbook) {
-        this.ebookType = 'comic'
-        this.ebookUrl = this.getEbookUrl(this.comicEbook.path)
-      }
     },
     close() {
       this.unregisterListeners()

client/components/tables/LibraryFilesTable.vue

@@ -30,7 +30,6 @@
               </td>
               <td class="text-xs">
                 <div class="flex items-center">
-                  <span v-if="file.filetype === 'ebook'" class="material-icons text-base mr-1 cursor-pointer text-white text-opacity-60 hover:text-opacity-100" @click="readEbookClick(file)">auto_stories </span>
                   <p>{{ file.fileType }}</p>
                 </div>
               </td>
@@ -53,7 +52,8 @@ export default {
       default: () => []
     },
     libraryItemId: String,
-    isMissing: Boolean
+    isMissing: Boolean,
+    expanded: Boolean // start expanded
   },
   data() {
     return {
@@ -70,13 +70,12 @@ export default {
     }
   },
   methods: {
-    readEbookClick(file) {
-      // this.$store.commit('showEReaderForFile', { audiobook: this.audiobook, file })
-    },
     clickBar() {
       this.showFiles = !this.showFiles
     }
   },
-  mounted() {}
+  mounted() {
+    this.showFiles = this.expanded
+  }
 }
 </script>

client/pages/item/_id/index.vue

@@ -118,7 +118,7 @@
               {{ isMissing ? 'Missing' : 'Incomplete' }}
             </ui-btn>
 
-            <ui-btn v-if="showExperimentalFeatures && ebooks.length" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
+            <ui-btn v-if="showExperimentalFeatures && ebookFile" color="info" :padding-x="4" small class="flex items-center h-9 mr-2" @click="openEbook">
               <span class="material-icons -ml-2 pr-2 text-white">auto_stories</span>
               Read
             </ui-btn>
@@ -291,11 +291,11 @@ export default {
     libraryFiles() {
       return this.libraryItem.libraryFiles || []
     },
-    ebooks() {
-      return this.media.ebooks || []
+    ebookFile() {
+      return this.media.ebookFile
     },
     showExperimentalReadAlert() {
-      return !this.tracks.length && this.ebooks.length && !this.showExperimentalFeatures
+      return !this.tracks.length && this.ebookFile && !this.showExperimentalFeatures
     },
     description() {
       return this.mediaMetadata.description || ''

client/store/index.js

@@ -11,7 +11,6 @@ export const state = () => ({
   showEditModal: false,
   showEReader: false,
   selectedLibraryItem: null,
-  selectedAudiobookFile: null,
   developerMode: false,
   selectedLibraryItems: [],
   processingBatch: false,
@@ -141,13 +140,6 @@ export const mutations = {
     state.showEditModal = val
   },
   showEReader(state, libraryItem) {
-    state.selectedAudiobookFile = null
-    state.selectedLibraryItem = libraryItem
-
-    state.showEReader = true
-  },
-  showEReaderForFile(state, { libraryItem, file }) {
-    state.selectedAudiobookFile = file
     state.selectedLibraryItem = libraryItem
 
     state.showEReader = true