Add a shuffle button to shuffle tracks that are in the queue

[miki-tebe]

Problem

Wanted to shuffle tracks that are in queue

Solution

Using the loadash shuffle function added a simple shuffle utility and dispatch it when the newly added shuffle button is clicked.

Action

As a first time contributor, i will need some help with reviews and comments. Especially with tests.

[MonkeyDo]

Thank you for opening a PR for this !
Looks like a good feature we are missing!

As I wrote below, I think the shuffle mechanism should be changed in favor of a "shuffle mode" users can turn on or off.

Don't hesitate if you have any questions

[MonkeyDo]

This !isMobile part tells you this is only displayed on large screen sizes.

You'll also need to add a button to the mobile UI, that is the MusicPlayer component, between the toggleQueue and toggleRepeatMode buttons, using the PlaybackControlButton component, with a color based on the boolean state currently missing (shuffle on or off):

listenbrainz-server/frontend/js/src/common/brainzplayer/MusicPlayer.tsx

Lines 337 to 365 in f9c9198

	<div className="player-buttons secondary">
	<FeedbackButtons
	currentListenFeedback={currentListenFeedback}
	isPlayingATrack={isPlayingATrack}
	submitLikeFeedback={submitLikeFeedback}
	submitDislikeFeedback={submitDislikeFeedback}
	/>
	<PlaybackControlButton
	className="toggle-queue-button"
	action={toggleQueue}
	title="Queue"
	icon={faBarsStaggered}
	size="xl"
	/>
	<PlaybackControlButton
	className={queueRepeatMode.title}
	action={toggleRepeatMode}
	title={queueRepeatMode.title}
	icon={queueRepeatMode.icon}
	color={queueRepeatMode.color}
	size="xl"
	/>
	<PlaybackControlButton
	action={toggleShowVolume}
	title="Volume"
	icon={faVolumeUp}
	size="xl"
	/>
	</div>

[MonkeyDo]

While I appreciate your solution, I think this is not what users will expect from a music player. Normally, in all cases I remember using a shuffle option, instead of instantly shuffling the queue, activating "shuffle mode" will instead change the selection process for the next track, making it random, without visually affecting the queue.

So I think this action should be called SHUFFLE_MODE and should store a boolean state for the same shuffleMode.

Then the random picking would need to happen in the playNextTrack method in BrainzPlayer component:

listenbrainz-server/frontend/js/src/common/brainzplayer/BrainzPlayer.tsx

Line 545 in f9c9198

const playNextTrack = (invert: boolean = false): void => {

This method should access the value of shuffle mode in the brainzPlayerContext (brainzPlayerContextRef.current.shuffleMode in this case) and decide what to do depending on that boolean state.

[miki-tebe]

Thanks for the detailed review, your concept of shuffle totally makes sense. I will work on it and make the necessary changes.

[MonkeyDo]

Hello @miki-tebe !
Please let me know if you are still interested in working on this, otherwise I'll be happy to make the remaining changes to get it merged. Thanks !

[miki-tebe]

@MonkeyDo Sorry for the late reply, you should definitely take over. I can push the changes I had made but never finished if that helps in any way.

[MonkeyDo]

Thanks for pushing your changes @miki-tebe !

We are currently rewriting our state logic for BrainzPlayer so I will wait until that is finished to reimplement and finish off your shuffling logic.