diff --git a/CHANGELOG.md b/CHANGELOG.md
index a7feda4c58..5d56040441 100644
--- a/CHANGELOG.md
+++ b/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
diff --git a/scss/components/_radios.scss b/scss/components/_radios.scss
new file mode 100644
index 0000000000..e15b6e5cf4
--- /dev/null
+++ b/scss/components/_radios.scss
@@ -0,0 +1,37 @@
+.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;
+ }
+ }
+}
diff --git a/scss/manifest.scss b/scss/manifest.scss
index 46afe201fb..fb1428cf82 100644
--- a/scss/manifest.scss
+++ b/scss/manifest.scss
@@ -83,3 +83,6 @@
@import '_sidebar';
@import '_account-list';
+
+// Re-usable generic UI components
+@import 'components/_radios';
diff --git a/src/renderer/components/Radio.tsx b/src/renderer/components/Radio.tsx
new file mode 100644
index 0000000000..dcdd73b1b8
--- /dev/null
+++ b/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 (
+
+ onSelect && onSelect()}
+ value={value}
+ defaultChecked={Boolean(selected)}
+ />
+
+
+ )
+}
diff --git a/src/renderer/components/RadioGroup.tsx b/src/renderer/components/RadioGroup.tsx
new file mode 100644
index 0000000000..31105d4bfd
--- /dev/null
+++ b/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 (
+
+ )
+}
diff --git a/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx b/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx
index cc7b77d95a..fba6cadd7a 100644
--- a/src/renderer/components/dialogs/Settings-ExperimentalFeatures.tsx
+++ b/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) => {
- 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 {
@@ -168,10 +169,24 @@ export function EditVideochatInstanceDialog({
{tx('videochat_instance_explain_2')}
-
+
-
-
+
+