Customize appearance (logo, favicon, PWA manifest name and icons)

[kimsible]

I'm thinking about a plugin to customize appearance with the new helper plugin getRouter.
This plugin would add in /admin/config/edit-custom, advanced config tab the ability to :

• upload a png or svg logo
• customize the main color with a color picker

This plugin would also :

• process and use the favicon and the PWAs manifest icons with the uploaded logo.
• update PWAs manifest name and description according to the instance settings

For the last feature, I think a hook would be required to trigguer any change of the name and description instance.

[kimsible]

1. Ability to override client assets (logo, favicon, PWAs icons) Add ability to override client assets : logo - favicon - PWA icons - PWA manifest name and description #2897.

According to the discussion on this PR, I propose these next steps :

2. Add to the admin panel the ability to upload PNG favicon and SVG logo (without any treatment, only format / extension checking)

3. Add a script tool to generate PWA icons from SVG logo. must be a plugin because since sharp has been replaced by Jimp we can't convert SVG to PNG

4. Add plugin hook when uploading SVG logo and PNG favicon

5. Add Jimp processImage to plugin server helpers

6. Add a plugin hook in the dymamic manifest :

   PeerTube/server/controllers/client.ts

   Line 160 in 176000e

   manifest.name = CONFIG.INSTANCE.NAME

7. Improve the router plugin : restrict writing files to an isolated directory maybe a flag like trusted plugin are planned ?

8. Add action to update contentHash of manifest / logo / favicon to plugin API

9. Create a plugin or update this one https://github.com/kimsible/peertube-plugin-webapp-manifest for the PWA manifest edition and icons generation.

@Chocobozzz @rigelk all these steps seem reachable to you ?

Some steps contain improvements for the plugin API, it's well in the roadmap ?

[Chocobozzz]

all these steps seem reachable to you ?

Yes I think

Some steps contain improvements for the plugin API, it's well in the roadmap ?

No, it's not planned in the roadmap but we can try to implement them if we have some time.

[kontrollanten]

Great idea! But do we need a web UI to customize the manifest? In most cases it's just something that you configure once, therefore I'd suggest to handle this during the client build time. It should be easy to solve with webpack, I think webpack-pwa-manifest-plugin solves our needs? That should be possible to use together with angular-builders.

[rigelk]

@kontrollanten most servers are not (re)building their code.

[kontrollanten]

No, but most servers build their code ;) As I mentioned I think this is a one time configuration that is done during installation.

[kimsible]

@kontrollanten I think this is a good idea to explore but we don't have to force any admin to build anything since PeerTube releases and host builds and official docker images. We need to think for both case because not every PeerTube admins have the ability to build their own client bundles.

In most cases it's just something that you configure once

Some instances may want to update their logo for special events, in this case we can't re-build clients bundles :/

[kimsible]

@Chocobozzz, @rigelk, @kontrollanten I don't say it's a priority but maybe we'll need to create a new input type for plugins; an input to upload images strictly in client-overrides directory to avoid security issues. This could be a good compromise to not engage more core development :

• Add Jimp processImage to plugin server helpers

• Add a plugin hook in the dymamic manifest

• Add action to update contentHash of manifest / logo / favicon to plugin API

• Add a plugin input type to upload images into client-overrides/assets/images....

What do you think ?

[MattyBoombalatty]

Reviving a dead thread. I updated the manifest.webmanifest file, and even tried setting an NGINX route to /manifest.json but it doesn't seem like it's possible to brand/add instance favicon to the PWA install.

[Chocobozzz]

If you want to change PWA icon, try to add the following paths in your client_overrides directory:

assets/images/icons/icon-36x36.png
assets/images/icons/icon-48x48.png
assets/images/icons/icon-72x72.png
assets/images/icons/icon-96x96.png
assets/images/icons/icon-144x144.png
assets/images/icons/icon-192x192.png
assets/images/icons/icon-512x512.png

[MattyBoombalatty]

Thanks, but that didn't seem to work.

/var/www/peertube/storage/client_overrides/assets/images/icons/icon-36x36.png is the correct structure for this, right?

[Chocobozzz]

/var/www/peertube/storage/client_overrides/assets/images/icons/icon-36x36.png is the correct structure for this, right?

Yes. You can check:

• https://github.com/Chocobozzz/PeerTube/blob/develop/config/production.yaml.example#L180 is '/var/www/peertube/storage/client-overrides/' (and not client_overrides)
• Your nginx config is up to date with the template: https://github.com/Chocobozzz/PeerTube/blob/develop/support/nginx/peertube#L194

[MattyBoombalatty]

Everything is correct there. Hm. Maybe I have to make the icons the actual size.

[MattyBoombalatty]

It's not showing up in the PWA for Brave but it is in Firefox, so I'm guessing it's installed correctly.