Home page redesign (unified downloads component, resizable thumbnails, and more)

[GlassedSilver]

I think the thumbnails are too small for my liking, at the very least I would prefer to display them similar to how YouTube displays them. Slightly bigger, the title being cut much later and being two rows, the channel name properly inserted...

Overall just a bit spiced up. To be honest, a complete copy of YouTube's layout at least in this regard would be much appreciated. Options are nice though, since personal preferences can differ greatly.

I also like displaying the run-time as a little black box with the time in white letters in the bottom right corner, the upload date (to the source, if available) below the channel name.

Maybe even a personal view counter (obviously as long as you use youtubedl-material's player, it cannot know external filesystem-level access.)

Maybe we could also make better use of the width of the page, so instead of a fixed ~680px(?) we could have 80-90% with a minimal fallback so one row is always displayed instead of being cut off, just with a scroll bar then.

[Tzahi12345]

I think the thumbnails are too small for my liking, at the very least I would prefer to display them similar to how YouTube displays them. Slightly bigger, the title being cut much later and being two rows, the channel name properly inserted...

You have a good point, the file cards right now are a fixed size so it kind of limits the scalability. It would be cool to have some kind of setting (big, medium, small) for the cards.

Also, the subscription file cards would also need to be updated separately to support this. As of now, they are bigger than the ones in the file manager (don't ask me why I didn't unify the file cards into one component lol)

I also like displaying the run-time as a little black box with the time in white letters in the bottom right corner, the upload date (to the source, if available) below the channel name.

Maybe even a personal view counter (obviously as long as you use youtubedl-material's player, it cannot know external filesystem-level access.)

All of this seems relatively easy! A bit confused on the upload date, do you mean the video upload date or the time of subscription?

Maybe we could also make better use of the width of the page, so instead of a fixed ~680px(?) we could have 80-90% with a minimal fallback so one row is always displayed instead of being cut off, just with a scroll bar then.

Yeah, looking at YouTube's UI they definitely make better use of the page width (with massive thumbnails). It's still 4 videos per row on my 1080p monitor, but it feels less cluttered.

If we increase the size of the file manager however, the URL input will small in comparison. Do you think this is ok, or should they be about the same size?

[GlassedSilver]

You have a good point, the file cards right now are a fixed size so it kind of limits the scalability. It would be cool to have some kind of setting (big, medium, small) for the cards.

Yes! :)

Also, the subscription file cards would also need to be updated separately to support this. As of now, they are bigger than the ones in the file manager (don't ask me why I didn't unify the file cards into one component lol)

Why didn't you uni.... just kidding. :P

I also like displaying the run-time as a little black box with the time in white letters in the bottom right corner, the upload date (to the source, if available) below the channel name.

Maybe even a personal view counter (obviously as long as you use youtubedl-material's player, it cannot know external filesystem-level access.)

All of this seems relatively easy! A bit confused on the upload date, do you mean the video upload date or the time of subscription?

Video upload date indeed. So if Youtube says a video was published on June 2nd my youtubedl-material instance will reflect that as well. :)

I have some more layout ideas, but those can be worked in later and would clog up other tickets atm that are probably more urgent. Stuff like parsing info from the info json and making the player page show stuff like the original video description etc... basically the whole UI could be a bit more of a downloader+manager/organizer+player fusion that could serve as a neat little "YouTube replacement" relegating YT and other sites to mere dumb pipes...

daydreams in Animal Crossing animation style

Maybe we could also make better use of the width of the page, so instead of a fixed ~680px(?) we could have 80-90% with a minimal fallback so one row is always displayed instead of being cut off, just with a scroll bar then.

Yeah, looking at YouTube's UI they definitely make better use of the page width (with massive thumbnails). It's still 4 videos per row on my 1080p monitor, but it feels less cluttered.

If we increase the size of the file manager however, the URL input will small in comparison. Do you think this is ok, or should they be about the same size?

The downloader part should be two rows, preferably the min-width for the thumbnail section (not the thumbnails themselves, I mean the div containing the grid).

Left row is the URL input, right row is the options, etc...

Typical YouTube url lengths shouldn't be cut, so maybe we need a smaller text size for the text input field.

If the device's screen resolution (or window resolution) resizes the entire UI responsively then the downloader and thumbnail grid will also have even width and everything wraps into single row view. :)

The downloader panes should be grouped and centered. If the page becomes very wide (like a 1440p monitor maximized) then the downloader pane is sitting evenly spaced above the thumbnail grid.

Maybe we could also make the video thumbnails show always. Giving it a bit more the look to invite to discover and spend some time on the site?

Possibly the same for audios... A switch could toggle between "view both", "videos only" and "audio only"?

[Tzahi12345]

Video upload date indeed. So if Youtube says a video was published on June 2nd my youtubedl-material instance will reflect that as well. :)

