public/obsidian-livesync
1
0 Fork 0
mirror of https://github.com/vrtmrz/obsidian-livesync.git synced 2026-10-22 17:13:20 +00:00
Code Issues Packages Projects Releases Wiki Activity

Use host preparation for TURN connection settings

Browse Source
This commit is contained in:
vorotamoroz committed 2026-09-16 03:43:09 +00:00
1 parent a565070809
commit 11a07b26af
33 files changed
+654 -961
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/features/P2PSync/TurnConfiguration.svelte
+26 -38
View File
@@ -1,47 +1,33 @@
<script lang="ts">
import type { P2PConnectionInfo } from "@vrtmrz/livesync-commonlib/compat/common/types";
import { iceServerSourceDefinitions, validateIceServerSourceConfiguration } from "@/integrations/iceServerSources";
import { CLOUDFLARE_TURN_TYPE } from "@/integrations/cloudflare/settings";
import { validateManagedTurnSettings } from "@/integrations/turnSettings";
import { translateLiveSyncMessage as translate, translateIfAvailable } from "@/common/translation";
type TurnSettings = Pick<P2PConnectionInfo, "P2P_turnServers" | "P2P_turnUsername" | "P2P_turnCredential" | "P2P_iceServerSource">;
type TurnSettings = Pick<P2PConnectionInfo, "P2P_turnServers" | "P2P_turnUsername" | "P2P_turnCredential" | "P2P_managedType" | "P2P_managedId" | "P2P_managedToken">;
let { settings = $bindable() }: { settings: TurnSettings } = $props();
const sourceId = $derived(settings.P2P_iceServerSource?.id ?? "manual");
const definition = $derived(iceServerSourceDefinitions.find((source) => source.id === sourceId));
const error = $derived(validateIceServerSourceConfiguration(settings.P2P_iceServerSource));
const managedType = $derived(settings.P2P_managedType ?? "");
const error = $derived(validateManagedTurnSettings(settings));
function selectSource(id: string) {
const selected = iceServerSourceDefinitions.find((source) => source.id === id);
settings.P2P_iceServerSource = selected
? { version: 1, id, configuration: Object.fromEntries(selected.fields.map((field) => [field.key, ""])) }
: undefined;
}
function fieldValue(key: string): string {
const value = settings.P2P_iceServerSource?.configuration?.[key];
return typeof value === "string" ? value : "";
}
function setField(key: string, value: string) {
const source = settings.P2P_iceServerSource;
if (!source) return;
settings.P2P_iceServerSource = { ...source, configuration: { ...source.configuration, [key]: value } };
function selectProvider(type: string) {
settings.P2P_managedType = type || undefined;
settings.P2P_managedId = type ? "" : undefined;
settings.P2P_managedToken = type ? "" : undefined;
}
</script>
<div class="turn-configuration">
<label>
<span>{translate("TURN configuration")}</span>
<select aria-label={translate("TURN configuration")} name="p2p-turn-source" value={sourceId} onchange={(event) => selectSource(event.currentTarget.value)}>
<option value="manual">{translate("Manual")}</option>
{#each iceServerSourceDefinitions as source (source.id)}
<option value={source.id}>{translate(source.label)}</option>
{/each}
{#if sourceId !== "manual" && !definition}
<option value={sourceId} disabled>{translate("Unsupported TURN configuration")}</option>
<select aria-label={translate("TURN configuration")} name="p2p-turn-source" value={managedType} onchange={(event) => selectProvider(event.currentTarget.value)}>
<option value="">{translate("Manual")}</option>
<option value={CLOUDFLARE_TURN_TYPE}>{translate("Cloudflare")}</option>
{#if managedType !== "" && managedType !== CLOUDFLARE_TURN_TYPE}
<option value={managedType} disabled>{translate("Unsupported TURN configuration")}</option>
{/if}
</select>
</label>
{#if sourceId === "manual"}
{#if managedType === ""}
<label>
<span>{translate("TURN Server URLs (comma-separated)")}</span>
<textarea name="p2p-turn-servers" rows="3" placeholder="turn:turn.example.com:3478"
@@ -57,15 +43,17 @@
<input type="password" name="p2p-turn-credential" placeholder={translate("Enter TURN credential")} bind:value={settings.P2P_turnCredential}
autocomplete="new-password" />
</label>
{:else if definition}
{#each definition.fields as field (field.key)}
<label>
<span>{translate(field.label)}</span>
<input type={field.secret ? "password" : "text"} name={`p2p-turn-${field.key}`}
value={fieldValue(field.key)} oninput={(event) => setField(field.key, event.currentTarget.value)}
autocomplete={field.secret ? "new-password" : "off"} autocapitalize="off" spellcheck="false" />
</label>
{/each}
{:else if managedType === CLOUDFLARE_TURN_TYPE}
<label>
<span>{translate("TURN Key ID")}</span>
<input type="text" name="p2p-turn-turnKeyId" bind:value={settings.P2P_managedId}
autocomplete="off" autocapitalize="off" spellcheck="false" />
</label>
<label>
<span>{translate("TURN Key API Token")}</span>
<input type="password" name="p2p-turn-apiToken" bind:value={settings.P2P_managedToken}
autocomplete="new-password" autocapitalize="off" spellcheck="false" />
</label>
<p>{translate("The API token is saved with this profile and included in Setup URI and QR code sharing. Temporary TURN credentials are kept in memory only.")}</p>
{/if}
{#if error}