From e13ec37227f1f0f167dc0127cf2ca261f9c1f579 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 3 Feb 2025 12:17:45 +0200 Subject: [PATCH 01/13] Added new maximum audio value for boosted audio --- src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js index 420f4ba41..205b6f3af 100644 --- a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js +++ b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js @@ -50,7 +50,7 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => { 100 } minimumValue={0} - maximumValue={100} + maximumValue={200} disabled={disabled} onSlide={onSlide} onComplete={onComplete} From ad107ff98b43d5981fa7106f37cf068615d15e0a Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 3 Feb 2025 12:19:40 +0200 Subject: [PATCH 02/13] Ensure Arrow Up-Down, and onWheel adjust volume correctly --- src/routes/Player/Player.js | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js index c76a8dcae..49e7ae4a2 100644 --- a/src/routes/Player/Player.js +++ b/src/routes/Player/Player.js @@ -494,14 +494,14 @@ const Player = ({ urlParams, queryParams }) => { } case 'ArrowUp': { if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) { - onVolumeChangeRequested(video.state.volume + 5); + onVolumeChangeRequested(Math.min(video.state.volume + 5, 200)); } break; } case 'ArrowDown': { if (!menusOpen && !nextVideoPopupOpen && video.state.volume !== null) { - onVolumeChangeRequested(video.state.volume - 5); + onVolumeChangeRequested(Math.max(video.state.volume - 5, 0)); } break; @@ -559,13 +559,13 @@ const Player = ({ urlParams, queryParams }) => { } }; const onWheel = ({ deltaY }) => { + if (menusOpen || video.state.volume === null) return; + if (deltaY > 0) { - if (!menusOpen && video.state.volume !== null) { - onVolumeChangeRequested(video.state.volume - 5); - } + onVolumeChangeRequested(Math.max(video.state.volume - 5, 0)); } else { - if (!menusOpen && video.state.volume !== null) { - onVolumeChangeRequested(video.state.volume + 5); + if (video.state.volume < 100) { + onVolumeChangeRequested(Math.min(video.state.volume + 5, 100)); } } }; From 2f010168a3bb5df7b44c3ff91c31b4424261eb70 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 3 Feb 2025 12:22:03 +0200 Subject: [PATCH 03/13] Enhance volume slider with warning & danger gradient for boosting --- src/App/styles.less | 2 ++ src/components/Slider/Slider.js | 16 +++++++--- src/components/Slider/styles.less | 31 +++++++++++++++++++ .../ControlBar/VolumeSlider/VolumeSlider.js | 1 + 4 files changed, 45 insertions(+), 5 deletions(-) diff --git a/src/App/styles.less b/src/App/styles.less index a413ed163..7e44a9643 100644 --- a/src/App/styles.less +++ b/src/App/styles.less @@ -63,6 +63,8 @@ --overlay-color: rgba(255, 255, 255, 0.05); --modal-background-color: rgba(15, 13, 32, 1); --outer-glow: 0px 0px 15px rgba(123, 91, 245, 0.37); + --warning-accent-color: rgba(255, 165, 0, 1); + --danger-accent-color: rgba(220, 38, 38, 1); --border-radius: 0.75rem; --top-overlay-size: @top-overlay-size; --bottom-overlay-size: @bottom-overlay-size; diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js index 238b6ed86..66fab7006 100644 --- a/src/components/Slider/Slider.js +++ b/src/components/Slider/Slider.js @@ -8,7 +8,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame'); const useLiveRef = require('stremio/common/useLiveRef'); const styles = require('./styles'); -const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete }) => { +const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, isVolumeSlider }) => { const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0); const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100); const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0); @@ -99,14 +99,19 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current))); return (
-
-
+
+
-
+
@@ -123,7 +128,8 @@ Slider.propTypes = { maximumValue: PropTypes.number, disabled: PropTypes.bool, onSlide: PropTypes.func, - onComplete: PropTypes.func + onComplete: PropTypes.func, + isVolumeSlider: PropTypes.bool }; module.exports = Slider; diff --git a/src/components/Slider/styles.less b/src/components/Slider/styles.less index 66ad267c7..be85b671f 100644 --- a/src/components/Slider/styles.less +++ b/src/components/Slider/styles.less @@ -58,6 +58,37 @@ html.active-slider-within { background-color: var(--primary-foreground-color); } + .volume-track { + 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); + } + + .volume-track-after { + 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) + ); + } + .thumb { z-index: 3; flex: none; diff --git a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js index 205b6f3af..47b6b829b 100644 --- a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js +++ b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js @@ -54,6 +54,7 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => { disabled={disabled} onSlide={onSlide} onComplete={onComplete} + isVolumeSlider /> ); }; From 3375415bdcb7ddd82cd5577ee1c8914f0418fe60 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 3 Feb 2025 13:12:56 +0200 Subject: [PATCH 04/13] Restrict new volume boost logic only when shell is active --- src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js index 47b6b829b..5510ed247 100644 --- a/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js +++ b/src/routes/Player/ControlBar/VolumeSlider/VolumeSlider.js @@ -5,13 +5,16 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const debounce = require('lodash.debounce'); const { useRouteFocused } = require('stremio-router'); +const { useServices } = require('stremio/services'); const { Slider } = require('stremio/components'); const styles = require('./styles'); const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => { + const { shell } = useServices(); const disabled = volume === null || isNaN(volume); const routeFocused = useRouteFocused(); const [slidingVolume, setSlidingVolume] = React.useState(null); + const maxVolume = shell.active ? 200: 100; const resetVolumeDebounced = React.useCallback(debounce(() => { setSlidingVolume(null); }, 100), []); @@ -50,11 +53,11 @@ const VolumeSlider = ({ className, volume, onVolumeChangeRequested }) => { 100 } minimumValue={0} - maximumValue={200} + maximumValue={maxVolume} disabled={disabled} onSlide={onSlide} onComplete={onComplete} - isVolumeSlider + isVolumeSlider={!!shell.active} /> ); }; From f865bca9ea6f9e6f4ff359f1aa0357e097257894 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Mon, 3 Feb 2025 14:54:19 +0200 Subject: [PATCH 05/13] Fixed code format --- src/components/Slider/Slider.js | 6 +++--- src/routes/Player/Player.js | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js index 66fab7006..c14f87dac 100644 --- a/src/components/Slider/Slider.js +++ b/src/components/Slider/Slider.js @@ -99,15 +99,15 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl const bufferedPosition = Math.max(0, Math.min(1, (bufferedRef.current - minimumValueRef.current) / (maximumValueRef.current - minimumValueRef.current))); return (
-
+
-
{ onVolumeChangeRequested(Math.max(video.state.volume - 5, 0)); } else { if (video.state.volume < 100) { - onVolumeChangeRequested(Math.min(video.state.volume + 5, 100)); + onVolumeChangeRequested(Math.min(video.state.volume + 5, 100)); } } }; From 0a17a56e242fab15e02cd900bdf9f2e6f5a63c6d Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Fri, 7 Feb 2025 14:09:46 +0200 Subject: [PATCH 06/13] Simplified the logic and renamed prop for audioBooster --- src/components/Slider/Slider.js | 10 ++-- src/components/Slider/styles.less | 50 +++++++++---------- .../ControlBar/VolumeSlider/VolumeSlider.js | 2 +- 3 files changed, 30 insertions(+), 32 deletions(-) diff --git a/src/components/Slider/Slider.js b/src/components/Slider/Slider.js index c14f87dac..e29f31c1e 100644 --- a/src/components/Slider/Slider.js +++ b/src/components/Slider/Slider.js @@ -8,7 +8,7 @@ const useAnimationFrame = require('stremio/common/useAnimationFrame'); const useLiveRef = require('stremio/common/useLiveRef'); const styles = require('./styles'); -const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, isVolumeSlider }) => { +const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabled, onSlide, onComplete, audioBoost }) => { const minimumValueRef = useLiveRef(minimumValue !== null && !isNaN(minimumValue) ? minimumValue : 0); const maximumValueRef = useLiveRef(maximumValue !== null && !isNaN(maximumValue) ? maximumValue : 100); const valueRef = useLiveRef(value !== null && !isNaN(value) ? Math.min(maximumValueRef.current, Math.max(minimumValueRef.current, value)) : 0); @@ -100,14 +100,14 @@ const Slider = ({ className, value, buffered, minimumValue, maximumValue, disabl return (
-
+
-
{ disabled={disabled} onSlide={onSlide} onComplete={onComplete} - isVolumeSlider={!!shell.active} + audioBoost={!!shell.active} /> ); }; From 173e58467e5ed6256079176babf04594febc6488 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Tue, 11 Feb 2025 16:21:11 +0200 Subject: [PATCH 07/13] Fix user panel appearing behind server warning --- .../NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js | 10 +++++++++- .../NavBar/HorizontalNavBar/NavMenu/styles.less | 4 ++++ 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js b/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js index 832492acb..59946165a 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js @@ -12,15 +12,23 @@ const useProfile = require('stremio/common/useProfile'); const usePWA = require('stremio/common/usePWA'); const useTorrent = require('stremio/common/useTorrent'); const { withCoreSuspender } = require('stremio/common/CoreSuspender'); +const useStreamingServer = require('stremio/common/useStreamingServer'); const styles = require('./styles'); const NavMenuContent = ({ onClick }) => { const { t } = useTranslation(); const { core } = useServices(); const profile = useProfile(); + const streamingServer = useStreamingServer(); const { createTorrentFromMagnet } = useTorrent(); const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen(); const [isIOSPWA, isAndroidPWA] = usePWA(); + const streamingServerWarningDismissed = React.useMemo(() => { + return streamingServer.settings !== null && streamingServer.settings.type === 'Ready' || ( + !isNaN(profile.settings.streamingServerWarningDismissed.getTime()) && + profile.settings.streamingServerWarningDismissed.getTime() > Date.now() + ); + }, [profile.settings, streamingServer.settings]); const logoutButtonOnClick = React.useCallback(() => { core.transport.dispatch({ action: 'Ctx', @@ -38,7 +46,7 @@ const NavMenuContent = ({ onClick }) => { } }, []); return ( -
+
Date: Wed, 12 Feb 2025 11:25:16 +0200 Subject: [PATCH 08/13] Fixed max height calculation on mobile --- src/components/NavBar/HorizontalNavBar/NavMenu/styles.less | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less index 0babfbba7..cda63637e 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -113,5 +113,9 @@ @media only screen and (max-width: @minimum) { .nav-menu-container { max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem); + + &.with-warning { + max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 8.5rem); + } } } \ No newline at end of file From 2b924741601ab6b9b3718827839608f5afd43420 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Wed, 12 Feb 2025 12:22:25 +0200 Subject: [PATCH 09/13] Using viewport height instead of 100vh --- .../NavBar/HorizontalNavBar/NavMenu/styles.less | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less index cda63637e..e3a37f0a2 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -14,13 +14,13 @@ } .nav-menu-container { width: 22rem; - max-height: calc(100vh - var(--horizontal-nav-bar-size) - 1rem); + max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - 1rem); overflow-y: auto; border-radius: var(--border-radius); background-color: var(--modal-background-color); &.with-warning { - max-height: calc(100vh - var(--horizontal-nav-bar-size) - 6rem); + max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - 6rem); } .user-info-container { @@ -112,10 +112,10 @@ @media only screen and (max-width: @minimum) { .nav-menu-container { - max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem); + max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem); &.with-warning { - max-height: calc(100vh - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 8.5rem); + max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 8.5rem); } } } \ No newline at end of file From 804cf461615819056b058a0ce55ff1792c096001 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Wed, 12 Feb 2025 12:42:06 +0200 Subject: [PATCH 10/13] add LESS variables for height calculations --- .../NavBar/HorizontalNavBar/NavMenu/styles.less | 11 +++++++---- 1 file changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less index e3a37f0a2..3f758af8f 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -1,5 +1,8 @@ // Copyright (C) 2017-2023 Smart code 203358507 +@viewport-minus-navbar: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size)); +@viewport-minus-horizontal-navbar: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size)); + @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -14,13 +17,13 @@ } .nav-menu-container { width: 22rem; - max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - 1rem); + max-height: calc(@viewport-minus-horizontal-navbar - 1rem); overflow-y: auto; border-radius: var(--border-radius); background-color: var(--modal-background-color); &.with-warning { - max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - 6rem); + max-height: calc(@viewport-minus-horizontal-navbar - 6rem); } .user-info-container { @@ -112,10 +115,10 @@ @media only screen and (max-width: @minimum) { .nav-menu-container { - max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 1rem); + max-height: calc(@viewport-minus-navbar - 1rem); &.with-warning { - max-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size) - 8.5rem); + max-height: calc(@viewport-minus-navbar - 8.5rem); } } } \ No newline at end of file From 7fbd723db43de800a777121fbe7029464b8de0f4 Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Wed, 12 Feb 2025 12:50:08 +0200 Subject: [PATCH 11/13] Renamed LESS variables --- .../NavBar/HorizontalNavBar/NavMenu/styles.less | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less index 3f758af8f..9a579aea1 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -1,7 +1,7 @@ // Copyright (C) 2017-2023 Smart code 203358507 -@viewport-minus-navbar: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size)); -@viewport-minus-horizontal-navbar: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size)); +@mobile-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size)); +@height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size)); @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -17,13 +17,13 @@ } .nav-menu-container { width: 22rem; - max-height: calc(@viewport-minus-horizontal-navbar - 1rem); + max-height: calc(@height - 1rem); overflow-y: auto; border-radius: var(--border-radius); background-color: var(--modal-background-color); &.with-warning { - max-height: calc(@viewport-minus-horizontal-navbar - 6rem); + max-height: calc(@height - 6rem); } .user-info-container { @@ -115,10 +115,10 @@ @media only screen and (max-width: @minimum) { .nav-menu-container { - max-height: calc(@viewport-minus-navbar - 1rem); + max-height: calc(@mobile-height - 1rem); &.with-warning { - max-height: calc(@viewport-minus-navbar - 8.5rem); + max-height: calc(@mobile-height - 8.5rem); } } } \ No newline at end of file From a51fccbe16471db780b5d5fd9b7fc2edc3f5bb7a Mon Sep 17 00:00:00 2001 From: Ivelin Megdanov Date: Wed, 12 Feb 2025 12:58:41 +0200 Subject: [PATCH 12/13] Moved LESS variables after the imports --- src/components/NavBar/HorizontalNavBar/NavMenu/styles.less | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less index 9a579aea1..31b997d38 100644 --- a/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less +++ b/src/components/NavBar/HorizontalNavBar/NavMenu/styles.less @@ -1,8 +1,5 @@ // Copyright (C) 2017-2023 Smart code 203358507 -@mobile-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size)); -@height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size)); - @import (reference) '~@stremio/stremio-colors/less/stremio-colors.less'; @import (reference) '~stremio/common/screen-sizes.less'; @@ -10,6 +7,9 @@ popup-menu-container: menu-container; } +@mobile-height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size) - var(--vertical-nav-bar-size)); +@height: calc(var(--small-viewport-height) - var(--horizontal-nav-bar-size)); + .nav-menu-popup-label { .popup-menu-container { margin-top: 1rem; From cc36befc9a996405c0f361969efa96b8581d052e Mon Sep 17 00:00:00 2001 From: Tim Date: Tue, 18 Feb 2025 15:24:20 +0100 Subject: [PATCH 13/13] 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
-
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; } }