Refactored playlist duration logic to use Intl.DurationFormat, simpli…

…fied logic, and adjusted CSS for playlists.
FreeTubeApp · Jan 28, 2025 · 7b669a2 · 7b669a2
1 parent a19f19f
commit 7b669a2
Show file tree

Hide file tree

Showing 3 changed files with 102 additions and 80 deletions.
diff --git a/src/renderer/views/Playlist/Playlist.js b/src/renderer/views/Playlist/Playlist.js
@@ -244,9 +244,6 @@ export default defineComponent({
       return this.sortByValues
     },
     totalPlaylistDuration() {
-      if (!this.playlistItems || this.playlistItems.length === 0) {
-        return '0h 0m 0s'
-      }
       const totalSeconds = this.playlistItems.reduce((acc, video) => {
         return acc + (video.lengthSeconds || 0)
       }, 0)
@@ -687,12 +684,15 @@ export default defineComponent({
         throw failure
       }
     },
-    formatDuration(totalSeconds) {
-      const hours = Math.floor(totalSeconds / 3600)
-      const minutes = Math.floor((totalSeconds % 3600) / 60)
-      const seconds = totalSeconds % 60
 
-      return `${hours}h ${minutes}m ${seconds}s`
+    formatDuration(totalSeconds, locale = 'en') {
+      const duration = {
+        hours: Math.floor(totalSeconds / 3600),
+        minutes: Math.floor((totalSeconds % 3600) / 60),
+        seconds: totalSeconds % 60,
+      }
+
+      return new Intl.DurationFormat(locale, { style: 'short' }).format(duration)
     },
 
     getIconForSortPreference: (s) => getIconForSortPreference(s),

diff --git a/src/renderer/views/Playlist/Playlist.scss b/src/renderer/views/Playlist/Playlist.scss
@@ -19,6 +19,27 @@
   }
 }
 
+.playlistDurationContainer {
+  position: sticky;
+  margin-block: -20px 16px;
+  inset-block-start: calc(var(--top-bar-push-down-adjustment-default) + var(--top-bar-push-down-adjustment-edit-mode) + var(--top-bar-push-down-adjustment-no-description) + var(--top-bar-push-down-adjustment-one-or-fewer));
+  padding-block: 8px;
+  margin-inline: auto;
+  padding-inline: 16px;
+  box-sizing: content-box;
+  inline-size: 85%;
+  background-color: var(--card-bg-color);
+  box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
+  z-index: 3;
+  text-align: center;
+}
+
+.totalDuration {
+  font-size: 1.1rem;
+  font-weight: 500;
+  color: var(--primary-text-color);
+}
+
 .routerView {
   display: flex;
 
@@ -67,27 +88,48 @@
   }
 
   &.list {
+    display: flex;
+    align-items: flex-start;
+    gap: 1rem;
+
+    .playlistInfoWrapper {
+      display: flex;
+      flex-direction: column;
+      inline-size: 30%;
+    }
+
     .playlistInfoContainer {
       background-color: var(--card-bg-color);
-      block-size: calc(100vh - 132px);
-      inline-size: 30%;
+      block-size: calc(100vh - 177px);
       inset-block-start: 96px;
-      margin-inline-end: 1em;
       position: sticky;
+      inline-size: 100%;
+    }
 
-      .playlistInfo {
-        padding: 10px;
-      }
+    .playlistDurationContainer {
+      inline-size: 96%;
+      margin-block-start: 6px;
+      text-align: center;
+      padding: 7px;
+      background-color: var(--card-bg-color);
+      box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
+      z-index: 2;
+      position: sticky;
     }
 
     .playlistItemsCard {
-      inline-size: 60%;
+      inline-size: 65%;
       padding: 10px;
     }
+
+    .totalDuration {
+      font-size: 1.1rem;
+      font-weight: 500;
+      color: var(--primary-text-color);
+    }
   }
 }
 
