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'
             }
         ];