add video chat instance urls as subtitles

CHANGELOG.md

@@ -4,6 +4,8 @@
 
 ### Added
 
+ - Show video chat instance URLs as subtitles #3369
+
 ### Changed
 - remove jitsi as a default Video Chat instance, because they added a sign-in requirement #3366
 

scss/_global.scss

@@ -219,3 +219,41 @@ kbd,
 samp {
   font-family: monospace, $emojifonts;
 }
+
+.radiogroup {
+  border: none;
+  display: flex;
+  justify-content: space-around;
+  flex-direction: column;
+  & > .radiobutton {
+    padding-bottom: 2px;
+    height: 42px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start;
+    & > img {
+      height: 36px;
+      width: 36px;
+    }
+    & > label {
+      padding-left: 4px;
+      padding-right: 4px;
+      height: 36px;
+      display: inline-flex;
+      justify-content: space-between;
+      flex-direction: column;
+      & > span:nth-child(1) {
+        // the label
+        color: var(--bp4InputText);
+      }
+      & > span:nth-child(2) {
+        // the subtitle
+        color: var(--bp4InputPlaceholder);
+      }
+    }
+    & > label.no-subtitle > span:nth-child(1) {
+      padding-top: 9px !important;
+    }
+  }
+}

src/renderer/components/Radio.tsx

@@ -0,0 +1,40 @@
+import React from 'react'
+import classNames from 'classnames'
+
+type RadioProps = {
+  onSelect?: () => void
+  selected?: boolean
+  label: string
+  value: string
+  className?: string
+  name?: string
+  subtitle?: string
+}
+
+export default function Radio({
+  onSelect,
+  selected,
+  label,
+  value,
+  className,
+  name,
+  subtitle,
+}: RadioProps) {
+  const id: string = Math.floor(Math.random() * 10000).toString()
+  return (
+    <div className={classNames('radiobutton', className)}>
+      <input
+        id={id}
+        name={name}
+        type='radio'
+        onClick={() => onSelect && onSelect()}
+        value={value}
+        defaultChecked={Boolean(selected)}
+      />
+      <label htmlFor={id} className={classNames(!subtitle && 'no-subtitle')}>
+        <span>{label}</span>
+        {subtitle && <span>{subtitle}</span>}
+      </label>
+    </div>
+  )
+}

src/renderer/components/RadioGroup.tsx

@@ -0,0 +1,33 @@
+import React from 'react'
+import Radio from './Radio'
+
+type RadioGroupProps = {
+  onChange?: (value: string) => void
+  children: any
+  selectedValue: string
+  name: string
+}
+
+export default function RadioGroup({
+  onChange,
+  children,
+  selectedValue,
+  name,
+}: RadioGroupProps) {
+  return (
+    <form>
+      <fieldset className='radiogroup'>
+        {children.map((radio: any) => {
+          return (
+            <Radio
+              {...radio.props}
+              selected={radio.props.value === selectedValue}
+              onSelect={() => onChange && onChange(radio.props.value)}
+              name={name}
+            />
+          )
+        })}
+      </fieldset>
+    </form>
+  )
+}

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

@@ -1,5 +1,5 @@
-import React, { useState, useContext, FormEvent } from 'react'
-import { Card, Elevation, Radio, RadioGroup } from '@blueprintjs/core'
+import React, { useState, useContext } from 'react'
+import { Card, Elevation } from '@blueprintjs/core'
 import { RenderDTSettingSwitchType, SettingsSelector } from './Settings'
 import { ScreenContext, useTranslationFunction } from '../../contexts'
 import { DeltaInput } from '../Login-Styles'
@@ -13,6 +13,8 @@ import { DialogProps } from './DialogController'
 import SettingsStoreInstance, {
   SettingsStoreState,
 } from '../../stores/settings'
+import RadioGroup from '../RadioGroup'
+import Radio from '../Radio'
 
 const VIDEO_CHAT_INSTANCE_SYSTEMLI = 'https://meet.systemli.org/$ROOM'
 const VIDEO_CHAT_INSTANCE_AUTISTICI = 'https://vc.autistici.org/$ROOM'
@@ -123,16 +125,15 @@ export function EditVideochatInstanceDialog({
     onClose()
     onOk(configValue.trim()) // the trim is here to not save custom provider if it only contains whitespaces
   }
-  const onChangeRadio = (event: FormEvent<HTMLInputElement>) => {
-    const currentRadioValue = event.currentTarget.value as RadioButtonValue
+  const onChangeRadio = (value: string) => {
     let newConfigValue = ''
-    if (currentRadioValue === 'disabled') {
+    if (value === 'disabled') {
       newConfigValue = ''
       setRadioValue('disabled')
-    } else if (currentRadioValue === 'systemli') {
+    } else if (value === 'systemli') {
       newConfigValue = VIDEO_CHAT_INSTANCE_SYSTEMLI
       setRadioValue('systemli')
-    } else if (currentRadioValue === 'autistici') {
+    } else if (value === 'autistici') {
       newConfigValue = VIDEO_CHAT_INSTANCE_AUTISTICI
       setRadioValue('autistici')
     } else {
@@ -142,6 +143,10 @@ export function EditVideochatInstanceDialog({
     setConfigValue(newConfigValue)
   }
 
+  const subtitle = (value: string) => {
+    return value.replace('$ROOM', '')
+  }
+
   return (
     <DeltaDialogBase
       onClose={onClose}
@@ -168,10 +173,24 @@ export function EditVideochatInstanceDialog({
             {tx('videochat_instance_explain_2')}
           </div>
 
-          <RadioGroup onChange={onChangeRadio} selectedValue={radioValue}>
+          <RadioGroup
+            onChange={onChangeRadio}
+            selectedValue={radioValue}
+            name='videochat-instance'
+          >
             <Radio key='select-none' label={tx('off')} value='disabled' />
-            <Radio key='select-systemli' label='Systemli' value='systemli' />
-            <Radio key='select-autistici' label='Autistici' value='autistici' />
+            <Radio
+              key='select-systemli'
+              label='Systemli'
+              value='systemli'
+              subtitle={subtitle(VIDEO_CHAT_INSTANCE_SYSTEMLI)}
+            />
+            <Radio
+              key='select-autistici'
+              label='Autistici'
+              value='autistici'
+              subtitle={subtitle(VIDEO_CHAT_INSTANCE_AUTISTICI)}
+            />
             <Radio
               key='select-custom'
               label={tx('custom')}