Fix: Use dynamic URLs for all frontend connections

- CSP: Allow WebSocket/HTTP connections to any domain (for production)
- Nakama: Detect host/SSL from browser location instead of hardcoded localhost
- WebSocket: Dynamic protocol/host detection for stream and watch sync
- HLS/LLHLS/WebRTC: Dynamic URLs in live page and stream components
- RTMP/SRT: Show actual domain in my-realms settings page
- Forums: Use numeric forum ID for banner/title-color API calls

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/src/lib/components/StreamPlayer.svelte

@@ -12,6 +12,17 @@
 
     const STREAM_PORT = import.meta.env.VITE_STREAM_PORT || '8088';
 
+    // Helper for dynamic host detection
+    function getStreamHost() {
+        if (!browser) return 'localhost';
+        return window.location.hostname;
+    }
+
+    function getStreamProtocol() {
+        if (!browser) return 'http';
+        return window.location.protocol === 'https:' ? 'https' : 'http';
+    }
+
     let player;
     let playerElement;
     let viewerToken = null;
@@ -111,10 +122,12 @@
     function initializePlayer() {
         if (!playerElement || !window.OvenPlayer || !viewerToken || !actualStreamKey) return;
 
+        const host = getStreamHost();
+        const proto = getStreamProtocol();
         const sources = [
             {
                 type: 'hls',
-                file: `http://localhost:${STREAM_PORT}/app/${actualStreamKey}/llhls.m3u8?token=${viewerToken}`,
+                file: `${proto}://${host}:${STREAM_PORT}/app/${actualStreamKey}/llhls.m3u8?token=${viewerToken}`,
                 label: 'LLHLS'
             }
         ];

frontend/src/lib/components/StreamTileOverlay.svelte

@@ -6,6 +6,17 @@
 
     const STREAM_PORT = import.meta.env.VITE_STREAM_PORT || '8088';
 
+    // Helper for dynamic host detection
+    function getStreamHost() {
+        if (!browser) return 'localhost';
+        return window.location.hostname;
+    }
+
+    function getStreamProtocol() {
+        if (!browser) return 'http';
+        return window.location.protocol === 'https:' ? 'https' : 'http';
+    }
+
     let players = {};
     let viewerTokens = {};
     let offlineStreams = {}; // Track which streams are offline
@@ -127,10 +138,12 @@
 
         const isMuted = $streamTiles.unmutedStream !== stream.streamKey;
 
+        const host = getStreamHost();
+        const proto = getStreamProtocol();
         const sources = [
             {
                 type: 'hls',
-                file: `http://localhost:${STREAM_PORT}/app/${stream.streamKey}/llhls.m3u8?token=${token}`,
+                file: `${proto}://${host}:${STREAM_PORT}/app/${stream.streamKey}/llhls.m3u8?token=${token}`,
                 label: 'LLHLS'
             }
         ];

frontend/src/lib/stores/nakama.js

@@ -1,11 +1,33 @@
 import { writable, derived } from 'svelte/store';
 import { browser } from '$app/environment';
 
-// Nakama configuration from environment
+// Nakama configuration - dynamically detect from browser location for production
 const NAKAMA_SERVER_KEY = import.meta.env.VITE_NAKAMA_SERVER_KEY || 'defaultkey';
-const NAKAMA_HOST = import.meta.env.VITE_NAKAMA_HOST || 'localhost';
-const NAKAMA_PORT = import.meta.env.VITE_NAKAMA_PORT || '80';
-const NAKAMA_USE_SSL = import.meta.env.VITE_NAKAMA_USE_SSL === 'true';
+
+// Dynamically detect host/protocol from browser location
+// This ensures production uses the correct domain and SSL settings
+function getNakamaConfig() {
+    if (!browser) {
+        // SSR fallback - use env vars or defaults
+        return {
+            host: import.meta.env.VITE_NAKAMA_HOST || 'localhost',
+            port: import.meta.env.VITE_NAKAMA_PORT || '80',
+            useSSL: import.meta.env.VITE_NAKAMA_USE_SSL === 'true'
+        };
+    }
+    // Browser: use current page's host/protocol
+    const isSSL = window.location.protocol === 'https:';
+    return {
+        host: window.location.hostname,
+        port: isSSL ? '443' : (window.location.port || '80'),
+        useSSL: isSSL
+    };
+}
+
+const nakamaConfig = getNakamaConfig();
+const NAKAMA_HOST = nakamaConfig.host;
+const NAKAMA_PORT = nakamaConfig.port;
+const NAKAMA_USE_SSL = nakamaConfig.useSSL;
 
 // Polling interval for games lists (ms)
 export const GAMES_POLL_INTERVAL = 30000;

frontend/src/lib/stores/watchSync.js

@@ -1,7 +1,16 @@
 import { writable, derived, get } from 'svelte/store';
 import { browser } from '$app/environment';
 
-const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
+// Dynamically detect WebSocket URL from browser location
+function getWsUrl() {
+    if (!browser) {
+        return import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/ws`;
+}
+
+const WS_URL = getWsUrl();
 const SYNC_INTERVAL = 5000; // Sync every 5 seconds (server pushes every 1s anyway)
 const DRIFT_THRESHOLD = 2; // Seek if drift > 2 seconds (CyTube-style tight sync)
 const LEAD_IN_DURATION = 3000; // 3 seconds lead-in for buffering

frontend/src/lib/websocket.js

@@ -1,3 +1,5 @@
+import { browser } from '$app/environment';
+
 let ws = null;
 let reconnectTimeout = null;
 let reconnectAttempts = 0;
@@ -5,7 +7,17 @@ const MAX_RECONNECT_ATTEMPTS = 10;
 const BASE_RECONNECT_DELAY = 1000; // 1 second
 const MAX_RECONNECT_DELAY = 30000; // 30 seconds
 
-const WS_URL = import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
+// Dynamically detect WebSocket URL from browser location
+// This ensures production uses wss:// and the correct host
+function getWebSocketURL() {
+    if (!browser) {
+        return import.meta.env.VITE_WS_URL || 'ws://localhost/ws';
+    }
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    return `${protocol}//${window.location.host}/ws`;
+}
+
+const WS_URL = getWebSocketURL();
 
 /**
  * Calculate exponential backoff delay with jitter