add new context menu implementation

2026-05-16 21:50:35 +02:00 · 2025-11-15 04:22:06 -08:00
parent df125564c2
commit 12f2ae2008
47 changed files with 2826 additions and 1593 deletions
@@ -0,0 +1,73 @@
+import { useCallback } from 'react';
+import { useTranslation } from 'react-i18next';
+
+import { usePlayer } from '/@/renderer/features/player/context/player-context';
+import { useCurrentServerId } from '/@/renderer/store';
+import { ContextMenu } from '/@/shared/components/context-menu/context-menu';
+import { LibraryItem } from '/@/shared/types/domain-types';
+import { Play } from '/@/shared/types/types';
+
+interface PlayActionProps {
+    ids: string[];
+    itemType: LibraryItem;
+}
+
+export const PlayAction = ({ ids, itemType }: PlayActionProps) => {
+    const { t } = useTranslation();
+    const player = usePlayer();
+    const serverId = useCurrentServerId();
+
+    const handlePlay = useCallback(
+        (playType: Play) => {
+            if (ids.length === 0 || !serverId) return;
+            player.addToQueueByFetch(serverId, ids, itemType, playType);
+        },
+        [ids, itemType, player, serverId],
+    );
+
+    const handlePlayNow = useCallback(() => {
+        handlePlay(Play.NOW);
+    }, [handlePlay]);
+
+    const handlePlayNext = useCallback(() => {
+        handlePlay(Play.NEXT);
+    }, [handlePlay]);
+
+    const handlePlayLast = useCallback(() => {
+        handlePlay(Play.LAST);
+    }, [handlePlay]);
+
+    const handlePlayShuffled = useCallback(() => {
+        handlePlay(Play.SHUFFLE);
+    }, [handlePlay]);
+
+    if (ids.length === 0) return null;
+
+    return (
+        <ContextMenu.Submenu>
+            <ContextMenu.SubmenuTarget>
+                <ContextMenu.Item
+                    leftIcon="mediaPlay"
+                    onSelect={(e) => e.preventDefault()}
+                    rightIcon="arrowRightS"
+                >
+                    {t('player.play', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+            </ContextMenu.SubmenuTarget>
+            <ContextMenu.SubmenuContent>
+                <ContextMenu.Item leftIcon="mediaPlay" onSelect={handlePlayNow}>
+                    {t('player.play', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+                <ContextMenu.Item leftIcon="mediaPlayNext" onSelect={handlePlayNext}>
+                    {t('player.addNext', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+                <ContextMenu.Item leftIcon="mediaPlayLast" onSelect={handlePlayLast}>
+                    {t('player.addLast', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+                <ContextMenu.Item leftIcon="mediaShuffle" onSelect={handlePlayShuffled}>
+                    {t('player.shuffle', { postProcess: 'sentenceCase' })}
+                </ContextMenu.Item>
+            </ContextMenu.SubmenuContent>
+        </ContextMenu.Submenu>
+    );
+};