New UI progress tracking

[FireMasterK]

You can test the new UI at https://ui-v2.piped.pages.dev/

Todo:

• [ ] Loading states
• [ ] Animations
• [ ] ...

Feedback on the new UI is requested!

[ghost]

Search Function does not seem to be Working for English Language.

[Mhowser]

expanding and contracting the left hamburger menu is choppy.

[Mhowser]

I think the listen to audio icon should have rounded corners to match the rest of the new buttons edit: Also the icon in the play next section should be a circle instead Edit 2: These button backrounds are hard to distinguish from the page backround. I like the idea of making the watch on YouTube button red, and i'm not sure what the description button color should be. The magenta/blue gradient seems too "loud" for that button, though.

[IvRRimum]

For reference, heres the full figma design: https://www.figma.com/file/xx5A8vahH9pHVv0NhgKKia/Piped?node-id=1%3A20

Also:

• [ ] Clicking on logo should take to root page

[filipesmedeiros]

@Mhowser the choppiness is a problem, no question about it. i felt it a little bit on my laptop. what device did you feel it on?

also, can you retest and just tell me if it's everywhere or just the main feed (looots of moving parts with the whole video grid moving there), please?

[unixfox]

The logo is strangely placed, I think it should be closer to the "hamburger" icon.

---

The player is too close to the edge of the address bar.

New design:

Old design:

---

Like the old design, in my opinion the player is not clean. It has black bars on the left and right of the video for almost every videos:

Piped player:

Invidious player:

The invidious player looks really clean, no black bars compared to piped.

[filipesmedeiros]

one big heads up!

the implementation is not finished.

many things that have been commented will be changed and implemented according to the design:

https://www.figma.com/file/xx5A8vahH9pHVv0NhgKKia/Piped?node-id=1%3A20

please only make suggestions regarding the design itself (or at least things that seem to have been implemented, but are wrong, according to the design).

this is just to avoid pollution in this issue.

[filipesmedeiros]

@unixfox

The logo is strangely placed, I think it should be closer to the "hamburger" icon.

the design has it just a tiny bit closer, i (or someone can) will move it on the next pr

The player is too close to the edge of the address bar.

@mhowser

I think the listen to audio icon should have rounded corners to match the rest of the new buttons

this page hasn't been touched at all yet :)

expanding and contracting the left hamburger menu is choppy.

it has been changed. can you check again please?

@Loki-L1130

Search Function does not seem to be Working for English Language.

this is not good and i will check it and fix it asap!

[Mhowser]

expanding and contracting the left hamburger menu is choppy.

it has been changed. can you check again please?

I tested again on my desktop and on mobile (using the desktop version), seems like the choppiness has gotten worse.

[filipesmedeiros]

hmm i will have to test properly

doesn't seem to be a problem for me at all: macbook air m1 16gb | firefox 93

[FireMasterK]

https://user-images.githubusercontent.com/20838718/136868742-a6ce17d4-6ab9-45d2-8ea9-3367346b5962.mp4

I feel like it could be a bit smoother :thinking:

I have an AMD 5800H, so I doubt it's my laptop's fault.

I did performance profiling, and uikit seems to be doing something, I'll take a further look tomorrow.

[filipesmedeiros]

it definitely doesn't look like that for me! weird 👀

[Mhowser]

I think we should just update the thumbnails after the animation, just like how YouTube does it.

[filipesmedeiros]

i don't understand. youtube doesn't have an animation for me hmm

[Mhowser]

Ah I forgot that it just pops out in front of the content. I haven't used the stock YouTube UI in a while lol.

But I still think its better to keep the hamburger menu animation, but only update the thumbnail size at once after the animation. This will be way more performant, too.

[filipesmedeiros]

hmmm let me try with no animation

[ChunkyProgrammer]

