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.