From a1f2e7178be371e7a779d95cb14c7c613b5a0413 Mon Sep 17 00:00:00 2001 From: Luke Curley Date: Wed, 15 Jan 2025 15:09:35 -0800 Subject: [PATCH 1/4] Add in a region selector to test clustering. --- .env.development | 2 ++ .env.production | 2 ++ astro.config.ts | 4 ++++ env.d.ts | 2 ++ package.json | 3 ++- src/components/region.tsx | 44 +++++++++++++++++++++++++++++++++++++++ src/components/watch.tsx | 20 +++++++++--------- src/layouts/global.css | 2 +- 8 files changed, 67 insertions(+), 12 deletions(-) create mode 100644 src/components/region.tsx diff --git a/.env.development b/.env.development index da96fb5..9c5f3a0 100644 --- a/.env.development +++ b/.env.development @@ -1 +1,3 @@ +PUBLIC_RELAY_SCHEME="http" PUBLIC_RELAY_HOST="localhost:4443" +PUBLIC_RELAY_REGIONS="" diff --git a/.env.production b/.env.production index 7a9770e..95c5877 100644 --- a/.env.production +++ b/.env.production @@ -1 +1,3 @@ +PUBLIC_RELAY_SCHEME="https" PUBLIC_RELAY_HOST="relay.quic.video" +PUBLIC_RELAY_REGIONS="us-central,europe-west,asia-southeast" diff --git a/astro.config.ts b/astro.config.ts index 1bf3e37..4d72f4c 100644 --- a/astro.config.ts +++ b/astro.config.ts @@ -49,5 +49,9 @@ export default defineConfig({ "@": "/src", }, }, + // Workaround for: https://github.com/vitejs/vite/issues/8427 + optimizeDeps: { + exclude: ["@kixelated/moq"], + }, }, }); diff --git a/env.d.ts b/env.d.ts index 4df96c2..375d2c0 100644 --- a/env.d.ts +++ b/env.d.ts @@ -1,7 +1,9 @@ /// interface ImportMetaEnv { + readonly PUBLIC_RELAY_SCHEME: string; readonly PUBLIC_RELAY_HOST: string; + readonly PUBLIC_RELAY_REGIONS: string; } interface ImportMeta { diff --git a/package.json b/package.json index f52385e..3d57765 100644 --- a/package.json +++ b/package.json @@ -26,5 +26,6 @@ }, "devDependencies": { "@types/node": "^22.10.1" - } + }, + "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" } diff --git a/src/components/region.tsx b/src/components/region.tsx new file mode 100644 index 0000000..00ee900 --- /dev/null +++ b/src/components/region.tsx @@ -0,0 +1,44 @@ +import "@kixelated/moq/video"; +import { createEffect, createSignal, For, type Setter } from "solid-js"; + +// Exposes a region selector to allow overriding the region used by the relay. +export default function Region(props: { path: string; setUrl: Setter }) { + // Use query params to allow overriding environment variables. + const urlSearchParams = new URLSearchParams(window.location.search); + const params = Object.fromEntries(urlSearchParams.entries()); + + const [region, setRegion] = createSignal(params.region ?? null); + const regions = import.meta.env.PUBLIC_RELAY_REGIONS ? import.meta.env.PUBLIC_RELAY_REGIONS.split(",") : []; + const host = params.server || import.meta.env.PUBLIC_RELAY_HOST; + + createEffect(() => { + const scheme = params.scheme || import.meta.env.PUBLIC_RELAY_SCHEME || "https"; + + const r = region(); + const server = r === null ? host : `${r}.${host}`; + + props.setUrl(`${scheme}://${server}/${props.path}`); + }); + + return ( +
+ Region: + + + {(r) => ( + + )} + +
+ ); +} diff --git a/src/components/watch.tsx b/src/components/watch.tsx index 5968b6a..b287fe7 100644 --- a/src/components/watch.tsx +++ b/src/components/watch.tsx @@ -1,16 +1,16 @@ -import "@kixelated/moq/video"; +import "@kixelated/moq/watch"; -export default function Watch(props: { path: string }) { - // Use query params to allow overriding environment variables. - const urlSearchParams = new URLSearchParams(window.location.search); - const params = Object.fromEntries(urlSearchParams.entries()); - const server = params.server ?? import.meta.env.PUBLIC_RELAY_HOST; +import { createSignal } from "solid-js"; + +import Region from "@/components/region"; - const url = `https://${server}/${props.path}`; +export default function Watch(props: { path: string }) { + const [url, setUrl] = createSignal(""); return ( - - - +
+ + +
); } diff --git a/src/layouts/global.css b/src/layouts/global.css index 7df573f..ce05579 100644 --- a/src/layouts/global.css +++ b/src/layouts/global.css @@ -26,7 +26,7 @@ button, .form-button { @apply rounded-md border-0 bg-slate-700 font-bold shadow-sm hover:bg-slate-800 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2; - @apply px-12 py-4 text-2xl; + @apply px-8 py-3 text-lg; } input, From 17c66f0f543a268289082d266a49fda758dd27a4 Mon Sep 17 00:00:00 2001 From: Luke Curley Date: Wed, 15 Jan 2025 22:58:56 -0800 Subject: [PATCH 2/4] Add a tooltip? --- package.json | 3 +-- src/components/region.tsx | 7 ++++++- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 3d57765..f52385e 100644 --- a/package.json +++ b/package.json @@ -26,6 +26,5 @@ }, "devDependencies": { "@types/node": "^22.10.1" - }, - "packageManager": "yarn@1.22.19+sha1.4ba7fc5c6e704fce2066ecbfb0b0d8976fe62447" + } } diff --git a/src/components/region.tsx b/src/components/region.tsx index 00ee900..89820a1 100644 --- a/src/components/region.tsx +++ b/src/components/region.tsx @@ -22,7 +22,12 @@ export default function Region(props: { path: string; setUrl: Setter }) return (
- Region: + + Relay: +