diff --git a/packages/core/icons/assets/fullscreen-enter-alt.svg b/packages/core/icons/assets/fullscreen-enter-alt.svg new file mode 100644 index 00000000..63623fa5 --- /dev/null +++ b/packages/core/icons/assets/fullscreen-enter-alt.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/core/icons/assets/fullscreen-enter.svg b/packages/core/icons/assets/fullscreen-enter.svg index 3ce4fa26..fb646cd4 100644 --- a/packages/core/icons/assets/fullscreen-enter.svg +++ b/packages/core/icons/assets/fullscreen-enter.svg @@ -1,10 +1,10 @@ diff --git a/packages/core/icons/assets/fullscreen-exit-alt.svg b/packages/core/icons/assets/fullscreen-exit-alt.svg new file mode 100644 index 00000000..6c085818 --- /dev/null +++ b/packages/core/icons/assets/fullscreen-exit-alt.svg @@ -0,0 +1,10 @@ + + + + diff --git a/packages/core/icons/assets/fullscreen-exit.svg b/packages/core/icons/assets/fullscreen-exit.svg index 8f9f2d34..586fc235 100644 --- a/packages/core/icons/assets/fullscreen-exit.svg +++ b/packages/core/icons/assets/fullscreen-exit.svg @@ -1,10 +1,10 @@ diff --git a/packages/core/icons/assets/micro-fullscreen-enter.svg b/packages/core/icons/assets/micro-fullscreen-enter.svg deleted file mode 100644 index 7e9c5629..00000000 --- a/packages/core/icons/assets/micro-fullscreen-enter.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/packages/core/icons/assets/micro-fullscreen-exit.svg b/packages/core/icons/assets/micro-fullscreen-exit.svg deleted file mode 100644 index be2932f4..00000000 --- a/packages/core/icons/assets/micro-fullscreen-exit.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/packages/core/icons/assets/micro-pause.svg b/packages/core/icons/assets/micro-pause.svg deleted file mode 100644 index 63c735ee..00000000 --- a/packages/core/icons/assets/micro-pause.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/core/icons/assets/micro-play.svg b/packages/core/icons/assets/micro-play.svg deleted file mode 100644 index 536d5b83..00000000 --- a/packages/core/icons/assets/micro-play.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/core/icons/assets/micro-volume-high.svg b/packages/core/icons/assets/micro-volume-high.svg deleted file mode 100644 index 6a39c956..00000000 --- a/packages/core/icons/assets/micro-volume-high.svg +++ /dev/null @@ -1,8 +0,0 @@ - - - - diff --git a/packages/core/icons/assets/micro-volume-low.svg b/packages/core/icons/assets/micro-volume-low.svg deleted file mode 100644 index 26acb97c..00000000 --- a/packages/core/icons/assets/micro-volume-low.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/core/icons/assets/micro-volume-off.svg b/packages/core/icons/assets/micro-volume-off.svg deleted file mode 100644 index 158b7435..00000000 --- a/packages/core/icons/assets/micro-volume-off.svg +++ /dev/null @@ -1,5 +0,0 @@ - - - diff --git a/packages/core/icons/src/index.ts b/packages/core/icons/src/index.ts index ed8d338a..27221111 100644 --- a/packages/core/icons/src/index.ts +++ b/packages/core/icons/src/index.ts @@ -1,13 +1,8 @@ +import fullscreenEnterAlt from '../assets/fullscreen-enter-alt.svg'; // Import SVG files as strings import fullscreenEnter from '../assets/fullscreen-enter.svg'; +import fullscreenExitAlt from '../assets/fullscreen-exit-alt.svg'; import fullscreenExit from '../assets/fullscreen-exit.svg'; -import microFullscreenEnter from '../assets/micro-fullscreen-enter.svg'; -import microFullscreenExit from '../assets/micro-fullscreen-exit.svg'; -import microPause from '../assets/micro-pause.svg'; -import microPlay from '../assets/micro-play.svg'; -import microVolumeHigh from '../assets/micro-volume-high.svg'; -import microVolumeLow from '../assets/micro-volume-low.svg'; -import microVolumeOff from '../assets/micro-volume-off.svg'; import pause from '../assets/pause.svg'; import play from '../assets/play.svg'; import volumeHigh from '../assets/volume-high.svg'; @@ -22,13 +17,8 @@ export const SVG_ICONS: Record = { volumeOff, fullscreenEnter, fullscreenExit, - microPlay, - microPause, - microVolumeHigh, - microVolumeLow, - microVolumeOff, - microFullscreenEnter, - microFullscreenExit, + fullscreenEnterAlt, + fullscreenExitAlt, }; // TODO: Check if we need below? It seems to be unused now. diff --git a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx index 4f797236..37ef4502 100644 --- a/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx +++ b/packages/react/react/src/skins/toasted/MediaSkinToasted.tsx @@ -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 - - + + @@ -77,9 +77,9 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps - - - + + + @@ -99,8 +99,8 @@ export default function MediaSkinDefault({ children, className = '' }: SkinProps - - + + diff --git a/packages/react/react/src/skins/toasted/styles.ts b/packages/react/react/src/skins/toasted/styles.ts index 100a559d..12b15465 100644 --- a/packages/react/react/src/skins/toasted/styles.ts +++ b/packages/react/react/src/skins/toasted/styles.ts @@ -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',