vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 04:50:12 +02:00
Code Issues Packages Projects Releases Wiki Activity

normalize tooltips

Browse Source
This commit is contained in:
jeffvli
2025-12-03 16:00:41 -08:00
parent c738725d94
commit a7e6a75c68
12 changed files with 129 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/features/shared/components/play-button-group.tsx
+80 -16
View File
@@ -3,25 +3,60 @@ import styles from './play-button-group.module.css';
import i18n from '/@/i18n/i18n';
import { PlayButton } from '/@/renderer/features/shared/components/play-button';
import { AppIconSelection } from '/@/shared/components/icon/icon';
import { Stack } from '/@/shared/components/stack/stack';
import { Text } from '/@/shared/components/text/text';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
import { Play } from '/@/shared/types/types';
const playButtons: { icon: AppIconSelection; label: string; secondary: boolean; type: Play }[] = [
const playButtons: {
icon: AppIconSelection;
label: React.ReactNode | string;
secondary: boolean;
type: Play;
}[] = [
{
icon: 'mediaPlayNext',
label: i18n.t('player.addNext', { postProcess: 'sentenceCase' }),
label: (
<Stack gap="xs" justify="center">
<Text fw={500} ta="center">
{i18n.t('player.addNext', { postProcess: 'sentenceCase' })}
</Text>
<Text fw={500} isMuted size="xs" ta="center">
{i18n.t('player.holdToShuffle', { postProcess: 'sentenceCase' })}
</Text>
</Stack>
),
secondary: true,
type: Play.NEXT,
},
{
icon: 'mediaPlay',
label: i18n.t('player.play', { postProcess: 'sentenceCase' }),
label: (
<Stack gap="xs" justify="center">
<Text fw={500} ta="center">
{i18n.t('player.play', { postProcess: 'sentenceCase' })}
</Text>
<Text fw={500} isMuted size="xs" ta="center">
{i18n.t('player.holdToShuffle', { postProcess: 'sentenceCase' })}
</Text>
</Stack>
),
secondary: false,
type: Play.NOW,
},
{
icon: 'mediaPlayLast',
label: i18n.t('player.addLast', { postProcess: 'sentenceCase' }),
label: (
<Stack gap="xs" justify="center">
<Text fw={500} ta="center">
{i18n.t('player.addLast', { postProcess: 'sentenceCase' })}
</Text>
<Text fw={500} isMuted size="xs" ta="center">
{i18n.t('player.holdToShuffle', { postProcess: 'sentenceCase' })}
</Text>
</Stack>
),
secondary: true,
type: Play.LAST,
},
@@ -33,6 +68,33 @@ export const LONG_PRESS_PLAY_BEHAVIOR = {
[Play.NOW]: Play.SHUFFLE,
};
const PLAY_BEHAVIOR_TO_LABEL = {
[Play.LAST]: i18n.t('player.addLast', { postProcess: 'sentenceCase' }),
[Play.NEXT]: i18n.t('player.addNext', { postProcess: 'sentenceCase' }),
[Play.NOW]: i18n.t('player.play', { postProcess: 'sentenceCase' }),
};
const TooltipLabel = ({ label }: { label: React.ReactNode | string; type: Play }) => {
return (
<Stack gap="xs" justify="center">
<Text fw={500} ta="center">
{label}
</Text>
<Text fw={500} isMuted size="xs" ta="center">
{i18n.t('player.holdToShuffle', { postProcess: 'sentenceCase' })}
</Text>
</Stack>
);
};
export const PlayTooltip = ({ children, type }: { children: React.ReactNode; type: Play }) => {
return (
<Tooltip label={<TooltipLabel label={PLAY_BEHAVIOR_TO_LABEL[type]} type={type} />}>
{children}
</Tooltip>
);
};
interface PlayButtonGroupProps {
loading?: boolean | Play;
onPlay: (type: Play) => void;
@@ -41,18 +103,20 @@ interface PlayButtonGroupProps {
export const PlayButtonGroup = ({ loading, onPlay }: PlayButtonGroupProps) => {
return (
<div className={styles.playButtonGroup}>
{playButtons.map((button) => (
<Tooltip key={button.type} label={button.label} openDelay={2000}>
<PlayButton
fill={button.type === Play.NOW}
icon={button.icon}
isSecondary={button.secondary}
loading={loading === button.type}
onClick={() => onPlay(button.type)}
onLongPress={() => onPlay(LONG_PRESS_PLAY_BEHAVIOR[button.type])}
/>
</Tooltip>
))}
<Tooltip.Group>
{playButtons.map((button) => (
<Tooltip key={button.type} label={button.label}>
<PlayButton
fill={button.type === Play.NOW}
icon={button.icon}
isSecondary={button.secondary}
loading={loading === button.type}
onClick={() => onPlay(button.type)}
onLongPress={() => onPlay(LONG_PRESS_PLAY_BEHAVIOR[button.type])}
/>
</Tooltip>
))}
</Tooltip.Group>
</div>
);
};