Add local library items to bookshelf and landing page

pages/bookshelf/index.vue

@@ -1,8 +1,10 @@
 <template>
   <div class="w-full h-full min-h-full relative">
-    <template v-for="(shelf, index) in shelves">
-      <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
-    </template>
+    <div v-if="!loading" class="w-full">
+      <template v-for="(shelf, index) in shelves">
+        <bookshelf-shelf :key="shelf.id" :label="shelf.label" :entities="shelf.entities" :type="shelf.type" :style="{ zIndex: shelves.length - index }" />
+      </template>
+    </div>
 
     <div v-if="!shelves.length" class="absolute top-0 left-0 w-full h-full flex items-center justify-center">
       <div>
@@ -123,19 +125,60 @@ export default {
     }
   },
   methods: {
+    async getLocalMediaItemCategories() {
+      var localMedia = await this.$db.getLocalLibraryItems()
+      if (!localMedia || !localMedia.length) return []
+      console.log('Got local library items', localMedia.length)
+      var categories = []
+      var books = []
+      var podcasts = []
+      localMedia.forEach((item) => {
+        if (item.mediaType == 'book') {
+          books.push(item)
+        } else if (item.mediaType == 'podcast') {
+          podcasts.push(item)
+        }
+      })
+
+      if (books.length) {
+        categories.push({
+          id: 'local-books',
+          label: 'Local Books',
+          type: 'book',
+          entities: books
+        })
+      }
+      if (podcasts.length) {
+        categories.push({
+          id: 'local-podcasts',
+          label: 'Local Podcasts',
+          type: 'podcast',
+          entities: podcasts
+        })
+      }
+      return categories
+    },
     async fetchCategories() {
-      if (!this.currentLibraryId) return null
-      var categories = await this.$axios
-        .$get(`/api/libraries/${this.currentLibraryId}/personalized?minified=1`)
-        .then((data) => {
-          return data
-        })
-        .catch((error) => {
-          console.error('Failed to fetch categories', error)
-          return []
-        })
-      this.shelves = categories
-      console.log('Shelves', this.shelves)
+      this.loading = true
+      this.shelves = []
+
+      var localCategories = await this.getLocalMediaItemCategories()
+      console.log('Category shelves', localCategories.length)
+      this.shelves = this.shelves.concat(localCategories)
+
+      if (this.user || !this.currentLibraryId) {
+        var categories = await this.$axios
+          .$get(`/api/libraries/${this.currentLibraryId}/personalized?minified=1`)
+          .then((data) => {
+            return data
+          })
+          .catch((error) => {
+            console.error('Failed to fetch categories', error)
+            return []
+          })
+        this.shelves = this.shelves.concat(categories)
+      }
+      this.loading = false
     },
     // async socketInit(isConnected) {
     //   if (isConnected && this.currentLibraryId) {
@@ -150,15 +193,13 @@ export default {
     async libraryChanged(libid) {
       if (this.isSocketConnected && this.currentLibraryId) {
         await this.fetchCategories()
-      } else {
-        this.shelves = this.downloadOnlyShelves
-      }
-    },
-    downloadsLoaded() {
-      if (!this.isSocketConnected) {
-        this.shelves = this.downloadOnlyShelves
       }
     },
+    // downloadsLoaded() {
+    //   if (!this.isSocketConnected) {
+    //     this.shelves = this.downloadOnlyShelves
+    //   }
+    // },
     audiobookAdded(audiobook) {
       console.log('Audiobook added', audiobook)
       // TODO: Check if audiobook would be on this shelf
@@ -201,28 +242,15 @@ export default {
         }
       })
     },
