From c150ed4e989a668501edfffad6b0754c501d35df Mon Sep 17 00:00:00 2001
From: advplyr <advplyr@protonmail.com>
Date: Thu, 19 Jun 2025 17:14:56 -0500
Subject: [PATCH] Update view episode modal to include duration & episode feed
 modal to include duration & size

---
 client/components/modals/podcast/EpisodeFeed.vue |  9 ++++++++-
 client/components/modals/podcast/ViewEpisode.vue | 10 ++++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/client/components/modals/podcast/EpisodeFeed.vue b/client/components/modals/podcast/EpisodeFeed.vue
index 7ec14ccd..e62342af 100644
--- a/client/components/modals/podcast/EpisodeFeed.vue
+++ b/client/components/modals/podcast/EpisodeFeed.vue
@@ -35,7 +35,14 @@
               <widgets-podcast-type-indicator :type="episode.episodeType" />
             </div>
             <p v-if="episode.subtitle" class="mb-1 text-sm text-gray-300 line-clamp-2">{{ episode.subtitle }}</p>
-            <p class="text-xs text-gray-300">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+            <div class="flex items-center space-x-2">
+              <!-- published -->
+              <p class="text-xs text-gray-300 w-40">Published {{ episode.publishedAt ? $dateDistanceFromNow(episode.publishedAt) : 'Unknown' }}</p>
+              <!-- duration -->
+              <p v-if="episode.duration && !isNaN(episode.duration) && Number(episode.duration) > 0" class="text-xs text-gray-300 min-w-28">{{ $strings.LabelDuration }}: {{ $elapsedPretty(Number(episode.duration)) }}</p>
+              <!-- size -->
+              <p v-if="episode.enclosure?.length && !isNaN(episode.enclosure.length) && Number(episode.enclosure.length) > 0" class="text-xs text-gray-300">{{ $strings.LabelSize }}: {{ $bytesPretty(Number(episode.enclosure.length)) }}</p>
+            </div>
           </div>
         </div>
       </div>
diff --git a/client/components/modals/podcast/ViewEpisode.vue b/client/components/modals/podcast/ViewEpisode.vue
index b4358c5d..2502a5ea 100644
--- a/client/components/modals/podcast/ViewEpisode.vue
+++ b/client/components/modals/podcast/ViewEpisode.vue
@@ -34,6 +34,12 @@
             {{ audioFileSize }}
           </p>
         </div>
+        <div class="grow">
+          <p class="font-semibold text-xs mb-1">{{ $strings.LabelDuration }}</p>
+          <p class="mb-2 text-xs">
+            {{ audioFileDuration }}
+          </p>
+        </div>
       </div>
     </div>
   </modals-modal>
@@ -90,6 +96,10 @@ export default {
 
       return this.$bytesPretty(size)
     },
+    audioFileDuration() {
+      const duration = this.episode.duration || 0
+      return this.$elapsedPretty(duration)
+    },
     bookCoverAspectRatio() {
       return this.$store.getters['libraries/getBookCoverAspectRatio']
     }