Frontend: Add a first page and previous page buttons for channel navigation

[RadoslavL]

Fixes: #660 I want to be awarded the bounty associated to the issue this PR is fixing.

This works in all channel content categories (videos, shorts, playlists, etc). I also added translations of the button text to a couple of locales.

Update: The code now supports both a previous page button (using Javascript) and a first page button. When the browser doesn't support Javascript, the first page button is used instead of the previous page button. All credit for the previous page button goes out to @syeopite for providing the Javascript code. (I modified it a bit to make the variable names the same as the ones used in my old code, but the structure is exactly the same.)

[syeopite]

I don't think adding a previous page button is possible

You actually can! It's just a bit more complicated than a first page button though.

As said in the issue, you'll just have to cache the continuation tokens. Though something that's not mentioned is that you'll probably also need a sanity check on the continuation tokens if you aren't caching it in the URL due to the browsers "back" feature.

I have a branch that implements this functionality through JS and session storage here. Feel free to take what you want in there if you'd like to implement this 😁

[RadoslavL]

I don't think adding a previous page button is possible

You actually can! It's just a bit more complicated than a first page button though.

As said in the issue, you'll just have to cache the continuation tokens. Though something that's not mentioned is that you'll probably also need a sanity check on the continuation tokens if you aren't caching it in the URL due to the browsers "back" feature.

I have a branch that implements this functionality through JS and session storage here. Feel free to take what you want in there if you'd like to implement this 😁

Yes, I knew there was a way to do it with cookies and/or session storage. The main problem with that is that this requires JavaScript. I thought Invidious was supposed to be JS free, that's why I never considered that solution. Thank you for the reply! I will see if I can implement this using JavaScript.

[syeopite]

Invidious is supposed to work without Javascript but (at least in my opinion) pure quality of life features can be safely locked behind JS. A previous page button would certainly fall under that category.

[RadoslavL]

@syeopite I created the previous page button in my fork. Do I create another PR for the new code, or wait for this one to get merged?

Edit: I noticed that at some point the URI becomes too long and Invidious just outputs "414 URI Too Long". ~~I don't think there is a way around that.~~ I think I might be able to make a solution, but it's only an idea at this point.

Update: I got it working. There is more to do, but it will probably work.

Update 2: This isn't the solution. I got a "431 Request Header Fields Too Large" error. The array of continuations becomes quite large.

[syeopite]

@syeopite I created the previous page button in my fork. Do I create another PR for the new code, or wait for this one to get merged?

You can just put it into this PR.

Update...

Exactly. If I'm not mistake caching the continuation tokens client side with Javascript is really the only way to accomplish this. Sending the data back and forth through various means will not only impact performance significantly, you'll also reach the maximum length limitations when you aren't caching it in the body directly.

Unless you are caching it in session storage I'll recommend just keeping with the first page button.

If you are going to cache it in session storage then feel free to just integrate my implementation (you can have the bounty) or something like it into this PR and do something like the following to merge it together smoothly:

1. Make the previous page button optional through the preferences page
2. Use a first page button when the aforementioned is turned off or when JavaScript is disabled

[RadoslavL]

@syeopite I added the user preferences option, that chooses which navigation button to use. You can now switch between them.

[RadoslavL]

Bump.