Add podcast pages, android download podcast, scan podcast folders

pages/collection/_id.vue

@@ -75,7 +75,7 @@ export default {
       })
     },
     streaming() {
-      return !!this.playableBooks.find((b) => b.id === this.$store.getters['getAudiobookIdStreaming'])
+      return !!this.playableBooks.find((b) => this.$store.getters['getIsItemStreaming'](b.id))
     },
     showPlayButton() {
       return this.playableBooks.length
@@ -88,7 +88,7 @@ export default {
         return !prog || !prog.isFinished
       })
       if (nextBookNotRead) {
-        this.$eventBus.$emit('play-item', nextBookNotRead.id)
+        this.$eventBus.$emit('play-item', { libraryItemId: nextBookNotRead.id })
       }
     }
   },

pages/connect.vue

@@ -45,6 +45,9 @@ export default {
     }
   },
   mounted() {
+    // Reset data on logouts
+    this.$store.commit('libraries/reset')
+    this.$store.commit('setIsFirstLoad', true)
     this.init()
   }
 }

pages/item/_id.vue

@@ -4,7 +4,7 @@
       <div class="w-32">
         <div class="relative">
           <covers-book-cover :library-item="libraryItem" :width="128" :book-cover-aspect-ratio="bookCoverAspectRatio" />
-          <div class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :style="{ width: 128 * progressPercent + 'px' }"></div>
+          <div v-if="!isPodcast" class="absolute bottom-0 left-0 h-1.5 bg-yellow-400 shadow-sm z-10" :style="{ width: 128 * progressPercent + 'px' }"></div>
         </div>
         <div class="flex my-4">
           <p v-if="numTracks" class="text-sm">{{ numTracks }} Tracks</p>
@@ -19,7 +19,7 @@
           <span class="px-4">{{ $bytesPretty(size) }}</span>
         </p>
 
-        <div v-if="progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
+        <div v-if="!isPodcast && progressPercent > 0" class="px-4 py-2 bg-primary text-sm font-semibold rounded-md text-gray-200 mt-4 relative" :class="resettingProgress ? 'opacity-25' : ''">
           <p class="leading-6">Your Progress: {{ Math.round(progressPercent * 100) }}%</p>
           <p v-if="progressPercent < 1" class="text-gray-400 text-xs">{{ $elapsedPretty(userTimeRemaining) }} remaining</p>
           <div v-if="!resettingProgress" class="absolute -top-1.5 -right-1.5 p-1 w-5 h-5 rounded-full bg-bg hover:bg-error border border-primary flex items-center justify-center cursor-pointer" @click.stop="clearProgressClick">
@@ -61,6 +61,8 @@
       <p>{{ description }}</p>
     </div>
 
+    <tables-podcast-episodes-table v-if="isPodcast" :library-item-id="libraryItemId" :episodes="episodes" />
+
     <modals-select-local-folder-modal v-model="showSelectLocalFolder" :media-type="mediaType" @select="selectedLocalFolder" />
   </div>
 </template>
@@ -133,6 +135,9 @@ export default {
     mediaType() {
       return this.libraryItem.mediaType
     },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    },
     media() {
       return this.libraryItem.media || {}
     },
