update environment configuration, enhance setup guide, and align documentation with new domain structure

frontend/src/main.ts

@@ -16,13 +16,34 @@ let ws: WebSocket | null = null;
 let currentRoom = "main";
 let username = "viewer" + Math.floor(Math.random() * 1000);
 
+function resolveWebSocketBaseUrl() {
+  const configuredUrl = import.meta.env.VITE_PUBLIC_WS_URL?.trim();
+
+  if (configuredUrl) {
+    return configuredUrl;
+  }
+
+  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
+  return `${protocol}//${window.location.host}/ws`;
+}
+
+function resolveManifestUrl() {
+  const configuredUrl = import.meta.env.VITE_PUBLIC_HLS_URL?.trim();
+
+  if (configuredUrl) {
+    return configuredUrl;
+  }
+
+  return new URL("/hls/playlist.m3u8", window.location.origin).toString();
+}
+
 function connectWebSocket(room: string) {
   if (ws) ws.close();
 
-  const protocol = window.location.protocol === "https:" ? "wss:" : "ws:";
-  ws = new WebSocket(
-    `${protocol}//localhost:3000/ws?username=${username}&room=${room}`,
-  );
+  const socketUrl = new URL(resolveWebSocketBaseUrl());
+  socketUrl.searchParams.set("username", username);
+  socketUrl.searchParams.set("room", room);
+  ws = new WebSocket(socketUrl);
 
   ws.onopen = () => {
     console.log(`Connected to chat room: ${room}`);
@@ -113,7 +134,7 @@ window.app = () => {
 
       // Initialize HLS Player
       const video = document.getElementById("player") as HTMLVideoElement;
-      const manifestUrl = "http://localhost:8080/hls/playlist.m3u8"; // from nginx/pla yout
+      const manifestUrl = resolveManifestUrl();
 
       if (Hls.isSupported()) {
         hls = new Hls();