matty/ncd-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

pl-fe: always display volume handle

Browse Source 
Signed-off-by: nicole mikołajczyk <git@mkljczk.pl>
This commit is contained in:
nicole mikołajczyk
2025-10-28 12:57:30 +01:00
parent 323e142705
commit 6f898a07f0
3 changed files with 7 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/pl-fe/src/features/audio/index.tsx
View File

@ -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')} /> <Icon src={muted ? require('@phosphor-icons/core/regular/speaker-x.svg') : require('@phosphor-icons/core/regular/speaker-high.svg')} />
</button> </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() }} /> <div className='video-player__volume__current' style={{ width: `${volume * 100}%`, backgroundColor: _getAccentColor() }} />
<span <span
className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })} className='video-player__volume__handle'
tabIndex={0} tabIndex={0}
style={{ left: `${volume * 100}%`, backgroundColor: _getAccentColor() }} style={{ left: `${volume * 100}%`, backgroundColor: _getAccentColor() }}
/> />

4
packages/pl-fe/src/features/video/index.tsx
View File

@ -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')} /> <Icon src={muted ? require('@phosphor-icons/core/regular/speaker-x.svg') : require('@phosphor-icons/core/regular/speaker-high.svg')} />
</button> </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}%` }} /> <div className='video-player__volume__current' style={{ width: `${volume * 100}%` }} />
<span <span
className={clsx('video-player__volume__handle', { 'opacity-100': dragging || hovered })} className={clsx('video-player__volume__handle')}
tabIndex={0} tabIndex={0}
style={{ left: `${volume * 100}%` }} style={{ left: `${volume * 100}%` }}
/> />

15
packages/pl-fe/src/styles/components/video-player.scss
View File

@ -51,12 +51,7 @@
} }
&__volume { &__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; @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;
flex: 0 0 auto;
.no-reduce-motion & {
transition: all 100ms linear;
}
&::before { &::before {
transform: translate(0, -50%); transform: translate(0, -50%);
@ -68,12 +63,8 @@
} }
&__handle { &__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%); 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; @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 { &__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 & { .no-reduce-motion & {
transition: opacity 0.1s ease; transition: opacity 0.1s ease;