fix shy mode, show correct username

client/.env

@@ -16,5 +16,5 @@ AWS_SECRET_ACCESS_KEY=
 AWS_BUCKET=compa
 AWS_BUCKET_DIR=compa # eg. knust-compa, ug-compa
 VITE_OBSERVE_APP_ID= # observe.so
-VITE_BOAT_URL=https://boat.degreat.co.uk
-VITE_BOAT_SIGNAL=wss://boat.degreat.co.uk
+VITE_BOAT_URL=http://localhost:3003
+VITE_BOAT_SIGNAL=ws://localhost:3003

client/app/components/peer-video-panel.tsx

@@ -8,7 +8,7 @@ function PeerVideoPanel() {
 	const videoRef = React.useRef<HTMLVideoElement>(null);
 	const ding = React.useRef<HTMLAudioElement>(null);
 
-	const { time, start, stop } = useCountdown(10);
+	const { time, start: startCountdown, stop } = useCountdown(10);
 
 	const [shy, peerNickname] = React.useMemo(() => {
 		if (!peer) return [false, null];
@@ -24,11 +24,15 @@ function PeerVideoPanel() {
 		if (!videoRef.current || !peerStream) return;
 		ding.current?.play();
 
-		if (shy) start();
+		if (shy) startCountdown();
+
+		const stream = new MediaStream();
+		stream.addTrack(peerStream.getAudioTracks()[0]);
+		(videoRef.current as HTMLVideoElement).srcObject = stream;
 
 		const id = setTimeout(
 			() => {
-				(videoRef.current as HTMLVideoElement).srcObject = peerStream;
+				stream.addTrack(peerStream.getVideoTracks()[0]);
 			},
 			shy ? 10_000 : 0,
 		);
@@ -37,7 +41,7 @@ function PeerVideoPanel() {
 			clearTimeout(id);
 			stop();
 		};
-	}, [peerStream, shy, start, stop]);
+	}, [peerStream, shy, startCountdown, stop]);
 
 	if (status !== "connected") {
 		return (

client/app/components/self-video-panel.tsx

@@ -1,8 +1,12 @@
+import { useRouteLoaderData } from "@remix-run/react";
 import clsx from "clsx";
 import React from "react";
 import { useParlon } from "~/lib/parlon-context";
+import type { loader as rootLoader } from "~/root";
 
 function SelfVideoPanel() {
+	const { user } = useRouteLoaderData<typeof rootLoader>("root") || {};
+
 	const {
 		muted,
 		setMuted,
@@ -42,7 +46,8 @@ function SelfVideoPanel() {
 			>
 				<div>
 					<div className="font-mono font-medium text-white leading-none">
-						@notgr<span className="opacity-50">&bull;you</span>
+						@{user?.username}
+						<span className="opacity-50">&bull;you</span>
 					</div>
 					{muted && (
 						<p className="text-sm opacity-70 text-white">You're muted</p>