Chocobozzz / PeerTube

ActivityPub-federated video streaming platform using P2P directly in your web browser
https://joinpeertube.org/
GNU Affero General Public License v3.0
13.09k stars 1.51k forks source link

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

Open kimsible opened 4 years ago

kimsible commented 4 years ago

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 :

This plugin would also :

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

kimsible commented 4 years ago
  1. [x] Ability to override client assets (logo, favicon, PWAs icons) https://github.com/Chocobozzz/PeerTube/pull/2897.

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

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

  2. [ ] ~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

  3. [ ] Add plugin hook when uploading SVG logo and PNG favicon

  4. [ ] Add Jimp processImage to plugin server helpers

  5. [ ] Add a plugin hook in the dymamic manifest : https://github.com/Chocobozzz/PeerTube/blob/176000efee51b0a8d91e8dc34e5d7b3c87a5c1df/server/controllers/client.ts#L160

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

  7. [ ] Add action to update contentHash of manifest / logo / favicon to plugin API

  8. [ ] 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 commented 4 years ago

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 commented 3 years ago

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 commented 3 years ago

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

kontrollanten commented 3 years ago

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

kimsible commented 3 years ago

@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 commented 3 years ago

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

What do you think ?

MattyBoombalatty commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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 commented 3 months ago

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

Yes. You can check:

MattyBoombalatty commented 3 months ago

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

MattyBoombalatty commented 3 months ago

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