Webtorrent-desktop: Torrent list design

[bertofer]

As started to discuss here, I start this thread to talk about the torrent list design issues and improvements. These are the two current tasks

• [ ] Clarify download status (see #715)
• [ ] Clarify that torrents can be expanded / collapsed

Here is a first try to improve the first one, using a pause icon on hover of torrenting button.

@iovis9 had the idea of moving play button to the left side of the torrent title, also. Will try that and post here any result to discuss.

[bertofer]

Did some hacking to try to put the play button on the left, and also pause on hover on the download/seed buttons. Felt a bit weird that the metadata is 'displaced' to the right when hovering, so did a version also where the metadata is automatically leaving space for a possible Play button. I leave some screenshots:

before

after with hover

after without hover

After with metadata with default left padding (Best option for me)

We could cut by 60px by default on the right as well., keeping a 60px horizontal padding on both sides, and increasing on hover for the rest of the buttons.

Here's my fork with the commits to try it https://github.com/bertofer/webtorrent-desktop

[bertofer]

Also ,I came with an idea for the progress bar, just photoshoped for now, let me know what you think

With translucid background (Best one for me)

Without background

[iovis]

I like the one with the translucent background best :)

And I think separating the Play Video button and the Pause/Download torrent button is a good idea for easier understanding.

If I may suggest something: Does it need that many colors? I think the Pause/Download Torrent button could be more like the Delete button just next to it. I like having a big red Play button so the user is attracted to it as the primary action, but pausing the torrent sounds like something much more secondary. I don't think it qualifies for having another color. Also, lots of "screaming for attention" interfaces with vivid colors kind of defeats the purpose of guiding the user through the main usage.

I'd try maybe removing the circular background for the pause button and giving it the same color as the close button. Maybe the circular background could be used for hover, with different _lightness_ (HSL) from the foreground color?

[dcposch]

Thanks for making this!

I especially like the thin progress bar that stretches all the way across the page.

I don't know about having the blue button turn into a pause logo. I think having a play logo and a pause logo visible at the same time might confuse users --- normally you always toggle between play and pause.

[bertofer]

@dcposch I will implement the progress bar then, while we think better solutions to solve the torrenting button concerns :)

PD: will wait for your PR to be merged so I can work on solid base

[dcposch]

@bertofer I wouldn't quite yet!

@feross was considering removing the progress bar entirely in a future release

[feross]

I think we should either remove the progress bar or make it really, really subtle. Torrents are all playable instantly in WebTorrent Desktop, so the progress really shouldn't matter that much.

Now, there's obviously a need to see it sometimes -- if you want to watch something later offline, for example. So we can keep it, but I think it should be like almost entirely transparent. Like really light gray.

[bertofer]

@feross I will do some image to show what you said before implementing, but I agree some subtle light grey progressbar should be enough. I just wouldn't remove it completely, as there's the case also when you download torrents that are not playable (Linux distro e.g.).

[feross]

@bertofer Yep, agree

[bertofer]

@feross Something like this? (progress bar hidden on completed torrents)

10% white opacity for background, 30% white opacity for the progress bar over the background. I can work on it and make PR if you like it

[feross]

I think the original two issues raised here are now resolved:

• [x] Clarify download status (see #715)
• [x] Clarify that torrents can be expanded / collapsed