optimize library headers (#1374)

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

@@ -4,12 +4,14 @@ import { forwardRef, memo } from 'react';
 
 import styles from './play-button.module.css';
 
+import { PlayTooltip } from '/@/renderer/features/shared/components/play-button-group';
 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 { AppIcon, Icon } from '/@/shared/components/icon/icon';
 import { Spinner } from '/@/shared/components/spinner/spinner';
+import { Play } from '/@/shared/types/types';
 
 export interface DefaultPlayButtonProps extends ActionIconProps {
     size?: number | string;
@@ -36,14 +38,18 @@ export const DefaultPlayButton = forwardRef<HTMLButtonElement, DefaultPlayButton
 
 DefaultPlayButton.displayName = 'DefaultPlayButton';
 
-interface TextPlayButtonProps extends ButtonProps {}
+interface TextPlayButtonProps extends ButtonProps {
+    onLongPress?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    showTooltip?: boolean;
+}
 
 export const PlayTextButton = ({
     className,
+    showTooltip = true,
     variant = 'default',
     ...props
 }: TextPlayButtonProps) => {
-    return (
+    const button = (
         <Button
             className={clsx(styles.wideTextButton, className, {
                 [styles.unthemed]: variant !== 'filled',
@@ -57,12 +63,64 @@ export const PlayTextButton = ({
         >
             {props.children || (
                 <Group gap="sm" wrap="nowrap">
-                    <Icon fill="default" icon="mediaPlay" size="lg" />
+                    <Icon icon="mediaPlay" size="lg" />
                     {t('player.play', { postProcess: 'sentenceCase' })}
                 </Group>
             )}
         </Button>
     );
+
+    const hasLongPress = Boolean(
+        props.onLongPress || (props as any).onMouseDown || (props as any).onTouchStart,
+    );
+
+    if (hasLongPress && showTooltip) {
+        return <PlayTooltip type={Play.NOW}>{button}</PlayTooltip>;
+    }
+
+    return button;
+};
+
+export const PlayNextTextButton = ({ ...props }: TextPlayButtonProps) => {
+    const button = (
+        <PlayTextButton {...props} showTooltip={false}>
+            <Group gap="sm" wrap="nowrap">
+                <Icon className={styles.noFill} icon="mediaPlayNext" size="lg" />
+                {t('player.addNext', { postProcess: 'sentenceCase' })}
+            </Group>
+        </PlayTextButton>
+    );
+
+    const hasLongPress = Boolean(
+        props.onLongPress || (props as any).onMouseDown || (props as any).onTouchStart,
+    );
+
+    if (hasLongPress) {
+        return <PlayTooltip type={Play.NEXT}>{button}</PlayTooltip>;
+    }
+
+    return button;
+};
+
+export const PlayLastTextButton = ({ ...props }: TextPlayButtonProps) => {
+    const button = (
+        <PlayTextButton {...props} showTooltip={false}>
+            <Group gap="sm" wrap="nowrap">
+                <Icon className={styles.noFill} icon="mediaPlayLast" size="lg" />
+                {t('player.addLast', { postProcess: 'sentenceCase' })}
+            </Group>
+        </PlayTextButton>
+    );
+
+    const hasLongPress = Boolean(
+        props.onLongPress || (props as any).onMouseDown || (props as any).onTouchStart,
+    );
+
+    if (hasLongPress) {
+        return <PlayTooltip type={Play.LAST}>{button}</PlayTooltip>;
+    }
+
+    return button;
 };
 
 export const WideShuffleButton = ({ ...props }: TextPlayButtonProps) => {