refactor play button for reusability

src/renderer/components/item-card/item-card-controls.module.css

@@ -45,6 +45,22 @@
     margin-bottom: var(--theme-spacing-lg);
 }
 
+.play-button {
+    position: absolute;
+    top: 50%;
+    transform: translate(-50%, -50%) scale(var(--play-button-scale, 1));
+
+    &:hover {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1.1);
+    }
+
+    &:active {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(0.9);
+    }
+}
+
 .primary {
     left: 50%;
     width: 25%;

src/renderer/components/item-card/item-card-controls.tsx

@@ -236,18 +236,18 @@ export const ItemCardControls = ({
             {controls?.onPlay && (
                 <>
                     <PlayButton
-                        classNames={clsx(styles.primary)}
+                        classNames={clsx(styles.playButton, styles.primary)}
                         onClick={playNowHandler}
                         onLongPress={playShuffleHandler}
                     />
                     <PlayButton
-                        classNames={clsx(styles.secondary, styles.left)}
+                        classNames={clsx(styles.playButton, styles.secondary, styles.left)}
                         icon="mediaPlayNext"
                         onClick={playNextHandler}
                         onLongPress={playNextShuffleHandler}
                     />
                     <PlayButton
-                        classNames={clsx(styles.secondary, styles.right)}
+                        classNames={clsx(styles.playButton, styles.secondary, styles.right)}
                         icon="mediaPlayLast"
                         onClick={playLastHandler}
                         onLongPress={playLastShuffleHandler}

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

@@ -94,52 +94,52 @@
 
 .play-button {
     all: unset;
-    position: absolute;
-    top: 50%;
     display: flex;
     align-items: center;
     justify-content: center;
+    width: 48px;
+    height: 48px;
+    overflow: visible;
     background-color: #fff;
     border: none;
     border-radius: 100%;
+    isolation: isolate;
     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;
+    --play-button-scale: 1;
+    --long-press-duration: 500ms;
 
     &::before {
-        content: '';
         position: absolute;
         top: 50%;
         left: 50%;
+        z-index: 0;
         width: 100%;
         height: 100%;
+        pointer-events: none;
+        content: '';
         background-color: var(--theme-colors-primary);
         border-radius: 50%;
-        transform: translate(-50%, -50%) scale(0);
         opacity: 1;
+        transform: scale(0);
         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;
+        animation: expand-long-press var(--long-press-duration) linear 100ms forwards;
     }
 
     &:hover {
         opacity: 1;
-        transform: translate(-50%, -50%) scale(1.1);
+        transform: scale(1.1);
     }
 
     &:active {
         opacity: 1;
-        transform: translate(-50%, -50%) scale(0.9);
+        transform: scale(0.9);
     }
 
     svg {
@@ -149,14 +149,26 @@
     }
 }
 
+.play-button.fill {
+    svg {
+        fill: rgb(0 0 0);
+    }
+}
+
+.play-button.secondary {
+    width: 32px;
+    height: 32px;
+}
+
 @keyframes expand-long-press {
     0% {
-        transform: translate(-50%, -50%) scale(0);
         opacity: 0.2;
+        transform: translate(-50%, -50%) scale(0);
     }
+
     100% {
-        transform: translate(-50%, -50%) scale(1.05);
         opacity: 0.8;
+        transform: translate(-50%, -50%) scale(1.05);
     }
 }
 

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

@@ -9,6 +9,7 @@ import { ActionIcon, ActionIconProps } from '/@/shared/components/action-icon/ac
 import { Button, ButtonProps } from '/@/shared/components/button/button';
 import { Group } from '/@/shared/components/group/group';
 import { AppIcon, Icon } from '/@/shared/components/icon/icon';
+import { Spinner } from '/@/shared/components/spinner/spinner';
 
 export interface DefaultPlayButtonProps extends ActionIconProps {
     size?: number | string;
@@ -76,14 +77,24 @@ export const WideShuffleButton = ({ ...props }: TextPlayButtonProps) => {
 
 interface PlayButtonProps {
     classNames?: string;
+    fill?: boolean;
     icon?: keyof typeof AppIcon;
+    isSecondary?: boolean;
     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) => {
+    ({
+        classNames,
+        fill,
+        icon = 'mediaPlay',
+        isSecondary,
+        loading,
+        onClick,
+        onLongPress,
+    }: PlayButtonProps) => {
         const clickHandlers = usePlayButtonClick({
             loading,
             onClick,
@@ -92,11 +103,14 @@ export const PlayButton = memo(
 
         return (
             <button
-                className={clsx(styles.playButton, classNames)}
+                className={clsx(styles.playButton, classNames, {
+                    [styles.fill]: fill,
+                    [styles.secondary]: isSecondary,
+                })}
                 {...clickHandlers.handlers}
                 {...clickHandlers.props}
             >
-                <Icon icon={icon} size="lg" />
+                {loading ? <Spinner color="black" /> : <Icon icon={icon} size="lg" />}
             </button>
         );
     },