Track and album length

Author: sleepyfran

packages/components/albums/src/album-detail.ts

@@ -59,6 +59,22 @@ export class AlbumDetail extends LitElement {
       padding-bottom: 1rem;
       font-size: 1rem;
     }
+
+    h6 {
+      margin: 0;
+      padding-bottom: 1rem;
+      font-size: 0.8rem;
+      color: var(--secondary-text-color);
+    }
+
+    div.track {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    div.track > .duration {
+      color: var(--secondary-text-color);
+    }
   `;
 
   constructor() {
@@ -82,17 +98,47 @@ export class AlbumDetail extends LitElement {
               ? html`(${this.album.releaseYear.value})`
               : nothing}
           </h5>
+          <h6>${this._formatAlbumDuration()}</h6>
         </div>
 
         <div class="track-list-container" slot="right-column">
           <h2>Tracks</h2>
           <ol class="track-list">
-            ${map(this.album.tracks, (track) => html`<li>${track.name}</li>`)}
+            ${map(
+              this.album.tracks,
+              (track) =>
+                html`<div class="track">
+                  <li>${track.name}</li>
+                  <span class="duration"
+                    >${this._formatDuration(track.durationInSeconds)}</span
+                  >
+                </div>`,
+            )}
           </ol>
         </div>
       </two-column-layout>
     `;
   }
+
+  private _formatDuration(durationInSeconds: number): string {
+    if (durationInSeconds === 0) return "";
+
+    const date = new Date(0);
+    date.setSeconds(durationInSeconds);
+    return date.toLocaleTimeString("en-US", {
+      minute: "2-digit",
+      second: "2-digit",
+    });
+  }
+
+  private _formatAlbumDuration(): string {
+    const durationInSeconds = this.album.tracks.reduce(
+      (acc, track) => acc + track.durationInSeconds,
+      0,
+    );
+    const durationInMinutes = Math.floor(durationInSeconds / 60);
+    return `${durationInMinutes} min`;
+  }
 }
 
 @customElement("album-detail-page")

packages/components/ui-atoms/src/layouts/two-column.layout.ts

@@ -9,7 +9,7 @@ export class TwoColumnLayout extends LitElement {
   static styles = css`
     div.container {
       display: flex;
-      height: 100vh;
+      padding-bottom: 2rem;
     }
 
     .left-column {

packages/core/types/src/model/track.ts

@@ -69,7 +69,6 @@ export type Track = {
 
   /**
    * Duration of the track in milliseconds. It must be greater than zero.
-   * TODO: We would need to download the entire track to get this information. Consider re-adding this field when we have a way to get this information.
    */
-  // durationInMilliseconds: number,
+  durationInSeconds: number;
 };

packages/core/types/src/services/metadata-provider.ts

@@ -59,6 +59,11 @@ export type TrackMetadata = {
    * Keywords to reflect the mood of the audio, e.g. 'Romantic' or 'Sad'
    */
   mood?: string | undefined;
+
+  /**
+   * Length of the track in seconds.
+   */
+  lengthInSeconds?: number | undefined;
 };
 
 /**

packages/infrastructure/mmb-metadata-provider/index.ts

@@ -48,6 +48,7 @@ const mmbMetadataProvider = MetadataProvider.of({
             trackNumber: metadata.common.track.no ?? undefined,
             embeddedCover,
             year: metadata.common.year,
+            lengthInSeconds: metadata.format.duration,
           };
         }),
       ),

packages/infrastructure/spotify-provider/src/apis/list-albums-api.ts

@@ -120,6 +120,7 @@ const toTrackSchema = (
   },
   secondaryArtists: [],
   trackNumber: spotifyTrack.track_number,
+  durationInSeconds: spotifyTrack.duration_ms / 1000,
 });
 
 const downloadImage = (url?: string) =>

packages/workers/media-provider/src/sync/file-based-sync.ts

@@ -421,5 +421,6 @@ const createTrack = (
         provider: FileBasedProviderId.OneDrive /* TODO: Take from metadata. */,
         fileId: file.id,
       },
+      durationInSeconds: metadata.lengthInSeconds ?? 0,
     };
   });