zoriya/v10
1
0
Fork 0
mirror of https://github.com/zoriya/v10.git synced 2026-08-16 02:45:09 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(ui): skin and icon tweaks (#59)

Browse Source
This commit is contained in:
Sam Potts
2025-10-14 13:13:36 +11:00
committed by GitHub
parent 05988a82ba
commit cdebece1eb
14 changed files with 50 additions and 79 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/react/react/src/skins/toasted/MediaSkinToasted.tsx
+14 -14
View File
@@ -1,13 +1,13 @@
import type { PropsWithChildren } from 'react';
import {
MicroFullscreenEnterIcon,
MicroFullscreenExitIcon,
MicroPauseIcon,
MicroPlayIcon,
MicroVolumeHighIcon,
MicroVolumeLowIcon,
MicroVolumeOffIcon,
FullscreenEnterAltIcon,
FullscreenExitAltIcon,
PauseIcon,
PlayIcon,
VolumeHighIcon,
VolumeLowIcon,
VolumeOffIcon,
} from '@vjs-10/react-icons';
import Popover from '@/components/Popover';
@@ -38,8 +38,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
<Tooltip.Root delay={500} closeDelay={0}>
<Tooltip.Trigger>
<PlayButton className={`${styles.Button} ${styles.IconButton} ${styles.PlayButton}`}>
<MicroPlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
<MicroPauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
<PlayIcon className={`${styles.PlayIcon} ${styles.Icon}`} />
<PauseIcon className={`${styles.PauseIcon} ${styles.Icon}`} />
</PlayButton>
</Tooltip.Trigger>
<Tooltip.Portal>
@@ -77,9 +77,9 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
<Popover.Root openOnHover delay={200} closeDelay={300}>
<Popover.Trigger>
<MuteButton className={`${styles.Button} ${styles.IconButton} ${styles.MuteButton}`}>
<MicroVolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
<MicroVolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
<MicroVolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
<VolumeHighIcon className={`${styles.VolumeHighIcon} ${styles.Icon}`} />
<VolumeLowIcon className={`${styles.VolumeLowIcon} ${styles.Icon}`} />
<VolumeOffIcon className={`${styles.VolumeOffIcon} ${styles.Icon}`} />
</MuteButton>
</Popover.Trigger>
<Popover.Portal>
@@ -99,8 +99,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps
<Tooltip.Root delay={500} closeDelay={0}>
<Tooltip.Trigger>
<FullscreenButton className={`${styles.Button} ${styles.IconButton} ${styles.FullscreenButton}`}>
<MicroFullscreenEnterIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
<MicroFullscreenExitIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
<FullscreenEnterAltIcon className={`${styles.FullscreenEnterIcon} ${styles.Icon}`} />
<FullscreenExitAltIcon className={`${styles.FullscreenExitIcon} ${styles.Icon}`} />
</FullscreenButton>
</Tooltip.Trigger>
<Tooltip.Portal>
packages/react/react/src/skins/toasted/styles.ts
+8 -3
View File
@@ -34,7 +34,7 @@ const styles: MediaToastedSkinStyles = {
),
Controls: cn(
'controls', // FIXME: Temporary className hook for above logic in the overlay. Can be removed once have a proper way to handle controls visibility.
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-4 pb-4 pt-10 text-white',
'@container/controls absolute inset-x-0 bottom-0 flex items-center gap-3.5 z-20 px-3 pb-3 pt-10 text-white',
// Animation
'transition ease-in-out',
// FIXME: Temporary hide/show logic
@@ -58,8 +58,6 @@ const styles: MediaToastedSkinStyles = {
'aria-busy:pointer-events-none aria-busy:cursor-not-allowed',
// Expanded state
'aria-expanded:text-white/80',
// Pressed state
'active:scale-95',
),
ButtonGroup: cn('flex items-center gap-1.5'),
IconButton: cn(
@@ -97,12 +95,19 @@ const styles: MediaToastedSkinStyles = {
FullscreenButton: cn(
'[&_.fullscreen-enter-icon]:opacity-100 [&[data-fullscreen]_.fullscreen-enter-icon]:opacity-0',
'[&_.fullscreen-exit-icon]:opacity-0 [&[data-fullscreen]_.fullscreen-exit-icon]:opacity-100',
'[&_path]:transition-transform ease-out',
),
FullscreenEnterIcon: cn(
'fullscreen-enter-icon',
'group-hover/button:[&_.arrow-1]:translate-x-px group-hover/button:[&_.arrow-1]:-translate-y-px',
'group-hover/button:[&_.arrow-2]:-translate-x-px group-hover/button:[&_.arrow-2]:translate-y-px',
),
FullscreenExitIcon: cn(
'fullscreen-exit-icon',
'[&_.arrow-1]:translate-x-px [&_.arrow-1]:-translate-y-px',
'[&_.arrow-2]:-translate-x-px [&_.arrow-2]:translate-y-px',
'group-hover/button:[&_.arrow-1]:translate-0',
'group-hover/button:[&_.arrow-2]:translate-0',
),
FullscreenTooltipPopup: cn(
'[&_.fullscreen-enter-tooltip]:inline [&[data-fullscreen]_.fullscreen-enter-tooltip]:hidden',