Redesign - EFY

[dragos-efy]

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.

• 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

• it has transparency too if your operating system allows it

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

[Bnyro]

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 :)

[FireMasterK]

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

[Senor-Ducky]

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

[dragos-efy]

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

On my list already! Thanks!

[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]

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

[davidcollini]

The arrow seems to be too close to the word

[davidcollini]

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

[dragos-efy]

@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]

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]

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

[martin-desktops]

Found a bug: while video details are loading the video player doesn’t have rounded corners for a short time.

What a great job btw ^^

[martin-desktops]

Bug number 2.: the font used in the new design doesn’t support some polish letters what makes them looking out of place

[martin-desktops]

And I hope the last one: active search input field doesn’t have rounded focus outline

Tested on Safari, iOS 15.5

[IkelAtomig]

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

[IkelAtomig]

Better to align these elements.

[IkelAtomig]

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

[opl-]

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

[dragos-efy]

@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]

@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]

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?

[opl-]

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.

[dragos-efy]

@opl- Alright, got you then

[dragos-efy]

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

[martin-desktops]

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.

[dragos-efy]

@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.

[ghost]

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

[BarbzYHOOL]

@BarbzYHOOL those instances don't use efy, that's why, there's 3-4 afaik, but the most up to date one is efy.piped.pages.dev, so I'd recommend that one. As for the source code, you can see it on the efy branch of Piped. It's not part of the main branch yet to smooth out issues, stability etc before making it official. It's still in the experimental phase if that makes sense.

thanks, should i only use this piped instance for testing?

PS: the piped instance i'm using has trouble loading videos, kinda annoying, i hope it's just the instance, i'm new to it

[dragos-efy]

@BarbzYHOOL you can use other ones too, but you're not guaranteed to have the latest version, so for that, yeah, that instance is the most recommended and "official" haha.

For loading videos, Youtube bans IPs or changes its structure constantly, which we're not fully in control, change the backend instance from settings when you notice that until you find one that works. You can keep the same frontend, you just gotta change the backend basically. But that's related to Piped in general, not this instance.

Anyway, let me know how it goes with theming if you have thoughts you wanna share, since this thread is for that. You can also ask efy questions in the efy room or Piped questions in the Piped room depending on what the questions are related to.

[BarbzYHOOL]

one of the theme setting ends up like this, and then you cannot fnd the menu button back

[dragos-efy]

@BarbzYHOOL it's cuz either your browser and desktop environment doesn't support window transparency or you need a transparent gtk / qt theme. It's explained on the question mark alongside. You can use transparency on any device tho if you add your own images from the add file button, which in the next version will be changed with something like this:

And in case it's not clear, transparent windows look like this (ignore the red line, I'm too lazy to take a new screenshot lol):

while background images with transparency or layers like this:

The window addresses what's behind it, while the background what's above it.

[kzhe2059]

Major bug: all images disappear when I log in.

Without logging in on smnz.de, I see this.

After log in, I see this.

[dragos-efy]

@kzhe2059 Thanks for the feedback! For me it works fine on other instances than smnz.de, so it doesn't seem to be an issue related to the efy instance, because on piped.video for example it does the same, so I'd suggest you to switch the instance or contact the instance owner if they're okay with that

[kzhe2059]

Is there any way to use a custom instance on the new UI?

[dragos-efy]

@kzhe2059 If you mean changing the backend instance, then go to settings > instance. The custom authentication instance is below as well.

[kzhe2059]

Yes, but you can only choose from the list, not input custom url for the api and such

[Reinachan]

I figure this is where feedback on the redesign goes?

Why is everything in video cards styled like buttons? This feels really excessive and makes it really unclear what is or isn't a button within the UI.

I'd suggest going back to the style used in old Piped for this. Like, you can put it all into a card (though I personally prefer it it isn't), but the way the items within were laid out in old Piped worked. Changing this feels like change for the sake of change.

The old video preview layout actually worked so well that when YouTube changed it, I coincidentally userstyled it to look almost the same as Piped before I even knew of Piped xD

I can understand making some changes for the sake of improving usability on touch devices. But I'd suggest at least de-buttonify the stats and the channel name and move the stats back under the channel name again. Also please move the timestamp back up to the thumbnail.

Other than that, having the search bar and every kind of card and input change its scale when you click on them is fairly distracting. It can make sense for buttons but I wouldn't use it for everything. It makes interacting with the customisation options in the sidebar really whack too.

[dragos-efy]

Hey @Reinachan! Yeah, it's the right place.