Makes sense, adding more info may only be possible when the file card is big enough, simply because there might not be enough room otherwise (even adding just the date would squeeze a lot of info into a small space).

I have some more layout ideas, but those can be worked in later and would clog up other tickets atm that are probably more urgent. Stuff like parsing info from the info json and making the player page show stuff like the original video description etc... basically the whole UI could be a bit more of a downloader+manager/organizer+player fusion that could serve as a neat little "YouTube replacement" relegating YT and other sites to mere dumb pipes...

The player should be showing more info. A simple expansion panel that contains more info would be trivial to implement, so feel free opening an issue for that.

Regarding the big picture stuff (making it a YT replacement), I'm 100% on board but it will take some time and a lot of thought. Maybe a fundamental redesign of the home page where you have a feed of recent subscriptions/video downloads unified in one component, keeping the ability to go to one subscription or view all subscriptions as you can now. Just some thoughts.

Left row is the URL input, right row is the options, etc...

Do you mean columns? I think this may need a quick sketch to get a picture in my head. In general I want the URL input component (the whole card) to remain above the files to make the hierarchy clear (you first download videos, then view those videos below), but I'm not set on this either.

Moving the options to the side could be a good idea, but I still want the input to have a greater prominence than its options. I wonder how we can achieve both (maybe make the options smaller? it'll look asymmetrical then..)

Typical YouTube url lengths shouldn't be cut, so maybe we need a smaller text size for the text input field.

Agreed, this is also easy to solve (just gotta add font-size: 12px or whatever else to the input).

Maybe we could also make the video thumbnails show always. Giving it a bit more the look to invite to discover and spend some time on the site?

Possibly the same for audios... A switch could toggle between "view both", "videos only" and "audio only"?

I think these two ideas fit well into my "feed" idea I mentioned above. A simple icon can distinguish audio and video files, and subscriptions, and there can be dropdowns for filtering (e.g. view audio-only)

Maybe we'll end up at something like this:

[GlassedSilver]

Video upload date indeed. So if Youtube says a video was published on June 2nd my youtubedl-material instance will reflect that as well. :)

Makes sense, adding more info may only be possible when the file card is big enough, simply because there might not be enough room otherwise (even adding just the date would squeeze a lot of info into a small space).

Well if Youtube's design is copied, that's implicated automatically. And I really think that YT's layout and design of cards right now at the time of writing this makes the most sense.

Also I recently noticed there is an HTML5 implementation of the hover effect for cover art inspired by Steam. I think the way Steam animates the hovering of what would be video thumbnails in our context here is incredible and makes the experience more haptical and brings the content closer to the user. The feel of "physical ownership" impressive, when all you're looking at is digital content. Steam has really outdone themselves here.

Link to the HTML5 sample along with CSS and JS that could be implemented.

I have some more layout ideas, but those can be worked in later and would clog up other tickets atm that are probably more urgent. Stuff like parsing info from the info json and making the player page show stuff like the original video description etc... basically the whole UI could be a bit more of a downloader+manager/organizer+player fusion that could serve as a neat little "YouTube replacement" relegating YT and other sites to mere dumb pipes...

The player should be showing more info. A simple expansion panel that contains more info would be trivial to implement, so feel free opening an issue for that.

I am not thinking of an expansion panel. Overall there is way too much nesting of information and options going on these days. Nest the advanced things fine, but video title, views, plays, description, date, etc... I think YT-like presentation of those aspects would serve the purpose best. Scrolling is all the nesting that needs to happen, much like how I scroll further down to watch at the description below the title. Maybe truncate the description after x lines if desired, placing a "Read more..." link to expand. That would make sense I guess.

Regarding the big picture stuff (making it a YT replacement), I'm 100% on board but it will take some time and a lot of thought. Maybe a fundamental redesign of the home page where you have a feed of recent subscriptions/video downloads unified in one component, keeping the ability to go to one subscription or view all subscriptions as you can now. Just some thoughts.

You being on board of this makes me really happy, because the longer I look into digesting the downloads into applications like Plex and the like the more I realize how unfit they can be for at least a good chunk of the content that I typically download from Youtube. Some content lends itself very well, but some doesn't. To have a one-stop-shop would be pure bliss and heaven.

And I agree about the home page getting such a redesign. Extra kudos if it can pick up personal viewing trends ([semi]-AI? idk, just thinking aloud).

Left row is the URL input, right row is the options, etc...

Do you mean columns? I think this may need a quick sketch to get a picture in my head. In general I want the URL input component (the whole card) to remain above the files to make the hierarchy clear (you first download videos, then view those videos below), but I'm not set on this either.

YES, I mean columns. Jolly Lord, I don't know how I messed that up. The vertical position stays the same.

I'll make a sketch for that!

