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

[dragos-efy]

@DeadKper I know it sounds weird after you mentioned all the intense stuff you tried haha, but have you tried doing it in a private tab? The error is gone for me when I do that or ctrl + f5 on a video page. I spotted the same bug, but when entering a video link (like /watch=idofvideo), otherwise directly accessing videos by clicking on them seems fine. Also some of the errors in the console are for new extra modules, not the main framework, so you can safely ignore them for now until we make them work. Looks like it's related to the piped WatchVideo vue component probably, which I modified quite a bit last time, so maybe something's wrong there, OR just some caching issue, since for me private tabs and ctrl + f5 work... not sure yet. The extensions are not the problem anyway.

@Bnyro @FireMasterK any ideas?

[photochlorination]

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

I don't think it is necessarily the height that is the problem; what I found distracting was the wrapping of the button itself, which I think could be solved by making the width of the boxes slightly larger.

[DeadKper]

@dragos-efy

@DeadKper have you tried doing it in a private tab?

That's strange, firefox works now after deleting everything and restoring preferences, private tabs work also completly fine on both firefox and brave, but normal brave still doesn't load videos unless I ctrl + f5, but at least now loads with ctrl + f5, any ideas what the problem might be?, pd: the problem only happens when opening videos on a new tab (which I usually scroll trough my feed and open a new tab for every video I wanna watch)

[dragos-efy]

@photochlorination

could be solved by making the width of the boxes slightly larger.

I know it's width, but you gotta consider ALL sorts of devices, like phones, tablets, tvs, desktops etc, including stuff like the galaxy fold, so making the width larger means less support for some devices, plus less cards shown in a row. Also consider vids with a time of 10:00:00 + views like 300k + watched. I could add a breakpoint probably, so I'll experiment with that, but I'll see how it goes in testing, cuz I can't tell without trying first and rn I'm supposed to be on a mini break for 1 week.

[dragos-efy]

@DeadKper cool, yeah then we're talking about the same problem. I haven't had time to look into it and I'm supposed to be on a mini break for 1 week, so I guess my assumptions about why it happens are the same as in my last reply. I'd bet on the vue component being at fault. When I get time I'll try to replicate it locally so that I can fix it quickly, cuz it's indeed annoying. I also open vids in multiple tabs, since it's more efficient haha

[PrivacyDevel]

I tried to build the newest version of the efy branch just now because I discovered a bug and I wanted to update first before reporting a possibly already fixed bug.

Unfortunately that didn't work. yarn run build errors out with the following message:

[vite-plugin-pwa:build] '$ready_once' is not exported by efy/efy.js, imported by src/piped.js
file: /var/www/Piped-EFY2/src/piped.js:1:17
1: import {$, $all, $ready_once, $insert, $add, $append} from '../efy/efy.js';
                    ^
