From 7f8c07ee9114301741a31f54c5d30f7ff502fe9c Mon Sep 17 00:00:00 2001
From: Kevin Kipp <kkipp@cloudflare.com>
Date: Fri, 6 Sep 2024 18:03:15 -0500
Subject: [PATCH] Block joining room on session creation

---
 app/components/Spinner.tsx            | 33 +++++++++++++++++++
 app/routes/_room.$roomName._index.tsx | 47 ++++++++++++++++++---------
 app/utils/rxjs/RxjsPeer.client.ts     | 22 ++++++++++---
 3 files changed, 82 insertions(+), 20 deletions(-)
 create mode 100644 app/components/Spinner.tsx

diff --git a/app/components/Spinner.tsx b/app/components/Spinner.tsx
new file mode 100644
index 00000000..0c3de6f2
--- /dev/null
+++ b/app/components/Spinner.tsx
@@ -0,0 +1,33 @@
+import { forwardRef, type ComponentProps, type ElementRef } from 'react'
+import { cn } from '~/utils/style'
+
+export const Spinner = forwardRef<ElementRef<'svg'>, ComponentProps<'svg'>>(
+	({ className, ...rest }, ref) => {
+		return (
+			<svg
+				className={cn('animate-spin -ml-1 mr-3 h-5 w-5 text-white', className)}
+				xmlns="http://www.w3.org/2000/svg"
+				fill="none"
+				viewBox="0 0 24 24"
+				{...rest}
+				ref={ref}
+			>
+				<circle
+					className="opacity-25"
+					cx="12"
+					cy="12"
+					r="10"
+					stroke="currentColor"
+					strokeWidth="4"
+				></circle>
+				<path
+					className="opacity-75"
+					fill="currentColor"
+					d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
+				></path>
+			</svg>
+		)
+	}
+)
+
+Spinner.displayName = 'Spinner'
diff --git a/app/routes/_room.$roomName._index.tsx b/app/routes/_room.$roomName._index.tsx
index 16c03c28..dd11a78d 100644
--- a/app/routes/_room.$roomName._index.tsx
+++ b/app/routes/_room.$roomName._index.tsx
@@ -13,7 +13,9 @@ import { MicButton } from '~/components/MicButton'
 
 import { SelfView } from '~/components/SelfView'
 import { SettingsButton } from '~/components/SettingsDialog'
+import { Spinner } from '~/components/Spinner'
 import { Tooltip } from '~/components/Tooltip'
+import { useSubscribedState } from '~/hooks/rxjsHooks'
 import { useRoomContext } from '~/hooks/useRoomContext'
 import { errorMessageMap } from '~/hooks/useUserMedia'
 import getUsername from '~/utils/getUsername.server'
@@ -27,8 +29,10 @@ export const loader = async ({ request }: LoaderFunctionArgs) => {
 export default function Lobby() {
 	const { roomName } = useParams()
 	const navigate = useNavigate()
-	const { setJoined, userMedia, room } = useRoomContext()
+	const { setJoined, userMedia, room, peer } = useRoomContext()
 	const { videoStreamTrack, audioStreamTrack, audioEnabled } = userMedia
+	const session = useSubscribedState(peer.session$)
+	const sessionError = useSubscribedState(peer.sessionError$)
 
 	const joinedUsers = new Set(
 		room.otherUsers.filter((u) => u.tracks.audio).map((u) => u.name)
@@ -55,21 +59,33 @@ export default function Lobby() {
 						className="aspect-[4/3] w-full"
 						videoTrack={videoStreamTrack}
 					/>
-					{audioStreamTrack && (
-						<div className="absolute left-3 top-3">
-							{audioEnabled ? (
-								<AudioIndicator audioTrack={audioStreamTrack} />
-							) : (
-								<Tooltip content="Mic is turned off">
-									<div className="text-white indication-shadow">
-										<Icon type="micOff" />
-										<VisuallyHidden>Mic is turned off</VisuallyHidden>
-									</div>
-								</Tooltip>
-							)}
-						</div>
-					)}
+
+					<div className="absolute left-3 top-3">
+						{!sessionError && !session?.sessionId ? (
+							<Spinner className="text-zinc-100" />
+						) : (
+							audioStreamTrack && (
+								<>
+									{audioEnabled ? (
+										<AudioIndicator audioTrack={audioStreamTrack} />
+									) : (
+										<Tooltip content="Mic is turned off">
+											<div className="text-white indication-shadow">
+												<Icon type="micOff" />
+												<VisuallyHidden>Mic is turned off</VisuallyHidden>
+											</div>
+										</Tooltip>
+									)}
+								</>
+							)
+						)}
+					</div>
 				</div>
+				{sessionError && (
+					<div className="p-3 rounded-md text-sm text-zinc-800 bg-red-200 dark:text-zinc-200 dark:bg-red-700">
+						{sessionError}
+					</div>
+				)}
 				{(userMedia.audioUnavailableReason ||
 					userMedia.videoUnavailableReason) && (
 					<div className="p-3 rounded-md text-sm text-zinc-800 bg-zinc-200 dark:text-zinc-200 dark:bg-zinc-700">
@@ -123,6 +139,7 @@ export default function Lobby() {
 								// the room without the JS having loaded
 								navigate('room')
 							}}
+							disabled={!session?.sessionId}
 						>
 							Join
 						</Button>
diff --git a/app/utils/rxjs/RxjsPeer.client.ts b/app/utils/rxjs/RxjsPeer.client.ts
index fe1a59e2..73eabe32 100644
--- a/app/utils/rxjs/RxjsPeer.client.ts
+++ b/app/utils/rxjs/RxjsPeer.client.ts
@@ -1,7 +1,9 @@
 import {
 	Observable,
+	catchError,
 	combineLatest,
 	distinctUntilChanged,
+	filter,
 	from,
 	fromEvent,
 	map,
@@ -50,6 +52,7 @@ export class RxjsPeer {
 		peerConnection: RTCPeerConnection
 		sessionId: string
 	}>
+	sessionError$: Observable<string>
 	peerConnectionState$: Observable<RTCPeerConnectionState>
 	config: PeerConfig
 
@@ -137,6 +140,13 @@ export class RxjsPeer {
 			})
 		)
 
+		this.sessionError$ = this.session$.pipe(
+			catchError((err) =>
+				of(err instanceof Error ? err.message : 'Caught non-error')
+			),
+			filter((value) => typeof value === 'string')
+		)
+
 		this.peerConnectionState$ = this.peerConnection$.pipe(
 			switchMap((peerConnection) =>
 				fromEvent(
@@ -171,12 +181,14 @@ export class RxjsPeer {
 	async createSession(peerConnection: RTCPeerConnection) {
 		console.debug('🆕 creating new session')
 		const { apiBase } = this.config
-		const { sessionId } = await this.fetchWithRecordedHistory(
+		const response = await this.fetchWithRecordedHistory(
 			`${apiBase}/sessions/new?SESSION`,
-			{
-				method: 'POST',
-			}
-		).then((res) => res.json() as any)
+			{ method: 'POST' }
+		)
+		if (response.status > 400) {
+			throw new Error('Error creating Calls session')
+		}
+		const { sessionId } = (await response.json()) as any
 		return { peerConnection, sessionId }
 	}