mirror of
https://github.com/antebudimir/feishin.git
synced 2026-01-02 10:53:33 +00:00
adjust button styles on playerbar
This commit is contained in:
parent
8598313d12
commit
e0f0524eb9
4 changed files with 63 additions and 76 deletions
|
|
@ -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"
|
||||
/>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue