WebTorrent: UI Redesign

[feross]

This issue is for discussing a UI redesign for the WebTorrent extension. @rossmoody did some amazing work on some mockups in this comment: brave/brave-core#3003 (comment) which are a great starting point.

Goals

• Modernize and cleanup the design
• Show better indicators of download progress (including individual file progress)
• Offer "Save All Files..." functionality (WebTorrent: Add "Save All Files..." feature #1230)
• Indicate which files are viewable/playable immediately in the browser (play icon?)
• Any other goals?

[rossmoody]

Depending how much we want to break this down per issues (and I would defer but I'd like to help where i can) I think if we use the following screens as a baseline then maybe something like:

• Refine UI structure and style (larger initial restructure with tbd subtasks like new components and sunset Brave UI dependencies)
• Component states, responsiveness and accessibility refinement
• Set up theming variables
• Hook up theming to Brave theme provider
• Show better indicators of download progress (including individual file progress)
• Offer "Save All Files..." functionality (WebTorrent: Add "Save All Files..." feature #1230)
• Indicate which files are viewable/playable immediately in the browser (play icon?)
• Open in new tab button (for media of tbd type)
• Indicate a disabled version of media buttons until content is ready

[rebron]

I suspect long file names will be the usual and we'll see wrapping more often than not. Maybe wider on the filename? Design looks really nice.

[rossmoody]

that's so true. maybe some type of character limit and then institute truncation? could be a nice accessibility feature to fill the title attr of the truncated text with some type of automation.

[feross]

I implemented the design in HTML + CSS ✨ It looks great!

Click to zoom. 🔎