minor: heavily simplify server and app content. unify styling (#4)

Co-authored-by: Madison Grubb <madison@elastiflow.com>
Reviewed-on: #4

app/composables/useWebRTC.js

@@ -1,61 +1,26 @@
-/**
- * WebRTC composable for Mediasoup client operations.
- * Handles device initialization, transport creation, and WebSocket signaling.
- */
-
+/** WebRTC/Mediasoup client utilities. */
 import { logError, logWarn } from '../utils/logger.js'
 
-/**
- * Initialize Mediasoup device from router RTP capabilities.
- * @param {object} rtpCapabilities
- * @returns {Promise<object>} Mediasoup device
- */
-export async function createMediasoupDevice(rtpCapabilities) {
-  // Dynamically import mediasoup-client only in browser
-  if (typeof window === 'undefined') {
-    throw new TypeError('Mediasoup device can only be created in browser')
-  }
+const FETCH_OPTS = { credentials: 'include' }
 
-  // Use dynamic import for mediasoup-client
+export async function createMediasoupDevice(rtpCapabilities) {
+  if (typeof window === 'undefined') throw new TypeError('Mediasoup device can only be created in browser')
   const { Device } = await import('mediasoup-client')
   const device = new Device()
   await device.load({ routerRtpCapabilities: rtpCapabilities })
   return device
 }
 
-/**
- * Create WebSocket connection for signaling.
- * @param {string} url - WebSocket URL (e.g., 'ws://localhost:3000/ws')
- * @returns {Promise<WebSocket>} WebSocket connection
- */
 export function createWebSocketConnection(url) {
   return new Promise((resolve, reject) => {
     const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:'
     const wsUrl = url.startsWith('ws') ? url : `${protocol}//${window.location.host}/ws`
     const ws = new WebSocket(wsUrl)
-
-    ws.onopen = () => {
-      resolve(ws)
-    }
-
-    ws.onerror = () => {
-      reject(new Error('WebSocket connection failed'))
-    }
-
-    ws.onclose = () => {
-      // Connection closed
-    }
+    ws.onopen = () => resolve(ws)
+    ws.onerror = () => reject(new Error('WebSocket connection failed'))
   })
 }
 
-/**
- * Send WebSocket message and wait for response.
- * @param {WebSocket} ws
- * @param {string} sessionId
- * @param {string} type
- * @param {object} data
- * @returns {Promise<object>} Response message
- */
 export function sendWebSocketMessage(ws, sessionId, type, data = {}) {
   return new Promise((resolve, reject) => {
     if (ws.readyState !== WebSocket.OPEN) {
@@ -95,41 +60,20 @@ export function sendWebSocketMessage(ws, sessionId, type, data = {}) {
   })
 }
 
-/**
- * Create send transport (for publisher).
- * @param {object} device
- * @param {string} sessionId
- * @param {{ onConnectSuccess?: () => void, onConnectFailure?: (err: Error) => void }} [options] - Optional callbacks when transport connect succeeds or fails.
- * @returns {Promise<object>} Transport with send method
- */
-export async function createSendTransport(device, sessionId, options = {}) {
-  const { onConnectSuccess, onConnectFailure } = options
-  // Create transport via HTTP API
-  const transportParams = await $fetch('/api/live/webrtc/create-transport', {
-    method: 'POST',
-    body: { sessionId, isProducer: true },
-    credentials: 'include',
-  })
-  const transport = device.createSendTransport({
-    id: transportParams.id,
-    iceParameters: transportParams.iceParameters,
-    iceCandidates: transportParams.iceCandidates,
-    dtlsParameters: transportParams.dtlsParameters,
-  })
-
+function attachTransportHandlers(transport, transportParams, sessionId, label, { onConnectSuccess, onConnectFailure } = {}) {
   transport.on('connect', async ({ dtlsParameters }, callback, errback) => {
     try {
       await $fetch('/api/live/webrtc/connect-transport', {
         method: 'POST',
         body: { sessionId, transportId: transportParams.id, dtlsParameters },
-        credentials: 'include',
+        ...FETCH_OPTS,
       })
       onConnectSuccess?.()
       callback()
     }
     catch (err) {
-      logError('useWebRTC: Send transport connect failed', {
-        err: err.message || String(err),
+      logError(`useWebRTC: ${label} transport connect failed`, {
+        err: err?.message ?? String(err),
         transportId: transportParams.id,
         connectionState: transport.connectionState,
         sessionId,
@@ -138,48 +82,50 @@ export async function createSendTransport(device, sessionId, options = {}) {
       errback(err)
     }
   })
-
   transport.on('connectionstatechange', () => {
     const state = transport.connectionState
-    if (state === 'failed' || state === 'disconnected' || state === 'closed') {
-      logWarn('useWebRTC: Send transport connection state changed', {
-        state,
-        transportId: transportParams.id,
-        sessionId,
-      })
+    if (['failed', 'disconnected', 'closed'].includes(state)) {
+      logWarn(`useWebRTC: ${label} transport connection state changed`, { state, transportId: transportParams.id, sessionId })
     }
   })
+}
+
+export async function createSendTransport(device, sessionId, options = {}) {
+  const transportParams = await $fetch('/api/live/webrtc/create-transport', {
+    method: 'POST',
+    body: { sessionId, isProducer: true },
+    ...FETCH_OPTS,
+  })
+  const transport = device.createSendTransport({
+    id: transportParams.id,
+    iceParameters: transportParams.iceParameters,
+    iceCandidates: transportParams.iceCandidates,
+    dtlsParameters: transportParams.dtlsParameters,
+  })
+  attachTransportHandlers(transport, transportParams, sessionId, 'Send', options)
 
   transport.on('produce', async ({ kind, rtpParameters }, callback, errback) => {
     try {
       const { id } = await $fetch('/api/live/webrtc/create-producer', {
         method: 'POST',
         body: { sessionId, transportId: transportParams.id, kind, rtpParameters },
-        credentials: 'include',
+        ...FETCH_OPTS,
       })
       callback({ id })
     }
     catch (err) {
-      logError('useWebRTC: Producer creation failed', { err: err.message || String(err) })
+      logError('useWebRTC: Producer creation failed', { err: err?.message ?? String(err) })
       errback(err)
     }
   })
-
   return transport
 }
 
-/**
- * Create receive transport (for viewer).
- * @param {object} device
- * @param {string} sessionId
- * @returns {Promise<object>} Transport with consume method
- */
 export async function createRecvTransport(device, sessionId) {
-  // Create transport via HTTP API
   const transportParams = await $fetch('/api/live/webrtc/create-transport', {
     method: 'POST',
     body: { sessionId, isProducer: false },
-    credentials: 'include',
+    ...FETCH_OPTS,
   })
   const transport = device.createRecvTransport({
     id: transportParams.id,
@@ -187,55 +133,15 @@ export async function createRecvTransport(device, sessionId) {
     iceCandidates: transportParams.iceCandidates,
     dtlsParameters: transportParams.dtlsParameters,
   })
-
-  // Set up connect handler (will be called by mediasoup-client when needed)
-  transport.on('connect', async ({ dtlsParameters }, callback, errback) => {
-    try {
-      await $fetch('/api/live/webrtc/connect-transport', {
-        method: 'POST',
-        body: { sessionId, transportId: transportParams.id, dtlsParameters },
-        credentials: 'include',
-      })
-      callback()
-    }
-    catch (err) {
-      logError('useWebRTC: Recv transport connect failed', {
-        err: err.message || String(err),
-        transportId: transportParams.id,
-        connectionState: transport.connectionState,
-        sessionId,
-      })
-      errback(err)
-    }
-  })
-
-  transport.on('connectionstatechange', () => {
-    const state = transport.connectionState
-    if (state === 'failed' || state === 'disconnected' || state === 'closed') {
-      logWarn('useWebRTC: Recv transport connection state changed', {
-        state,
-        transportId: transportParams.id,
-        sessionId,
-      })
-    }
-  })
-
+  attachTransportHandlers(transport, transportParams, sessionId, 'Recv')
   return transport
 }
 
-/**
- * Consume producer's stream (for viewer).
- * @param {object} transport
- * @param {object} device
- * @param {string} sessionId
- * @returns {Promise<object>} Consumer with track
- */
 export async function consumeProducer(transport, device, sessionId) {
-  const rtpCapabilities = device.rtpCapabilities
   const consumerParams = await $fetch('/api/live/webrtc/create-consumer', {
     method: 'POST',
-    body: { sessionId, transportId: transport.id, rtpCapabilities },
-    credentials: 'include',
+    body: { sessionId, transportId: transport.id, rtpCapabilities: device.rtpCapabilities },
+    ...FETCH_OPTS,
   })
 
   const consumer = await transport.consume({
@@ -256,14 +162,6 @@ export async function consumeProducer(transport, device, sessionId) {
   return consumer
 }
 
-/**
- * Resolve when condition() returns truthy, or after timeoutMs (then resolve anyway).
- * No mutable shared state; cleanup on first completion.
- * @param {() => unknown} condition
- * @param {number} timeoutMs
- * @param {number} intervalMs
- * @returns {Promise<void>}
- */
 function waitForCondition(condition, timeoutMs = 3000, intervalMs = 100) {
   return new Promise((resolve) => {
     const timeoutId = setTimeout(() => {
@@ -285,12 +183,6 @@ function waitForCondition(condition, timeoutMs = 3000, intervalMs = 100) {
   })
 }
 
-/**
- * Wait for transport connection state to reach a terminal state or timeout.
- * @param {object} transport - Mediasoup transport with connectionState and on/off
- * @param {number} timeoutMs
- * @returns {Promise<string>} Final connection state
- */
 export function waitForConnectionState(transport, timeoutMs = 10000) {
   const terminal = ['connected', 'failed', 'disconnected', 'closed']
   return new Promise((resolve) => {