Add playlist duration to playlist view (#7007)

* Add playlist duration to playlist view

Co-authored-by: Sulliva LUONG <sullivanluong@gmail.com>

* Always return 0 when any video contains a non-number `lengthSeconds`

* Break total playlist time onto new line

* Remove self-closing br

---------

Co-authored-by: Sulliva LUONG <sullivanluong@gmail.com>

Author: MarmadileManteater

src/renderer/components/playlist-info/playlist-info.js

@@ -75,6 +75,10 @@ export default defineComponent({
       type: Number,
       required: true,
     },
+    totalPlaylistDuration: {
+      type: Number,
+      required: true
+    },
     lastUpdated: {
       type: String,
       default: undefined,
@@ -123,6 +127,18 @@ export default defineComponent({
     }
   },
   computed: {
+    currentLocale: function () {
+      return this.$i18n.locale
+    },
+    durationFormatted: function () {
+      const duration = {
+        hours: Math.floor(this.totalPlaylistDuration / 3600),
+        minutes: Math.floor((this.totalPlaylistDuration % 3600) / 60),
+        seconds: this.totalPlaylistDuration % 60,
+      }
+
+      return new Intl.DurationFormat([this.currentLocale, 'en'], { style: 'short' }).format(duration)
+    },
     hideSharingActions: function () {
       return this.$store.getters.getHideSharingActions
     },

src/renderer/components/playlist-info/playlist-info.vue

@@ -77,6 +77,10 @@
             {{ $t("Playlist.Last Updated On") }}
           </span>
           {{ lastUpdated }}
+          <template v-if="durationFormatted !== ''">
+            <br>
+            {{ $t('User Playlists.TotalTimePlaylist', { duration: durationFormatted }) }}
+          </template>
         </p>
       </template>
     </div>

src/renderer/views/Playlist/Playlist.js

@@ -243,6 +243,15 @@ export default defineComponent({
     sortBySelectValues() {
       return this.sortByValues
     },
+    totalPlaylistDuration() {
+      const totalSeconds = this.playlistItems.reduce((acc, video) => {
+        if (typeof video.lengthSeconds !== 'number') {
+          return NaN
+        }
+        return acc + video.lengthSeconds
+      }, 0)
+      return totalSeconds
+    },
   },
   watch: {
     $route() {

src/renderer/views/Playlist/Playlist.vue

@@ -28,6 +28,7 @@
         :video-count="videoCount"
         :videos="playlistItems"
         :view-count="viewCount"
+        :total-playlist-duration="totalPlaylistDuration"
         :info-source="infoSource"
         :more-video-data-available="moreVideoDataAvailable"
         :search-video-mode-allowed="isUserPlaylistRequested && videoCount > 1"

static/locales/en-US.yaml

@@ -195,6 +195,8 @@ User Playlists:
   Cannot delete the quick bookmark target playlist.: Cannot delete the quick bookmark target playlist.
   Are you sure you want to delete this playlist? This cannot be undone: Are you sure you want to delete this playlist? This cannot be undone.
 
+  TotalTimePlaylist: "Total time: {duration}"
+
   Sort By:
     NameAscending: 'A-Z'
     NameDescending: 'Z-A'