Add play all button

[r3dArch]

Pull Request Type

• Bugfix
• Feature Implementation
• Documentation
• Other

Related issue

Closes #629

Description

This PR adds a button to the home tab, videos tab, shorts tab, and live tab of a channel to play all of the respective content based on the sorting selected. It also left justifies the content of the select container.

Screenshots

Before

After

Testing

• Requires Fix online playlist parsing & revert workaround with youtubei.js update #9325
• Go to any channel
• Home tab should have a play all button that opens a playlist with all channel content ordered by newest
• Videos, shorts, and live tabs should have a button that works similarly with their respective content and sorting
• The videos, shorts, and live tabs play all button should be hidden when not sorting by newest or most popular as youtube only has playlists for sorting by newest or most popular

Desktop

• OS: Arch Linux
• OS Version: Kernel 7.0.10-zen1-1-zen
• FreeTube version: 0.24.1

Additional context

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

#9325 is merged, please rebase into dev branch

[r3dArch]

@efb4f5ff-1298-471a-8973-3d47447115dc I think my changes are good, but something seems to be broken. Even using the main development branch the sort selection drop down doesn't show up. I'm going to look into it now.

[r3dArch]

I forgot to pull the latest changes from the main repo. Everything seems to be good now.

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

Please revert the placement of the Sort By dropdown.
Also put the Play All button the the left of the dropdown

[r3dArch]

How is this?

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

The placement on the Home tab feels a bit weird to me. It being to the right is fine but its too high. I think aligning the height of the button to match the height of the header of the Videos section would be better.

Before you make this change. Could you please answer the following question (it could be the change above isnt needed depending on the answer). What is the reason you placed the Play All button on the Home page in the first place? The Videos tab Play All button brings me to the same playlist so it feels a bit unnecessary but i could be missing something here.

[r3dArch]

The play all button on the home tab should play all of a channels content; so if they have videos, shorts, and live content it should all be mixed together. I see what you mean about the look, but I don't quite understand your suggested change. Are you saying to have the button at the same level as the videos text?

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

The play all button on the home tab should play all of a channels content; so if they have videos, shorts, and live content it should all be mixed together

You are right. I somehow didnt notice it the first time and thought it was the same.

Are you saying to have the button at the same level as the videos text?

Correct

[r3dArch]

To make this change I've been looking at the channel home more closely and it seems that each shelf usually has a playlist button which would link to the respective content, so it might be confusing if it was positioned there. What do you think about putting it in the channel details since it plays all of a channels content?

[absidue]

Most people will want just the videos, shorts or live streams, not everything mixed together, so I would get rid of the play all uploads button entirely.

Additionally instead of having a separate button for each tab, I would simplify it to one button in the template, with a v-if (we only use v-show on the FtSelect components so that they maintain their state correctly when the user switches tabs) that points to a computed that decides whether that one button should be shown or not (e.g. with a switch statement) and then instead of defining the click handler inline it could be single function in the script section which uses the current tab and sort by information to send it to the correct URL. That makes the template easier to read and avoids Vue having to re-calculate and re-render the button every time the tab is changed (it will only need to make changes when the button gets shown or hidden).

[r3dArch]

@absidue I made the requested changes, please let me know if you want it done any differently. Thank you for the explanation of v-if and v-show; I had not worked with Vue before this.