antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2025-12-31 10:03:33 +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 { 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 { openShuffleAllModal } from '/@/renderer/features/player/components/shuffle-all-modal';
import { useCenterControls } from '/@/renderer/features/player/hooks/use-center-controls';
@ -119,12 +119,13 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
<Icon
fill="default"
icon="mediaStop"
size={buttonSize}
size={buttonSize - 2}
/>
}
onClick={handleStop}
tooltip={{
label: t('player.stop', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
@ -146,6 +147,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase',
})
: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>
@ -160,6 +162,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
onClick={handlePrevTrack}
tooltip={{
label: t('player.previous', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
@ -178,33 +181,16 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
context: 'back',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
)}
<PlayerButton
<PlayButton
disabled={currentSong?.id === undefined}
icon={
status === PlayerStatus.PAUSED ? (
<Icon
icon="mediaPlay"
size={buttonSize}
/>
) : (
<Icon
icon="mediaPause"
size={buttonSize}
/>
)
}
isPaused={status === PlayerStatus.PAUSED}
onClick={handlePlayPause}
tooltip={{
label:
status === PlayerStatus.PAUSED
? t('player.play', { postProcess: 'sentenceCase' })
: t('player.pause', { postProcess: 'sentenceCase' }),
}}
variant="main"
/>
{skip?.enabled && (
<PlayerButton
@ -221,6 +207,8 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
context: 'forward',
postProcess: 'sentenceCase',
}),
openDelay: 0,
}}
variant="secondary"
/>
@ -236,6 +224,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
onClick={handleNextTrack}
tooltip={{
label: t('player.next', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="secondary"
/>
@ -274,10 +263,10 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
postProcess: 'sentenceCase',
})
}`,
openDelay: 0,
}}
variant="tertiary"
/>
<PlayerButton
icon={
<Icon
@ -294,6 +283,7 @@ export const CenterControls = ({ playersRef }: CenterControlsProps) => {
}
tooltip={{
label: t('player.playRandom', { postProcess: 'sentenceCase' }),
openDelay: 0,
}}
variant="tertiary"
/>

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

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

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

@ -1,5 +1,5 @@
import clsx from 'clsx';
import { motion } from 'motion/react';
import { t } from 'i18next';
import { forwardRef, ReactNode } from 'react';
import styles from './player-button.module.css';
@ -14,20 +14,13 @@ interface PlayerButtonProps extends Omit<ActionIconProps, 'icon' | 'variant'> {
variant: 'main' | 'secondary' | 'tertiary';
}
export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps, ref) => {
export const PlayerButton = forwardRef<HTMLButtonElement, PlayerButtonProps>(
({ icon, isActive, tooltip, variant, ...rest }: PlayerButtonProps) => {
if (tooltip) {
return (
<Tooltip {...tooltip}>
<motion.div
className={clsx({
[styles.main]: variant === 'main',
[styles.motionWrapper]: true,
})}
ref={ref}
>
<ActionIcon
className={clsx(styles.playerButton, styles[variant], {
className={clsx({
[styles.active]: isActive,
})}
{...rest}
@ -35,23 +28,15 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
e.stopPropagation();
rest.onClick?.(e);
}}
variant="transparent"
variant="subtle"
>
{icon}
</ActionIcon>
</motion.div>
</Tooltip>
);
}
return (
<motion.div
className={clsx({
[styles.main]: variant === 'main',
[styles.motionWrapper]: true,
})}
ref={ref}
>
<ActionIcon
className={clsx(styles.playerButton, styles[variant], {
[styles.active]: isActive,
@ -61,12 +46,30 @@ export const PlayerButton = forwardRef<HTMLDivElement, PlayerButtonProps>(
e.stopPropagation();
rest.onClick?.(e);
}}
size="compact-md"
variant="transparent"
variant="subtle"
>
{icon}
</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' }),
openDelay: 0,
}}
variant="transparent"
variant="subtle"
/>
</DropdownMenu.Target>
<DropdownMenu.Dropdown>
@ -276,7 +276,7 @@ export const RightControls = () => {
: t('player.favorite', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="transparent"
variant="subtle"
/>
<ActionIcon
icon={isQueueExpanded ? 'panelRightClose' : 'panelRightOpen'}
@ -289,7 +289,7 @@ export const RightControls = () => {
label: t('player.viewQueue', { postProcess: 'titleCase' }),
openDelay: 0,
}}
variant="transparent"
variant="subtle"
/>
<ActionIcon
icon={muted ? 'volumeMute' : volume > 50 ? 'volumeMax' : 'volumeNormal'}
@ -304,7 +304,7 @@ export const RightControls = () => {
label: muted ? t('player.muted', { postProcess: 'titleCase' }) : volume,
openDelay: 0,
}}
variant="transparent"
variant="subtle"
/>
{!isMinWidth ? (
<PlayerbarSlider