Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Subscribe/Unsubscribe UI rework #118

Closed
dimqua opened this issue Aug 17, 2018 · 11 comments

Comments

@dimqua
Copy link
Contributor

commented Aug 17, 2018

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

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

This comment has been minimized.

Copy link

commented Aug 17, 2018

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

This comment has been minimized.

Copy link
Owner

commented Aug 17, 2018

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

This comment has been minimized.

Copy link

commented Aug 17, 2018

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

This comment has been minimized.

Copy link
Owner

commented Aug 17, 2018

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

@omarroth

This comment has been minimized.

Copy link
Owner

commented Oct 13, 2018

Added with 1a39fae.

@Discookie

This comment has been minimized.

Copy link

commented Oct 13, 2018

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

This comment has been minimized.

Copy link
Owner

commented Oct 13, 2018

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

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

This comment has been minimized.

Copy link
Contributor Author

commented Oct 19, 2018

@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

This comment has been minimized.

Copy link
Contributor Author

commented Oct 19, 2018

@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

This comment has been minimized.

Copy link

commented Oct 20, 2018

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

This comment has been minimized.

Copy link
Owner

commented Oct 20, 2018

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:
image

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
4 participants
You can’t perform that action at this time.