Add local library items to bookshelf and landing page

components/app/AudioPlayerContainer.vue

@@ -175,15 +175,6 @@ export default {
         .catch((error) => {
           console.error('TEST failed', error)
         })
-    },
-    async playLocalItem(localMediaItemId) {
-      MyNativeAudio.playLocalLibraryItem({ localMediaItemId, playWhenReady: true })
-        .then((data) => {
-          console.log('TEST library item play response', JSON.stringify(data))
-        })
-        .catch((error) => {
-          console.error('TEST failed', error)
-        })
     }
   },
   mounted() {
@@ -195,7 +186,6 @@ export default {
 
     this.setListeners()
     this.$eventBus.$on('play-item', this.playLibraryItem)
-    this.$eventBus.$on('play-local-item', this.playLocalItem)
     this.$eventBus.$on('close-stream', this.closeStreamOnly)
     this.$store.commit('user/addSettingsListener', { id: 'streamContainer', meth: this.settingsUpdated })
   },
@@ -211,7 +201,6 @@ export default {
     //   this.$server.socket.off('stream_reset', this.streamReset)
     // }
     this.$eventBus.$off('play-item', this.playLibraryItem)
-    this.$eventBus.$off('play-local-item', this.playLocalItem)
     this.$eventBus.$off('close-stream', this.closeStreamOnly)
     this.$store.commit('user/removeSettingsListener', 'streamContainer')
   }

components/cards/LazyBookCard.vue

@@ -17,11 +17,11 @@
     <div v-if="booksInSeries" class="absolute z-20 top-1.5 right-1.5 rounded-md leading-3 text-sm p-1 font-semibold text-white flex items-center justify-center" style="background-color: #cd9d49dd">{{ booksInSeries }}</div>
 
     <div class="w-full h-full absolute top-0 left-0 rounded overflow-hidden z-10">
-      <div v-show="audiobook && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
+      <div v-show="libraryItem && !imageReady" class="absolute top-0 left-0 w-full h-full flex items-center justify-center" :style="{ padding: sizeMultiplier * 0.5 + 'rem' }">
         <p :style="{ fontSize: sizeMultiplier * 0.8 + 'rem' }" class="font-book text-gray-300 text-center">{{ title }}</p>
       </div>
 
-      <img v-show="audiobook" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
+      <img v-show="libraryItem" ref="cover" :src="bookCoverSrc" class="w-full h-full transition-opacity duration-300" :class="showCoverBg ? 'object-contain' : 'object-fill'" @load="imageLoaded" :style="{ opacity: imageReady ? 1 : 0 }" />
 
       <!-- Placeholder Cover Title & Author -->
       <div v-if="!hasCover" class="absolute top-0 left-0 right-0 bottom-0 w-full h-full flex items-center justify-center" :style="{ padding: placeholderCoverPadding + 'rem' }">
@@ -52,6 +52,8 @@
 </template>
 
 <script>
+import { Capacitor } from '@capacitor/core'
+
 export default {
   props: {
     index: Number,
@@ -78,7 +80,7 @@ export default {
   data() {
     return {
       isProcessingReadUpdate: false,
-      audiobook: null,
+      libraryItem: null,
       imageReady: false,
       rescanning: false,
       selected: false,
@@ -90,7 +92,7 @@ export default {
     bookMount: {
       handler(newVal) {
         if (newVal) {
-          this.audiobook = newVal
+          this.libraryItem = newVal
         }
       }
     }
@@ -100,7 +102,11 @@ export default {
       return this.store.state.showExperimentalFeatures
     },
     _libraryItem() {
-      return this.audiobook || {}
+      return this.libraryItem || {}
+    },
+    isLocal() {
+      // Is local library item
+      return !!this._libraryItem.isLocal
     },
     media() {
       return this._libraryItem.media || {}
@@ -112,6 +118,10 @@ export default {
       return '/book_placeholder.jpg'
     },
     bookCoverSrc() {
+      if (this.isLocal) {
+        if (this.media.coverPath) return Capacitor.convertFileSrc(this.media.coverPath)
+        return this.placeholderUrl
+      }
       return this.store.getters['globals/getLibraryItemCoverSrc'](this._libraryItem, this.placeholderUrl)
     },
     libraryItemId() {
@@ -225,8 +235,8 @@ export default {
       return this._libraryItem.hasInvalidParts
     },
     errorText() {
-      if (this.isMissing) return 'Audiobook directory is missing!'
-      else if (this.isInvalid) return 'Audiobook has no audio tracks & ebook'
+      if (this.isMissing) return 'Item directory is missing!'
+      else if (this.isInvalid) return 'Item has no media files'
       var txt = ''
       if (this.hasMissingParts) {
         txt = `${this.hasMissingParts} missing parts.`
@@ -307,7 +317,7 @@ export default {
       if (!val) this.selected = false
     },
     setEntity(libraryItem) {
-      this.audiobook = libraryItem
+      this.libraryItem = libraryItem
     },
     clickCard(e) {
       if (this.isSelectionMode) {
@@ -323,7 +333,7 @@ export default {
       }
     },
     editClick() {
-      this.$emit('edit', this.audiobook)
+      this.$emit('edit', this.libraryItem)
     },
     toggleFinished() {
       var updatePayload = {
@@ -369,27 +379,27 @@ export default {
     },
     showEditModalTracks() {
       // More menu func
-      this.store.commit('showEditModalOnTab', { libraryItem: this.audiobook, tab: 'tracks' })
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'tracks' })
     },
     showEditModalMatch() {
       // More menu func
-      this.store.commit('showEditModalOnTab', { libraryItem: this.audiobook, tab: 'match' })
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'match' })
     },
     showEditModalDownload() {
       // More menu func
-      this.store.commit('showEditModalOnTab', { libraryItem: this.audiobook, tab: 'download' })
+      this.store.commit('showEditModalOnTab', { libraryItem: this.libraryItem, tab: 'download' })
     },
     openCollections() {
-      this.store.commit('setSelectedLibraryItem', this.audiobook)
+      this.store.commit('setSelectedLibraryItem', this.libraryItem)
       this.store.commit('globals/setShowUserCollectionsModal', true)
     },
     clickReadEBook() {
-      this.store.commit('showEReader', this.audiobook)
+      this.store.commit('showEReader', this.libraryItem)
     },
     selectBtnClick() {
       if (this.processingBatch) return
       this.selected = !this.selected
-      this.$emit('select', this.audiobook)
+      this.$emit('select', this.libraryItem)
     },
     play() {
       var eventBus = this.$eventBus || this.$nuxt.$eventBus

components/covers/BookCover.vue

@@ -33,6 +33,8 @@
 </template>
 
 <script>
+import { Capacitor } from '@capacitor/core'
+
 export default {
   props: {
     libraryItem: {
@@ -60,6 +62,10 @@ export default {
     }
   },
   computed: {
+    isLocal() {
+      if (!this.libraryItem) return false
+      return this.libraryItem.isLocal
+    },
     squareAspectRatio() {
       return this.bookCoverAspectRatio === 1
     },
@@ -98,6 +104,10 @@ export default {
       return '/book_placeholder.jpg'
     },
     fullCoverUrl() {
+      if (this.isLocal) {
+        if (this.hasCover) return Capacitor.convertFileSrc(this.cover)
+        return this.placeholderUrl
+      }
       if (this.downloadCover) return this.downloadCover
       if (!this.libraryItem) return null
       var store = this.$store || this.$nuxt.$store