optimize library headers (#1374)

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

@@ -7,9 +7,12 @@ import { Link } from 'react-router';
 import styles from './library-header.module.css';
 
 import {
+    PlayLastTextButton,
+    PlayNextTextButton,
     PlayTextButton,
-    WideShuffleButton,
 } from '/@/renderer/features/shared/components/play-button';
+import { LONG_PRESS_PLAY_BEHAVIOR } from '/@/renderer/features/shared/components/play-button-group';
+import { usePlayButtonClick } from '/@/renderer/features/shared/hooks/use-play-button-click';
 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';
@@ -20,6 +23,7 @@ import { Image } from '/@/shared/components/image/image';
 import { Rating } from '/@/shared/components/rating/rating';
 import { Text } from '/@/shared/components/text/text';
 import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
 
 interface LibraryHeaderProps {
     children?: ReactNode;
@@ -145,36 +149,36 @@ export const LibraryHeader = forwardRef(
 
 const calculateTitleSize = (title: string) => {
     const titleLength = title.length;
-    let baseSize = '3.5dvw';
+    let baseSize = '3dvw';
 
     if (titleLength > 20) {
-        baseSize = '3dvw';
-    }
-
-    if (titleLength > 30) {
-        baseSize = '2.75dvw';
-    }
-
-    if (titleLength > 40) {
         baseSize = '2.5dvw';
     }
 
-    if (titleLength > 50) {
+    if (titleLength > 30) {
         baseSize = '2.25dvw';
     }
 
-    if (titleLength > 60) {
+    if (titleLength > 40) {
         baseSize = '2dvw';
     }
 
-    return `clamp(2rem, ${baseSize}, 3.25rem)`;
+    if (titleLength > 50) {
+        baseSize = '1.875dvw';
+    }
+
+    if (titleLength > 60) {
+        baseSize = '1.75dvw';
+    }
+
+    return `clamp(1.75rem, ${baseSize}, 2.75rem)`;
 };
 
 interface LibraryHeaderMenuProps {
     favorite?: boolean;
     onFavorite?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     onMore?: (e: React.MouseEvent<HTMLButtonElement>) => void;
-    onPlay?: (e: React.MouseEvent<HTMLButtonElement>) => void;
+    onPlay?: (type: Play) => void;
     onRating?: (rating: number) => void;
     onShuffle?: (e: React.MouseEvent<HTMLButtonElement>) => void;
     rating?: number;
@@ -186,7 +190,6 @@ export const LibraryHeaderMenu = ({
     onMore,
     onPlay,
     onRating,
-    onShuffle,
     rating,
 }: LibraryHeaderMenuProps) => {
     const isMutatingRating = useIsMutatingRating();
@@ -194,11 +197,43 @@ export const LibraryHeaderMenu = ({
     const isMutatingDeleteFavorite = useIsMutatingDeleteFavorite();
     const isMutatingFavorite = isMutatingCreateFavorite || isMutatingDeleteFavorite;
 
+    const handlePlayNow = usePlayButtonClick({
+        onClick: () => {
+            onPlay?.(Play.NOW);
+        },
+        onLongPress: () => {
+            onPlay?.(LONG_PRESS_PLAY_BEHAVIOR[Play.NOW]);
+        },
+    });
+
+    const handlePlayNext = usePlayButtonClick({
+        onClick: () => {
+            onPlay?.(Play.NEXT);
+        },
+        onLongPress: () => {
+            onPlay?.(LONG_PRESS_PLAY_BEHAVIOR[Play.NEXT]);
+        },
+    });
+
+    const handlePlayLast = usePlayButtonClick({
+        onClick: () => {
+            onPlay?.(Play.LAST);
+        },
+        onLongPress: () => {
+            onPlay?.(LONG_PRESS_PLAY_BEHAVIOR[Play.LAST]);
+        },
+    });
+
     return (
         <div className={styles.libraryHeaderMenu}>
             <Group wrap="nowrap">
-                {onPlay && <PlayTextButton onClick={onPlay} />}
-                {onShuffle && <WideShuffleButton onClick={onShuffle} />}
+                {onPlay && <PlayTextButton {...handlePlayNow.handlers} {...handlePlayNow.props} />}
+                {onPlay && (
+                    <PlayNextTextButton {...handlePlayNext.handlers} {...handlePlayNext.props} />
+                )}
+                {onPlay && (
+                    <PlayLastTextButton {...handlePlayLast.handlers} {...handlePlayLast.props} />
+                )}
             </Group>
             <Group gap="sm" wrap="nowrap">
                 {onRating && (