Moving the options to the side could be a good idea, but I still want the input to have a greater prominence than its options. I wonder how we can achieve both (maybe make the options smaller? it'll look asymmetrical then..)

Typical YouTube url lengths shouldn't be cut, so maybe we need a smaller text size for the text input field.

Agreed, this is also easy to solve (just gotta add font-size: 12px or whatever else to the input).

Now my webdev is a bit rusty, but isn't defining pt better than px? DPI differences and such? But maybe I'm just out of the loop.

Maybe we could also make the video thumbnails show always. Giving it a bit more the look to invite to discover and spend some time on the site?

Possibly the same for audios... A switch could toggle between "view both", "videos only" and "audio only"?

I think these two ideas fit well into my "feed" idea I mentioned above. A simple icon can distinguish audio and video files, and subscriptions, and there can be dropdowns for filtering (e.g. view audio-only)

Maybe we'll end up at something like this:

YUP! Pretty much!

Maybe clicking on the URL field auto-extends a section where you get to ticket common advanced options (kinda the stuff that I usually set with custom-args, not to toot my own horn too much though haha).

[GlassedSilver]

Kindly ignore that I didn't use Material Design here, I just really cobbled something together to show the layout, not the style necessarily. Especially don't color-pick the colors, I paid zero attention to the values. :D

[Tzahi12345]

Link to the HTML5 sample along with CSS and JS that could be implemented.

So the material design library we use has great support for this. On hover, you can simply increase the elevation of the file cards. It will definitely add smoothness, it's something I've actually done before for another project.

I am not thinking of an expansion panel. Overall there is way too much nesting of information and options going on these days. Nest the advanced things fine, but video title, views, plays, description, date, etc... I think YT-like presentation of those aspects would serve the purpose best. Scrolling is all the nesting that needs to happen, much like how I scroll further down to watch at the description below the title. Maybe truncate the description after x lines if desired, placing a "Read more..." link to expand. That would make sense I guess.

You're probably right on this front, any essential info should be displayed, and only extra seldomly used metadata should be hidden from view. It will be interesting to deal with missing data on this front, as not all websites provide the same data. Shouldn't be a major issue, but for some sites there might be a lot of N/As going on.

And I agree about the home page getting such a redesign. Extra kudos if it can pick up personal viewing trends ([semi]-AI? idk, just thinking aloud).

Lol I think the AI is out of the scope for now (maybe v6.0 or something :P), but something simple like sort videos by # of personal plays, so you can get the most watched stuff could suffice.

Now my webdev is a bit rusty, but isn't defining pt better than px? DPI differences and such? But maybe I'm just out of the loop.

I gotta be honest, I have not tested YoutubeDL-Material on a 4K+ monitor, so you did get me thinking. And from this stackoverflow answer, I think we're in the clear. TLDR is pixels in CSS are not actual pixels, instead they do depend on resolution. The actual size of a CSS pixel in a high resolution display is likely multiple pixels, though this is probably something the browser handles.

Kindly ignore that I didn't use Material Design here, I just really cobbled something together to show the layout, not the style necessarily. Especially don't color-pick the colors, I paid zero attention to the values. :D

Wow, that screenshot you put together is honestly really helpful. Putting actual subscriptions on the sidebar is genius, no idea why I didn't steal that from YT earlier haha

More space for the videos is nice, a search bar for videos is something I've wanted to add for a while so it's good to see that there.

Couple thoughts: how do you feel about making the "advanced" options expansion panel a button that opens a dialog? I ask because otherwise the advanced options will need to span the entire URL input component (making it half length doesn't make too much sense to me).

Also, there might be users that don't use the category input, and would rather not clutter the URL input card with unneeded inputs. I want users to be able to customize it to their liking (which isn't possible now, hence why I hide the custom output/args stuff behind the panel). Allow customization is a big task, so it's probably out of the scope of this issue. But maybe users wouldn't care if 1 extra option is shown, it can just be ignored. Hm...

The "sketch" (really more of a prototype) you put together is awesome. I think we have this enhancement (almost) fleshed out by now, it's a great concept for a redesign and I'll queue it up for v4.2!

[GlassedSilver]

Will get back to you with some thoughts, I mostly know what to say, but I want to give some of your points more than just a few minutes of thinking. :)

As for the AI algorithms for video suggestions, yeah well, I think that's kinda the perfect "long stretch" goal if anything has ever been a good long stretch goal. :D

More than nice to have, but the urgency should be user experience on the basic levels and focusing on proofing youtubedl-material for the archiving purpose so data that is otherwise lost to Google's deletion policies or uploaders removing them is being tackled, for those issues we cannot find a solution after the fact. :)

Can't organize something that you never were able to obtain. :P

[Tzahi12345]

Slight issue with the sidenav, while adding an image would be possible here, I don't think it's possible for us to grab the thumbnail for the channel. As a result, we'll have to stick with the letters on a colored background:

