Add WispServerTiming.ts, begin work on a dropdown that shows wisp servers and their ping
This commit is contained in:
parent
c9843beae5
commit
35c167503d
5 changed files with 106 additions and 36 deletions
|
|
@ -29,6 +29,11 @@ const transportsList = [
|
|||
{ name: "Libcurl", value: "/libcurl/index.mjs" },
|
||||
{ name: "Bare", value: "/baremod/index.mjs" },
|
||||
];
|
||||
|
||||
const wispURLList = [
|
||||
{ name: "Alu (US)", value: "wss://aluu.xyz/wisp/" },
|
||||
{ name: "Nebula (US)", value: "wss://nebulaproxy.io/wisp/" }
|
||||
];
|
||||
---
|
||||
|
||||
<div class="settings-container">
|
||||
|
|
@ -45,8 +50,8 @@ const transportsList = [
|
|||
<Dropdown buttonNameDefault={t("settings.proxy.openPageWith.embed")} dropdownList={openPageWith} localStorageKey="alu__selectedOpenWith" id="dropdown__open-with" />
|
||||
</div>
|
||||
<div class="setting__wisp_url">
|
||||
<label aria-label="Wisp URL" for="wisp-url-input" class="setting-label">{t("settings.proxy.wispURL")}</label>
|
||||
<Input height="50px" inputName="wisp-url" />
|
||||
<label aria-label="Wisp URL" for="dropdown__wisp-url" class="setting-label">{t("settings.proxy.wispURL")}</label>
|
||||
<Dropdown buttonNameDefault="" dropdownList={wispURLList} localStorageKey="alu__selectedWisp" id="dropdown__wisp-url" />
|
||||
</div>
|
||||
<div class="setting__bare_url">
|
||||
<label aria-label="Bare Server URL" for="bare-url-input" class="setting-label">{t("settings.proxy.bareURL")}</label>
|
||||
|
|
|
|||
49
src/components/ts/WispServerTiming.ts
Normal file
49
src/components/ts/WispServerTiming.ts
Normal file
|
|
@ -0,0 +1,49 @@
|
|||
export async function testWispServers(servers: WispServer[]): Promise<WispData[]> {
|
||||
let wispData: WispData[] = [];
|
||||
|
||||
for (const server of servers) {
|
||||
let start = performance.now();
|
||||
|
||||
try {
|
||||
await new Promise((resolve, reject) => {
|
||||
let socket = new WebSocket(server.url);
|
||||
|
||||
socket.onopen = () => {
|
||||
let end = performance.now();
|
||||
console.log(`Connected to ${server.url} in ${end - start}ms`);
|
||||
let data = {
|
||||
server: server,
|
||||
time: end - start
|
||||
};
|
||||
wispData.push(data);
|
||||
socket.close();
|
||||
resolve(null);
|
||||
};
|
||||
|
||||
socket.onerror = (error) => {
|
||||
reject(error);
|
||||
};
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(`Failed to connect to ${server.url}`, error);
|
||||
}
|
||||
}
|
||||
|
||||
if (wispData.length === servers.length) {
|
||||
return wispData;
|
||||
} else {
|
||||
throw new Error('Failed to connect to all servers');
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
window.wispData = await testWispServers([
|
||||
{
|
||||
url: 'wss://aluu.xyz/wisp/'
|
||||
},
|
||||
{
|
||||
url: 'wss://nebulaproxy.io/wisp/'
|
||||
},
|
||||
])
|
||||
|
||||
console.log(window.wispData);
|
||||
|
|
@ -60,6 +60,7 @@ export function getStaticPaths() {
|
|||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<script src="@components/ts/WispServerTiming.ts"></script>
|
||||
</main>
|
||||
<ProxyRegistrar />
|
||||
<script>
|
||||
|
|
|
|||
|
|
@ -63,12 +63,12 @@ export function getStaticPaths() {
|
|||
};
|
||||
</script>
|
||||
<script is:inline>
|
||||
loadedContentStorage = {};
|
||||
window.currentlySelectedTab;
|
||||
let loadedContentStorage = {};
|
||||
let currentlySelectedTab;
|
||||
function settingsLoad() {
|
||||
document.addEventListener("astro:before-swap", () => {
|
||||
// Cleanup event, this should remove all added event listeners to prepare for if the page is visited again.
|
||||
window.currentlySelectedTab = "";
|
||||
currentlySelectedTab = "";
|
||||
document.removeEventListener("setting-tabChange", determineListener);
|
||||
});
|
||||
Array.from(document.getElementsByClassName("setting-tab")).forEach((tab) => {
|
||||
|
|
@ -84,8 +84,8 @@ export function getStaticPaths() {
|
|||
});
|
||||
|
||||
function loadContent(tabID) {
|
||||
if (window.currentlySelectedTab == tabID) return;
|
||||
else window.currentlySelectedTab = tabID;
|
||||
if (currentlySelectedTab == tabID) return;
|
||||
else currentlySelectedTab = tabID;
|
||||
let currentContent = document.getElementById("current-content");
|
||||
if (currentContent) {
|
||||
currentContent.style.opacity = "0";
|
||||
|
|
@ -177,16 +177,19 @@ export function getStaticPaths() {
|
|||
}
|
||||
}
|
||||
|
||||
function applyDropdownEventListeners(item, dropdownID, localStorageItem, optionalCallback) {
|
||||
Array.from(item.children).forEach((item) => {
|
||||
item.onclick = () => {
|
||||
function applyDropdownEventListeners(dropdown, optionalCallback) {
|
||||
let dropdownSibling = document.getElementById(dropdown.id + "-menu");
|
||||
let localStorageItem = dropdown.dataset.localStorageKey;
|
||||
Array.from(dropdownSibling.children).forEach((child) => {
|
||||
child.onclick = () => {
|
||||
let localStorageItemContent = {
|
||||
name: item.innerText,
|
||||
value: item.dataset.setting,
|
||||
name: child.innerText,
|
||||
value: child.dataset.setting,
|
||||
};
|
||||
localStorage.setItem(localStorageItem, JSON.stringify(localStorageItemContent));
|
||||
applySavedLocalStorage(localStorageItem, dropdownID);
|
||||
closeDropdown(item.parentElement.id);
|
||||
applySavedLocalStorage(localStorageItem, dropdown.id);
|
||||
closeDropdown(dropdownSibling.id);
|
||||
|
||||
if (typeof optionalCallback == "function") {
|
||||
optionalCallback();
|
||||
}
|
||||
|
|
@ -233,10 +236,11 @@ export function getStaticPaths() {
|
|||
}
|
||||
applySavedLocalStorage("alu__selectedTheme", "dropdown__selected-theme");
|
||||
applySavedLocalStorage("alu__selectedLanguage", "dropdown__selected-language");
|
||||
let themeDropdown = document.getElementById("dropdown__selected-theme-menu");
|
||||
let languageDropdown = document.getElementById("dropdown__selected-language-menu");
|
||||
applyDropdownEventListeners(themeDropdown, "dropdown__selected-theme", "alu__selectedTheme", changeTheme);
|
||||
applyDropdownEventListeners(languageDropdown, "dropdown__selected-language", "alu__selectedLanguage", navigateToNewLangaugePage);
|
||||
|
||||
let themeDropdown = document.getElementById("dropdown__selected-theme");
|
||||
let languageDropdown = document.getElementById("dropdown__selected-language");
|
||||
applyDropdownEventListeners(themeDropdown, changeTheme);
|
||||
applyDropdownEventListeners(languageDropdown, navigateToNewLangaugePage);
|
||||
};
|
||||
}
|
||||
|
||||
|
|
@ -328,37 +332,38 @@ export function getStaticPaths() {
|
|||
applySavedLocalStorage("alu__search_engine", "dropdown__search-engine");
|
||||
applySavedLocalStorage("alu__selectedOpenWith", "dropdown__open-with");
|
||||
applySavedLocalStorage("alu__selectedTransport", "dropdown__transport");
|
||||
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy-menu");
|
||||
let searchEngineDropdown = document.getElementById("dropdown__search-engine-menu");
|
||||
let openWithDropdown = document.getElementById("dropdown__open-with-menu");
|
||||
let currentTransportDropdown = document.getElementById("dropdown__transport-menu");
|
||||
// Dropdowns
|
||||
let selectedProxyDropdown = document.getElementById("dropdown__selected-proxy");
|
||||
let searchEngineDropdown = document.getElementById("dropdown__search-engine");
|
||||
let openWithDropdown = document.getElementById("dropdown__open-with");
|
||||
let currentTransportDropdown = document.getElementById("dropdown__transport");
|
||||
let wispURLDropdown = document.getElementById("dropdown__wisp-url");
|
||||
|
||||
// Inputs
|
||||
let searxngUrlInput = document.getElementById("searxng-url-input");
|
||||
let wispURLInput = document.getElementById("wisp-url-input");
|
||||
let bareURLInput = document.getElementById("bare-url-input");
|
||||
let savedSearxngUrl = localStorage.getItem("alu__searxngUrl");
|
||||
if (savedSearxngUrl != null) {
|
||||
if (savedSearxngUrl == "") localStorage.setItem("alu__searxngUrl", "https://searxng.site/");
|
||||
searxngUrlInput.value = localStorage.getItem("alu__searxngUrl");
|
||||
}
|
||||
const useWss = location.protocol == "https:";
|
||||
const webSocketProtocol = useWss ? "wss://" : "ws://";
|
||||
let savedWispUrl = localStorage.getItem("alu__wispUrl");
|
||||
if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
|
||||
// const useWss = location.protocol == "https:";
|
||||
// const webSocketProtocol = useWss ? "wss://" : "ws://";
|
||||
// let savedWispUrl = localStorage.getItem("alu__wispUrl");
|
||||
// if (savedWispUrl == null || savedWispUrl == "") localStorage.setItem("alu__wispUrl", webSocketProtocol + location.host + "/wisp/");
|
||||
let savedBareUrl = localStorage.getItem("alu__bareUrl");
|
||||
if (savedBareUrl == null || savedBareUrl == "") localStorage.setItem("alu__bareUrl", location.origin + "/bare/");
|
||||
wispURLInput.value = localStorage.getItem("alu__wispUrl");
|
||||
|
||||
bareURLInput.value = localStorage.getItem("alu__bareUrl");
|
||||
// Proxy settings
|
||||
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
|
||||
applyInputListeners(wispURLInput, "alu__wispUrl");
|
||||
applyInputListeners(bareURLInput, "alu__bareUrl");
|
||||
|
||||
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown].forEach((dropdown) => {
|
||||
let dropdownButton = document.getElementById(dropdown.id.replace("-menu", ""));
|
||||
applyDropdownEventListeners(dropdown, dropdownButton.id, dropdownButton.dataset.localStorageKey);
|
||||
[selectedProxyDropdown, openWithDropdown, currentTransportDropdown, wispURLDropdown].forEach((dropdown) => {
|
||||
applyDropdownEventListeners(dropdown);
|
||||
});
|
||||
applyDropdownEventListeners(searchEngineDropdown, "dropdown__search-engine", "alu__search_engine", checkSearxng);
|
||||
applyDropdownEventListeners(searchEngineDropdown, checkSearxng);
|
||||
checkSearxng();
|
||||
|
||||
applyInputListeners(searxngUrlInput, "alu__searxngUrl");
|
||||
applyInputListeners(bareURLInput, "alu__bareUrl");
|
||||
} else if (event.detail == "setting-tab-customization") {
|
||||
setupCustomizationSettings();
|
||||
} else if (event.detail == "setting-tab-cloaking") {
|
||||
|
|
|
|||
10
src/types.d.ts
vendored
10
src/types.d.ts
vendored
|
|
@ -12,6 +12,7 @@ interface Window {
|
|||
URLPattern: URLPattern | null;
|
||||
// Why is this not already on Window?
|
||||
eval(string): void;
|
||||
wispData: WispData[];
|
||||
}
|
||||
|
||||
type ExtType = "serviceWorker" | "theme" | "page";
|
||||
|
|
@ -67,3 +68,12 @@ type GameMetadata = {
|
|||
type GameList = {
|
||||
[key: string]: GameMetadata;
|
||||
};
|
||||
|
||||
type WispServer = {
|
||||
url: string,
|
||||
}
|
||||
|
||||
type WispData = {
|
||||
server: WispServer,
|
||||
time: number,
|
||||
}
|
||||
Loading…
Add table
Reference in a new issue