Feature: Shuffle Button (#941)

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}

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,

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={() => {

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 })}