diff --git a/client/.env b/client/.env index 8f8f8f1..070e6bd 100644 --- a/client/.env +++ b/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 diff --git a/client/app/components/peer-video-panel.tsx b/client/app/components/peer-video-panel.tsx index 63b4c66..b703fce 100644 --- a/client/app/components/peer-video-panel.tsx +++ b/client/app/components/peer-video-panel.tsx @@ -8,7 +8,7 @@ function PeerVideoPanel() { const videoRef = React.useRef(null); const ding = React.useRef(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 ( diff --git a/client/app/components/self-video-panel.tsx b/client/app/components/self-video-panel.tsx index 09a1432..f01997c 100644 --- a/client/app/components/self-video-panel.tsx +++ b/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("root") || {}; + const { muted, setMuted, @@ -42,7 +46,8 @@ function SelfVideoPanel() { >
- @notgr•you + @{user?.username} + •you
{muted && (

You're muted