normalize tooltips

src/i18n/locales/en.json

@@ -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

@@ -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 && (
-                <>
+                <Tooltip.Group>
-                    <PlayButton
+                    <PlayTooltip type={Play.NOW}>
-                        classNames={clsx(styles.playButton, styles.primary)}
+                        <PlayButton
-                        onClick={playNowHandler}
+                            classNames={clsx(styles.playButton, styles.primary)}
-                        onLongPress={playShuffleHandler}
+                            onClick={playNowHandler}
-                    />
+                            onLongPress={playShuffleHandler}
-                    <PlayButton
+                        />
-                        classNames={clsx(styles.playButton, styles.secondary, styles.left)}
+                    </PlayTooltip>
-                        icon="mediaPlayNext"
+                    <PlayTooltip type={Play.NEXT}>
-                        onClick={playNextHandler}
+                        <PlayButton
-                        onLongPress={playNextShuffleHandler}
+                            classNames={clsx(styles.playButton, styles.secondary, styles.left)}
-                    />
+                            icon="mediaPlayNext"
-                    <PlayButton
+                            onClick={playNextHandler}
-                        classNames={clsx(styles.playButton, styles.secondary, styles.right)}
+                            onLongPress={playNextShuffleHandler}
-                        icon="mediaPlayLast"
+                        />
-                        onClick={playLastHandler}
+                    </PlayTooltip>
-                        onLongPress={playLastShuffleHandler}
+                    <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

@@ -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
+                            <PlayTooltip type={playButtonBehavior}>
-                                fill
+                                <PlayButton
-                                onClick={(e) => handlePlay(playButtonBehavior, e)}
+                                    fill
-                                onLongPress={(e) =>
+                                    onClick={(e) => handlePlay(playButtonBehavior, e)}
-                                    handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior], e)
+                                    onLongPress={(e) =>
-                                }
+                                        handlePlay(LONG_PRESS_PLAY_BEHAVIOR[playButtonBehavior], e)
-                            />
+                                    }
+                                />
+                            </PlayTooltip>
                         </div>
                     )}
                 </div>

src/renderer/components/item-list/types.ts

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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

@@ -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.Group>
-                <Tooltip key={button.type} label={button.label} openDelay={2000}>
+                {playButtons.map((button) => (
-                    <PlayButton
+                    <Tooltip key={button.type} label={button.label}>
-                        fill={button.type === Play.NOW}
+                        <PlayButton
-                        icon={button.icon}
+                            fill={button.type === Play.NOW}
-                        isSecondary={button.secondary}
+                            icon={button.icon}
-                        loading={loading === button.type}
+                            isSecondary={button.secondary}
-                        onClick={() => onPlay(button.type)}
+                            loading={loading === button.type}
-                        onLongPress={() => onPlay(LONG_PRESS_PLAY_BEHAVIOR[button.type])}
+                            onClick={() => onPlay(button.type)}
-                    />
+                            onLongPress={() => onPlay(LONG_PRESS_PLAY_BEHAVIOR[button.type])}
-                </Tooltip>
+                        />
-            ))}
+                    </Tooltip>
+                ))}
+            </Tooltip.Group>
         </div>
     );
 };

src/renderer/features/sidebar/components/sidebar-playlist-list.tsx

@@ -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

@@ -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

@@ -34,3 +34,5 @@ export const Tooltip = ({
         </MantineTooltip>
     );
 };
+
+Tooltip.Group = MantineTooltip.Group;