Stop displaying duration on items without streams

nukeop · Oct 17, 2022 · a066912 · a066912
1 parent d2d2ab7
commit a066912
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 10 deletions.
diff --git a/packages/app/app/components/PlayQueue/index.tsx b/packages/app/app/components/PlayQueue/index.tsx
@@ -110,7 +110,9 @@ const PlayQueue: React.FC<PlayQueueProps> = ({
     }
 
     return queue.queueItems.map((item, i) => {
-      const trackDuration = formatDuration(item.stream?.duration) === '00:00' && !item.loading
+      const trackDuration = formatDuration(item.stream?.duration) === '00:00' && 
+      !item.loading && 
+      Boolean(item.stream)
         ? t('live')
         : formatDuration(item.stream?.duration);
 

diff --git a/packages/ui/lib/components/QueueItem/index.jsx b/packages/ui/lib/components/QueueItem/index.jsx
@@ -60,16 +60,21 @@ export const QueueItem = ({
           </div>
         </div>
 
-        <div className={styles.item_duration_container}>
-          <div className={styles.item_duration}>
-            {duration}
+        {
+          !isLoading &&
+          Boolean(track.stream) &&
+          <div className={styles.item_duration_container}>
+            <div className={styles.item_duration}>
+              {duration}
+            </div>
           </div>
-        </div>
+        }
       </>
     }
 
     {
-      Boolean(error) &&
+      Boolean(error) && 
+      !isCompact &&
         <div className={styles.error_overlay}>
           <div className={styles.error_message}>{error.message}</div>
           <div className={styles.error_details}>{error.details}</div>

diff --git a/packages/ui/stories/components/queueItem.stories.tsx b/packages/ui/stories/components/queueItem.stories.tsx
@@ -10,7 +10,8 @@ const commonProps = {
   track: {
     thumbnail: 'https://i.imgur.com/4euOws2.jpg',
     name: 'Test track name',
-    artist: 'Test artist'
+    artist: 'Test artist',
+    stream: {}
   },
   isLoading: false,
   isCurrent: false,
@@ -35,7 +36,8 @@ storiesOf('Components/Queue item', module)
           track={{
             thumbnail: 'https://i.imgur.com/aVNWf3j.jpg',
             name: 'Small thumbnail',
-            artist: 'Test artist'
+            artist: 'Test artist',
+            stream: {}
           }}
         />
       </div>
@@ -58,7 +60,7 @@ storiesOf('Components/Queue item', module)
   .add('Compact', () => (
     <div className='bg'>
       <div
-        style={{ width: '3rem' }}
+        style={{ width: '4rem' }}
       >
         <QueueItem {...commonProps} isCompact />
         <QueueItem {...commonProps}
@@ -80,7 +82,8 @@ storiesOf('Components/Queue item', module)
       <QueueItem {...commonProps}
         track={{
           name: 'Test track name',
-          artist: 'Test artist'
+          artist: 'Test artist',
+          stream: {}
         }}
       />
       <div