antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 18:13:31 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

adjust button styles on playerbar

Browse source
This commit is contained in:
jeffvli 2025-06-24 20:31:33 -07:00
parent 8598313d12
commit e0f0524eb9
4 changed files with 63 additions and 76 deletions
Download patch file Download diff file Expand all files Collapse all files

38
src/renderer/features/player/components/center-controls.tsx
View file

@ -7,7 +7,7 @@ import { useTranslation } from 'react-i18next';
import styles from './center-controls.module.css'; import styles from './center-controls.module.css';
import { PlayerButton } from '/@/renderer/features/player/components/player-button'; import { PlayButton, PlayerButton } from '/@/renderer/features/player/components/player-button';
import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider'; import { PlayerbarSlider } from '/@/renderer/features/player/components/playerbar-slider';
import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal'; import { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls'; import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
@ -119,12 +119,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<Icon <Icon
fill="default" fill="default"
icon="mediaStop" icon="mediaStop"
size={buttonSize} size={buttonSize - 2}
/> />
} }
onClick={handleStop} onClick={handleStop}
tooltip={{ tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }), label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 0,
}} }}
variant="tertiary" variant="tertiary"
/> />
@ -146,6 +147,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}) })
: t('player.shuffle', { postProcess: 'sentenceCase' }), : t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 0,
}} }}
variant="tertiary" variant="tertiary"
/> />
@ -160,6 +162,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
onClick={handlePrevTrack} onClick={handlePrevTrack}
tooltip={{ tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }), label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
}} }}
variant="secondary" variant="secondary"
/> />
@ -178,33 +181,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
context: 'back', context: 'back',
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
openDelay: 0,
}} }}
variant="secondary" variant="secondary"
/> />
)} )}
<PlayerButton <PlayButton
disabled={currentSong?.id === undefined} disabled={currentSong?.id === undefined}
icon={ isPaused={status === PlayerStatus.PAUSED}
status === PlayerStatus.PAUSED ? (
<Icon
icon="mediaPlay"
size={buttonSize}
/>
) : (
<Icon
icon="mediaPause"
size={buttonSize}
/>
)
}
onClick={handlePlayPause} onClick={handlePlayPause}
tooltip={{
label:
status === PlayerStatus.PAUSED
? t('player.play', { postProcess: 'sentenceCase' })
: t('player.pause', { postProcess: 'sentenceCase' }),
}}
variant="main"
/> />
{skip?.enabled && ( {skip?.enabled && (
<PlayerButton <PlayerButton
@ -221,6 +207,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
context: 'forward', context: 'forward',
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}), }),
openDelay: 0,
}} }}
variant="secondary" variant="secondary"
/> />
@ -236,6 +224,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
onClick={handleNextTrack} onClick={handleNextTrack}
tooltip={{ tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }), label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
}} }}
variant="secondary" variant="secondary"
/> />
@ -274,10 +263,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase', postProcess: 'sentenceCase',
}) })
}`, }`,
openDelay: 0,
}} }}
variant="tertiary" variant="tertiary"
/> />
<PlayerButton <PlayerButton
icon={ icon={
<Icon <Icon
@ -294,6 +283,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
} }
tooltip={{ tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }), label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 0,
}} }}
variant="tertiary" variant="tertiary"
/> />

8
src/renderer/features/player/components/player-button.module.css
View file