@@ -143,6 +148,7 @@ export default {
       return this.mediaMetadata.title
     },
     author() {
+      if (this.isPodcast) return this.mediaMetadata.author
       return this.mediaMetadata.authorName
     },
     description() {
@@ -185,10 +191,10 @@ export default {
       return this.userItemProgress ? this.userItemProgress.finishedAt : 0
     },
     isStreaming() {
-      return this.$store.getters['isAudiobookStreaming'](this.libraryItemId)
+      return this.isPlaying && !this.$store.state.playerIsLocal
     },
     isPlaying() {
-      return this.$store.getters['isAudiobookPlaying'](this.libraryItemId)
+      return this.$store.getters['getIsItemStreaming'](this.libraryItemId)
     },
     numTracks() {
       if (!this.media.tracks) return 0
@@ -219,8 +225,8 @@ export default {
     downloadItem() {
       return this.$store.getters['globals/getDownloadItem'](this.libraryItemId)
     },
-    downloadItems() {
-      return this.$store.state.globals.downloadItems || []
+    episodes() {
+      return this.media.episodes || []
     }
   },
   methods: {
@@ -229,8 +235,8 @@ export default {
     },
     playClick() {
       // Todo: Allow playing local or streaming
-      if (this.hasLocal) return this.$eventBus.$emit('play-item', this.localLibraryItem.id)
-      this.$eventBus.$emit('play-item', this.libraryItem.id)
+      if (this.hasLocal) return this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItem.id })
+      this.$eventBus.$emit('play-item', { libraryItemId: this.libraryItemId })
     },
     async clearProgressClick() {
       const { value } = await Dialog.confirm({

pages/localMedia/folders/_id.vue

@@ -23,7 +23,7 @@
           <div class="flex-grow px-2">
             <p class="text-sm">{{ mediaItem.media.metadata.title }}</p>
             <p v-if="mediaItem.mediaType == 'book'" class="text-xs text-gray-300">{{ mediaItem.media.tracks.length }} Track{{ mediaItem.media.tracks.length == 1 ? '' : 's' }}</p>
-            <p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-gray-300">{{ mediaItem.media.episodes.length }} Episode{{ mediaItem.media.tracks.length == 1 ? '' : 's' }}</p>
+            <p v-else-if="mediaItem.mediaType == 'podcast'" class="text-xs text-gray-300">{{ mediaItem.media.episodes.length }} Episode{{ mediaItem.media.episodes.length == 1 ? '' : 's' }}</p>
           </div>
           <div class="w-12 h-12 flex items-center justify-center">
             <span class="material-icons text-xl text-gray-300">arrow_right</span>
@@ -78,7 +78,7 @@ export default {
           text: 'Remove',
           value: 'remove'
         }
-      ].filter((i) => !i.value == 'rescan' || this.localLibraryItems.length) // Filter out rescan if there are no local library items
+      ].filter((i) => i.value != 'rescan' || this.localLibraryItems.length) // Filter out rescan if there are no local library items
     }
   },
   methods: {
@@ -110,7 +110,7 @@ export default {
       }
     },
     play(mediaItem) {
-      this.$eventBus.$emit('play-item', mediaItem.id)
+      this.$eventBus.$emit('play-item', { libraryItemId: mediaItem.id })
     },
     async scanFolder(forceAudioProbe = false) {
       this.isScanning = true
@@ -150,11 +150,13 @@ export default {
       var items = (await this.$db.getLocalLibraryItemsInFolder(this.folderId)) || []
       console.log('Init folder', this.folderId, items)
       this.localLibraryItems = items.map((lmi) => {
+        console.log('Local library item', JSON.stringify(lmi))
         return {
           ...lmi,
           coverPathSrc: lmi.coverContentUrl ? Capacitor.convertFileSrc(lmi.coverContentUrl) : null
         }
       })
+
       if (this.shouldScan) {
         this.scanFolder()
       }

pages/localMedia/item/_id.vue

@@ -1,42 +1,64 @@
 <template>
-  <div class="w-full h-full py-6 px-4">
+  <div class="w-full h-full py-6 px-2">
     <div v-if="localLibraryItem" class="w-full h-full">
-      <div class="flex items-center mb-2">
+      <div class="px-2 flex items-center mb-2">
         <p class="text-base font-book font-semibold">{{ mediaMetadata.title }}</p>
         <div class="flex-grow" />
 
-        <button v-if="audioTracks.length" class="shadow-sm text-accent flex items-center justify-center rounded-full mx-2" @click.stop="play">
+        <button v-if="audioTracks.length && !isPodcast" class="shadow-sm text-accent flex items-center justify-center rounded-full mx-2" @click.stop="play">
           <span class="material-icons" style="font-size: 2rem">play_arrow</span>
         </button>
         <span class="material-icons" @click="showItemDialog">more_vert</span>
       </div>
 
-      <p class="text-sm mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
+      <p class="px-2 text-sm mb-0.5 text-white text-opacity-75">Folder: {{ folderName }}</p>
 
-      <p class="mb-4 text-xs text-gray-400">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
+      <p class="px-2 mb-4 text-xs text-gray-400">{{ libraryItemId ? 'Linked to item on server ' + liServerAddress : 'Not linked to server item' }}</p>
 
       <div v-if="isScanning" class="w-full text-center p-4">
         <p>Scanning...</p>
       </div>
       <div v-else class="w-full media-item-container overflow-y-auto">
-        <p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
-        <template v-for="track in audioTracks">
-          <div :key="track.localFileId" class="flex items-center my-1">
-            <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
-              <p class="font-mono font-bold text-xl">{{ track.index }}</p>
+        <div v-if="!isPodcast" class="w-full">
+          <p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
+          <template v-for="track in audioTracks">
+            <div :key="track.localFileId" class="flex items-center my-1">
+              <div class="w-10 h-12 flex items-center justify-center" style="min-width: 48px">
+                <p class="font-mono font-bold text-xl">{{ track.index }}</p>
+              </div>
+              <div class="flex-grow px-2">
+                <p class="text-xs">{{ track.title }}</p>
+              </div>
+              <div class="w-20 text-center text-gray-300" style="min-width: 80px">
+                <p class="text-xs">{{ track.mimeType }}</p>
+                <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
+              </div>
+              <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
+                <span class="material-icons" @click="showTrackDialog(track)">more_vert</span>
+              </div>
             </div>
-            <div class="flex-grow px-2">
-              <p class="text-sm">{{ track.title }}</p>
+          </template>
+        </div>
+        <div v-else class="w-full">
+          <p class="text-base mb-2">Episodes ({{ audioTracks.length }})</p>
+          <template v-for="episode in audioTracks">
+            <div :key="episode.id" class="flex items-center my-1">
+              <div class="w-10 h-12 flex items-center justify-center" style="min-width: 48px">
+                <p class="font-mono font-bold text-xl">{{ episode.index }}</p>
+              </div>
+              <div class="flex-grow px-2">
+                <p class="text-xs">{{ episode.title }}</p>
+              </div>
+              <div class="w-20 text-center text-gray-300" style="min-width: 80px">
+                <p class="text-xs">{{ episode.audioTrack.mimeType }}</p>
+                <p class="text-sm">{{ $elapsedPretty(episode.audioTrack.duration) }}</p>
+              </div>
+              <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
+                <span class="material-icons" @click="showTrackDialog(episode)">more_vert</span>
+              </div>
             </div>
-            <div class="w-20 text-center text-gray-300" style="min-width: 80px">
-              <p class="text-xs">{{ track.mimeType }}</p>
-              <p class="text-sm">{{ $elapsedPretty(track.duration) }}</p>
-            </div>
-            <div class="w-12 h-12 flex items-center justify-center" style="min-width: 48px">
-              <span class="material-icons" @click="showTrackDialog(track)">more_vert</span>
-            </div>
-          </div>
-        </template>
+          </template>
+        </div>
 
         <p v-if="otherFiles.length" class="text-lg mb-2 pt-8">Other Files</p>
         <template v-for="file in otherFiles">
@@ -56,7 +78,7 @@
         </template>
       </div>
     </div>
-    <div v-else class="w-full h-full">
+    <div v-else class="px-2 w-full h-full">
       <p class="text-lg text-center px-8">{{ failed ? 'Failed to get local library item ' + localLibraryItemId : 'Loading..' }}</p>
     </div>
 
@@ -84,7 +106,8 @@ export default {
       folder: null,
       isScanning: false,
       showDialog: false,
-      selectedAudioTrack: null
+      selectedAudioTrack: null,
+      selectedEpisode: null
     }
   },
   computed: {
@@ -100,6 +123,7 @@ export default {
         return []
       }
       return this.localFiles.filter((lf) => {
+        if (this.isPodcast) return !this.audioTracks.find((episode) => episode.audioTrack.localFileId == lf.id)
         return !this.audioTracks.find((at) => at.localFileId == lf.id)
       })
     },
@@ -109,6 +133,9 @@ export default {
     mediaType() {
       return this.localLibraryItem ? this.localLibraryItem.mediaType : null
     },
+    isPodcast() {
+      return this.mediaType == 'podcast'
+    },
     libraryItemId() {
       return this.localLibraryItem ? this.localLibraryItem.libraryItemId : null
     },
@@ -165,11 +192,17 @@ export default {
       this.showDialog = true
     },
     showTrackDialog(track) {
-      this.selectedAudioTrack = track
+      if (this.isPodcast) {
+        this.selectedAudioTrack = null
+        this.selectedEpisode = track
+      } else {
+        this.selectedEpisode = null
+        this.selectedAudioTrack = track
+      }
       this.showDialog = true
     },
     play() {
-      this.$eventBus.$emit('play-item', this.localLibraryItemId)
+      this.$eventBus.$emit('play-item', { libraryItemId: this.localLibraryItemId })
     },
     getCapImageSrc(contentUrl) {
       return Capacitor.convertFileSrc(contentUrl)
@@ -185,13 +218,34 @@ export default {
       } else if (action == 'delete') {
         this.deleteItem()
       } else if (action == 'track-delete') {
-        this.deleteTrack()
+        if (this.isPodcast) this.deleteEpisode()
+        else this.deleteTrack()
       }
       this.showDialog = false
     },
     getLocalFileForTrack(localFileId) {
       return this.localFiles.find((lf) => lf.id == localFileId)
     },
+    async deleteEpisode() {
+      if (!this.selectedEpisode) return
+      var localFile = this.getLocalFileForTrack(this.selectedEpisode.audioTrack.localFileId)
+      if (!localFile) {
+        this.$toast.error('Audio track does not have matching local file..')
+        return
+      }
+      var trackPath = localFile ? localFile.basePath : this.selectedEpisode.title
+      const { value } = await Dialog.confirm({
+        title: 'Confirm',
+        message: `Warning! This will delete the audio file "${trackPath}" from your file system. Are you sure?`
+      })
+      if (value) {
+        var res = await AbsFileSystem.deleteTrackFromItem({ id: this.localLibraryItem.id, trackLocalFileId: localFile.id, trackContentUrl: this.selectedEpisode.audioTrack.contentUrl })
+        if (res && res.id) {
+          this.$toast.success('Deleted track successfully')
+          this.localLibraryItem = res
+        } else this.$toast.error('Failed to delete')
+      }
+    },
     async deleteTrack() {
       if (!this.selectedAudioTrack) {
         return