Add Play All and Shuffle Button

[JL0000]

Add Play All and Shuffle Button

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

#5618

Description

Added Play all and Shuffle buttons to both user and youtube playlists.
Clicking on Play all always plays the first video in the playlist.
Clicking on Shuffle plays a random video in the playlist and toggles shuffle mode on.

Screenshots

Before

User Playlist


Youtube Playlist

After

User Playlist


Youtube Playlist

Testing

Play all plays the first video after video order is changed.
Shuffle works as intended after a video is deleted whilst playing through the playlist.
Shuffle resets the playlist after adding a new video whilst it is playing its last item in the iteration. This behaviours is inherited from the development branch.

Desktop

• OS: MacOs
• OS Version: 15.1
• FreeTube version: v0.22.0 Beta

Additional context

[efb4f5ff-1298-471a-8973-3d47447115dc]

Everything looks good but i did notice this error when entering an empty playlist.

VirtualBoxVM_l8o7eOKNHE.mp4

[JL0000]

I have fixed this error and I have hid the buttons when the playlist is empty.

[PikachuEXE]

I don't think the buttons should be shown in edit mode

I will fix other buttons/inputs myself later

[kommunarr]

suggestion (non-blocking): I'd ideally like it if on a desktop view breakpoint for the grid view playlist page, the top row became a flex container with the icons on the left and the new buttons on the right. This way the fixed container wouldn't have to be as tall.

discussion: I do also think that all of our icons should have visible labels, not just these two, for accessibility & ease of use reasons. That said, that's no reason to not have them here, just that in the future I recommend that all of these buttons become of the same type, with optionally the same positioning differences kept if we feel like it.

[efb4f5ff-1298-471a-8973-3d47447115dc]

I do also think that all of our icons should have visible labels, not just these two, for accessibility & ease of use reasons. That said, that's no reason to not have them here, just that in the future I recommend that all of these buttons become of the same type, with optionally the same positioning differences kept if we feel like it.

This is a signal boost for #4950 and i like the member to chime in on that PR. I think it would be a good improvement.

[JL0000]

suggestion (non-blocking): I'd ideally like it if on a desktop view breakpoint for the grid view playlist page, the top row became a flex container with the icons on the left and the new buttons on the right. This way the fixed container wouldn't have to be as tall.

So I tried this out and it turned out fine

On a public playlist, because playlistOptionsWrapper was moved out of channelShareWrapper (the new buttons in the playlistOptionsWrapper will push playlistChannel to the left), the copy and share buttons will not be to the immediate right of the channel name. Is this fine?

[efb4f5ff-1298-471a-8973-3d47447115dc]

Getting this error when opening up FT

[efb4f5ff-1298-471a-8973-3d47447115dc]

Thoughts:

Playlist Grid view: To it seems a bit weird that the Secondary color theme colors are divided by the red icons. Maybe place the buttons to the left of the bookmark icon so that its grouped by color?

Channel playlist view: Would maybe look nicer if the buttons are placed to the left of the copy and share link buttons

Playlist List view: The suggestion above cant be applied here as there isnt space for it. I do think that it kind of looks off when sitting between the icons above and the searchbar but im not sure if it can be made to look 'nicer'

[JL0000]

I tried a few things and I think the best it looked was grid mode not changing but list mode having centered buttons.