From 6f898a07f00a58c49a1fc378e2e28050f0fda565 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?nicole=20miko=C5=82ajczyk?= <git@mkljczk.pl>
Date: Tue, 28 Oct 2025 12:57:30 +0100
Subject: [PATCH] pl-fe: always display volume handle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
---
 packages/pl-fe/src/features/audio/index.tsx       |  4 ++--
 packages/pl-fe/src/features/video/index.tsx       |  4 ++--
 .../pl-fe/src/styles/components/video-player.scss | 15 +++------------
 3 files changed, 7 insertions(+), 16 deletions(-)

diff --git a/packages/pl-fe/src/features/audio/index.tsx b/packages/pl-fe/src/features/audio/index.tsx
index d710f9197..f0f4cb2f4 100644
--- a/packages/pl-fe/src/features/audio/index.tsx
+++ b/packages/pl-fe/src/features/audio/index.tsx
@@ -521,10 +521,10 @@ const Audio: React.FC<IAudio> = (props) => {
               <Icon src={muted ? require('@phosphor-icons/core/regular/speaker-x.svg') : require('@phosphor-icons/core/regular/speaker-high.svg')} />
             </button>
 
-            <div className={clsx('video-player__volume', { 'overflow-visible w-12 mr-4': hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
+            <div className='video-player__volume' onMouseDown={handleVolumeMouseDown} ref={slider}>
               <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: _getAccentColor() }} />
               <span
-                className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
+                className='video-player__volume__handle'
                 tabIndex={0}
                 style={{ left: `${volume * 100}%`, backgroundColor: _getAccentColor() }}
               />
diff --git a/packages/pl-fe/src/features/video/index.tsx b/packages/pl-fe/src/features/video/index.tsx
index ddbaa36c3..a76767858 100644
--- a/packages/pl-fe/src/features/video/index.tsx
+++ b/packages/pl-fe/src/features/video/index.tsx
@@ -538,10 +538,10 @@ const Video: React.FC<IVideo> = ({
               <Icon src={muted ? require('@phosphor-icons/core/regular/speaker-x.svg') : require('@phosphor-icons/core/regular/speaker-high.svg')} />
             </button>
 
-            <div className={clsx('video-player__volume', { 'overflow-visible w-12 mr-4': hovered })} onMouseDown={handleVolumeMouseDown} ref={slider}>
+            <div className={clsx('video-player__volume')} onMouseDown={handleVolumeMouseDown} ref={slider}>
               <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
               <span
-                className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })}
+                className={clsx('video-player__volume__handle')}
                 tabIndex={0}
                 style={{ left: `${volume * 100}%` }}
               />
diff --git a/packages/pl-fe/src/styles/components/video-player.scss b/packages/pl-fe/src/styles/components/video-player.scss
index 53b424cf7..59ab3c59c 100644
--- a/packages/pl-fe/src/styles/components/video-player.scss
+++ b/packages/pl-fe/src/styles/components/video-player.scss
@@ -51,12 +51,7 @@
   }
 
   &__volume {
-    @apply inline-flex cursor-pointer h-6 relative overflow-hidden before:content-[''] before:w-12 before:bg-black/35 dark:before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2;
-    flex: 0 0 auto;
-
-    .no-reduce-motion & {
-      transition: all 100ms linear;
-    }
+    @apply inline-flex cursor-pointer h-6 relative before:content-[''] before:w-12 before:bg-black/35 dark:before:bg-white/35 before:rounded before:absolute before:h-1 before:left-0 before:top-1/2 w-12 mr-4;
 
     &::before {
       transform: translate(0, -50%);
@@ -68,12 +63,8 @@
     }
 
     &__handle {
-      @apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5 opacity-0;
+      @apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 top-1/2 left-0 -ml-1.5;
       transform: translate(0, -50%);
-
-      .no-reduce-motion & {
-        transition: opacity 100ms linear;
-      }
     }
   }
 
@@ -87,7 +78,7 @@
     @apply cursor-pointer h-3 relative before:content-[''] before:w-full before:bg-black/35 dark:before:bg-white/35 before:rounded before:block before:absolute before:h-1 before:top-1;
 
     &__handle {
-      @apply bg-accent-500 absolute z-[3] opacity-0 rounded-[50%] size-3 -ml-1.5;
+      @apply bg-accent-500 absolute z-[3] rounded-[50%] size-3 -ml-1.5;
 
       .no-reduce-motion & {
         transition: opacity 0.1s ease;