-    audiobookRemoved(audiobook) {
-      this.removeBookFromShelf(audiobook)
-    },
-    audiobooksAdded(audiobooks) {
-      console.log('audiobooks added', audiobooks)
-      // TODO: Check if audiobook would be on this shelf
-      this.fetchCategories()
-    },
-    audiobooksUpdated(audiobooks) {
-      audiobooks.forEach((ab) => {
-        this.audiobookUpdated(ab)
-      })
-    },
     initListeners() {
       // this.$server.on('initialized', this.socketInit)
       this.$eventBus.$on('library-changed', this.libraryChanged)
-      this.$eventBus.$on('downloads-loaded', this.downloadsLoaded)
+      // this.$eventBus.$on('downloads-loaded', this.downloadsLoaded)
     },
     removeListeners() {
       // this.$server.off('initialized', this.socketInit)
       this.$eventBus.$off('library-changed', this.libraryChanged)
-      this.$eventBus.$off('downloads-loaded', this.downloadsLoaded)
+      // this.$eventBus.$off('downloads-loaded', this.downloadsLoaded)
     }
   },
   mounted() {

pages/item/_id.vue

@@ -27,7 +27,21 @@
           </div>
         </div>
 
-        <div v-if="(isConnected && (showPlay || showRead)) || isDownloadPlayable" class="flex mt-4 -mr-2">
+        <div v-if="isLocal" class="flex mt-4 -mr-2">
+          <ui-btn color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mr-2" :padding-x="4" @click="playClick">
+            <span v-show="!isPlaying" class="material-icons">play_arrow</span>
+            <span class="px-1 text-sm">{{ isPlaying ? 'Playing' : 'Play Local' }}</span>
+          </ui-btn>
+          <ui-btn v-if="showRead && isConnected" color="info" class="flex items-center justify-center mr-2" :class="showPlay ? '' : 'flex-grow'" :padding-x="2" @click="readBook">
+            <span class="material-icons">auto_stories</span>
+            <span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
+          </ui-btn>
+          <ui-btn v-if="isConnected && showPlay && !isIos" color="primary" class="flex items-center justify-center" :padding-x="2" @click="downloadClick">
+            <span class="material-icons">download</span>
+            <!-- <span class="material-icons" :class="downloadObj ? 'animate-pulse' : ''">{{ downloadObj ? (isDownloading || isDownloadPreparing ? 'downloading' : 'download_done') : 'download' }}</span> -->
+          </ui-btn>
+        </div>
+        <div v-else-if="(isConnected && (showPlay || showRead)) || isDownloadPlayable" class="flex mt-4 -mr-2">
           <ui-btn v-if="showPlay" color="success" :disabled="isPlaying" class="flex items-center justify-center flex-grow mr-2" :padding-x="4" @click="playClick">
             <span v-show="!isPlaying" class="material-icons">play_arrow</span>
             <span class="px-1 text-sm">{{ isPlaying ? (isStreaming ? 'Streaming' : 'Playing') : isDownloadPlayable ? 'Play local' : 'Play stream' }}</span>
@@ -37,7 +51,8 @@
             <span v-if="!showPlay" class="px-2 text-base">Read {{ ebookFormat }}</span>
           </ui-btn>
           <ui-btn v-if="isConnected && showPlay && !isIos" color="primary" class="flex items-center justify-center" :padding-x="2" @click="downloadClick">
-            <span class="material-icons" :class="downloadObj ? 'animate-pulse' : ''">{{ downloadObj ? (isDownloading || isDownloadPreparing ? 'downloading' : 'download_done') : 'download' }}</span>
+            <span class="material-icons">download</span>
+            <!-- <span class="material-icons" :class="downloadObj ? 'animate-pulse' : ''">{{ downloadObj ? (isDownloading || isDownloadPreparing ? 'downloading' : 'download_done') : 'download' }}</span> -->
           </ui-btn>
         </div>
       </div>
@@ -61,16 +76,13 @@ export default {
     var libraryItemId = params.id
     var libraryItem = null
 
-    if (store.state.user.serverConnectionConfig) {
+    if (libraryItemId.startsWith('local')) {
+      libraryItem = await app.$db.getLocalLibraryItem(libraryItemId)
+    } else if (store.state.user.serverConnectionConfig) {
       libraryItem = await app.$axios.$get(`/api/items/${libraryItemId}?expanded=1`).catch((error) => {
         console.error('Failed', error)
         return false
       })
-    } else {
-      var download = store.getters['downloads/getDownload'](libraryItemId)
-      if (download) {
-        libraryItem = download.libraryItem
-      }
     }
 
     if (!libraryItem) {
@@ -91,6 +103,9 @@ export default {
     isIos() {
       return this.$platform === 'ios'
     },
+    isLocal() {
+      return this.libraryItem.isLocal
+    },
     isConnected() {
       return this.$store.state.socketConnected
     },
@@ -182,18 +197,19 @@ export default {
       if (!this.ebookFile) return null
       return this.ebookFile.ebookFormat
     },
-    isDownloadPreparing() {
-      return this.downloadObj ? this.downloadObj.isPreparing : false
-    },
+    // isDownloadPreparing() {
+    //   return this.downloadObj ? this.downloadObj.isPreparing : false
+    // },
     isDownloadPlayable() {
-      return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
-    },
-    downloadedCover() {
-      return this.downloadObj ? this.downloadObj.cover : null
-    },
-    downloadObj() {
-      return this.$store.getters['downloads/getDownload'](this.libraryItemId)
+      return false
+      // return this.downloadObj && !this.isDownloading && !this.isDownloadPreparing
     },
+    // downloadedCover() {
+    //   return this.downloadObj ? this.downloadObj.cover : null
+    // },
+    // downloadObj() {
+    //   return this.$store.getters['downloads/getDownload'](this.libraryItemId)
+    // },
     hasStoragePermission() {
       return this.$store.state.hasStoragePermission
     }
@@ -264,7 +280,7 @@ export default {
       this.download()
     },
     async download(selectedLocalFolder = null) {
-      if (!this.numTracks || this.downloadObj) {
+      if (!this.numTracks) {
         return
       }
 

pages/localMedia/folders/_id.vue

@@ -81,7 +81,7 @@ export default {
       }
     },
     play(mediaItem) {
-      this.$eventBus.$emit('play-local-item', mediaItem.id)
+      this.$eventBus.$emit('play-item', mediaItem.id)
     },
     async scanFolder(forceAudioProbe = false) {
       this.isScanning = true