2: 
3: $ready_once('#efy_sidebar').then(()=>{
error during build:
Error: '$ready_once' is not exported by efy/efy.js, imported by src/piped.js

I manually checked out the main branch in the efy directory and did a git pull, hoping that this might solve it but to no avail. The same error message persists.

And the bug I discovered was that likes get displayed twice for comments. Like this:

[dragos-efy]

@PrivacyDevel hmm interesting. I fixed myself the double likes, which got introduced as a bug when the main got merged with efy, BEFORE my last update... and there seem to be some caching issues so I'm wondering if any of that is correlated... Looks like some issues disappeared after I changed my instance from "custom" to the official one... I think the move to piped.video messed up something for me personally... not sure if it's the same for others... Either way the bug about the variable is different most likely, but I'm just spitting my thoughts out haha. Feel free to dm me as well.

[dragos-efy]

@FireMasterK

Webm/Opus could be used instead of mp3?

Done! They're all webm now. Only saved around 8% of space, but it's something lol

[dragos-efy]

@PrivacyDevel try updating the efy github submodule as well as piped. That might fix your problem

[PrivacyDevel]

@dragos-efy Yup, now it builds and the bug has been fixed. Thank you! :)

[dragos-efy]

@PrivacyDevel Well @Bnyro figured it out, I just had to remember what he did lol. Also dmed you on matrix, but you saw the reply here first

[PrivacyDevel]

@dragos-efy oh yeah sorry, I didn't notice that somehow.

[dragos-efy]

no worries

[cocoanaut]

Noticed the "Minimize Comments by default" toggle was not saving and have created a small PR to fix: https://github.com/TeamPiped/Piped/pull/1784.

[RaptaG]

Is merging the EFY PR planned soon?

[Bnyro]

Is merging the EFY PR planned soon?

There's no ETA, it's going to be merged as soon as all bigger issues got resolved and it hence can be called stable and fast enough for replacing the current interface.

[RaptaG]

👍🏽

[lothar-cell]

This is amazing, can't wait for the final version!

[DeadKper]

Small suggestion, since vue.js sends a blank page with a div (or another container) with the "app" id to mount the page, shouldn't the white flash be fixed by just making the body have a dark background? just changing the style should be enough to something like:

<body style="background-color: #23272e;">
  <div id="app"></div>
</body>

and then that can be replaced by de css of vue once the app loads since it will take all the screen, and a "dark" flash is not really a flash, don't think anyone will complain about it

[DogCatPuppyLover]

Could there be an option to remove the "you're offline" "you're back online" messages? They get can get annoying when you leave the page for a few hours and you have to close all of them.

[dragos-efy]

@cocoanaut Thank you!! 🔥 Saw it right away, but I was too lazy to reply lol

@DeadKper fixed in the next update. The solution is similar to what you described, but I made it work at the efy level so that all apps using it can benefit from no white flashes.

@DogCatPuppyLover yeah, I'll have section dedicated to notifications in the sidebar menu where you can choose the position (top left / right / center, bottom / left / right / center) and type of notifications you want shown / hidden, as well as a "missed notifications" number indicator that opens up the history, like on ios / android. It will probably take some time tho, since there's other stuff to take care of first, but yeah, I agree, that should be controlled by a toggle. I'll also make them expire after a few seconds (can be chosen by the user), which moves them to the notification history.

[Konglomneshued]

I don't know how, but I used an instance not listed in the Github and it uses the new EFY UI.

https://piped.mha.fi/

Problem is, that instance is really buggy and it links to this Github, so I can't submit an issue.

Edit: Looks like this was already talked about here https://github.com/TeamPiped/Piped/issues/1391#issuecomment-1297620957

[Konglomneshued]

https://github.com/TeamPiped/Piped/issues/1391#issuecomment-1297487894

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!

I think this is related to min-height: 100vh

See: https://ilxanlar.medium.com/you-shouldnt-rely-on-css-100vh-and-here-s-why-1b4721e74487

[dragos-efy]

@Konglomneshued

instance is really buggy

Say what's buggy specifically and take screenshots, copy errors etc, otherwise I don't know what your bugs are. Nice you included a link and a possible cause tho.

Looks like this was already talked about here #1931

So I have no clue what your issues are, but if it's related to that comment, that was NOT the new efy redesign, that screenshot has the old design in it, therefore wrong place to ask here about that. If it's something else that is actually related to efy, then I can help, but send me screenshots or give me more details, otherwise I'll have to ignore it and focus on stuff that's actually part of the redesign. Thanks!

Also keep in mind that the mha.fi instance is not in our control, the owner took BETA versions that are NOT ready to be used by all users yet from the efy repo automatically I'm guessing. While most users of that instance are happy it seems, it was too early to release it, we actually discouraged instance owners from switching to it, but they did cuz they liked it.

If you wanna test the latest changes, then use efy.piped.pages.dev , which will have an update later today, but you'll have to clear your cache cuz it's a huge update with breaking changes. I'll post the instructions right after the update today here as well as in the piped matrix room and efy matrix room

[dragos-efy]

IMPORTANT! You'll likely have to do one or both of these, because the new update can potentially break some stuff:

1. efy sidebar menu > backup > efy settings > reset
2. ctrl + f5 or clear your cache / do a hard refresh

You'll know that you're using the new update if you go to efy sidebar > click the efy logo > see the version 2022.12.15 Beta

[Konglomneshued]

IMPORTANT! You'll likely have to do one or both of these, because the new update can potentially break some stuff:

1. `efy sidebar menu` > `backup` > `efy settings` > `reset`

2. `ctrl + f5` or clear your cache / do a hard refresh

You'll know that you're using the new update if you go to efy sidebar > click the efy logo > see the version 2022.12.15 Beta

I was about to close the issue I created, but I noticed the same problem I had using using https://piped.mha.fi/ when I tried the efy.piped.pages.dev link you provided. I thought it might help to keep it there, so it can be fixed.

[IkelAtomig]

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

Dragos, Better place items as follows :

• Duration in bottom right
• Shorts tag in Bottom left. Maybe instead of shorts maybe use a vector Icon to indicate its shorts
• Maybe the same for watched in another corner or replace Shorts with watched when the video is watched. It would be better than inconsistency right now.

All the above should be placed over the thumbnails.

View Count, Audio Only, Playlist button - 1st row Channel name - 2nd row

So, If you do keep the elements in 2 row. We could cut off a lot of space below and place more videos.

This would be the best case for consistency.

[IkelAtomig]

Full width comments are not being saved.

[IkelAtomig]

Would be better if nature effects is around the video player and not touching it.

[IkelAtomig]

This is for https://efy.piped.pages.dev/playlists

As it is already under playlist section. Remove the word Playlist. So, They are in single line. Reduce space again.

[IkelAtomig]

In trending there is additional paramater. Date. Which could be moved up to 1st line when If time is placed over thumbnail.

[IkelAtomig]

I think instead of separate borders for all the elements under the video Name. Make it a transparent border. Better make it to be consistent across all video cards.

Maybe give an option to decrease the card size. So, there can be many videos in a single row. But this would be efficient only if any of the above is done.

[PrivacyDevel]

Nothing happens anymore when you left-click a video thumbnail in the new EFY UI 2022.12.15 Beta. You have to click on the video title if you want the watch page for that video to open. That didn't use to be the case in the previous version.

[dragos-efy]

@PrivacyDevel @kittyra didn't know how to replicate it, but I found out it worked fine from me cuz I was on touch screen inputs, so only the cursor seems to be affected by it. Either way, it looks like the <a> element that includes the thumbnail and title of the video doesn't match the height, so then the thumbnail works only in the bottom area of the thumbnail. I'll add display: block to it in the next update and that should fix it, it works well now with the modification. Thanks for the heads up!

[dragos-efy]

@IkelAtomig

Remove the word Playlist

Thought of that too, been doing it in multiple places already. It's also good for reducing the amount of translations needed.

Maybe give an option to decrease the card size

We have custom width in alpha, which changes the amount of cards. Not the same, but similar for now.

Full width comments are not being saved

Known issue, that's why it's in alpha. Alpha should be treated as alpha, as in broken, barely functional. It's more for letting curious users test features ahead and give feedback before becoming stable and safe to use for most or all users.

nature effects is around the video player

I remember this, but I'm rebuilding the logic for them to use webp, avif, png, jpg etc and become more efficient. There will be multiple pseudo 3d layers behind and in front of the app, so I'll first make that happen to not waste time on implementing something, then needing to rebuild it anyway.

And for video cards, I'll add an option to choose what info to display + extra styling specifically for that area that's customised by the user. I don't think there's a best design there and each person seems to have a different take, so to make it useful and a great experience for all, I'll make it more modular and let people decide how they want it to look like. Not sure how hard it will be to implement it, but at least half of it should be easy. Positioning can be a bit more challenging, but we'll see.

[dragos-efy]

@PrivacyDevel @kittyra thumbnails on firefox should be fixed on version 23.01.07 and above!

@IkelAtomig I renamed the text for playlist options, however it's only for English rn cuz it's not the official branch. Your name is updated btw, did that some time ago.

[dragos-efy]

Quick heads up! On version 23.01.13 beta and above, reset your background images if you saved any: efy sidebar > backup > efy images > reset. The new update has a way more efficient way of handling thumbnails than previously, but your current ones will likely break until you do a reset.

[dragos-efy]

@eladkarako Thanks for the feedback! Glad you like it! For lazy loading, it's technically not part of my responsibilities (unless it became a thing in main recently cuz we're out of date by a bit), but if it ends up working well I can do it, I'll try it out. And about haptic feedback, I wasn't aware it can be controlled from the browser, that's cool, more immersive and it seems simple to implement... safari and firefox mobile seem to not support it, but I guess I can make it a toggle in the efy menu and only people who want or can use it would do. And if you wanna control the animation btw, you can change the speed from efy > accessibility > animations, although some effects will probably work best on default, and short clicks will be too short to see the difference, since it's pseudo pressure based, the longer you tap / click the longer it holds it, but still, it's there if you need it. And the focus outline will be on only when turning on the accessibility feature in the next updates, to make it more consistent.

