mirror of
https://github.com/vrtmrz/obsidian-livesync.git
synced 2026-05-17 04:51:17 +00:00
v0.25.23.beta1
### Fixed (This should be backported to 0.25.22 if the beta phase is prolonged) - No longer larger files will not create a chunks during preparing `Reset Synchronisation on This Device`. ### Behaviour changes - Setup wizard is now more `goal-oriented`. Brand-new screens are introduced. - `Fetch everything` and `Rebuild everything` is now `Reset Synchronisation on This Device` and `Overwrite Server Data with This Device's Files`. - Remote configuration and E2EE settings are now separated to each modal dialogue. - Peer-to-Peer settings is also separated into its own modal dialogue. - Setup-URI, and Report for the Issue are now not copied to clipboard automatically. Instead, there are copy dialogue and buttons to copy them explicitly. - No longer optional features are introduced during the setup or `Reset Synchronisation on This Device`, `Overwrite Server Data with This Device's Files`. - We cannot preform `Fetch everything` and `Rebuild everything` (Removed, so the old name) without restarting Obsidian now. ### Miscellaneous - Setup QR Code generation is separated into a src/lib/src/API/processSetting.ts file. Please use it as a subrepository if you want to generate QR codes in your own application. - Setup-URI is also separated into a src/lib/src/API/processSetting.ts - Some direct access to web-APIs are now wrapped into the services layer. ### Dependency updates - Many dependencies are updated. Please see `package.json`. - As upgrading TypeScript, Fixed many UInt8Array<ArrayBuffer> and Uint8Array type mismatches.
This commit is contained in:
vorotamoroz
255
src/modules/features/SetupWizard/dialogs/SetupRemoteP2P.svelte
Normal file
255
src/modules/features/SetupWizard/dialogs/SetupRemoteP2P.svelte
Normal file
@@ -0,0 +1,255 @@
|
||||
<script lang="ts">
|
||||
// import { delay } from "octagonal-wheels/promises";
|
||||
import DialogHeader from "@/lib/src/UI/components/DialogHeader.svelte";
|
||||
import Guidance from "@/lib/src/UI/components/Guidance.svelte";
|
||||
import Decision from "@/lib/src/UI/components/Decision.svelte";
|
||||
import UserDecisions from "@/lib/src/UI/components/UserDecisions.svelte";
|
||||
import InfoNote from "@/lib/src/UI/components/InfoNote.svelte";
|
||||
import InputRow from "@/lib/src/UI/components/InputRow.svelte";
|
||||
import Password from "@/lib/src/UI/components/Password.svelte";
|
||||
import { PouchDB } from "../../../../lib/src/pouchdb/pouchdb-browser";
|
||||
import {
|
||||
DEFAULT_SETTINGS,
|
||||
P2P_DEFAULT_SETTINGS,
|
||||
PREFERRED_BASE,
|
||||
RemoteTypes,
|
||||
type EntryDoc,
|
||||
type ObsidianLiveSyncSettings,
|
||||
type P2PConnectionInfo,
|
||||
type P2PSyncSetting,
|
||||
} from "../../../../lib/src/common/types";
|
||||
|
||||
import { TrysteroReplicator } from "../../../../lib/src/replication/trystero/TrysteroReplicator";
|
||||
import type { ReplicatorHostEnv } from "../../../../lib/src/replication/trystero/types";
|
||||
import { copyTo, pickP2PSyncSettings, type SimpleStore } from "../../../../lib/src/common/utils";
|
||||
import { getObsidianDialogContext } from "../ObsidianSvelteDialog";
|
||||
import { onMount } from "svelte";
|
||||
import type { GuestDialogProps } from "../../../../lib/src/UI/svelteDialog";
|
||||
import { SETTING_KEY_P2P_DEVICE_NAME } from "../../../../lib/src/common/types";
|
||||
|
||||
const default_setting = pickP2PSyncSettings(DEFAULT_SETTINGS);
|
||||
let syncSetting = $state<P2PConnectionInfo>({ ...default_setting });
|
||||
|
||||
const context = getObsidianDialogContext();
|
||||
let error = $state("");
|
||||
let devicePeerId = $state("");
|
||||
const TYPE_CANCELLED = "cancelled";
|
||||
type SettingInfo = {
|
||||
info: P2PConnectionInfo;
|
||||
devicePeerId: string;
|
||||
};
|
||||
type ResultType = typeof TYPE_CANCELLED | SettingInfo;
|
||||
type Props = GuestDialogProps<ResultType, P2PSyncSetting>;
|
||||
|
||||
const { setResult, getInitialData }: Props = $props();
|
||||
onMount(() => {
|
||||
if (getInitialData) {
|
||||
const initialData = getInitialData();
|
||||
if (initialData) {
|
||||
copyTo(initialData, syncSetting);
|
||||
}
|
||||
if (context.services.config.getSmallConfig(SETTING_KEY_P2P_DEVICE_NAME)) {
|
||||
devicePeerId = context.services.config.getSmallConfig(SETTING_KEY_P2P_DEVICE_NAME) as string;
|
||||
}
|
||||
}
|
||||
});
|
||||
function generateSetting() {
|
||||
const connSetting: P2PSyncSetting = {
|
||||
// remoteType: ",
|
||||
...P2P_DEFAULT_SETTINGS,
|
||||
...syncSetting,
|
||||
P2P_Enabled: true,
|
||||
};
|
||||
const trialSettings: P2PSyncSetting = {
|
||||
...connSetting,
|
||||
};
|
||||
const trialRemoteSetting: ObsidianLiveSyncSettings = {
|
||||
...DEFAULT_SETTINGS,
|
||||
...PREFERRED_BASE,
|
||||
remoteType: RemoteTypes.REMOTE_P2P,
|
||||
...trialSettings,
|
||||
};
|
||||
return trialRemoteSetting;
|
||||
}
|
||||
|
||||
async function checkConnection() {
|
||||
try {
|
||||
processing = true;
|
||||
const trialRemoteSetting = generateSetting();
|
||||
const map = new Map<string, string>();
|
||||
const store = {
|
||||
get: (key: string) => {
|
||||
return Promise.resolve(map.get(key) || null);
|
||||
},
|
||||
set: (key: string, value: any) => {
|
||||
map.set(key, value);
|
||||
return Promise.resolve();
|
||||
},
|
||||
delete: (key: string) => {
|
||||
map.delete(key);
|
||||
return Promise.resolve();
|
||||
},
|
||||
keys: () => {
|
||||
return Promise.resolve(Array.from(map.keys()));
|
||||
},
|
||||
} as SimpleStore<any>;
|
||||
|
||||
const dummyPouch = new PouchDB<EntryDoc>("dummy");
|
||||
const env: ReplicatorHostEnv = {
|
||||
settings: trialRemoteSetting,
|
||||
processReplicatedDocs: async (docs: any[]) => {
|
||||
return;
|
||||
},
|
||||
confirm: context.plugin.confirm,
|
||||
db: dummyPouch,
|
||||
simpleStore: store,
|
||||
deviceName: devicePeerId || "unnamed-device",
|
||||
platform: "setup-wizard",
|
||||
};
|
||||
const replicator = new TrysteroReplicator(env);
|
||||
try {
|
||||
await replicator.setOnSetup();
|
||||
await replicator.allowReconnection();
|
||||
await replicator.open();
|
||||
for (let i = 0; i < 10; i++) {
|
||||
// await delay(1000);
|
||||
await new Promise((resolve) => setTimeout(resolve, 1000));
|
||||
// Logger(`Checking known advertisements... (${i})`, LOG_LEVEL_INFO);
|
||||
if (replicator.knownAdvertisements.length > 0) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
// context.holdingSettings = trialRemoteSetting;
|
||||
|
||||
if (replicator.knownAdvertisements.length === 0) {
|
||||
return "Your settings seem correct, but no other peers were found.";
|
||||
}
|
||||
return "";
|
||||
} catch (e) {
|
||||
return `Failed to connect to other peers: ${e}`;
|
||||
} finally {
|
||||
try {
|
||||
replicator.close();
|
||||
dummyPouch.destroy();
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
processing = false;
|
||||
}
|
||||
}
|
||||
function setDefaultRelay() {
|
||||
syncSetting.P2P_relays = P2P_DEFAULT_SETTINGS.P2P_relays;
|
||||
}
|
||||
|
||||
let processing = $state(false);
|
||||
function generateDefaultGroupId() {
|
||||
const randomValues = new Uint16Array(4);
|
||||
crypto.getRandomValues(randomValues);
|
||||
const MAX_UINT16 = 65536;
|
||||
const a = Math.floor((randomValues[0] / MAX_UINT16) * 1000);
|
||||
const b = Math.floor((randomValues[1] / MAX_UINT16) * 1000);
|
||||
const c = Math.floor((randomValues[2] / MAX_UINT16) * 1000);
|
||||
const d_range = 36 * 36 * 36;
|
||||
const d = Math.floor((randomValues[3] / MAX_UINT16) * d_range);
|
||||
syncSetting.P2P_roomID = `${a.toString().padStart(3, "0")}-${b
|
||||
.toString()
|
||||
.padStart(3, "0")}-${c.toString().padStart(3, "0")}-${d.toString(36).padStart(3, "0")}`;
|
||||
}
|
||||
|
||||
async function checkAndCommit() {
|
||||
error = "";
|
||||
try {
|
||||
error = (await checkConnection()) || "";
|
||||
if (!error) {
|
||||
const setting = generateSetting();
|
||||
setResult({
|
||||
info: pickP2PSyncSettings(setting),
|
||||
devicePeerId: devicePeerId,
|
||||
});
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
error = `Error during connection test: ${e}`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
function commit() {
|
||||
const setting = pickP2PSyncSettings(generateSetting());
|
||||
setResult({
|
||||
info: setting,
|
||||
devicePeerId: devicePeerId,
|
||||
});
|
||||
}
|
||||
function cancel() {
|
||||
setResult(TYPE_CANCELLED);
|
||||
}
|
||||
const canProceed = $derived.by(() => {
|
||||
return (
|
||||
syncSetting.P2P_relays.trim() !== "" &&
|
||||
syncSetting.P2P_roomID.trim() !== "" &&
|
||||
syncSetting.P2P_passphrase.trim() !== "" &&
|
||||
devicePeerId.trim() !== ""
|
||||
);
|
||||
});
|
||||
</script>
|
||||
|
||||
<DialogHeader title="P2P Configuration" />
|
||||
<Guidance>Please enter the Peer-to-Peer Synchronisation information below.</Guidance>
|
||||
<InputRow label="Relay URL">
|
||||
<input
|
||||
type="text"
|
||||
name="p2p-relay-url"
|
||||
placeholder="Enter the Relay URL)"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
bind:value={syncSetting.P2P_relays}
|
||||
/>
|
||||
<button class="button" onclick={() => setDefaultRelay()}>Use vrtmrz's relay</button>
|
||||
</InputRow>
|
||||
<InputRow label="Group ID">
|
||||
<input
|
||||
type="text"
|
||||
name="p2p-room-id"
|
||||
placeholder="123-456-789-abc"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
bind:value={syncSetting.P2P_roomID}
|
||||
/>
|
||||
<button class="button" onclick={() => generateDefaultGroupId()}>Generate Random ID</button>
|
||||
</InputRow>
|
||||
<InputRow label="Passphrase">
|
||||
<Password name="p2p-password" placeholder="Enter your passphrase" bind:value={syncSetting.P2P_passphrase} />
|
||||
</InputRow>
|
||||
<InfoNote>
|
||||
The Group ID and passphrase are used to identify your group of devices. Make sure to use the same Group ID and
|
||||
passphrase on all devices you want to synchronise.<br />
|
||||
Note that the Group ID is not limited to the generated format; you can use any string as the Group ID.
|
||||
</InfoNote>
|
||||
<InputRow label="Device Peer ID">
|
||||
<input
|
||||
type="text"
|
||||
name="p2p-device-peer-id"
|
||||
placeholder="main-iphone16"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
bind:value={devicePeerId}
|
||||
/>
|
||||
</InputRow>
|
||||
|
||||
<InfoNote error visible={error !== ""}>
|
||||
{error}
|
||||
</InfoNote>
|
||||
{#if processing}
|
||||
Checking connection... Please wait.
|
||||
{:else}
|
||||
<UserDecisions>
|
||||
<Decision title="Test Settings and Continue" important disabled={!canProceed} commit={() => checkAndCommit()} />
|
||||
<Decision title="Continue anyway" commit={() => commit()} />
|
||||
<Decision title="Cancel" commit={() => cancel()} />
|
||||
</UserDecisions>
|
||||
{/if}
|
||||
Reference in New Issue
Block a user