The log out button at the bottom of the nav menu should have translatable text (i noticed you added it the locale file but it's not being used) instead of being hard coded

https://github.com/TeamPiped/Piped/blob/18f9cbe0601dcb60284c0b17a13af4b8ad07237f/src/components/MenuDesktop.vue#L71

[filipesmedeiros]

yes! will fix, thank you @ChunkyProgrammer

[openwick]

@FireMasterK if possible please implement double tap to forward and backward time on mobile like youtube app

[IvRRimum]

@openwick I did, check out my fork.

[IvRRimum]

But its not the right way of doing it, so i dont think it will be merged unless someone figures out how to integrate it into the player natively.

[openwick]

@IvRRimum Do u have an instance of piped ? How do it check it?

[IvRRimum]

https://piped.crypto-tzar.com/

Works on mobile with double tap

[IvRRimum]

Just open a video on mobile, make the video fullscreen and the top on the left or right side to scroll 10 seconds back or forth.

[openwick]

@IvRRimum Wow its great but few suggestions if u can tweak. When I double tap, the black play pause button is coming so if u can stop it when double tapping that would be nice. Also on firefox android when double tapping, the copy paste options for clip board are popping up and I don't know why but its not an issue on bromite which is essentially chrome.

I hope @FireMasterK implement something like this so piped will be great on mobile compared to invidious

[FireMasterK]

I hope @FireMasterK implement something like this so piped will be great on mobile compared to invidious

I'm waiting on https://github.com/google/shaka-player/pull/3373

[IvRRimum]

Yeah, the big button is a bit anoying. I would love to fix it, but didn't have time(will have next month).

[IvRRimum]

Imo this icon should be moved to video view page and remove it from list page

[Mhowser]

I disagree, being able to quickly play audio from the list is a good feature.

[IvRRimum]

You will still be able to, just 1 extra click.

[kreha1]

• clicking back on preferences page will move you to the root page instead of whatever you did previously
• there is no searchbar on the video page (there is on figma design)
• the video suggestion section is too narrow, resulting in many unnecessary line breaks
• the font size is too big in most instances, let's focus on the comment section:
  • username: 14px vs 13px
  • body: 16px vs 14px
  • like count 14px vs 12px
  • timestamp: 14px vs 12px + I believe that having it on a separate line is a waste of space

I think that YT design team has struct a nice balance when it comes to the font size and line space. YT: Piped:

Here's Piped after a quick change in devtools: I haven't changed the video thumbnail bit, outside of giving it more place to breathe (70/30 vs 80/20 previously). I personally feel, again, that YT nailed the thumbnails, as you can pack much more of them in the same space, and that aligns with their purpose, that is suggesting a video.

On a technical front, I'd recommend using unocss for quick development and more tailored styling instead of relying on the predefined styles from a library - I know how tedious it gets when you stray from the path of your css framework of choice.

I would gladly help with the transition, along with providing fixes for those issues I've highlighted if you are interested,

[sdfg2]

The vertical nav bar takes up way too much space for what it contains, especially when you consider how little space the same elements take on the current layout. Even folded in it's a massive bar containing what, 5 or 6 icons?

I like the colours, it's almost identical to my desktop scheme! :-D

Is the player part of this project as well or is that something separate? There are a few issues with it.

[MintMain21]

Can we have buttons on the search results to open videos/playlists in YouTube, similar to the buttons for opening videos in Audio Only mode?

[65wat]

…

I think that YT design team has struct a nice balance when it comes to the font size and line space. YT: Piped:

Here's Piped after a quick change in devtools: I haven't changed the video thumbnail bit, outside of giving it more place to breathe (70/30 vs 80/20 previously). I personally feel, again, that YT nailed the thumbnails, as you can pack much more of them in the same space, and that aligns with their purpose, that is suggesting a video.

…

I just wanted to say that I am strongly in favor of the default piped design choice (meaning the first image above, before the change in devtools). The slightly increased space between username/timestamp and comment text improves readability and clarity to me.

Also: is it possible to make the play/pause button translucent or make it hide faster after clicking play (or both)? The button often blocks video content as it fades out.

Lastly: I want to thank all contributors for this project. I absolutely love it. It’s the best youtube UI ever :)

[Mhowser]

I just wanted to say that I am strongly in favor of the default piped design choice (meaning the first image above, before the change in devtools). The slightly increased space between username/timestamp and comment text improves readability and clarity to me.

How about a compromise? There should be an option to have a standard layout and a compact layout, this could be changed in preferences. I prefer the compact one since I use Piped on a small mobile screen.

[ghost]

Search UI is totally Broken. I mean it is out of the place where it should be.

[TanKot]

Please make the dark mode black, if possible. This purple or whatever ain't looking that good.

[davidcollini]

When searching for a channel, the channel icon should be a circle

[cypherpunk1984]

I would put the sidebar as a topbar like Piped-material did: https://piped-material.xn--17b.net/ It doesn't take any side space, so we can keep watching videos in a 'theater mode', that uses pretty much the whole width of the screen without having to switch to full screen.

[MintMain21]

An option to minimize video recommendations on Desktop, similar to on Mobile, would be nice.

[RiversideHollow]

Menu should be on the Right, as it is on youtube, and as it is on the current piped. Because it would be comfortable.

Any new changes from the expected behaviour is not actually welcomed by our human mind. So it is very uncomfortable.

[debpalash]

Search result page has Filter button absurdly big. Found the css issue, it has harcoded height of 100%

[ghost]

and my late 2009 theme got murdered by this layout change

[pklion]

"Subscriptions" button in Feed page doesn't looks good...

[pklion]

Also, top bar appears in embed page though it shouldn't be there. (Using LibRedirect)

[hommegithub]

Just wondering if the project is dead or someone from the dev team has responded? Asking because I am new to posting on GitHub

[nonetrix]

Just wondering if the project is dead or someone from the dev team has responded? Asking because I am new to posting on GitHub

The project as a whole? seems active UI update branch seems inactive for now at least would like to see continued work

I am thinking of learning Vue so I don't mind helping out if I can at least

[Bnyro]

Deprecated in favour of EFY UI