[Imzxhir]

I keep getting an issue on Firefox where the checkboxes don't render correctly, I am not sure what the issue is and I even tried on a fresh profile on Firefox. On a different browser like Chrome, the checkboxes all work and render correctly. This could be an issue with browsers using a different engine, Firefox using Gecko and Chrome using Blink as their browser engine.

Firefox:

Chrome:

[dragos-efy]

@Imzxhir can you try it on firefox but on a different device and in a private window? like another pc, laptop etc? I'm trying to replicate your problem but it works fine for me, so my first thought is that maybe you have an extension that interferes with it, or some firefox profile / setting that is responsible for theming stuff (since firefox has some options for forcing a certain css styling, which can become kinda annoying when it doesn't work as it should and leads to broken pages, weird colors etc).

Unfortunately, since I can't replicate it, you're gonna have to give me more context or try finding a pattern that might be causing it, but thanks for the heads up and lmk how it goes

[Imzxhir]

It seems to render the checkboxes correctly on firefox for mobile which makes me to believe that it is not a render engine issue.

I have created a new profile on firefox which removes all extensions and settings from firefox and sets the defualt vaules as if you were installing firefox brand new, and I have still got the issue. Even on a private window, I get the bug with checkboxes. I'll try to see if I can find ways to replicate the issue / bug.