This isn't the final design for the sidenav, I want to cut off the subscription name at some point. Anyways, I'll update this thread as the redesign keeps coming along.

[GlassedSilver]

Hmm, well there's one thing I've been thinking about for a good while now and that is scraping channel design. (icon, channel banner, channel about, in case of other pages than Youtube respective counterparts/replacements and other things).

I think this could work in a sort of plug-in style sort of system. It'd also be versioned, so if a channel changes name, previous names could be kept in an equivalent to danbooru's "other names", channel banners can be kept throughout history, channel abouts, etc...

So you could flick through the history of the channel design macOS "Time Machine" style if you get that reference. :)

In such a case I think chrome-headless might supply us with the means to scrape this.

However, I'm going on a tangent here that is a bit off-topic. Could be a good separate issue if you want me to lay out the idea a little better and maybe show some concepts of how I've been thinking this could be made. :)

Edit: Another thought, on the home page I'd keep the sidebar open unless manually closed. In the video player view it should be collapsed and manually open when clicking the three-lines button.

Reason is that on the homepage the sidebar is hardly stealing any attention or focus, the homepage is mostly an area of discovery and adding an URL to download. The sidebar is discovery as well and not really distracting here.

On the player view, the sidebar would steal vertical space, so we'd best auto-hide it there. This is also how YouTube does and whilst I love to sh** on YT for their redesigns just like the next guy, they do get a lot of things right. :D This for example I believe they handle very correctly. When the vertical view area is too narrow, it will always auto-hide, no matter where you are. (e.g.: try shrinking your window, it's really nice how they worked in just enough responsive design on the desktop here to not be overly annoying but still accomplishing a job. I for example always have my YT windows barely wide enough to have the sidebar auto-show and high enough that the player view is 70-80% video and the rest is the top bar and below the player the video title and a little bit more. :) )

---

tfw you realize Google has done pretty well with YT's layout overall :P

[Tzahi12345]

However, I'm going on a tangent here that is a bit off-topic. Could be a good separate issue if you want me to lay out the idea a little better and maybe show some concepts of how I've been thinking this could be made. :)

I have to agree that it should lie in a separate issue, perhaps labeled "Scraping metadata using a headless browser." I'm resistant to including this in either this issue or #138 as it increases the scope of the project quite a bit and it acts as a prerequisite for some of these additional features (like getting the channel icon).

Organizing the different scraper functions into separate plugins would be a great idea, in that the scraper isn't necessary, it just helps getting helpful metadata when available.

Anyways, I'd love if you can expand this into its own issue, and list some potential plugins which can become their own issues as we get closer to implementing it (4.3, 4.4 ish)

Another thought, on the home page I'd keep the sidebar open unless manually closed. In the video player view it should be collapsed and manually open when clicking the three-lines button.

I'll definitely play around with this and see how it looks. I don't want ot take up too much space, but YouTube definitely seems to do this well. So you would like the all pages except the player to have it auto expanded?

One difference in this approach vs. the way we do it now is that the sidenav wouldn't overlay on top of the views, rather it would be a true side panel which can be shown or hidden. It's a simple change to make as Angular Material supports this too, so I'll see how it looks in practice.

[Tzahi12345]

Unified file card system is nearly done! Still need to implement a couple functions like video downloading for download-only mode and the ability to sort/search videos. There are small and medium sized cards, but no large ones yet. Here's a preview:

Small (you can see the sidebar now doesn't go over the screen, looks cool but I think I'll make it customizable):

Medium:

Subscription and non-subscription videos/audio files now all appear in one place!

So summary of things that still need to be done:

• Implement large sized cards (do you think they're needed?)
• Add ability to search/sort videos (will be a simple title search at first, but then support tags/categories once they are implemented)
• Support download-only mode and archive-related functionality for file cards
• Replace the URL input card with something more compact, like what you had in the mockup

[aidenmadaffri]

I think the large cards would definitely be useful. Maybe add the channel name for the large cards?

[Tzahi12345]

I think the large cards would definitely be useful. Maybe add the channel name for the large cards?

Yup, that's a good idea. There's more space so I can definitely fit more info there.

[Tzahi12345]

Almost complete! Most of the changes have been merged to master (see PR here), just a few items left to do.

[Tzahi12345]

Large file cards are done! I'm going to hold off on updating the URL input component, I've already made it as compact as I could without making huge changes, I'll revisit it once tags/categories are done.

I also added a "ghosting" effect for when the files are loading, to give a smoother appearance in the UI.

You can see a preview of these features here: https://gfycat.com/smoggymeageririshredandwhitesetter

I'll go ahead and close this issue since it's pretty much done, thanks @GlassedSilver for all the help! Your mockup was instrumental in getting the UI updated, and I think users are going to love the new design.