vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-08 13:00:13 +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/player/components/left-controls.tsx
+2 -2
View File
@@ -110,7 +110,7 @@ export const LeftControls = () => {
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
openDelay={0}
>
<Image
className={clsx(
@@ -139,7 +139,7 @@ export const LeftControls = () => {
label: t('common.expand', {
postProcess: 'titleCase',
}),
openDelay: 500,
openDelay: 0,
}}
/>
)}
src/renderer/features/player/components/mobile-playerbar.tsx
+1 -1
View File
@@ -85,7 +85,7 @@ export const MobilePlayerbar = () => {
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
openDelay={0}
>
<Image
className={clsx(
src/renderer/features/player/components/player-button.tsx
+1
View File
@@ -83,6 +83,7 @@ export const MainPlayButton = forwardRef<HTMLButtonElement, PlayButtonProps>(
label: isPaused
? (t('player.play', { postProcess: 'sentenceCase' }) as string)
: (t('player.pause', { postProcess: 'sentenceCase' }) as string),
openDelay: 0,
}}
{...props}
/>
src/renderer/features/search/components/library-command-item.tsx
-5
View File
@@ -90,7 +90,6 @@ export const LibraryCommandItem = ({
tabIndex={disabled ? -1 : 0}
tooltip={{
label: t('player.play', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -108,7 +107,6 @@ export const LibraryCommandItem = ({
tabIndex={disabled ? -1 : 0}
tooltip={{
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -126,8 +124,6 @@ export const LibraryCommandItem = ({
tabIndex={disabled ? -1 : 0}
tooltip={{
label: t('player.addLast', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -144,7 +140,6 @@ export const LibraryCommandItem = ({
tabIndex={disabled ? -1 : 0}
tooltip={{
label: t('player.addNext', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
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>
);
};
src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
-6
View File
@@ -192,7 +192,6 @@ const RowControls = ({
size="xs"
tooltip={{
label: t('player.play', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -207,7 +206,6 @@ const RowControls = ({
size="xs"
tooltip={{
label: t('player.shuffle', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -222,7 +220,6 @@ const RowControls = ({
size="xs"
tooltip={{
label: t('player.addLast', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -237,7 +234,6 @@ const RowControls = ({
size="xs"
tooltip={{
label: t('player.addNext', { postProcess: 'sentenceCase' }),
openDelay: 500,
}}
variant="subtle"
/>
@@ -328,7 +324,6 @@ export const SidebarPlaylistList = () => {
label: t('action.createPlaylist', {
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="subtle"
/>
@@ -345,7 +340,6 @@ export const SidebarPlaylistList = () => {
label: t('action.viewPlaylists', {
postProcess: 'sentenceCase',
}),
openDelay: 500,
}}
variant="subtle"
/>
src/renderer/features/sidebar/components/sidebar.tsx
-1
View File
@@ -197,7 +197,6 @@ const SidebarImage = () => {
label={t('player.toggleFullscreenPlayer', {
postProcess: 'sentenceCase',
})}
openDelay={500}
>
{upsizedImageUrl ? (
<img className={styles.sidebarImage} loading="eager" src={upsizedImageUrl} />