Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Some issues with the interface: line spacing, comments and recommendation ill-positioned etc. #132

Open
Rtizer-9 opened this issue Mar 20, 2024 · 3 comments

Comments

@Rtizer-9
Copy link

Rtizer-9 commented Mar 20, 2024

Hi, first of all I really want to thank you for taking such initiative with already great piped for improving performance and all.

I just came to know about this project and have started using it on regular basis. I just have some minor issues:

  • The line spacing in the whole website is causing the whole video card to take too much space in home, recommendations, the video description, comments. Perhaps it's just fonts or you explicitly chose this line spacing idk.
  • The sidebar doesn't appear right beside the video like the main youtube website because the video by default starts in theatre mode.
  • If we compare the interface to invidious then their video cards are much small, the runtime is in the thumbnail itself, channel name has verified mark, uses 'k' instead of thousand making the card more small taking much less space.

I understand that because of different APIs things rendered on front can look much different but most of the issue I'm describing here simply seems like font,line spacing, css issues which extensions/userscripts solve without any change on the backend.

All these things: video description, comments section and sidebar (recommendations) having too much side space, combined with huge cards because of line spacing and long titles forces the user to scroll too much unnecessarily.

Apart from that it looks great and doesn't need any changes.

@mmjee
Copy link
Owner

mmjee commented Apr 8, 2024

Hi, first of all I really want to thank you for taking such initiate with already great piped for improving performance and all.

I just came to know about this project and have started using it on regular basis. I just have some minor issues:

Thank you for your support.

The line spacing in the whole website is causing the whole video card to take too much space in home, recommendations, the video description, comments. Perhaps it's just fonts or you explicitly chose this line spacing idk.

The current line height is 1.75rem, which comes directly form Vuetify (and I assume Material Design recommendations) and is unmodified. Is it excessive compared to other applications?

The sidebar doesn't appear right beside the video like the main youtube website because the video by default starts in theatre mode.

Yes, it's optimized for the simple use-case where people go video-to-video and scroll down after watching the video (or scroll down to peek at the description or something)

If we compare the interface to invidious then their video cards are much small, the runtime is in the thumbnail itself, channel name has verified mark, uses 'k' instead of thousand making the card more small taking much less space.

That is true and it's because using a more compact notation was causing problems with certain languages and it's ordinarily completely unnecessary because there's enough space to accommodate the longer notation, it usually doesn't overflow to a second line. Are you seeing overflowing in a significant number of cases?

I understand the because of different APIs things rendered on front can look much different but most of the issue I'm describing here simply seems like font,line spacing, css issues which extensions/userscripts solve without any change on the backend.

Yes, these are stylistic in nature and can be solved rather easily.

All these things: video description, comments section and sidebar (recommendations) having too much side space, combined with huge cards because of line spacing and long titles forces the user to scroll too much unnecessarily.

There's only an insignificant amount of margin, I am unable to perceive it as too big. Yes, PM is a little scrolling intensive because it intends to maximize the amount of importance the video, the reason why people use it in the 1st place, gets.

If you have any concrete suggestions on what could be made smaller or where the places with low information density are, I'll be happy to hear it.

Apart from that it looks great and doesn't need any changes.

@Rtizer-9
Copy link
Author

Rtizer-9 commented Apr 9, 2024

I forgot to mention one thing which should have cleared my issues single-handedly : I'm using a 13" notebook which might be the reason you can't see things from my perspective.

Here are some screenshots:

This is how things look on my end with 95-98% of size accuracy ( I tried to capture the maximum area visible on one screen of my 13.3" screen)

I recommend opening the images in a new tab though I'm still not sure if this is gonna make it exactly clear to you how they appear on my end. I think an easier way is to take screenshots on your end of same things (home, side recommendations full length and one card screenshots) and then compare them with these screenshots.

  • Home -Invidious Home -Invidious

  • Home - Piped Home - Piped

  • Home- Piped-material Home- Piped-material

  • Invidious Card Invidious Card

  • Piped-material Card Piped-material Card

  • Recommendations - Invidious Recommendations - Invidious

  • Recommendations - Piped-material Recommendations - Piped-material

@mmjee
Copy link
Owner

mmjee commented Apr 10, 2024

  1. The grids use 4 columns by default on PM, whereas Piped uses 5. This is configurable in preferences, and you can set it up to 6. This is one of the reasons why PM feeds look less information dense by default. I think it's fine though.
  2. The video card on PM uses a 1 + 4 layout (one line for the title, however long it may be, and another block for the channel, view counter, upload timestamp, length) whereas Invidious uses a 1 + 1 layout with the 2nd line containing both the channel and view counter (doesn't have the upload timestamp and the length is on the thumbnail). Piped crams a lot of stuff into the bottom block and it looks really ugly, so it's not comparable.
    I think there's potential for improvement here, I might put the length into the thumbnail just like Invidious.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants