Add video chat instances icon to the selection dialogue

CHANGELOG.md

@@ -6,6 +6,10 @@
 - fix clipboard not working in webxdc apps
 - fix `target=_blank` links in html emails don't work #3408
 
+### Added
+
+ - add video chat instances favicons to selection dialog
+
 <a id="1_40_4"></a>
 
 ## [1.40.4] - 2023-09-14

src/renderer/components/Radio.tsx

@@ -9,6 +9,7 @@ type RadioProps = {
   className?: string
   name?: string
   subtitle?: string
+  icon?: HTMLElement
 }
 
 export default function Radio({
@@ -19,6 +20,7 @@ export default function Radio({
   className,
   name,
   subtitle,
+  icon,
 }: RadioProps) {
   const id: string = Math.floor(Math.random() * 10000).toString()
   return (
@@ -31,6 +33,7 @@ export default function Radio({
         value={value}
         defaultChecked={Boolean(selected)}
       />
+      {icon}
       <label htmlFor={id} className={classNames(!subtitle && 'no-subtitle')}>
         <span>{label}</span>
         {subtitle && <span>{subtitle}</span>}

src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx

@@ -15,6 +15,7 @@ import SettingsStoreInstance, {
 } from '../../stores/settings'
 import RadioGroup from '../RadioGroup'
 import Radio from '../Radio'
+import blobStore from '../../stores/blobstore'
 
 const VIDEO_CHAT_INSTANCE_SYSTEMLI = 'https://meet.systemli.org/$ROOM'
 const VIDEO_CHAT_INSTANCE_AUTISTICI = 'https://vc.autistici.org/$ROOM'
@@ -27,6 +28,12 @@ export function SettingsExperimentalFeatures({
   settingsStore: SettingsStoreState
 }) {
   const tx = window.static_translate
+  blobStore.load(VIDEO_CHAT_INSTANCE_AUTISTICI.replace('$ROOM', ''))
+  blobStore.load(VIDEO_CHAT_INSTANCE_SYSTEMLI.replace('$ROOM', ''))
+  function getVideoChatIcon(url: string): any {
+    let b = blobStore.get(url.replace('$ROOM', ''))
+    return b ? <img src={URL.createObjectURL(b)} /> : undefined
+  }
   const { openDialog } = useContext(ScreenContext)
 
   const onClickEdit = async () => {
@@ -43,6 +50,7 @@ export function SettingsExperimentalFeatures({
         }
       },
       settingsStore,
+      getVideoChatIcon,
     })
   }
 
@@ -103,13 +111,19 @@ export function SettingsExperimentalFeatures({
 
 type RadioButtonValue = 'disabled' | 'custom' | 'systemli' | 'autistici'
 
+type EditVideochatInstanceDialogAdditionalProps = {
+  settingsStore: SettingsStoreState
+  getVideoChatIcon: (url: string) => any
+}
+
 export function EditVideochatInstanceDialog({
   isOpen,
   onClose,
   onOk,
   onCancel,
   settingsStore,
-}: DialogProps & { settingsStore: SettingsStoreState }) {
+  getVideoChatIcon,
+}: DialogProps & EditVideochatInstanceDialogAdditionalProps) {
   const tx = useTranslationFunction()
   const [configValue, setConfigValue] = useState(
     settingsStore.settings['webrtc_instance']
@@ -189,12 +203,14 @@ export function EditVideochatInstanceDialog({
               label='Systemli'
               value='systemli'
               subtitle={VIDEO_CHAT_INSTANCE_SYSTEMLI}
+              icon={getVideoChatIcon(VIDEO_CHAT_INSTANCE_SYSTEMLI)}
             />
             <Radio
               key='select-autistici'
               label='Autistici'
               value='autistici'
               subtitle={VIDEO_CHAT_INSTANCE_AUTISTICI}
+              icon={getVideoChatIcon(VIDEO_CHAT_INSTANCE_AUTISTICI)}
             />
             <Radio
               key='select-custom'

src/renderer/stores/blobstore.ts

@@ -0,0 +1,25 @@
+import { C } from '@deltachat/jsonrpc-client'
+import { selectedAccountId } from '../ScreenController'
+
+class BlobStore {
+  private _store: Map<string, Blob>
+
+  constructor() {
+    this._store = new Map()
+  }
+
+  load(this: BlobStore, url: string) {
+    C.getHttpResponse(selectedAccountId(), url).then(response => {
+      this._store.set(url, new Blob(btoa(response.blob)))
+    })
+  }
+
+  get(this: BlobStore, url: string): Blob | null {
+    let b = this._store.get(url)
+    return b ? b : null
+  }
+}
+
+let blobStore = new BlobStore()
+
+export default blobStore