@ -2,11 +2,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} cursor: pointer;
.motion-wrapper.main {
display: flex;
margin: 0 0.5rem;
} }
.player-button { .player-button {
@ -16,7 +12,6 @@
width: 100%; width: 100%;
padding: 0.5rem; padding: 0.5rem;
overflow: visible; overflow: visible;
cursor: default;
button { button {
display: flex; display: flex;
@ -42,7 +37,6 @@
} }
.main { .main {
background: var(--theme-colors-foreground);
border-radius: 50%; border-radius: 50%;
svg { svg {

49
src/renderer/features/player/components/player-button.tsx
View file

@ -1,5 +1,5 @@
import clsx from 'clsx'; import clsx from 'clsx';
import { motion } from 'motion/react'; import { t } from 'i18next';
import { forwardRef, ReactNode } from 'react'; import { forwardRef, ReactNode } from 'react';
import styles from './player-button.module.css'; import styles from './player-button.module.css';
@ -14,20 +14,13 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
variant: 'main' | 'secondary' | 'tertiary'; variant: 'main' | 'secondary' | 'tertiary';
} }
export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>( export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => { ({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
if (tooltip) { if (tooltip) {
return ( return (
<Tooltip {...tooltip}> <Tooltip {...tooltip}>
<motion.div
className={clsx({
[styles.main]: variant === 'main',
[styles.motionWrapper]: true,
})}
ref={ref}
>
<ActionIcon <ActionIcon
className={clsx(styles.playerButton, styles[variant], { className={clsx({
[styles.active]: isActive, [styles.active]: isActive,
})} })}
{...rest} {...rest}
@ -35,23 +28,15 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
e.stopPropagation(); e.stopPropagation();
rest.onClick?.(e); rest.onClick?.(e);
}} }}
variant="transparent" variant="subtle"
> >
{icon} {icon}
</ActionIcon> </ActionIcon>
</motion.div>
</Tooltip> </Tooltip>
); );
} }
return ( return (
<motion.div
className={clsx({
[styles.main]: variant === 'main',
[styles.motionWrapper]: true,
})}
ref={ref}
>
<ActionIcon <ActionIcon
className={clsx(styles.playerButton, styles[variant], { className={clsx(styles.playerButton, styles[variant], {
[styles.active]: isActive, [styles.active]: isActive,
@ -61,12 +46,30 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
e.stopPropagation(); e.stopPropagation();
rest.onClick?.(e); rest.onClick?.(e);
}} }}
size="compact-md" variant="subtle"
variant="transparent"
> >
{icon} {icon}
</ActionIcon> </ActionIcon>
</motion.div>
); );
}, },
); );
interface PlayButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
isPaused?: boolean;
}
export const PlayButton = ({ isPaused, ...props }: PlayButtonProps) => {
return (
<ActionIcon
className={styles.main}
icon={isPaused ? 'mediaPlay' : 'mediaPause'}
tooltip={
isPaused
? t('player.play', { postProcess: 'sentenceCase' })
: t('player.pause', { postProcess: 'sentenceCase' })
}
variant="white"
{...props}
/>
);
};

8
src/renderer/features/player/components/right-controls.tsx
View file

@ -232,7 +232,7 @@ export const RightControls = () => {
label: t('player.playbackSpeed', { postProcess: 'sentenceCase' }), label: t('player.playbackSpeed', { postProcess: 'sentenceCase' }),
openDelay: 0, openDelay: 0,
}} }}
variant="transparent" variant="subtle"
/> />
</DropdownMenu.Target> </DropdownMenu.Target>
<DropdownMenu.Dropdown> <DropdownMenu.Dropdown>
@ -276,7 +276,7 @@ export const RightControls = () => {
: t('player.favorite', { postProcess: 'titleCase' }), : t('player.favorite', { postProcess: 'titleCase' }),
openDelay: 0, openDelay: 0,
}} }}
variant="transparent" variant="subtle"
/> />
<ActionIcon <ActionIcon
icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'} icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
@ -289,7 +289,7 @@ export const RightControls = () => {
label: t('player.viewQueue', { postProcess: 'titleCase' }), label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 0, openDelay: 0,
}} }}
variant="transparent" variant="subtle"
/> />
<ActionIcon <ActionIcon
icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'} icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
@ -304,7 +304,7 @@ export const RightControls = () => {
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume, label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 0, openDelay: 0,
}} }}
variant="transparent" variant="subtle"
/> />
{!isMinWidth ? ( {!isMinWidth ? (
<PlayerbarSlider <PlayerbarSlider