1. Card layout - there will be multiple layouts... so we'll technically have the new and old one as well, chosen by the user from the menu. Also the reason I went with this new approach is to allow users to choose what to show or hide (time, views, add to playlist, audio version, time ago, etc) and to also have a more "breathable" design that makes it easier to spot information. But yeah, no worries, you'll be able to switch to the other layout too and whatever layout you like, both should be customizable. It's more of a problem of time, since I was very busy with lots of projects, work, finding jobs, life etc, and while I prefer the new layout personally, I agree with your points as well, especially cuz other people from the community brought this up as well, so expect this stuff to be added when I have time.

2. Click animation - I agree, in the future you'll be able to turn it on / off, also individually by type (buttons, inputs, etc), in a similar way where now for example you can change the speed. Which speaking of... when it's 0, it completely turns off all of them in newer efy versions (already implemented), but Piped didn't get that update yet.

3. "Userstyling" YT - that's pretty cool, before working directly on Piped I also injected css and js on my own browser, and before that for youtube as well lol. So I understand your mindset perfectly, which is why I made the efy integration with Piped so customizable... to allow nerds like us to do wild stuff, with or without coding, directly from the app, and that's the main priority, giving more power to the user.

Thanks for the feedback, feel free to give me more whenever you feel the need to, it helps me and the community overall have a better experience! Just keep in mind that my time for Piped is limited currently cuz of other priorities, but soon I'll work on more stuff

[dragos-efy]

@kzhe2059 that's not related to efy then... cuz the official piped doesn't have that feature either, so I guess maybe talk to the main devs about it IF THEY LIKE THE IDEA, else it won't be added in the efy version either, since I'd have to rely on the defaults, which I'm not responsible for.

[Imzxhir]

Hello! I noticed that there is no share video button. Is that planned to be added?

[dragos-efy]

@Imzxhir yes, it's a bug I'll fix soon, it should be easy, it annoys me too, as someone who copies links a lot haha

[athiosh]

how can i install this locally? Is there documentation for install or a docker compose?

[dragos-efy]

@athiosh You can run it locally if you clone it and switch to the efy branch, or we have a docker tutorial on the efy site:

1. Local

Clone it from github:

git clone https://github.com/TeamPiped/Piped.git
cd Piped
git switch efy

To run it first install packages with:

pnpm install

And then you can use either

pnpm dev

or

pnpm build
pnpm preview

In the terminal you'll see the link you gotta navigate to in your browser

---

2. Docker

Follow the tutorial at https://efy.ooo/#faq#piped_instance

---

Now that you mentioned it, maybe I should add the 1st method to the docs as well when I get some spare time 🤔

[dragos-efy]

@Imzxhir forgot to reply here, but the bug seems to be caused by uBlock Origin, so if you have it on, try turning it off only for piped or changing your configuration maybe, that worked for me and other people I've been talking to. I'm still looking for other methods tho, but to keep you updated on it

[athiosh]

@dragos-efy thank you for the documentation. Awesome work.

[athiosh]

After some testing, I redeploy this to my production server and I found that none of the pages worked If I start fresh without cookies or cache, I had to use the original frontend image to login first in my browser then change to efy frontend image.

[dragos-efy]

@athiosh so wait, to confirm, does it work now after doing that? And no worries, glad to help!

[codenyte]

Found an issue:

When search suggestions are disabled in the Piped settings, this box where the suggestions would normally be displayed still shows up when typing something into the search bar.

[dragos-efy]

@codenyte cool! I added it to the project's tasks

[athiosh]

@dragos-efy , it only works if the browser is cached with my login session. If I wasn't login prior to running the efy image it will be blank like the screenshot I shared. I hope this make sense.

[dragos-efy]

@athiosh thanks 🤟 it makes sense, yeah, I wanted to be sure I fully get you & I added it to the tasks, but keep in mind that I'm an absolute noob at docker and I have other priorities to work on, so unless someone else finds a fix, it will probably take me a while to dig deeper into it. I'm glad you mentioned it tho, hopefully we'll find a solution

[athiosh]

@dragos-efy I've spent sometime today trying to figure out what is causing the issue and after reading the error carefully it shows that page failed to construct the URL, so after some more investigation I was able to make the page load after adding instance and auth_instance_url variable in the local storage in the browser. Once those two value is populated, everything worked. The first screenshot is the current state where those variable is not populated on start. The second screenshot is where I have manually enter the variable, ignore the authtoken as it generate after login. I hope this would help in fixing the issue.

[dragos-efy]

@athiosh I think that the auth variables are a pretty significant clue for sure! Thanks for the info & screenshots 👏

[athiosh]

Recently, I tried to enable caption on videos but every time I enable it, it will crash as shown in the screenshot. I tried reverting to the official frontend and no issues there.

[dragos-efy]

@athiosh well I can't test it rn cuz all public instances are blocked by yt. Are you doing that on a private instance? Or are some instances working that I'm not aware of?

[athiosh]

yea, i am hosting it privately using docker.