normalize tooltips

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 && (
-                <>
-                    <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

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

@@ -16,6 +16,7 @@ export interface DefaultItemControlProps {
     internalState?: ItemListStateActions;
     item: ItemListItem | undefined;
     itemType: LibraryItem;
+    meta?: Record<string, any>;
 }
 
 export interface ItemControls {