refactor(MetaDetails): style video and stream progress

src/routes/MetaDetails/StreamsList/Stream/Stream.js

@@ -77,31 +77,33 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
     ), []);
     return (
         <Button href={href} download={forceDownload} {...props} onClick={onClick} className={classnames(className, styles['stream-container'])} title={addonName}>
-            {
-                typeof thumbnail === 'string' && thumbnail.length > 0 ?
-                    <div className={styles['thumbnail-container']} title={name || addonName}>
-                        <Image
-                            className={styles['thumbnail']}
-                            src={thumbnail}
-                            alt={' '}
-                            renderFallback={renderThumbnailFallback}
-                        />
-                    </div>
-                    :
-                    <div className={styles['addon-name-container']} title={name || addonName}>
-                        <div className={styles['addon-name']}>{name || addonName}</div>
-                    </div>
-            }
-            <div className={styles['info-container']} title={description}>{description}</div>
+            <div className={styles['info-container']}>
+                {
+                    typeof thumbnail === 'string' && thumbnail.length > 0 ?
+                        <div className={styles['thumbnail-container']} title={name || addonName}>
+                            <Image
+                                className={styles['thumbnail']}
+                                src={thumbnail}
+                                alt={' '}
+                                renderFallback={renderThumbnailFallback}
+                            />
+                        </div>
+                        :
+                        <div className={styles['addon-name-container']} title={name || addonName}>
+                            <div className={styles['addon-name']}>{name || addonName}</div>
+                        </div>
+                }
+                {
+                    progress !== null && !isNaN(progress) && progress > 0 ?
+                        <div className={styles['progress-bar-container']}>
+                            <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
+                        </div>
+                        :
+                        null
+                }
+            </div>
+            <div className={styles['description-container']} title={description}>{description}</div>
             <PlayIconCircleCentered className={styles['play-icon']} />
-            {
-                progress !== null && !isNaN(progress) && progress > 0 ?
-                    <div className={styles['progress-bar-container']}>
-                        <div className={styles['progress-bar']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
-                    </div>
-                    :
-                    null
-            }
         </Button>
     );
 };

src/routes/MetaDetails/StreamsList/Stream/styles.less

@@ -13,7 +13,8 @@
     flex-direction: row;
     flex-wrap: wrap;
     align-items: center;
-    padding: 0.5rem;
+    gap: 1rem;
+    padding: 0.5rem 1rem;
     margin-bottom: 0.5rem;
     border-radius: var(--border-radius);
 
@@ -35,8 +36,11 @@
         }
     }
 
-    .thumbnail-container, .addon-name-container {
+    .info-container {
         flex: none;
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
 
         .thumbnail {
             display: block;
@@ -58,17 +62,27 @@
         }
 
         .addon-name {
-            width: 5rem;
+            width: 7rem;
             max-height: 3.6em;
             font-size: 1.1rem;
-            text-align: center;
+            text-align: left;
             color: var(--primary-foreground-color);
         }
+
+        .progress-bar-container {
+            flex: 0 0 100%;
+            border-radius: 0.75rem;
+            background-color: var(--overlay-color);
+
+            .progress-bar {
+                height: 0.4rem;
+                background-color: var(--primary-accent-color);
+            }
+        }
     }
 
-    .info-container {
+    .description-container {
         flex: 1;
-        max-height: 3.6em;
         padding: 0 0.5rem 0 1.5rem;
         display: -webkit-box;
         -webkit-line-clamp: 3;
@@ -91,16 +105,6 @@
             fill: var(--primary-foreground-color);
         }
     }
-
-    .progress-bar-container {
-        flex: 0 0 100%;
-        background-color: var(--primary-accent-color);
-
-        .progress-bar {
-            height: 0.5rem;
-            background-color: var(--primary-foreground-color);
-        }
-    }
 }
 
 @media only screen and (max-width: @minimum) {

src/routes/MetaDetails/VideosList/Video/Video.js

@@ -85,6 +85,14 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                                     />
                                 )}
                             />
+                            {
+                                progress !== null && !isNaN(progress) && progress > 0 ?
+                                    <div className={styles['progress-bar-container']}>
+                                        <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
+                                    </div>
+                                    :
+                                    null
+                            }
                         </div>
                         :
                         null
@@ -129,14 +137,6 @@ const Video = ({ className, id, title, thumbnail, episode, released, upcoming, w
                         </div>
                     </div>
                 </div>
-                {
-                    progress !== null && !isNaN(progress) && progress > 0 ?
-                        <div className={styles['progress-bar-container']}>
-                            <div className={styles['progress-bar']} style={{ width: `${Math.min(progress, 1) * 100}%` }} />
-                        </div>
-                        :
-                        null
-                }
                 {children}
             </Button>
         );

src/routes/MetaDetails/VideosList/Video/styles.less

@@ -52,6 +52,19 @@
             background-color: var(--overlay-color);
             opacity: 0.25;
         }
+
+        .progress-bar-container {
+            position: absolute;
+            bottom: 0;
+            width: 100%;
+            border-radius: 0.75rem;
+            background-color: var(--overlay-color);
+
+            .progress-bar {
+                height: 0.4rem;
+                background-color: var(--primary-accent-color);
+            }
+        }
     }
 
     .info-container {
@@ -141,16 +154,6 @@
         }
     }
 
-    .progress-bar-container {
-        flex: 0 0 100%;
-        background-color: var(--primary-accent-color);
-
-        .progress-bar {
-            height: 0.5rem;
-            background-color: var(--primary-foreground-color);
-        }
-    }
-
     .context-menu-container {
         max-width: calc(90% - 1.5rem);
 

src/routes/MetaDetails/styles.less

@@ -96,7 +96,7 @@
         }
 
         .videos-list, .streams-list {
-            flex: 0 0 28rem;
+            flex: 0 0 30rem;
             align-self: stretch;
             border-radius: var(--border-radius) 0 0 var(--border-radius);
             background-color: rgba(0, 0, 0, 0.4);