Subscribe/Unsubscribe UI rework

[dimqua]

I think you can make the interface more clean by adding a button or just a link to subscribe to (unsubscribe from) a channel:

• video.author [Login to subscribe]
• video.author [Subscribe]
• video.author [Unsubscribe]

It should affect both /watch and /channel pages.

If it possible I would also add the total number of subscribers like YouTube does it:

And channel thumbnails can be helpful as well.

[Zero3K]

Oh, and maybe use javascript or something to send the "subscribe signal" to Invidious instead of relying on redirecting the user to the main page, etc.

[omarroth]

Sounds good!
I understand wanting to use javascript, but the main issue I have is that it won't work for people running any combination of NoScript, uMatrix, etc. I think the redirect system just needs to be fixed instead of replacing it with JS. I think that is a bigger issue with subscriptions than with comments (which are loaded with JS) because I consider subscriptions a core functionality of the site, so it should work for as many people as possible.

[Discookie]

But the thing is, it's very easy to load a script that replaces the current 'Subscribe' button with a non-redirecting one.
You can always send out the redirecting button by default, and send out a script that replaces/modifies it.
You can also test whether XHR's work once in a while, if scripts are enabled.

Or the very least, something could be worked out so that playback continues from the point you clicked subscribe.

[omarroth]

That's fair enough, I think I spoke too soon.

[omarroth]

Added with 1a39fae.

[Discookie]

Thanks for this!

I don't think the blue color fits for it though.
Currently this is the only 2 colored things on the site are the blue Subscribe button, and the Player volume slider on the Preferences page.* The rest is black / white / gray, depending on the color scheme.
I think a shade of light gray/dark gray would fit better than the current blue one.

• I misspoke, seems like some more buttons turned blue too, but my point still stands.

[omarroth]

That's true, although you could make the same argument for YouTube's interface:

I think it makes sense for a "call to action" per se to be in a contrasting color, trying out some of the other main colors (grey colors) used elsewhere don't seem as appropriate.

@dimqua has made some very nice improvements to the color scheme, I'd be curious if he has any thoughts on this.

[dimqua]

@omarroth Could you add channel thumbnails too?

Also I think it's better to replace Subscribe to video.author button with Subscribe button, like:

Besides, as you can see in the OP, there is an "official" mark after BBC News channel name, meaning that this channel isn't fake. Can we have it?

[dimqua]

@Discookie @omarroth What about these colors?

a.pure-button-primary {
    background-color: #a0a0a0;
    color: rgba(35, 35, 35, 1)
}

a.pure-button-primary:hover {
    background-color: rgba(0, 182, 240, 1);
    color: #fff;
}

[Discookie]

I'd personally go with #f0f0f0 for background color - the contrast is too low with a0 and I'm having trouble reading it.

Other than that, I like it, and I think it fits the site a lot better!

[omarroth]

I'd personally go with #f0f0f0 for background color - the contrast is too low with a0 and I'm having trouble reading it.

Only issue is with light theme, the button looks like this:

If it would be better to have seperate colors for light and dark themes, I'd be open to it. @dimqua's additions added with 3c634d9.