Draft: Home page redesign prototype

[just-max]

I've put together a prototype for a start page redesign (#597).

Screenshots

Desktop

Tablet and Mobile

Ideas/Background/Plan

Things that are not yet fully implemented marked with [*].

Design is based on the course overview page.

The idea for the sections (names could be changed, for now it's just what I came up with). Based on the idea of moving the things I want to see when I visit the home page close to the top and accessible in a single click.

• Suggested: Currently live streams, then completed VoDs, sorted by most recent completed first. If the user is logged in, only show streams/VoDs from pinned or registered courses (the ones that currently show up under "My Courses") that are not watched (currently considered "watched" if marked as watched or >50% watch percentage); otherwise from all courses. When a user opens TUM-Live, they are likely to want to join a lecture that is currently streaming or watch a recently completed VoD that they missed (at least that's my thinking). [*] Probably limit to about two rows of suggestions depending on screen size.
• My Courses: Combine pinned courses and registered courses. These are the courses a user is interested in seeing. Pinned courses are shown first. For each course ([*] if there are any streams to show), show the current live stream for the course (if there is one), then the most recent completed VoDs. [*] Limit to one row/a handful of items per course.
• Other Courses: The user is generally not interested in these courses, so just show the same information that is shown on the current home page.
• [*] A section at the bottom would contain the hidden courses, and be collapsed by default. As suggested in the issue, the handling for this should be unified with that for pinned courses (i.e. also saved server-side).

Courses can be [*] (un-)hidden/pinned from a dropdown menu:

This has been made keyboard-navigation-friendly too.

I added friendly dates (e.g. "Streamed 1 hour ago" or "Scheduled tomorrow") with Luxon. Personally I think this adds some polish, and the exact date/time is shown by hovering (i.e. on the title). The current home page kind of does this for upcoming streams. [*] This should be made dynamic, which should be doable since it's contained in a component, but I haven't thought about how to do that best.

I've also moved a whole bunch of components into reusable templates. Not sure if it could be done better with the template engine, maybe someone has better ideas.

TODO/Next Steps

• Just search for "TODO" on the diff :)
• Didn't add any database queries yet, the things I needed are currently just hacked together.
• Logged-out view could use work.
• Tests

[MatthiasReumann]

Looks neat 💯

Some more ideas:

1. I think it would be pretty cool to have thumbnails above the titles of VODs.
2. We could move Other Courses to the left side (Similiar to YouTube and Twitch) so that all the important stuff is in the center.

[just-max]

Added thumbnails, at least in the UI :) Not sure what to actually show as a thumbnail though

[MatthiasReumann]

Added thumbnails, at least in the UI :) Not sure what to actually show as a thumbnail though

How about some kittens?

Jokes aside, we already generate thumbnail sprites (See: #472) - maybe we could utilize that for that use-case also.

[joschahenningsen]

@just-max you have contributed some amazing stuff lately, do you mind if I add you to our dev channel on matrix.in.tum.de?

[just-max]

Sure, I've sent you an email :>

[alexanderstephan]

I think we could use the existing thumbnails here, but we should probably wait for #582 as only a small portion of the videos has thumbnails (> July 22). I am rather busy this week, so we could also show a placeholder until then.

[just-max]

currently focused on exams, so I'll probably make (actual) progress on this again next week

for now, maybe we could come back to the kitten idea :)

[just-max]

This has stalled a bit on my end, since I'm focused on writing my bachelor's thesis right now. If someone wants to pick this up, please feel free. Otherwise, if there's still interest, I'd get working on it again in about a month's time.

[alexanderstephan]

Ah, that's fine. I am not that good with UI, and we've decided that we have a feature freeze for some time until all bugs in are fixed for the new semester.

At least from my side there is also a lot of interest in this feature, this would be the biggest UI update in a long time and the start page really seems dated as the UI of all the other parts was updated.

[MatthiasReumann]

Hey @just-max! Would you mind if I take over the task of the start page redesign?

[just-max]

Yeah, go ahead! The latest version of everything is in my branch, if you want to reuse anything, but otherwise I haven't found the motivation to keep working on it, sorry about that.

[MatthiasReumann]

Yeah, go ahead! The latest version of everything is in my branch, if you want to reuse anything, but otherwise I haven't found the motivation to keep working on it, sorry about that.

Great. Anyways, thanks for the work!

[MatthiasReumann]

Closed in favor of #964