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 ?

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

[Bnyro]

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!

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]

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

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

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!

got it

[PrivacyDevel]

Hey first of all, thank you for the nice new Piped redesign! :)

One little bug that I just noticed is that it currently always shows "Comments are disabled in the settings" right above the actual comments and under the video description.

[Bnyro]

Hey first of all, thank you for the nice new Piped redesign! :)

I agree, @dragos-efy did a great job on that :)

One little bug that I just noticed is that it currently always shows "Comments are disabled in the settings" right above the actual comments and under the video description.

Thanks for mentioning, should be fixed with #1685 :)

[DeadKper]

Shouldn't border radius be 0 on full screen or is it like that on purpose? Didn't notice until now since most videos don't have a really bright background and I don't tend to look at the corners that often

[FireMasterK]

I'll note down a few issues here:

• All audio files are loaded at once (not on demand)
• Audio files are loaded even if audio isn't enabled
• Having cookies disabled/localstorage, results in a broken theme
• The website briefly appears white then turns dark when loading, ideally, we need to have some basic CSS to default to a dark theme
• The service worker does not cache fonts and Mp3 files (since they're not part of the source code and are not preloaded, maybe we need runtime caching?)
• Webm/Opus could be used instead of mp3?

[dragos-efy]

Fixed all of these, reload the cache and try them out (on efy.piped.pages.dev , not sure about other instances):

@IkelAtomig

• Better to align these elements
• shorts color

@DeadKper

Shouldn't border radius be 0 on full screen?

@martin-desktops : Captions can now have no background or a black one as well. It's in alpha testing, so go to efy sidebar > Piped Style > Captions. The changes won't save, and it will be more organised than now, but you can try it out in the meanwhile. The darkness of the blur is increased by 20% now btw. Lmk how it goes!

[dragos-efy]

I'll note down a few issues here:

• All audio files are loaded at once (not on demand)
• Audio files are loaded even if audio isn't enabled
• Having cookies disabled/localstorage, results in a broken theme
• The website briefly appears white then turns dark when loading, ideally, we need to have some basic CSS to default to a dark theme
• The service worker does not cache fonts and Mp3 files (since they're not part of the source code and are not preloaded, maybe we need runtime caching?)
• Webm/Opus could be used instead of mp3?

Thanks!! For the sounds, it looks like sometimes they load, sometimes not... so idk, they're supposed to be loaded when needed... I'm open to suggestions if you find solutions.

I'll work on the localStorage, white flash and webm/opus soon, although I'll chill for about 1 week I think to have more time to apply to jobs, since I'm really tight on money right now. But yeah, was about to convert the mp3 files anyway to save space, good take!

And for runtime caching idk, maybe? You're better at that sort of stuff so I guess we can try multiple things and see what works better. I'd just prefer to not need to split files a lot or require a server version of the same files for efy (I already did that with a few files, but I want the number to not increase lol), unless it can be done with minimal effort so that it's easier to maintain, but otherwise I'm open to all sorts of suggestions.

I agree with all the stuff you mentioned. We'll do it!

[IkelAtomig]

Checked as expected.

[DeadKper]

There's 1 bug on phone, you can see it on the screenshot, maybe only changing border radius of the video to 0 could be a solution?

Also 2 improvements that can be made for phones

• Double tap on the left/right side to jump 10 secs back/ahead
• Center the background when the width is smaller than the height

Also, changing any settings on "Visual Filters > Trans Elements" makes the page really slow on phones, the desktop doesn't seem to have any issues so far

[Bnyro]

@DeadKper Concerning the double tap, that's nothing that would be part of the redesign but rather an update of the shaka-player which we are using, see https://github.com/shaka-project/shaka-player/pull/4649.

[Bnyro]

Just one other thing of rather low importance, but still worth mentioning: On mobile, when clicking the hamburger menu and go to playlists after while not being logged in the account dialog pops up but can't be dismissed, neither by clicking the x nor in the void.

[dragos-efy]

@DeadKper

maybe only changing border radius of the video to 0 could be a solution?

Yup, that's the solution, I'm fixing this next!

changing any settings on "Visual Filters > Trans Elements" makes the page really slow on phones, the desktop doesn't seem to have any issues so far

Yeah, usually cuz blur and backdrop-filter (the css property used for the trans elements) is slower on phones than filter (the css property used for content and background, much faster), probably cuz they usually don't have fast GPUs like on PCs / laptops / handhelds. For some users it will be snappy and for others slow. Use what works for you, the options are there in case you want / need them to have the freedom to do it, but if the hardware / browser doesn't support it well, that's alright. You're already customising things more than other apps would allow you to anyway, as I see you have a custom background and border radius. Cool! 🥳

I'll say tho, changing browsers can help sometimes... For example Gnome web is the slowest I've tried. Firefox mobile is a bit snappier than brave mobile in some aspects and on desktop, brave has less visual glitches, but firefox uses hardware acceleration better sometimes so it results in more speed, but not when it comes to heavy animations. I guess try multiple variants and see if you can increase the performance or not. If you have any discoveries, let me know, I'd be curious to hear them.

Center the background when the width is smaller than the height

Uhmm, I guess it makes sense, it's probably not gonna be a priority right now tho, but I'll look into it for sure when my time allows it! Thanks for the feedback, really helpful!

[dragos-efy]

@Bnyro

On mobile, when clicking the hamburger menu and go to playlists after while not being logged in the account dialog pops up but can't be dismissed, neither by clicking the x nor in the void

Yeah, cuz that's what the playlists page does haha. I just redirect people there even if they're not logged in lol. Which is why I said it must be done dynamically. Or make the playlists page work for both user states with some v-if conditions maybe, then I guess it won't need to be dynamic from the menu... whatever you feel is better

[Bnyro]

Yeah, cuz that's what the playlists page does haha. I just redirect people there even if they're not logged in lol. Which is why I said it must be done dynamically. Or make the playlists page work for both user states with some v-if conditions maybe, then I guess it won't need to be dynamic from the menu... whatever you feel is better

Oh, true, that's the same thing as for the current frontend and not related to EFY, my bad. But I think now we can just show the login dialog instead of redirecting to that page in order to make it more user friendly, hence users will be able to still navigate on Piped without being logged in and don't get stuck in an unresponsive dialog. I will make a PR for that later :)

[dragos-efy]

cool

[DeadKper]

Visual filters are not applying correctly on the video chapters, you can see in the screenshot the difference between the comments and the chapter, also, great work with the design I'm loving it

[dragos-efy]

@DeadKper glad you love it, it's fixed now 🤟 as well as the fullscreen player, but you probably noticed that

[photochlorination]

A minor issue, depending on the window width and view count the add to playlist button might wrap onto a new line, which is somewhat distracting. (Firefox at 2560 window width)

[DeadKper]

Video doesn't load, reloading page with f5 or ctrl + f5 only gives a different error, deleting service workers and realoding fixes it, same happens to any video I tried to watch, needed to delete service workers for every one of them, closing the entire site, deleting everything and restarting the browser didn't fix it nor did it disabling all extensions, same problem happens with firefox (no extensions installed)

[dragos-efy]

@photochlorination I could add a minimum height which makes them all the same, but then all cards would be tall even when not needed. I'm keeping this on hold for now unless you have practical ideas to suggest, although if there's enough interest, I can maybe add an alpha testing option in the sidebar for users to try out multiple variations. Thanks!