antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-01 18:33: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

85
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,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}
/>
);
};