Piped icon indicating copy to clipboard operation
Piped copied to clipboard

Redesign - EFY

Open dragos-efy opened this issue 3 years ago • 147 comments

Here's the new Piped redesign! 🥳 It uses efy for customisation features and to help you theme it how you want. It's not just simple predetermined themes, you can actually create billions of patterns & themes yourself or import them from others.

You can track the current status of the features, ideas & bugs here. I'm also working on the documentation to make it easier for devs to understand the logic behind it and contribute. Any feedback or suggestions you have, please share them, I and other really cool people who I'm grateful for have been testing it, but bugs can still come up, therefore if you wanna share something, please do!

Live demo: https://efy.piped.pages.dev Matrix room for questions and support specific to efy: https://matrix.to/#/#efy_ui:matrix.org

Features

  • simple by default, but very modular and customizable if you wanna theme it.

image

  • set your own layouts, colors, radius, gaps, layers, sizes, positions, sounds, visual filters, backgrounds, etc.
  • export themes as json or just add, edit, activate and delete them directly in the interface

Screenshot_20230101_155453

  • it has transparency too if your operating system allows it

piped-redesign-efy-2

Special thanks to: Bnyro, Kavin, Zucc (whatever.social), Diamond_AaronXG, IkelAtomig and other small or anonymous contributors, you guys rock! 🔥

dragos-efy avatar Sep 05 '22 19:09 dragos-efy

The code for it can be found at the efy branch if anyone is willing to test it locally or do anything else with the code :)

Bnyro avatar Sep 05 '22 20:09 Bnyro

image Bug: captions look oddly tiny, and have round edges!

FireMasterK avatar Sep 06 '22 13:09 FireMasterK

Bug: The search bar appears to be shrunk and not working right. image

Senor-Ducky avatar Sep 06 '22 15:09 Senor-Ducky

Bug: captions look oddly tiny, and have round edges!

On my list already! Thanks!

dragos-efy avatar Sep 06 '22 16:09 dragos-efy

@Senor-Ducky It got broken after the last commit, it was okay before, but I think I identified the cause for the most part. Thank you! If you notice other bugs lmk

dragos-efy avatar Sep 06 '22 17:09 dragos-efy

The live instance will likely have issues for a while, but the css code is fine, it's just needs to be split and distributed to vue components. Keep sending feedback, but keep in mind that there might be a difference between how unstable it seems to be and how stable it actually is

dragos-efy avatar Sep 06 '22 21:09 dragos-efy

image

The arrow seems to be too close to the word

davidcollini avatar Sep 06 '22 21:09 davidcollini

image

This happens with Trending too, also great job on the redesign, it looks and works really well

davidcollini avatar Sep 06 '22 21:09 davidcollini

@IronMaltese Glad you like it! Your issue was on the list too, but having it here makes it easier to keep track of what I gotta do lol, so thanks!

dragos-efy avatar Sep 06 '22 22:09 dragos-efy

Everyone and @Senor-Ducky , if you tried the live instance before the problem got fixed, try clearing your cache (CTRL+F5 on some browsers) or opening it in a private tab. And remember, if you need to clear, import or export your local storage or background images, go to Save & Restore in the efy menu. Things should be as stable as they were before + a few small issues that I'll be working on when I have time. Planning to fix all the issues mentioned here in the next 2-3 days or sooner. Enjoy & keep giving feedback! 🥳

dragos-efy avatar Sep 07 '22 10:09 dragos-efy

Fixed all the issues above, refresh your cache if needed!

dragos-efy avatar Sep 09 '22 15:09 dragos-efy

Found a bug: while video details are loading the video player doesn’t have rounded corners for a short time. BD54A6CD-2CD8-49AC-A9B1-18F2C30E5247

What a great job btw ^^

synergic777 avatar Sep 17 '22 19:09 synergic777

Bug number 2.: the font used in the new design doesn’t support some polish letters what makes them looking out of place 33C110E9-EC89-4A7E-BA8D-7ED1B7C4135C

synergic777 avatar Sep 17 '22 19:09 synergic777

And I hope the last one: active search input field doesn’t have rounded focus outline 509D02AB-AE5F-4647-93B2-828F2352AEDD

Tested on Safari, iOS 15.5

synergic777 avatar Sep 17 '22 20:09 synergic777

The Text is too big in 'Select a Playlist' modal. Would be better if it is smaller.

IkelAtomig avatar Sep 19 '22 13:09 IkelAtomig

image

Better to align these elements.

IkelAtomig avatar Sep 19 '22 14:09 IkelAtomig

  • [] Apply red colour, if video is tagged as Shorts and Black colour for Watched. As giving same colour to both often confuses.

