refactor(MetaDetails): update style of video and stream

Stremio · Nov 2, 2023 · 6bc3b1c · 6bc3b1c
1 parent 4e92992
commit 6bc3b1c
Show file tree

Hide file tree

Showing 4 changed files with 34 additions and 5 deletions.
diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js
@@ -97,6 +97,7 @@ const Stream = ({ className, videoId, videoReleased, addonName, name, descriptio
                     progress !== null && !isNaN(progress) && progress > 0 ?
                         <div className={styles['progress-bar-container']}>
                             <div className={styles['progress-bar']} style={{ width: `${progress}%` }} />
+                            <div className={styles['progress-bar-background']} />
                         </div>
                         :
                         null

diff --git a/src/routes/MetaDetails/StreamsList/Stream/styles.less b/src/routes/MetaDetails/StreamsList/Stream/styles.less
@@ -58,13 +58,26 @@
 
         .progress-bar-container {
             flex: 0 0 100%;
+            position: relative;
             border-radius: var(--border-radius);
-            background-color: var(--overlay-color);
 
             .progress-bar {
+                z-index: 1;
+                position: relative;
                 height: 0.4rem;
                 background-color: var(--primary-accent-color);
             }
+
+            .progress-bar-background {
+                z-index: 0;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background-color: var(--primary-foreground-color);
+                opacity: 0.2;
+            }
         }
     }
 

diff --git a/src/routes/MetaDetails/VideosList/Video/Video.js b/src/routes/MetaDetails/VideosList/Video/Video.js
@@ -89,6 +89,7 @@ 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 className={styles['progress-bar-background']} />
                                     </div>
                                     :
                                     null

diff --git a/src/routes/MetaDetails/VideosList/Video/styles.less b/src/routes/MetaDetails/VideosList/Video/styles.less
@@ -29,7 +29,7 @@
     .thumbnail-container {
         flex: none;
         position: relative;
-        border-radius: var(--border-radius);
+        border-radius: 0.5rem;
         overflow: hidden;
 
         .thumbnail {
@@ -55,14 +55,28 @@
 
         .progress-bar-container {
             position: absolute;
-            bottom: 0;
-            width: 100%;
-            background-color: var(--overlay-color);
+            bottom: 0.5rem;
+            left: 0.5rem;
+            right: 0.5rem;
+            border-radius: var(--border-radius);
 
             .progress-bar {
+                z-index: 1;
+                position: relative;
                 height: 0.4rem;
                 background-color: var(--primary-accent-color);
             }
+
+            .progress-bar-background {
+                z-index: 0;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                background-color: var(--primary-foreground-color);
+                opacity: 0.2;
+            }
         }
     }