adjust button styles on playerbar

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

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"
/>