Region select

.env.development

@@ -1 +1,3 @@
+PUBLIC_RELAY_SCHEME="http"
 PUBLIC_RELAY_HOST="localhost:4443"
+PUBLIC_RELAY_REGIONS=""

.env.production

@@ -1 +1,3 @@
+PUBLIC_RELAY_SCHEME="https"
 PUBLIC_RELAY_HOST="relay.quic.video"
+PUBLIC_RELAY_REGIONS="us-central,europe-west,asia-southeast"

astro.config.ts

@@ -49,5 +49,9 @@ export default defineConfig({
 				"@": "/src",
 			},
 		},
+		// Workaround for: https://github.com/vitejs/vite/issues/8427
+		optimizeDeps: {
+			exclude: ["@kixelated/moq"],
+		},
 	},
 });

env.d.ts

@@ -1,7 +1,9 @@
 /// <reference types="astro/client" />
 
 interface ImportMetaEnv {
+	readonly PUBLIC_RELAY_SCHEME: string;
 	readonly PUBLIC_RELAY_HOST: string;
+	readonly PUBLIC_RELAY_REGIONS: string;
 }
 
 interface ImportMeta {

package.json

@@ -15,7 +15,7 @@
 		"@astrojs/node": "8.3.4",
 		"@astrojs/solid-js": "4.4.4",
 		"@astrojs/tailwind": "5.1.2",
-		"@kixelated/moq": "^0.3.8",
+		"@kixelated/moq": "^0.3.12",
 		"@tailwindcss/forms": "^0.5.9",
 		"@tailwindcss/typography": "^0.5.15",
 		"astro": "4.16.16",

src/components/region.tsx

@@ -0,0 +1,49 @@
+import "@kixelated/moq/video";
+import { For, type Setter, createEffect, createSignal } 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<string> }) {
+	// 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<string | null>(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 (
+		<div class="flex gap-4 items-center mt-8 mb-8">
+			<span
+				class="font-bold"
+				title="Connect to the indicated server. 'Auto' will use Geo-DNS to select the closest server for the best latency and quality. Select a far-away region to test the performance with increased congestion and latency."
+			>
+				Relay:
+			</span>
+			<button
+				type="button"
+				onClick={() => setRegion(null)}
+				classList={{
+					"bg-blue-500": region() === null,
+				}}
+			>
+				auto
+			</button>
+			<For each={regions}>
+				{(r) => (
+					<button type="button" onClick={() => setRegion(r)} classList={{ "bg-blue-500": region() === r }}>
+						{r}
+					</button>
+				)}
+			</For>
+		</div>
+	);
+}

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<string>("");
 
 	return (
-		<moq-video prop:src={url} prop:autoplay={true}>
-			<canvas slot="canvas" class="rounded-lg" />
-		</moq-video>
+		<div>
+			<moq-watch prop:url={url()} class="rounded-lg overflow-hidden" />
+			<Region setUrl={setUrl} path={props.path} />
+		</div>
 	);
 }

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,