studio/element-call
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix dev EditInPlace

Browse Source
This commit is contained in:
Timo K
2025-11-24 10:04:01 +01:00
parent 7532f72c90
commit ddd015d696
3 changed files with 316 additions and 311 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
locales/en/app.json
View File

@@ -65,7 +65,7 @@
"always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms", "always_show_iphone_earpiece": "Show iPhone earpiece option on all platforms",
"crypto_version": "Crypto version: {{version}}", "crypto_version": "Crypto version: {{version}}",
"custom_livekit_url": { "custom_livekit_url": {
"current_url": "Overwrite: ", "current_url": "Currently set to: ",
"from_config": "Currently, no overwrite is set. Url from well-known or config is used.", "from_config": "Currently, no overwrite is set. Url from well-known or config is used.",
"label": "Custom Livekit-url", "label": "Custom Livekit-url",
"reset": "Reset overwrite", "reset": "Reset overwrite",

106
src/settings/DeveloperSettingsTab.tsx
View File

@@ -96,7 +96,10 @@ export const DeveloperSettingsTab: FC<Props> = ({
customLivekitUrlSetting, customLivekitUrlSetting,
); );
const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] = const [customLivekitUrlTextBuffer, setCustomLivekitUrlTextBuffer] =
useState(""); useState(customLivekitUrl);
useEffect(() => {
setCustomLivekitUrlTextBuffer(customLivekitUrl);
}, [customLivekitUrl]);
const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting); const [muteAllAudio, setMuteAllAudio] = useSetting(muteAllAudioSetting);
@@ -114,7 +117,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
}, [livekitRooms]); }, [livekitRooms]);
return ( return (
<Form onSubmit={(e) => e.preventDefault()}> <>
<p> <p>
{t("developer_mode.hostname", { {t("developer_mode.hostname", {
hostname: window.location.hostname || "unknown", hostname: window.location.hostname || "unknown",
@@ -227,7 +230,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")} cancelButtonLabel={t("developer_mode.custom_livekit_url.reset")}
onSave={useCallback( onSave={useCallback(
(e: React.FormEvent<HTMLFormElement>) => { (e: React.FormEvent<HTMLFormElement>) => {
// e.preventDefault();
setCustomLivekitUrl( setCustomLivekitUrl(
customLivekitUrlTextBuffer === "" customLivekitUrlTextBuffer === ""
? null ? null
@@ -236,6 +238,7 @@ export const DeveloperSettingsTab: FC<Props> = ({
}, },
[setCustomLivekitUrl, customLivekitUrlTextBuffer], [setCustomLivekitUrl, customLivekitUrlTextBuffer],
)} )}
value={customLivekitUrlTextBuffer ?? ""}
onChange={useCallback( onChange={useCallback(
(event: ChangeEvent<HTMLInputElement>): void => { (event: ChangeEvent<HTMLInputElement>): void => {
setCustomLivekitUrlTextBuffer(event.target.value); setCustomLivekitUrlTextBuffer(event.target.value);
@@ -244,7 +247,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
)} )}
onCancel={useCallback( onCancel={useCallback(
(e: React.FormEvent<HTMLFormElement>) => { (e: React.FormEvent<HTMLFormElement>) => {
// e.preventDefault();
setCustomLivekitUrl(null); setCustomLivekitUrl(null);
}, },
[setCustomLivekitUrl], [setCustomLivekitUrl],
@@ -253,52 +255,54 @@ export const DeveloperSettingsTab: FC<Props> = ({
<Heading as="h3" type="body" weight="semibold" size="lg"> <Heading as="h3" type="body" weight="semibold" size="lg">
{t("developer_mode.matrixRTCMode.title")} {t("developer_mode.matrixRTCMode.title")}
</Heading> </Heading>
<InlineField <Form>
name={matrixRTCModeRadioGroup} <InlineField
control={ name={matrixRTCModeRadioGroup}
<RadioControl control={
checked={matrixRTCMode === MatrixRTCMode.Legacy} <RadioControl
value={MatrixRTCMode.Legacy} checked={matrixRTCMode === MatrixRTCMode.Legacy}
onChange={onMatrixRTCModeChange} value={MatrixRTCMode.Legacy}
/> onChange={onMatrixRTCModeChange}
} />
> }
<Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label> >
<HelpMessage> <Label>{t("developer_mode.matrixRTCMode.Legacy.label")}</Label>
{t("developer_mode.matrixRTCMode.Legacy.description")} <HelpMessage>
</HelpMessage> {t("developer_mode.matrixRTCMode.Legacy.description")}
</InlineField> </HelpMessage>
<InlineField </InlineField>
name={matrixRTCModeRadioGroup} <InlineField
control={ name={matrixRTCModeRadioGroup}
<RadioControl control={
checked={matrixRTCMode === MatrixRTCMode.Compatibil} <RadioControl
value={MatrixRTCMode.Compatibil} checked={matrixRTCMode === MatrixRTCMode.Compatibil}
onChange={onMatrixRTCModeChange} value={MatrixRTCMode.Compatibil}
/> onChange={onMatrixRTCModeChange}
} />
> }
<Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label> >
<HelpMessage> <Label>{t("developer_mode.matrixRTCMode.Comptibility.label")}</Label>
{t("developer_mode.matrixRTCMode.Comptibility.description")} <HelpMessage>
</HelpMessage> {t("developer_mode.matrixRTCMode.Comptibility.description")}
</InlineField> </HelpMessage>
<InlineField </InlineField>
name={matrixRTCModeRadioGroup} <InlineField
control={ name={matrixRTCModeRadioGroup}
<RadioControl control={
checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0} <RadioControl
value={MatrixRTCMode.Matrix_2_0} checked={matrixRTCMode === MatrixRTCMode.Matrix_2_0}
disabled={!stickyEventsSupported} value={MatrixRTCMode.Matrix_2_0}
onChange={onMatrixRTCModeChange} disabled={!stickyEventsSupported}
/> onChange={onMatrixRTCModeChange}
} />
> }
<Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label> >
<HelpMessage> <Label>{t("developer_mode.matrixRTCMode.Matrix_2_0.label")}</Label>
{t("developer_mode.matrixRTCMode.Matrix_2_0.description")} <HelpMessage>
</HelpMessage> {t("developer_mode.matrixRTCMode.Matrix_2_0.description")}
</InlineField> </HelpMessage>
</InlineField>
</Form>
{livekitRooms?.map((livekitRoom) => ( {livekitRooms?.map((livekitRoom) => (
<> <>
<h3> <h3>
@@ -323,6 +327,6 @@ export const DeveloperSettingsTab: FC<Props> = ({
<pre>{JSON.stringify(env, null, 2)}</pre> <pre>{JSON.stringify(env, null, 2)}</pre>
<p>{t("developer_mode.url_params")}</p> <p>{t("developer_mode.url_params")}</p>
<pre>{JSON.stringify(urlParams, null, 2)}</pre> <pre>{JSON.stringify(urlParams, null, 2)}</pre>
</Form> </>
); );
}; };

519
src/settings/__snapshots__/DeveloperSettingsTab.test.tsx.snap
View File

@@ -2,230 +2,231 @@
exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = ` exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
<div> <div>
<p>
Hostname: localhost
</p>
<p>
Element Call version: dev
</p>
<p>
Crypto version: crypto-1.0.0
</p>
<p>
Matrix ID: @alice:example.org
</p>
<p>
Device ID: DEVICE123
</p>
<div
class="fieldRow"
>
<div
class="field inputField"
>
<input
aria-describedby="«r1»"
id="duplicateTiles"
min="0"
type="number"
value="0"
/>
<label
for="duplicateTiles"
>
Number of additional tile copies per participant
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r2»"
id="debugTileLayout"
type="checkbox"
/>
<label
for="debugTileLayout"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Debug tile layout
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r3»"
id="showConnectionStats"
type="checkbox"
/>
<label
for="showConnectionStats"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Show connection statistics
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r4»"
id="muteAllAudio"
type="checkbox"
/>
<label
for="muteAllAudio"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Mute all audio (participants, reactions, join sounds)
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r5»"
id="alwaysShowIphoneEarpiece"
type="checkbox"
/>
<label
for="alwaysShowIphoneEarpiece"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Show iPhone earpiece option on all platforms
</label>
</div>
</div>
<form <form
class="_root_19upo_16" class="_root_19upo_16"
> >
<p>
Hostname: localhost
</p>
<p>
Element Call version: dev
</p>
<p>
Crypto version: crypto-1.0.0
</p>
<p>
Matrix ID: @alice:example.org
</p>
<p>
Device ID: DEVICE123
</p>
<div <div
class="fieldRow" class="_field_19upo_26"
> >
<label
class="_label_19upo_59"
for="radix-«r6»"
>
Custom Livekit-url
</label>
<div <div
class="field inputField" class="_controls_17lij_8"
> >
<input <input
aria-describedby="«r1»" aria-describedby="radix-«r7»"
id="duplicateTiles" class="_control_sqdq4_10"
min="0" id="radix-«r6»"
type="number" name="input"
value="0" title=""
value=""
/> />
<label
for="duplicateTiles"
>
Number of additional tile copies per participant
</label>
</div> </div>
</div> <span
<div class="_message_19upo_85 _help-message_19upo_91"
class="fieldRow" id="radix-«r7»"
>
<div
class="field checkboxField"
> >
<input Currently, no overwrite is set. Url from well-known or config is used.
aria-describedby="«r2»" </span>
id="debugTileLayout"
type="checkbox"
/>
<label
for="debugTileLayout"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Debug tile layout
</label>
</div>
</div> </div>
<div </form>
class="fieldRow" <h3
> class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
<div >
class="field checkboxField" MatrixRTC mode
> </h3>
<input <form
aria-describedby="«r3»" class="_root_19upo_16"
id="showConnectionStats" >
type="checkbox"
/>
<label
for="showConnectionStats"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Show connection statistics
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r4»"
id="muteAllAudio"
type="checkbox"
/>
<label
for="muteAllAudio"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Mute all audio (participants, reactions, join sounds)
</label>
</div>
</div>
<div
class="fieldRow"
>
<div
class="field checkboxField"
>
<input
aria-describedby="«r5»"
id="alwaysShowIphoneEarpiece"
type="checkbox"
/>
<label
for="alwaysShowIphoneEarpiece"
>
<div
class="checkbox"
>
<svg
fill="none"
height="24"
stroke="#000"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="m20 6-11 11-5-5"
/>
</svg>
</div>
Show iPhone earpiece option on all platforms
</label>
</div>
</div>
<form
class="_root_19upo_16"
>
<div
class="_field_19upo_26"
>
<label
class="_label_19upo_59"
for="radix-«r6»"
>
Custom Livekit-url
</label>
<div
class="_controls_17lij_8"
>
<input
aria-describedby="radix-«r7»"
class="_control_sqdq4_10"
id="radix-«r6»"
name="input"
title=""
/>
</div>
<span
class="_message_19upo_85 _help-message_19upo_91"
id="radix-«r7»"
>
Currently, no overwrite is set. Url from well-known or config is used.
</span>
</div>
</form>
<h3
class="_typography_6v6n8_153 _font-body-lg-semibold_6v6n8_74"
>
MatrixRTC mode
</h3>
<div <div
class="_inline-field_19upo_32" class="_inline-field_19upo_32"
> >
@@ -347,64 +348,64 @@ exports[`DeveloperSettingsTab > renders and matches snapshot 1`] = `
</span> </span>
</div> </div>
</div> </div>
<h3> </form>
LiveKit SFU: wss://local-sfu.example.org <h3>
</h3> LiveKit SFU: wss://local-sfu.example.org
<p> </h3>
ws-url: <p>
wss://local-sfu.example.org/ ws-url:
</p> wss://local-sfu.example.org/
<p> </p>
LiveKit Server Info <p>
( LiveKit Server Info
local (
) local
</p> )
<pre </p>
class="pre" <pre
> class="pre"
{ >
{
"region": "local", "region": "local",
"version": "1.2.3" "version": "1.2.3"
} }
local-metadata local-metadata
</pre> </pre>
<h3> <h3>
LiveKit SFU: wss://remote-sfu.example.org LiveKit SFU: wss://remote-sfu.example.org
</h3> </h3>
<p> <p>
LiveKit Server Info LiveKit Server Info
( (
remote remote
) )
</p> </p>
<pre <pre
class="pre" class="pre"
> >
{ {
"region": "remote", "region": "remote",
"version": "4.5.6" "version": "4.5.6"
} }
remote-metadata remote-metadata
</pre> </pre>
<p> <p>
Environment variables Environment variables
</p> </p>
<pre> <pre>
{ {
"MY_MOCK_ENV": 10, "MY_MOCK_ENV": 10,
"ENV": "test" "ENV": "test"
} }
</pre> </pre>
<p> <p>
URL parameters URL parameters
</p> </p>
<pre> <pre>
{ {
"mocked": true, "mocked": true,
"answer": 42 "answer": 42
} }
</pre> </pre>
</form>
</div> </div>
`; `;