From 991c18aab6b77950ce122c2594b58d5fab222d37 Mon Sep 17 00:00:00 2001
From: Raymond Jacobson <ray@audius.co>
Date: Fri, 2 Aug 2024 13:38:30 -0700
Subject: [PATCH] [PAY-3279] Fix misc web album UI issues

---
 packages/common/src/hooks/useCollectionMetadata.ts         | 7 ++++---
 .../web/src/common/store/pages/collection/lineups/sagas.js | 4 ++--
 .../src/components/collection/desktop/CollectionHeader.tsx | 1 +
 3 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/packages/common/src/hooks/useCollectionMetadata.ts b/packages/common/src/hooks/useCollectionMetadata.ts
index 5a72bf45866..c7f2a255a0b 100644
--- a/packages/common/src/hooks/useCollectionMetadata.ts
+++ b/packages/common/src/hooks/useCollectionMetadata.ts
@@ -45,7 +45,8 @@ export const useCollectionMetadata = ({
   const {
     is_private: isPrivate,
     updated_at: updatedAt,
-    release_date: releaseDate
+    release_date: releaseDate,
+    created_at: createdAt
   } = collection
   const numTracks = collection.playlist_contents?.track_ids?.length ?? 0
 
@@ -60,13 +61,13 @@ export const useCollectionMetadata = ({
     },
     {
       id: CollectionMetadataType.RELEASE_DATE,
-      value: formatDate(releaseDate ?? ''),
+      value: formatDate(releaseDate ?? createdAt),
       label: 'Released',
       isHidden: isPrivate
     },
     {
       id: CollectionMetadataType.UPDATED_AT,
-      value: formatDate(updatedAt ?? ''),
+      value: formatDate(updatedAt ?? createdAt),
       label: 'Updated',
       isHidden: isPrivate
     }
diff --git a/packages/web/src/common/store/pages/collection/lineups/sagas.js b/packages/web/src/common/store/pages/collection/lineups/sagas.js
index b2fd6427e0b..49574c8ec42 100644
--- a/packages/web/src/common/store/pages/collection/lineups/sagas.js
+++ b/packages/web/src/common/store/pages/collection/lineups/sagas.js
@@ -36,8 +36,8 @@ function* getCollectionTracks() {
 
   const trackIds = tracks.map((t) => t.track)
   // TODO: Conform all timestamps to be of the same format so we don't have to do any special work here.
-  const now = Math.floor(Date.now() / 1000)
-  const times = tracks.map((t) => t.metadata_time || now)
+  // Some playlists & albums may not have a metadata time, so use the time if not.
+  const times = tracks.map((t) => t.metadata_time || t.time)
 
   // Reconcile fetching this playlist with the queue.
   // Search the queue for its currently playing uids. If any are sourced
diff --git a/packages/web/src/components/collection/desktop/CollectionHeader.tsx b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
index 81db8e7deed..11a9874a31d 100644
--- a/packages/web/src/components/collection/desktop/CollectionHeader.tsx
+++ b/packages/web/src/components/collection/desktop/CollectionHeader.tsx
@@ -187,6 +187,7 @@ export const CollectionHeader = (props: CollectionHeaderProps) => {
       />
       <Flex
         direction='column'
+        gap='xl'
         justifyContent='space-between'
         css={{ minWidth: 400 }}
       >