From cc36befc9a996405c0f361969efa96b8581d052e Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Tue, 18 Feb 2025 15:24:20 +0100
Subject: [PATCH] refactor(Slider): simplify audio boost logic

---
 src/components/Slider/Slider.js   |  8 +++----
 src/components/Slider/styles.less | 40 +++++++++++++------------------
 2 files changed, 19 insertions(+), 29 deletions(-)

diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js
index e29f31c1e..0e5c96c97 100644
--- a/src/components/Slider/Slider.js
+++ b/src/components/Slider/Slider.js
@@ -106,11 +106,9 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl
                 <div className={styles['track-before']} style={{ width: `calc(100% * ${bufferedPosition})` }} />
             </div>
             <div className={styles['layer']}>
-                <div className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
-                    style={audioBoost
-                        ? { '--progress-width': `calc(${thumbPosition} * 100%)` }
-                        : { width: `calc(${thumbPosition} * 100%)` }
-                    }
+                <div
+                    className={classnames(styles['track-after'], { [styles['audio-boost']]: audioBoost })}
+                    style={{ '--mask-width': `calc(${thumbPosition} * 100%)` }}
                 />
             </div>
             <div className={styles['layer']}>
diff --git a/src/components/Slider/styles.less b/src/components/Slider/styles.less
index 3acf79e62..2bdbbfe72 100644
--- a/src/components/Slider/styles.less
+++ b/src/components/Slider/styles.less
@@ -2,6 +2,12 @@
 
 @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less';
 
+@audio-boost-background: linear-gradient(to right,
+    var(--primary-foreground-color) 0%,
+    var(--primary-foreground-color) 50%,
+    var(--warning-accent-color) 75%,
+    var(--danger-accent-color) 100%) !important;
+
 html.active-slider-within {
     cursor: grabbing;
 
@@ -37,19 +43,14 @@ html.active-slider-within {
     .track {
         z-index: 0;
         flex: 1;
+        width: 100%;
         height: var(--track-size);
         border-radius: var(--track-size);
-        background-color: var(--primary-accent-color);
-        opacity: 0.2;
+        background-color: var(--overlay-color);
 
         &.audio-boost {
-            background: linear-gradient(to right, 
-            var(--primary-foreground-color) 0%, 
-            var(--primary-foreground-color) 50%, 
-            var(--warning-accent-color) 75%, 
-            var(--danger-accent-color) 100%) !important;
             opacity: 0.3;
-            filter: brightness(1.2);
+            background: @audio-boost-background;
         }
     }
 
@@ -64,27 +65,18 @@ html.active-slider-within {
     .track-after {
         z-index: 2;
         flex: none;
+        width: 100%;
         height: var(--track-size);
         border-radius: var(--track-size);
         background-color: var(--primary-foreground-color);
+        mask-image: linear-gradient(to right,
+            black 0%,
+            black var(--mask-width),
+            transparent var(--mask-width)
+        );
 
         &.audio-boost {
-            background: linear-gradient(to right, 
-            var(--primary-foreground-color) 0%, 
-            var(--primary-foreground-color) 50%, 
-            var(--warning-accent-color) 75%, 
-            var(--danger-accent-color) 100%) !important;
-            width: 100%;
-            mask-image: linear-gradient(to right, 
-                black 0%, 
-                black calc(var(--progress-width) - 2px), 
-                transparent var(--progress-width)
-            );
-            -webkit-mask-image: linear-gradient(to right, 
-                black 0%, 
-                black calc(var(--progress-width) - 2px), 
-                transparent var(--progress-width)
-            );
+            background: @audio-boost-background;
         }
     }