[dragos-efy]

cool. I'll probably switch to a font icon based approach for the checkbox anyway eventually, since the current way is sort of a mini css hack rather than a proper way, but getting this figured out would be nice

[DeadKper]

LBRY videos don't load on efy, works normally on piped.kavin.rocks, I'm using brave, tried without extensions and it's the same result, with LBRY streaming disabled the error just changes LBRY streaming enabled LBRY streaming disabled also tried deleting cookies but it's still the same, I was testing on efy.piped.pages.dev

[dragos-efy]

@DeadKper Yeah, same for everyone, probably cuz the efy version isn't using some newer code from piped. I'll update it in the next 1-2 weeks, maybe that will fix it. Thanks!

[IkelAtomig]

Thought of that too, been doing it in multiple places already. It's also good for reducing the amount of translations needed.

I would suggest replacing the delete button with a trash Icon and on mouse hover reads as 'Deletes Playlist'. The Same case for videos. Instead of 8 Videos - 8 🎞️

[Konglomneshued]

Having the mouse over defeats the purpose of replacing the text with an icon to reduce the translations needed.

[dragos-efy]

also, people using touchscreen can kinda hover if they hold the pen or finger, but it's not really a convergent solution, cuz it's messy to do it on touchscreen. I wouldn't say it completely defeats the point tho if the goal is reducing space, that could be good, but for translations, yeah, no point.

There's a good reason for titles on hovering tho, accessibility and text readers. When I use buttons with icons only, I'm trying now to kinda always add titles.

We could also make it a split option, whoever wants or doesn't want text they can toggle it. But idk yet, I'll have to think more about it... we could also ask more users as well or do a poll, but rename and delete could be just icons in theory with titles for accessibility or hovering if the user has a mouse / pen and then maybe in the menu add a toggle for text if users want that and there's a need.

[IkelAtomig]

Dragos, that seems a pretty good idea.

[julianfairfax]

It would be nice if there was a "follow the system theme" option for the theme

[dragos-efy]

@julianfairfax makes sense. There's a problem tho, light & dark themes are usually not very customizable like with efy, which is why that concept works, cuz they don't have to consider transparency, potential background images etc, but in order to do something similar in efy I'd have to let the user store 2 different themes at the same time and based on the time of the day or browser's preference change the one or the other.

I could just toggle the light or dark mode, but if the user modifies the colors of the text and background for example, it can be kinda weird for the user to be switched back to the default or to see "broken colors", so I pretty much have to go with the approach mentioned above, because efy has billions of themes, not just 2 like normal frameworks.

Also, in efy you can import and export themes from efy sidebar > Backup > EFY Settings. What's cool about that is that you can also have different sounds settings, effects, colors, gaps, radius etc based on the file. So if you create a light and dark backup for each, you can technically just import the one you need quickly in 4-5 clicks, but you also get the benefit of configuring more stuff than just the colors.

I'll eventually add a feature to automatically load a saved configuration based on a trigger like time of the day or the browser's theme preference, but for now you gotta do it manually, cuz that will be complicated to implement and it will probably take a long time, considering that I have lots of projects and features to work on.