diff --git a/index.html b/index.html index 22ca66a..3ceea76 100644 --- a/index.html +++ b/index.html @@ -3,6 +3,8 @@ + + diff --git a/src/pages/Settings/Dropdown.tsx b/src/pages/Settings/Dropdown.tsx index 0c5f86d..7a366c2 100644 --- a/src/pages/Settings/Dropdown.tsx +++ b/src/pages/Settings/Dropdown.tsx @@ -9,7 +9,7 @@ interface Option { const Dropdown = ({ storageKey, options, - refresh + refresh, }: { storageKey: string; options: Option[]; diff --git a/src/pages/Settings/Proxy.tsx b/src/pages/Settings/Proxy.tsx index 8f23109..5e0a831 100644 --- a/src/pages/Settings/Proxy.tsx +++ b/src/pages/Settings/Proxy.tsx @@ -2,7 +2,9 @@ import { motion } from "framer-motion"; import { tabContentVariant, settingsPageVariant } from "./Variants"; import Dropdown from "./Dropdown"; import BareInput from "./BareInput"; +import WispInput from "./WispInput"; import ProxyInput from "./ProxyInput"; +import { changeTransport } from "../../util/transports"; import { useTranslation } from "react-i18next"; const Proxy = ({ id, active }) => { @@ -27,6 +29,12 @@ const Proxy = ({ id, active }) => { { id: "https://bing.com/search?q=%s", label: "Bing" } ]; + const wispUrl = (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/"; + //libcurl can be added here when it's stable + const transports = [ + { id: "epoxy", label: "Epoxy" } + ]; + return ( { +
+
+ Wisp Server +
+
+ Enter the url of a Wisp server +
+ +
+
+
+ Transport +
+
+ Select the transport to use +
+ changeTransport(value, wispUrl)} /> +
{t("settings.httpProxy.title")} diff --git a/src/pages/Settings/WispInput.tsx b/src/pages/Settings/WispInput.tsx new file mode 100644 index 0000000..ed96529 --- /dev/null +++ b/src/pages/Settings/WispInput.tsx @@ -0,0 +1,52 @@ +import { useState, useEffect } from "preact/hooks"; +import { useTranslation } from "react-i18next"; +import { ToastContainer, toast } from "react-toastify"; + +interface WispInputProps { + placeholder: string; +} + +function WispInput(props: WispInputProps) { + const { t } = useTranslation(); + const value = localStorage.getItem("wispUrl") || (location.protocol === "https:" ? "wss://" : "ws://") + location.host + "/wisp/"; + const [inputValue, setInputValue] = useState(value); + function validateUrl(url: string) { + let finalUrl = url; + if (finalUrl.startsWith("http://")) { + finalUrl = finalUrl.replace("http://", "ws://"); + } else if (finalUrl.startsWith("https://")) { + finalUrl = finalUrl.replace("https://", "wss://"); + } + } + function handleChange() { + const url = validateUrl((document.getElementById("input") as HTMLInputElement).value); + localStorage.setItem("wispUrl", url); + } + return ( +
+ +
+ { + if (event.key === "Enter") { + handleChange(); + } + }} + id="input" + className="font-roboto flex h-14 w-56 flex-row rounded-2xl border border-input-border-color bg-input p-4 text-center text-xl text-input-text" + /> +
+ Select +
+
+
+ ); +} + +export default WispInput; diff --git a/src/util/transports.ts b/src/util/transports.ts new file mode 100644 index 0000000..db49f82 --- /dev/null +++ b/src/util/transports.ts @@ -0,0 +1,26 @@ +import { SetTransport, registerRemoteListener } from "@mercuryworkshop/bare-mux"; + + +declare global { + interface Window { + BareMux: any; + p: any; + } +} +function changeTransport(transport: string, wispUrl: string) { + switch (transport) { + case "epoxy": + localStorage.setItem("transport", "epoxy"); + SetTransport("EpxMod.EpoxyClient", { wisp: wispUrl }); + break; + //libcurl when supported can be easily added here + default: + SetTransport("EpxMod.EpoxyClient", { wisp: wispUrl }); + break; + } +} + +registerRemoteListener(navigator.serviceWorker.controller!); +const p = changeTransport("epoxy", "ws://localhost:5173/wisp/"); +window.p = p; +export { changeTransport }; diff --git a/vite.config.ts b/vite.config.ts index aea58d9..f10cdba 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -2,8 +2,10 @@ import million from "million/compiler"; import { defineConfig } from "vite"; import preact from "@preact/preset-vite"; import { viteStaticCopy } from "vite-plugin-static-copy"; -import { uvPath } from "@nebula-services/ultraviolet"; +import { uvPath } from "@titaniumnetwork-dev/ultraviolet"; import { dynamicPath } from "@nebula-services/dynamic"; +import { epoxyPath } from "@mercuryworkshop/epoxy-transport"; +import { baremuxPath } from "@mercuryworkshop/bare-mux"; import path from "path"; const __dirname = path.resolve(); @@ -19,6 +21,17 @@ export default defineConfig({ dest: "uv", overwrite: false }, + { + src: `${baremuxPath}/**/*`.replace(/\\/g, "/"), + dest: "mux", + overwrite: false + }, + { + //include ALL files types + src: `${epoxyPath}/**/*`, + dest: "epoxy", + overwrite: false + }, { // .replace fixes weird paths on Windows src: `${dynamicPath}/dynamic.*.js`.replace(/\\/g, "/"),