Revamp the UI to stick to original

[kelson42]

A typical channel page looks like:

My proposal would be to stick to this UI by removing mostly what is related to the "social" part of Youtube. That means in particular the top and sidebar, but not only. We would also obviously remove the "community" and "channels" tabs (of screenshot above) and everything related to comments like we do today.

This is for the channel/user view because for the playlists and video pages, the UI should be rethinked a bit more because all the comments and the related videos will disappear.

So basicaly this proposal leads to a few questions:

• Would that be a good result to optain for a new UI?
• Is that doable for a reasonable amount of work?
• Is that a substainable solution?

[rgaudin]

Is that a substainable solution?

what do you mean? Do you mean you want to actually fetch the YT source code and remove/hide parts of it? That would be neither practical (YT is entirely built in JS) nor sustainable.

[kelson42]

Is that a substainable solution?

what do you mean? Do you mean you want to actually fetch the YT source code and remove/hide parts of it? That would be neither practical (YT is entirely built in JS) nor sustainable.

This is not what I mean. If we want to follow that path, we will have to mockup things anything with our own code. My question is: if we invest in this, would that be a UI we would be happy with for a long enough time so this is worth the initial investment.

[Popolechien]

I'm globally supportive of the idea but I don't think we should take Youtube as the Alpha and Omega of design. Here are a couple of competitors (I've only looked at playlists) for later perusal

Bitchute Dailymotion Vimeo Twitch

[Popolechien]

Adding mediacms:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be now be reviewed manually. Thank you for your contributions.

[Veeransh14]

I would like to work on this issue

[benoit74]

You are welcomed, thank you!

I won't assign the whole issue because there is a lot of work to perform (it is a whole GSOC project after all) and I doubt you can finish this on your own before / outside of GSOC. And there will probably be other persons interested in this project.

If your goal is to enter the GSOC program, please select a simpler / shorter task (anywhere in our repos, good_first_issue labels are here to help find them usually) to make a realistic PR in a realistic time frame. At this stage we just want to ensure you know to code and interact properly with us through a PR. If you are selected, you will then have the whole GSOC to perform the duty (and the task will then be assigned).

[Veeransh14]

Okay, I get the point and infact I am trying for GSoC, I have tried to improve a little bit of the UI, will generate a PR for the same, please have a look at it and let me know if any changes are requires, meanwhile I would try and work on other issues and submit the proposal for kiwiX as well. Thank you !

[benoit74]

Your PR seems indeed interesting, I probably misjudged the complexity of submitting a first enhancement. I will have a look at it.

[ishqDehlvi]

Hey there, Myself Inzemamul Haq A skilled creative developer with a great knowledge of UI/UX. I am looking forward to contribute for UI Revamp. I have a query like for UI what basically is to operate like first create UI on figma then to code. So to contribute in KIWIX do I have to directly code or I can make an approach of first creating a whole UI and the workflow then code???

[Popolechien]

@ishqDehlvi Yes you need to run your UI proposal first here before going to code (unless the changes are minimal), as feedback is likely to cause some changes.

[ishqDehlvi]

@Popolechien Sure I'll create a figma file. Can you share your email so I can add you?? so you can see too..

[Popolechien]

@ishqDehlvi can't you just make it public?

[ishqDehlvi]

@Popolechien Shall I share here??

[Popolechien]

yes please. The more eyeballs the better

[ishqDehlvi]

Sure will do! :)

[dan-niles]

Hi, I am interested in working on this for GSoC. I have prepared a UI proposal in Figma and would really appreciate your feedback on it.

Dark Mode Prototype: https://www.figma.com/proto/f922aAI4PJry9ioHWm4Zd4/Kiwix-Youtube-UI-Revamp?type=design&scaling=min-zoom&page-id=0%3A1&node-id=3-1648&starting-point-node-id=3%3A1648

Light Mode Prototype: https://www.figma.com/proto/f922aAI4PJry9ioHWm4Zd4/Kiwix-Youtube-UI-Revamp?type=design&scaling=min-zoom&page-id=0%3A1&node-id=53-1129&starting-point-node-id=53%3A1129

Figma Design File: https://www.figma.com/file/f922aAI4PJry9ioHWm4Zd4/Kiwix-Youtube-UI-Revamp?type=design&node-id=0-1&mode=design

[Popolechien]

@dan-niles It does the job and thank you for this, very thoughtful to consider dark mode as well (though I suspect there may be a technical hurdle there).

The overall look is very youtubey however (not a bad thing as such) but I'd like you to challenge it more, or defend why the big video upfront.

Another question is why duplicate the playlists tab if they're already listed (in more details) on the front/home page.

Being offline I would also be wary of content that indicates 1 month ago - is it a month at time of watching, or at time of scraping? (and what is the value vs. indicating the source date, or no date at all?

[dan-niles]

Thanks for the quick reply @Popolechien. Can you let me know what kind of technical issue will be there if I was to implement dark mode?

The big video upfront was to keep the UX similar to YouTube. Channels usually have a featured video when you visit their homepage, so I wanted to make the experience similar here. (See the screenshot below) If a channel does not have a featured video, then I guess we can avoid showing the big video upfront.

As for your question about the duplication of playlists on the homepage, I wanted to have a similar homepage experience to YouTube where only a few playlists are featured on the homepage (See the screenshot below). If a channel has 100 playlists, we might only list 5 of those on the homepage and the total 100 on the playlists page.

As for showing the date, I think it would be useful for viewers to know if the content is up-to-date and relevant for their current needs. The 1 month ago would be at the time of watching. If we scrape the published date of the video, we can simply calculate how old the video is, when rendering the UI.

Screenshot

[Popolechien]

@rgaudin would know best for the darkmode part.

Re: featured video, bear in mind that it is a desktop thing. A fair number of users will be on mobile (either via the app or via Kiwix-server/Hotspots), and our choice has always been to privilege that kind of display.

[dan-niles]

I believe we can show/hide the featured video based on the screen size when rendering the UI. However, if you think the featured video is not necessary, then I don't mind removing it. The only reason I included it was to give the viewers the Youtubey UX. 😅

I will also update the Figma file with mockups for mobile screens. 👍

[rgaudin]

@rgaudin would know best for the darkmode part.

Nothing to know here

[dan-niles]

@Popolechien I have added the mobile mockups to the figma design file and created a prototype as well. Please have a look, and let me know if any changes are required.

[benoit74]

@dan-niles your propositions make total sense to me

I think next step now is to submit a formal GSoC proposal, we will always be able to discuss details afterwards (we will probably have new ideas or realise some stuff does not work exactly as planned). One important thing to push into this proposal is probably a detailed plan on which tasks are mandatory and which ones are nice to have (e.g. from my understanding, the dark mode and featured video are not mandatory, the "playlists" are probably not as urgent as other stuff, etc ... So that even if you do not finish everything (things usually never go as planned ^^), we have at least something which can be moved to production.

[dan-niles]

@benoit74 Sure, I will create a GSoC proposal with a detailed plan and share it as soon as possible.

[vinurk]

Hi, even I am interested in this project, and have submitted a proposal. Here's my try at the page designs: Figma File

Figma Prototype

[benoit74]

Closing this issue, it has been split into multiple sub-issues (and probably more to come). Nothing left to be tracked / discussed here.