OK
This commit is contained in:
MotorTruck1221
parent
289cd7ccec
commit
69a2cd5b61
6 changed files with 121 additions and 2 deletions
|
|
@ -3,6 +3,8 @@
|
|||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<script src="mux/bare.cjs" defer></script>
|
||||
<script src="epoxy/index.js" defer></script>
|
||||
<script src="/uv/uv.bundle.js" defer></script>
|
||||
<script src="/uv/uv.config.js" defer></script>
|
||||
<script src="/dynamic/dynamic.config.js" defer></script>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ interface Option {
|
|||
const Dropdown = ({
|
||||
storageKey,
|
||||
options,
|
||||
refresh
|
||||
refresh,
|
||||
}: {
|
||||
storageKey: string;
|
||||
options: Option[];
|
||||
|
|
|
|||
|
|
@ -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 (
|
||||
<motion.div
|
||||
role="tabpanel"
|
||||
|
|
@ -84,6 +92,24 @@ const Proxy = ({ id, active }) => {
|
|||
</div>
|
||||
<BareInput placeholder="/bare/" storageKey="bare" />
|
||||
</div>
|
||||
<div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
|
||||
<div className="p-2 text-3xl font-bold text-input-text">
|
||||
Wisp Server
|
||||
</div>
|
||||
<div className="text-md p-4 font-bold text-input-text">
|
||||
Enter the url of a Wisp server
|
||||
</div>
|
||||
<WispInput placeholder={wispUrl} />
|
||||
</div>
|
||||
<div className="flex h-64 w-80 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
|
||||
<div className="p-2 text-3xl font-bold text-input-text">
|
||||
Transport
|
||||
</div>
|
||||
<div className="text-md p-4 font-bold text-input-text">
|
||||
Select the transport to use
|
||||
</div>
|
||||
<Dropdown storageKey="transport" options={transports} refresh={false} onChange={(value) => changeTransport(value, wispUrl)} />
|
||||
</div>
|
||||
<div className="flex h-96 w-96 flex-col flex-wrap content-center items-center rounded-lg border border-input-border-color bg-lighter p-2 text-center">
|
||||
<div className="p-2 text-3xl font-bold text-input-text">
|
||||
{t("settings.httpProxy.title")}
|
||||
|
|
|
|||
52
src/pages/Settings/WispInput.tsx
Normal file
52
src/pages/Settings/WispInput.tsx
Normal file
|
|
@ -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 (
|
||||
<div>
|
||||
<ToastContainer position="bottom-right" theme="dark" />
|
||||
<div className="flex flex-col items-center">
|
||||
<input
|
||||
type="text"
|
||||
placeholder={props.placeholder}
|
||||
value={inputValue}
|
||||
onKeyPress={(event) => {
|
||||
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"
|
||||
/>
|
||||
<div
|
||||
className="font-roboto mt-2 flex h-4 w-36 cursor-pointer flex-row items-center justify-center rounded-xl border border-input-border-color bg-input p-5 text-center text-lg text-input-text"
|
||||
onClick={handleChange}
|
||||
>
|
||||
Select
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
export default WispInput;
|
||||
26
src/util/transports.ts
Normal file
26
src/util/transports.ts
Normal file
|
|
@ -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 };
|
||||
|
|
@ -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, "/"),
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue