extract play button from item card and add long press animation

src/renderer/features/shared/components/library-header-bar.tsx

@@ -5,7 +5,7 @@ import { useTranslation } from 'react-i18next';
 import styles from './library-header-bar.module.css';
 
 import { usePlayer } from '/@/renderer/features/player/context/player-context';
-import { PlayButton } from '/@/renderer/features/shared/components/play-button';
+import { DefaultPlayButton } from '/@/renderer/features/shared/components/play-button';
 import { PlayButtonGroup } from '/@/renderer/features/shared/components/play-button-group';
 import { useCurrentServerId } from '/@/renderer/store';
 import { Badge, BadgeProps } from '/@/shared/components/badge/badge';
@@ -75,7 +75,7 @@ const HeaderPlayButton = ({
 
     return (
         <div className={styles.playButtonContainer}>
-            <PlayButton
+            <DefaultPlayButton
                 className={className}
                 onClick={openPlayTypeModal}
                 variant={variant}

src/renderer/features/shared/components/library-header.tsx

@@ -6,7 +6,7 @@ import { Link } from 'react-router';
 import styles from './library-header.module.css';
 
 import {
-    WidePlayButton,
+    PlayTextButton,
     WideShuffleButton,
 } from '/@/renderer/features/shared/components/play-button';
 import { useIsMutatingCreateFavorite } from '/@/renderer/features/shared/mutations/create-favorite-mutation';
@@ -190,7 +190,7 @@ export const LibraryHeaderMenu = ({
     return (
         <div className={styles.libraryHeaderMenu}>
             <Group wrap="nowrap">
-                {onPlay && <WidePlayButton onClick={onPlay} />}
+                {onPlay && <PlayTextButton onClick={onPlay} />}
                 {onShuffle && <WideShuffleButton onClick={onShuffle} />}
             </Group>
             <Group gap="sm" wrap="nowrap">

src/renderer/features/shared/components/play-button.module.css

@@ -1,4 +1,4 @@
-.button {
+.text-button {
     width: 3rem;
     height: 3rem;
     border-radius: 50%;
@@ -15,7 +15,7 @@
     }
 }
 
-.button.unthemed {
+.text-button.unthemed {
     @mixin light {
         color: white;
         background: black;
@@ -45,7 +45,7 @@
     }
 }
 
-.wide-button {
+.wide-text-button {
     padding-right: var(--theme-spacing-xl);
     padding-left: var(--theme-spacing-xl);
     background: white;
@@ -53,7 +53,7 @@
     transition: background-color 0.2s ease-in-out;
 }
 
-.wide-button.unthemed {
+.wide-text-button.unthemed {
     @mixin light {
         background: black;
 
@@ -81,7 +81,7 @@
     }
 }
 
-.wide-button-label {
+.wide-text-button-label {
     font-size: var(--theme-font-size-md);
     font-weight: 600;
     color: black;
@@ -91,3 +91,78 @@
         fill: black;
     }
 }
+
+.play-button {
+    all: unset;
+    position: absolute;
+    top: 50%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #fff;
+    border: none;
+    border-radius: 100%;
+    opacity: 1;
+    --play-button-scale: 1;
+    --long-press-duration: 500ms;
+    transform: translate(-50%, -50%) scale(var(--play-button-scale, 1));
+    transition: opacity 0.1s ease-in-out;
+    transition: transform 0.1s ease-in-out;
+    overflow: visible;
+    isolation: isolate;
+
+    &::before {
+        content: '';
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        width: 100%;
+        height: 100%;
+        background-color: var(--theme-colors-primary);
+        border-radius: 50%;
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 1;
+        transition: transform 0.15s ease-out;
+        z-index: 0;
+        pointer-events: none;
+    }
+
+    &[data-pressing='true']::before {
+        animation: expand-long-press var(--long-press-duration) linear 100ms forwards;
+        transition: none;
+    }
+
+    &:hover {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:active {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0.9);
+    }
+
+    svg {
+        position: relative;
+        z-index: 1;
+        stroke: rgb(0 0 0);
+    }
+}
+
+@keyframes expand-long-press {
+    0% {
+        transform: translate(-50%, -50%) scale(0);
+        opacity: 0.2;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(1.05);
+        opacity: 0.8;
+    }
+}
+
+.play-button.disabled,
+.play-button.loading {
+    cursor: not-allowed;
+    opacity: 0.5;
+    transform: translate(-50%, -50%) scale(1);
+}

src/renderer/features/shared/components/play-button.tsx

@@ -1,21 +1,27 @@
 import clsx from 'clsx';
 import { t } from 'i18next';
+import { memo } from 'react';
 
 import styles from './play-button.module.css';
 
+import { usePlayButtonClick } from '/@/renderer/features/shared/hooks/use-play-button-click';
 import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/action-icon';
 import { Button, ButtonProps } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
-import { Icon } from '/@/shared/components/icon/icon';
+import { AppIcon, Icon } from '/@/shared/components/icon/icon';
 
-export interface PlayButtonProps extends ActionIconProps {
+export interface DefaultPlayButtonProps extends ActionIconProps {
     size?: number | string;
 }
 
-export const PlayButton = ({ className, variant = 'filled', ...props }: PlayButtonProps) => {
+export const DefaultPlayButton = ({
+    className,
+    variant = 'filled',
+    ...props
+}: DefaultPlayButtonProps) => {
     return (
         <ActionIcon
-            className={clsx(styles.button, className, {
+            className={clsx(styles.textButton, className, {
                 [styles.unthemed]: variant !== 'filled',
             })}
             icon="mediaPlay"
@@ -28,21 +34,21 @@ export const PlayButton = ({ className, variant = 'filled', ...props }: PlayButt
     );
 };
 
-interface WidePlayButtonProps extends ButtonProps {}
+interface TextPlayButtonProps extends ButtonProps {}
 
-export const WidePlayButton = ({
+export const PlayTextButton = ({
     className,
     variant = 'default',
     ...props
-}: WidePlayButtonProps) => {
+}: TextPlayButtonProps) => {
     return (
         <Button
-            className={clsx(styles.wideButton, className, {
+            className={clsx(styles.wideTextButton, className, {
                 [styles.unthemed]: variant !== 'filled',
             })}
             classNames={{
-                label: styles.wideButtonLabel,
-                root: styles.wideButton,
+                label: styles.wideTextButtonLabel,
+                root: styles.wideTextButton,
             }}
             variant="subtle"
             {...props}
@@ -57,13 +63,43 @@ export const WidePlayButton = ({
     );
 };
 
-export const WideShuffleButton = ({ ...props }: WidePlayButtonProps) => {
+export const WideShuffleButton = ({ ...props }: TextPlayButtonProps) => {
     return (
-        <WidePlayButton {...props}>
+        <PlayTextButton {...props}>
             <Group gap="sm" wrap="nowrap">
                 <Icon fill="default" icon="mediaShuffle" size="lg" />
                 {t('action.shuffle', { postProcess: 'sentenceCase' })}
             </Group>
-        </WidePlayButton>
+        </PlayTextButton>
     );
 };
+
+interface PlayButtonProps {
+    classNames?: string;
+    icon?: keyof typeof AppIcon;
+    loading?: boolean;
+    onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onLongPress?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
+
+export const PlayButton = memo(
+    ({ classNames, icon = 'mediaPlay', loading, onClick, onLongPress }: PlayButtonProps) => {
+        const clickHandlers = usePlayButtonClick({
+            loading,
+            onClick,
+            onLongPress,
+        });
+
+        return (
+            <button
+                className={clsx(styles.playButton, classNames)}
+                {...clickHandlers.handlers}
+                {...clickHandlers.props}
+            >
+                <Icon icon={icon} size="lg" />
+            </button>
+        );
+    },
+);
+
+PlayButton.displayName = 'PlayButton';