-
 .playlistItem {
   display: grid;
   grid-template-columns: 30px 1fr;
@@ -158,25 +200,3 @@
 .message {
   color: var(--tertiary-text-color);
 }
-
-.playlistDurationContainer {
-  position: sticky;
-  margin-block: -35px 16px;
-  inset-block-start: calc(var(--top-bar-push-down-adjustment-default) + var(--top-bar-push-down-adjustment-edit-mode) + var(--top-bar-push-down-adjustment-no-description) + var(--top-bar-push-down-adjustment-one-or-fewer));
-  padding-block: 8px;
-  margin-inline: auto;
-  padding-inline: 16px;
-  box-sizing: content-box;
-  inline-size: 85%;
-  background-color: var(--card-bg-color);
-  box-shadow: 0 2px 1px 0 var(--primary-shadow-color);
-  z-index: 3;
-  border-radius: 8px;
-  text-align: center;
-}
-
-.totalDuration {
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--primary-text-color);
-}
diff --git a/src/renderer/views/Playlist/Playlist.vue b/src/renderer/views/Playlist/Playlist.vue
@@ -7,48 +7,50 @@
       v-if="isLoading"
       :fullscreen="true"
     />
-    <div
-      v-if="!isLoading"
-      class="playlistInfoContainer"
-      :class="{
-        promptOpen,
-      }"
-    >
-      <playlist-info
-        :id="playlistId"
-        :first-video-id="firstVideoId"
-        :first-video-playlist-item-id="firstVideoPlaylistItemId"
-        :playlist-thumbnail="playlistThumbnail"
-        :title="playlistTitle"
-        :channel-name="channelName"
-        :channel-thumbnail="channelThumbnail"
-        :channel-id="channelId"
-        :last-updated="lastUpdated"
-        :description="playlistDescription"
-        :video-count="videoCount"
-        :videos="playlistItems"
-        :view-count="viewCount"
-        :info-source="infoSource"
-        :more-video-data-available="moreVideoDataAvailable"
-        :search-video-mode-allowed="isUserPlaylistRequested && videoCount > 1"
-        :search-video-mode-enabled="playlistInVideoSearchMode"
-        :search-query-text="searchQueryTextRequested"
-        :theme="listType === 'list' ? 'base' : 'top-bar'"
-        class="playlistInfo"
-        @enter-edit-mode="playlistInEditMode = true"
-        @exit-edit-mode="playlistInEditMode = false"
-        @search-video-query-change="(v) => handleVideoSearchQueryChange(v)"
-        @prompt-open="promptOpen = true"
-        @prompt-close="promptOpen = false"
-      />
-    </div>
-    <div
-      v-if="playlistItems.length > 0"
-      class="playlistDurationContainer"
-    >
-      <p class="totalDuration">
-        {{ $t('User Playlists.TotalTimePlaylist', { duration: totalPlaylistDuration }) }}
-      </p>
+    <div class="playlistInfoWrapper">
+      <div
+        v-if="!isLoading"
+        class="playlistInfoContainer"
+        :class="{
+          promptOpen,
+        }"
+      >
+        <playlist-info
+          :id="playlistId"
+          :first-video-id="firstVideoId"
+          :first-video-playlist-item-id="firstVideoPlaylistItemId"
+          :playlist-thumbnail="playlistThumbnail"
+          :title="playlistTitle"
+          :channel-name="channelName"
+          :channel-thumbnail="channelThumbnail"
+          :channel-id="channelId"
+          :last-updated="lastUpdated"
+          :description="playlistDescription"
+          :video-count="videoCount"
+          :videos="playlistItems"
+          :view-count="viewCount"
+          :info-source="infoSource"
+          :more-video-data-available="moreVideoDataAvailable"
+          :search-video-mode-allowed="isUserPlaylistRequested && videoCount > 1"
+          :search-video-mode-enabled="playlistInVideoSearchMode"
+          :search-query-text="searchQueryTextRequested"
+          :theme="listType === 'list' ? 'base' : 'top-bar'"
+          class="playlistInfo"
+          @enter-edit-mode="playlistInEditMode = true"
+          @exit-edit-mode="playlistInEditMode = false"
+          @search-video-query-change="(v) => handleVideoSearchQueryChange(v)"
+          @prompt-open="promptOpen = true"
+          @prompt-close="promptOpen = false"
+        />
+      </div>
+      <div
+        v-if="playlistItems.length > 0"
+        class="playlistDurationContainer"
+      >
+        <p class="totalDuration">
+          {{ $t('User Playlists.TotalTimePlaylist', { duration: totalPlaylistDuration }) }}
+        </p>
+      </div>
     </div>
     <ft-card
       v-if="!isLoading"