Add video chat instances icons

[farooqkz]

This PR aims to do just these two:

• Fetch video chat instance's favicon and save them in a json file in src
• Show those icons in the frontend
• remove the initial render delay(about 1s on my machine).

[Simon-Laux]

Fetch video chat instance's favicon and save them in a json file in src

I think it makes not much sense to do it on every build because those won't change very often.
This will make development slower by making "npm run build" slower, also it will fail on flatpak as you have no internet access there.

you can also save the icons of the default instances as icons to a subfolder of images/

Then the format of the video chat provider objects could be:

interface VideoChatInstance {
 // id for distinguishing between the instances
 id: string,
 // the url of the video chat provider that is given to core
 url: string,
 // path of the icon, either relative url for default providers or base64 for custom providers that user added that were saved in a core ui config
 icon: string, 
}
const VIDEO_CHAT_INSTANCES: Record<string, VideoChatInstance > = {
'systemli': { id: 'systemli', url: 'https://meet.systemli.org/$ROOM', icon: "../images/videochat_providers/systemli.ico" },
'autistici': { id: 'autistici', url: 'https://vc.autistici.org/$ROOM', icon: "../images/videochat_providers/autistici" },
}

and maybe also a display name property that we wanna show to the user

[farooqkz]

@Simon-Laux @adzialocha I need to investigate why the initial render takes so much time but hints are welcome.

[Simon-Laux]

needs to be rebased

[Simon-Laux]

might work, but parsing url and just taking hostname + /favicon.ico might be better. but ok for now as long as the default instances are jitsi

but do not write code to parse urls yourself, just use https://nodejs.org/docs/latest-v18.x/api/url.html

[Simon-Laux]

might make sense to show the icons pixelated, as blurry does not look good. (css image-rendering: pixelated;)
We can also try to get the icons from different places in the hope to get a higher resolution one (fetching the html and parsing the xml to get the head elements content:

• <link rel="apple-touch-icon" href="images/apple-touch-icon.png">
• icons referenced in a webmanifest: <link rel="manifest" href="manifest.json" />
• <link rel="icon" type="image/png" href="images/favicon.ico?v=1">

[Simon-Laux]

should be hardcoded to white, most icons are deigned for light mode, this would ensure that the icon works also in darkmode

[Simon-Laux]

But I'm not sure it's wise to prioritise this right now as there is still quite some stuff left todo to make it really useful, also I think the code structure can be much simplified.

[farooqkz]

This PR is ready for review and just adds the icons to make it look prettier a bit. The option to add feature to let users add their own instances will be added through another PR.

[farooqkz]

I think I did a wrong rebase :D