From aba64b10d0f9e908eb4fc824b1df36c28ef1f2f4 Mon Sep 17 00:00:00 2001
From: Hans Yulian <10959546+hansyulian@users.noreply.github.com>
Date: Mon, 9 Jun 2025 16:02:03 +0700
Subject: [PATCH] Feature: Shuffle Button (#941)

---
 .../search/components/library-command-item.tsx   | 16 ++++++++++++++++
 src/renderer/features/shared/utils.ts            |  4 ++++
 .../sidebar/components/sidebar-playlist-list.tsx | 16 ++++++++++++++++
 .../components/song-list-header-filters.tsx      |  7 +++++++
 4 files changed, 43 insertions(+)

diff --git a/src/renderer/features/search/components/library-command-item.tsx b/src/renderer/features/search/components/library-command-item.tsx
index f408af4f..c497e159 100644
--- a/src/renderer/features/search/components/library-command-item.tsx
+++ b/src/renderer/features/search/components/library-command-item.tsx
@@ -7,6 +7,7 @@ import {
     RiAlbumFill,
     RiPlayFill,
     RiPlayListFill,
+    RiShuffleFill,
     RiUserVoiceFill,
 } from 'react-icons/ri';
 import styled from 'styled-components';
@@ -168,6 +169,21 @@ export const LibraryCommandItem = ({
                 >
                     <RiPlayFill />
                 </Button>
+                {itemType !== LibraryItem.SONG && (
+                    <Button
+                        compact
+                        disabled={disabled}
+                        onClick={(e) => handlePlay(e, id, Play.SHUFFLE)}
+                        size="md"
+                        tooltip={{
+                            label: t('player.shuffle', { postProcess: 'sentenceCase' }),
+                            openDelay: 500,
+                        }}
+                        variant="default"
+                    >
+                        <RiShuffleFill />
+                    </Button>
+                )}
                 <Button
                     compact
                     disabled={disabled}
diff --git a/src/renderer/features/shared/utils.ts b/src/renderer/features/shared/utils.ts
index a3fe3ef8..e92ce7f7 100644
--- a/src/renderer/features/shared/utils.ts
+++ b/src/renderer/features/shared/utils.ts
@@ -6,6 +6,10 @@ export const PLAY_TYPES = [
         label: i18n.t('player.play', { postProcess: 'sentenceCase' }),
         play: Play.NOW,
     },
+    {
+        label: i18n.t('player.shuffle', { postProcess: 'sentenceCase' }),
+        play: Play.SHUFFLE,
+    },
     {
         label: i18n.t('player.addLast', { postProcess: 'sentenceCase' }),
         play: Play.LAST,
diff --git a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
index c61bcefb..6e36d82d 100644
--- a/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
+++ b/src/renderer/features/sidebar/components/sidebar-playlist-list.tsx
@@ -8,6 +8,7 @@ import {
     RiArrowDownSLine,
     RiArrowUpSLine,
     RiPlayFill,
+    RiShuffleFill,
 } from 'react-icons/ri';
 import { generatePath } from 'react-router';
 import { Link } from 'react-router-dom';
@@ -138,6 +139,21 @@ const PlaylistRow = ({ data, index, style }: ListChildComponentProps) => {
                     >
                         <RiPlayFill />
                     </Button>
+                    <Button
+                        compact
+                        onClick={() => {
+                            if (!data?.items?.[index].id) return;
+                            data.handlePlay(data?.items[index].id, Play.SHUFFLE);
+                        }}
+                        size="md"
+                        tooltip={{
+                            label: t('player.shuffle', { postProcess: 'sentenceCase' }),
+                            openDelay: 500,
+                        }}
+                        variant="default"
+                    >
+                        <RiShuffleFill />
+                    </Button>
                     <Button
                         compact
                         onClick={() => {
diff --git a/src/renderer/features/songs/components/song-list-header-filters.tsx b/src/renderer/features/songs/components/song-list-header-filters.tsx
index 0d06d685..a35629f9 100644
--- a/src/renderer/features/songs/components/song-list-header-filters.tsx
+++ b/src/renderer/features/songs/components/song-list-header-filters.tsx
@@ -13,6 +13,7 @@ import {
     RiPlayFill,
     RiRefreshLine,
     RiSettings3Fill,
+    RiShuffleFill,
 } from 'react-icons/ri';
 
 import i18n from '/@/i18n/i18n';
@@ -594,6 +595,12 @@ export const SongListHeaderFilters = ({
                         >
                             {t('player.play', { postProcess: 'sentenceCase' })}
                         </DropdownMenu.Item>
+                        <DropdownMenu.Item
+                            icon={<RiShuffleFill />}
+                            onClick={() => handlePlay?.({ playType: Play.SHUFFLE })}
+                        >
+                            {t('player.shuffle', { postProcess: 'sentenceCase' })}
+                        </DropdownMenu.Item>
                         <DropdownMenu.Item
                             icon={<RiAddBoxFill />}
                             onClick={() => handlePlay?.({ playType: Play.LAST })}