IkelAtomig avatar Sep 20 '22 15:09 IkelAtomig

The animation which plays on click is extremely distracting. There should be a way to disable it.

opl- avatar Sep 24 '22 08:09 opl-

@martin-desktops

active search input field doesn’t have rounded focus outline

fixed in the new update. I'll look into the rounded corners for the video and polish characters. Thanks for the feedback!!

dragos-efy avatar Sep 28 '22 18:09 dragos-efy

@EdwardLangdon thanks again! I'll look into all of them. For the shorts tho, I think it could be the main colours rather than red, so that it fits with whatever colours the user chooses and instead of black, the variable for the background, like the time on the video, which can be black, white, chosen by the user etc. So basically kinda the same as your idea, but with custom colors

dragos-efy avatar Sep 28 '22 18:09 dragos-efy

The animation which plays on click is extremely distracting. There should be a way to disable it.

Alright @opl- , I can add a new accessibility option for that then. I need to figure out how to implement it, but it should be fairly easy I think. Thank you!

To make sure I fully understand you, do you mean buttons or any animation related to clicks in general?

dragos-efy avatar Sep 28 '22 18:09 dragos-efy

The main thing for me was the scale down -> scale back up "pulse" animation playing whenever I clicked on any button, video or any other interactive element.

opl- avatar Sep 28 '22 21:09 opl-

@opl- Alright, got you then

dragos-efy avatar Sep 29 '22 09:09 dragos-efy

@opl- There will be a toggle inside efy sidebar > accessibility > animations in the next update. I made it work.

dragos-efy avatar Sep 29 '22 22:09 dragos-efy

Hello!

I am back with one new reflection: subtitles aren't legible in some cases right now. Sometimes there is no enough contrast between the light text and blurred video, as it is shown on the screenshot below.

My recommendation is to darken the blurred background. image

synergic777 avatar Oct 27 '22 20:10 synergic777

@martin-desktops Thanks again! We're planning to make a module in the sidebar for captions, so that you can choose between multiple styles, like maybe (not decided yet), you can choose between background, no background and blurred. Right now I'm trying to solve issues that get the framework and redesign to a stable state and then things like captions or comments can become more modular and doing that should take less time. I'm pretty limited time wise by having to apply to jobs, which is why things have been slower, but I acknowledge the current problem with captions or other similar bugs, like the white flash on page load. Keep the feedback going when you need to! Will take care of this as soon as I can!

Btw, I can't replicate your bug with Polish characters, so please let me know how I can if it's still present.

dragos-efy avatar Oct 28 '22 15:10 dragos-efy

Just out of curiosity. Is https://piped.mha.fi the same redesign as this development thread ?

ghost avatar Oct 29 '22 22:10 ghost

People! is it just me or do you also hate the way the player situation is in ios , seriously who wants this

EDIT: I was to ask are there any plans for changing it ? or is it just way it was intended to be , because it is hard for me to navigate the player UI and I don’t see the point of having two players , rather the native iOS Safari player can be used for things like subtitles and playback speed , as for the quality change button it can have a dedicated button , this is the best I can say as I’m not a dev

Thanks!

2838F4CC-F08A-4744-B1BC-C69F0A018A2B

Akczht avatar Oct 31 '22 18:10 Akczht

People! is it just me or do you also hate the way the player situation is in ios , seriously who wants this

EDIT: I was to ask are there any plans for changing it ? or is it just way it was intended to be , because it is hard for me to navigate the player UI and I don’t see the point of having two players , rather the native iOS Safari player can be used for things like subtitles and playback speed , as for the quality change button it can have a dedicated button , this is the best I can say as I’m not a dev

Thanks!

2838F4CC-F08A-4744-B1BC-C69F0A018A2B

If I may ask, how is that related to EFY? There are already open issues because of some issues concerning iOS support you could have commented on, but that one here is just meant to discuss potential bugs or requests concerning Piped ft. EFY, so your comment feels kinda out of place here. Even the screenshot you posted doesn't use the EFY version of Piped, so it's definitely not an issue related to it! Please just move over to a corresponding issue or open a new one if you can't find one, thanks!

Bnyro avatar Oct 31 '22 20:10 Bnyro

Just out of curiosity. Is https://piped.mha.fi the same redesign as this development thread ?

Yes, mha.fi already uses uses the redesigned version built with EFY.

However, doing so is not recommended yet as its still in development and might contain bugs the current interface doesn't, so the instance owner acts on their own risk ;)

Bnyro avatar Oct 31 '22 20:10 Bnyro