vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-05-07 04:20: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/i18n/locales/en.json
+2 -1
View File
@@ -9,7 +9,7 @@
"downloadStarted": "started download of {{count}} items",
"editPlaylist": "edit $t(entity.playlist_one)",
"goToPage": "go to page",
"largeFetch": "this action will make {{count}} network requests to your server",
"largeFetch": "this action will attempt to fetch {{count}} items from your server",
"moveToNext": "move to next",
"moveToBottom": "move to bottom",
"moveToTop": "move to top",
@@ -530,6 +530,7 @@
"addNext": "add next",
"addLastShuffled": "add last (shuffled)",
"addNextShuffled": "add next (shuffled)",
"holdToShuffle": "hold to shuffle",
"favorite": "favorite",
"mute": "mute",
"muted": "muted",
src/renderer/components/item-card/item-card-controls.tsx
+27 -19
View File
@@ -7,12 +7,14 @@ import styles from './item-card-controls.module.css';
import { ItemListStateActions } from '/@/renderer/components/item-list/helpers/item-list-state';
import { ItemControls } from '/@/renderer/components/item-list/types';
import { PlayButton } from '/@/renderer/features/shared/components/play-button';
import { PlayTooltip } from '/@/renderer/features/shared/components/play-button-group';
import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
import { useIsMutatingDeleteFavorite } from '/@/renderer/features/shared/mutations/delete-favorite-mutation';
import { useIsMutatingRating } from '/@/renderer/features/shared/mutations/set-rating-mutation';
import { animationVariants } from '/@/shared/components/animations/animation-variants';
import { AppIcon, Icon, IconProps } from '/@/shared/components/icon/icon';
import { Rating } from '/@/shared/components/rating/rating';
import { Tooltip } from '/@/shared/components/tooltip/tooltip';
import {
Album,
AlbumArtist,
@@ -234,25 +236,31 @@ export const ItemCardControls = ({
return (
<motion.div className={clsx(styles.container)} {...containerProps[type]}>
{controls?.onPlay && (
<>
<PlayButton
classNames={clsx(styles.playButton, styles.primary)}
onClick={playNowHandler}
onLongPress={playShuffleHandler}
/>
<PlayButton
classNames={clsx(styles.playButton, styles.secondary, styles.left)}
icon="mediaPlayNext"
onClick={playNextHandler}
onLongPress={playNextShuffleHandler}
/>
<PlayButton
classNames={clsx(styles.playButton, styles.secondary, styles.right)}
icon="mediaPlayLast"
onClick={playLastHandler}
onLongPress={playLastShuffleHandler}
/>
</>
<Tooltip.Group>
<PlayTooltip type={Play.NOW}>
<PlayButton
classNames={clsx(styles.playButton, styles.primary)}
onClick={playNowHandler}
onLongPress={playShuffleHandler}
/>
</PlayTooltip>
<PlayTooltip type={Play.NEXT}>
<PlayButton
classNames={clsx(styles.playButton, styles.secondary, styles.left)}
icon="mediaPlayNext"
onClick={playNextHandler}
onLongPress={playNextShuffleHandler}
/>
</PlayTooltip>
<PlayTooltip type={Play.LAST}>
<PlayButton
classNames={clsx(styles.playButton, styles.secondary, styles.right)}
icon="mediaPlayLast"
onClick={playLastHandler}
onLongPress={playLastShuffleHandler}
/>
</PlayTooltip>
</Tooltip.Group>
)}
{controls?.onFavorite && (
<FavoriteButton isFavorite={isFavorite} onClick={favoriteHandler} />
src/renderer/components/item-list/item-table-list/columns/image-column.tsx
+13 -8
View File
@@ -8,7 +8,10 @@ import {
TableColumnContainer,
} from '/@/renderer/components/item-list/item-table-list/item-table-list-column';
import { PlayButton } from '/@/renderer/features/shared/components/play-button';
import { LONG_PRESS_PLAY_BEHAVIOR } from '/@/renderer/features/shared/components/play-button-group';
import {
LONG_PRESS_PLAY_BEHAVIOR,
PlayTooltip,
} from '/@/renderer/features/shared/components/play-button-group';
import { usePlayButtonBehavior } from '/@/renderer/store';
import { Icon } from '/@/shared/components/icon/icon';
import { Image } from '/@/shared/components/image/image';
@@ -85,13 +88,15 @@ export const ImageColumn = (props: ItemTableListInnerColumn) => {
[styles.compactPlayButtonOverlay]: props.size === 'compact',
})}
>
<PlayButton
fill
onClick={(e) => handlePlay(playButtonBehavior, e)}
onLongPress={(e) =>
handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior], e)
}
/>
<PlayTooltip type={playButtonBehavior}>
<PlayButton
fill
onClick={(e) => handlePlay(playButtonBehavior, e)}
onLongPress={(e) =>
handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior], e)
}
/>
</PlayTooltip>
</div>
)}
</div>
src/renderer/components/item-list/types.ts
+1
View File
@@ -16,6 +16,7 @@ export interface DefaultItemControlProps {
internalState?: ItemListStateActions;
item: ItemListItem | undefined;
itemType: LibraryItem;
meta?: Record<string, any>;
}
export interface ItemControls {
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} />
src/shared/components/tooltip/tooltip.tsx
+2
View File
@@ -34,3 +34,5 @@ export const Tooltip = ({
</MantineTooltip>
);
};
Tooltip.Group = MantineTooltip.Group;