Add play downloaded episode and library size

pages/downloads.vue

@@ -23,6 +23,9 @@
         </div>
       </template>
     </div>
+    <div v-if="localLibraryItems.length" class="mt-4 text-sm text-fg-muted">
+      {{ $strings.LabelTotalSize }}: {{ $bytesPretty(localLibraryItems.reduce((acc, item) => acc + item.size, 0)) }}
+    </div>
   </div>
 </template>
 

pages/localMedia/item/_id.vue

@@ -17,7 +17,10 @@
 
       <div class="w-full max-w-full media-item-container overflow-y-auto overflow-x-hidden relative pb-4" :class="{ 'media-order-changed': orderChanged }">
         <div v-if="!isPodcast && audioTracksCopy.length" class="w-full py-2">
-          <p class="text-base mb-2">Audio Tracks ({{ audioTracks.length }})</p>
+          <div class="flex justify-between items-center mb-2">
+            <p class="text-base">Audio Tracks ({{ audioTracks.length }})</p>
+            <p class="text-xs text-fg-muted px-2">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalAudioSize) }}</p>
+          </div>
 
           <draggable v-model="audioTracksCopy" v-bind="dragOptions" handle=".drag-handle" draggable=".item" tag="div" @start="drag = true" @end="drag = false" @update="draggableUpdate" :disabled="isIos">
             <transition-group type="transition" :name="!drag ? 'dragtrack' : null">
@@ -46,7 +49,10 @@
         </div>
 
         <div v-if="isPodcast" class="w-full py-2">
-          <p class="text-base mb-2">Episodes ({{ episodes.length }})</p>
+          <div class="flex justify-between items-center mb-2">
+            <p class="text-base">Episodes ({{ episodes.length }})</p>
+            <p class="text-xs text-fg-muted px-2">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalEpisodesSize) }}</p>
+          </div>
           <template v-for="episode in episodes">
             <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">
@@ -83,22 +89,31 @@
           </div>
         </div>
 
-        <p v-if="otherFiles.length" class="text-lg py-2">Other Files</p>
+        <div v-if="otherFiles.length">
-        <template v-for="file in otherFiles">
+          <div class="flex justify-between items-center py-2">
-          <div :key="file.id" class="flex items-center my-1">
+            <p class="text-lg">Other Files</p>
-            <div class="w-12 h-12 flex items-center justify-center">
+            <p class="text-xs text-fg-muted px-2">{{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalOtherFilesSize) }}</p>
-              <img v-if="(file.mimeType || '').startsWith('image')" :src="getCapImageSrc(file.contentUrl)" class="w-full h-full object-contain" />
-              <span v-else class="material-icons">music_note</span>
-            </div>
-            <div class="flex-grow px-2">
-              <p class="text-sm">{{ file.filename }}</p>
-            </div>
-            <div class="w-24 text-center text-fg-muted" style="min-width: 96px">
-              <p class="text-xs">{{ file.mimeType }}</p>
-              <p class="text-sm">{{ $bytesPretty(file.size) }}</p>
-            </div>
           </div>
-        </template>
+          <template v-for="file in otherFiles">
+            <div :key="file.id" class="flex items-center my-1">
+              <div class="w-12 h-12 flex items-center justify-center">
+                <img v-if="(file.mimeType || '').startsWith('image')" :src="getCapImageSrc(file.contentUrl)" class="w-full h-full object-contain" />
+                <span v-else class="material-icons">music_note</span>
+              </div>
+              <div class="flex-grow px-2">
+                <p class="text-sm">{{ file.filename }}</p>
+              </div>
+              <div class="w-24 text-center text-fg-muted" style="min-width: 96px">
+                <p class="text-xs">{{ file.mimeType }}</p>
+                <p class="text-sm">{{ $bytesPretty(file.size) }}</p>
+              </div>
+            </div>
+          </template>
+        </div>
+
+        <div class="mt-4 text-sm text-fg-muted">
+          {{ $strings.LabelTotalSize }}: {{ $bytesPretty(totalLibraryItemSize) }}
+        </div>
       </div>
     </div>
     <div v-else class="px-2 w-full h-full">
@@ -218,17 +233,27 @@ export default {
     },
     dialogItems() {
       if (this.selectedAudioTrack || this.selectedEpisode) {
-        return [
+        const items = [
           {
             text: this.$strings.ButtonDeleteLocalFile,
-            value: 'track-delete'
+            value: 'track-delete',
+            icon: 'delete'
           }
         ]
+        if (this.isPodcast && this.selectedEpisode) {
+          items.unshift({
+            text: this.$strings.ButtonPlayEpisode,
+            value: 'play-episode',
+            icon: 'play_arrow'
+          })
+        }
+        return items
       } else {
         return [
           {
             text: this.$strings.ButtonDeleteLocalItem,
-            value: 'delete'
+            value: 'delete',
+            icon: 'delete'
           }
         ]
       }
@@ -236,6 +261,18 @@ export default {
     playerIsStartingPlayback() {
       // Play has been pressed and waiting for native play response
       return this.$store.state.playerIsStartingPlayback
+    },
+    totalAudioSize() {
+      return this.audioTracks.reduce((acc, item) => item.metadata ? acc + item.metadata.size : acc, 0)
+    },
+    totalEpisodesSize() {
+      return this.episodes.reduce((acc, item) => acc + item.size, 0)
+    },
+    totalOtherFilesSize() {
+      return this.otherFiles.reduce((acc, item) => acc + item.size, 0)
+    },
+    totalLibraryItemSize() {
+      return this.localFiles.reduce((acc, item) => acc + item.size, 0)
     }
   },
   methods: {
@@ -291,6 +328,22 @@ export default {
     getCapImageSrc(contentUrl) {
       return Capacitor.convertFileSrc(contentUrl)
     },
+    async playEpisode() {
+      if (!this.selectedEpisode) return
+      if (this.playerIsStartingPlayback) return
+      await this.$hapticsImpact()
+      this.$store.commit('setPlayerIsStartingPlayback', this.selectedEpisode.id)
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.localLibraryItemId,
+        episodeId: this.selectedEpisode.id
+      })
+      this.$eventBus.$emit('play-item', {
+        libraryItemId: this.localLibraryItemId,
+        episodeId: this.selectedEpisode.id,
+        serverLibraryItemId: this.libraryItemId,
+        serverEpisodeId: this.selectedEpisode.id
+      })
+    },
     async dialogAction(action) {
       console.log('Dialog action', action)
       await this.$hapticsImpact()
@@ -300,8 +353,10 @@ export default {
       } else if (action == 'track-delete') {
         if (this.isPodcast) this.deleteEpisode()
         else this.deleteTrack()
+      } else if (action == 'play-episode') {
+        this.playEpisode()
       }
-      this.showDialog = false
+      this.showDialog = false;
     },
     getLocalFileForTrack(localFileId) {
       return this.localFiles.find((lf) => lf.id == localFileId)

strings/en-us.json

@@ -33,6 +33,7 @@
   "ButtonOverride": "Override",
   "ButtonPause": "Pause",
   "ButtonPlay": "Play",
+  "ButtonPlayEpisode": "Play Episode",
   "ButtonPlaying": "Playing",
   "ButtonPlaylists": "Playlists",
   "ButtonRead": "Read",
@@ -232,6 +233,7 @@
   "LabelThemeLight": "Light",
   "LabelTimeRemaining": "{0} remaining",
   "LabelTitle": "Title",
+  "LabelTotalSize": "Total Size",
   "LabelTotalTrack": "Total Track",
   "LabelTracks": "Tracks",
   "LabelType": "Type",