Feature: Shuffle Button (#941)

This commit is contained in:
Hans Yulian 2025-06-09 16:02:03 +07:00 committed by GitHub
parent c20e30e387
commit aba64b10d0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 43 additions and 0 deletions

View file

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

View file

@ -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,

View file

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

View file

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