mirror of
https://github.com/antebudimir/feishin.git
synced 2025-12-31 10:03:33 +00:00
adjust button styles on playerbar
This commit is contained in:
jeffvli
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"
|
||||
/>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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,59 +14,62 @@ 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
|
||||
<ActionIcon
|
||||
className={clsx({
|
||||
[styles.main]: variant === 'main',
|
||||
[styles.motionWrapper]: true,
|
||||
[styles.active]: isActive,
|
||||
})}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
rest.onClick?.(e);
|
||||
}}
|
||||
variant="subtle"
|
||||
>
|
||||
<ActionIcon
|
||||
className={clsx(styles.playerButton, styles[variant], {
|
||||
[styles.active]: isActive,
|
||||
})}
|
||||
{...rest}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
rest.onClick?.(e);
|
||||
}}
|
||||
variant="transparent"
|
||||
>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
</motion.div>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
</Tooltip>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<motion.div
|
||||
className={clsx({
|
||||
[styles.main]: variant === 'main',
|
||||
[styles.motionWrapper]: true,
|
||||
<ActionIcon
|
||||
className={clsx(styles.playerButton, styles[variant], {
|
||||
[styles.active]: isActive,
|
||||
})}
|
||||
ref={ref}
|
||||
{...rest}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
rest.onClick?.(e);
|
||||
}}
|
||||
variant="subtle"
|
||||
>
|
||||
<ActionIcon
|
||||
className={clsx(styles.playerButton, styles[variant], {
|
||||
[styles.active]: isActive,
|
||||
})}
|
||||
{...rest}
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
rest.onClick?.(e);
|
||||
}}
|
||||
size="compact-md"
|
||||
variant="transparent"
|
||||
>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
</motion.div>
|
||||
{icon}
|
||||
</ActionIcon>
|
||||
);
|
||||
},
|
||||
);
|
||||
|
||||
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}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue