From 0d37601997e833fdd71aa400834eaaebd759e174 Mon Sep 17 00:00:00 2001
From: Bnyro <bnyro@tutanota.com>
Date: Mon, 29 Jul 2024 16:26:17 +0200
Subject: [PATCH] feat: show total playlist duration

---
 src/components/PlaylistPage.vue | 15 ++++++++++++---
 1 file changed, 12 insertions(+), 3 deletions(-)

diff --git a/src/components/PlaylistPage.vue b/src/components/PlaylistPage.vue
index 4bf99118..cd6a6780 100644
--- a/src/components/PlaylistPage.vue
+++ b/src/components/PlaylistPage.vue
@@ -14,7 +14,11 @@
                 </router-link>
             </div>
             <div class="flex flex-wrap items-center gap-1">
-                <strong v-text="`${playlist.videos} ${$t('video.videos')}`" />
+                <strong
+                    v-text="
+                        `${playlist.videos} ${$t('video.videos')} - ${timeFormat(totalDuration)}${playlist.nextpage ? '+' : ''}`
+                    "
+                />
                 <button v-if="!isPipedPlaylist" class="btn mx-1" @click="bookmarkPlaylist">
                     {{ $t(`actions.${isBookmarked ? "playlist_bookmarked" : "bookmark_playlist"}`)
                     }}<i class="i-fa6-solid:bookmark ml-3" />
@@ -68,6 +72,7 @@ export default {
     data() {
         return {
             playlist: null,
+            totalDuration: 0,
             admin: false,
             isBookmarked: false,
         };
@@ -107,6 +112,7 @@ export default {
                 .then(data => (this.playlist = data))
                 .then(() => {
                     this.updateTitle();
+                    this.updateTotalDuration();
                     this.updateWatched(this.playlist.relatedStreams);
                     this.fetchDeArrowContent(this.playlist.relatedStreams);
                 });
@@ -121,10 +127,10 @@ export default {
                 this.fetchJson(this.authApiUrl() + "/nextpage/playlists/" + this.$route.query.list, {
                     nextpage: this.playlist.nextpage,
                 }).then(json => {
-                    this.playlist.relatedStreams.concat(json.relatedStreams);
                     this.playlist.nextpage = json.nextpage;
                     this.loading = false;
-                    json.relatedStreams.map(stream => this.playlist.relatedStreams.push(stream));
+                    this.playlist.relatedStreams.push(...json.relatedStreams);
+                    this.updateTotalDuration();
                     this.fetchDeArrowContent(this.playlist.relatedStreams);
                 });
             }
@@ -132,6 +138,9 @@ export default {
         removeVideo(index) {
             this.playlist.relatedStreams.splice(index, 1);
         },
+        updateTotalDuration() {
+            this.totalDuration = this.playlist.relatedStreams.map(video => video.duration).reduce((a, b) => a + b);
+        },
         async clonePlaylist() {
             this.fetchJson(this.authApiUrl() + "/import/playlist", null, {
                 method: "POST",