Add remote stream relay feature: relay remote DJ streams to listeners

- Server-side: Added remote URL support in ffmpeg transcoder
- UI: Added relay controls in streaming panel with URL input
- Client: Added start/stop relay functions with socket communication
- Listener: Shows remote relay status in stream indicator

script.js

@@ -1664,10 +1664,20 @@ function initSocket() {
 
     socket.on('broadcast_started', () => {
         console.log('🎙️ Broadcast started notification received');
+        // Update relay UI if it's a relay
+        const relayStatus = document.getElementById('relay-status');
+        if (relayStatus && relayStatus.textContent.includes('Connecting')) {
+            relayStatus.textContent = 'Relay active - streaming to listeners';
+            relayStatus.style.color = '#00ff00';
+        }
     });
 
     socket.on('broadcast_stopped', () => {
         console.log('🛑 Broadcast stopped notification received');
+        // Reset relay UI if it was active
+        document.getElementById('start-relay-btn').style.display = 'inline-block';
+        document.getElementById('stop-relay-btn').style.display = 'none';
+        document.getElementById('relay-status').textContent = '';
     });
 
     socket.on('mixer_status', (data) => {
@@ -1682,6 +1692,10 @@ function initSocket() {
     socket.on('error', (data) => {
         console.error('📡 Server error:', data.message);
         alert(`SERVER ERROR: ${data.message}`);
+        // Reset relay UI on error
+        document.getElementById('start-relay-btn').style.display = 'inline-block';
+        document.getElementById('stop-relay-btn').style.display = 'none';
+        document.getElementById('relay-status').textContent = '';
     });
 
     return socket;
@@ -2151,6 +2165,48 @@ function toggleAutoStream(enabled) {
     localStorage.setItem('autoStartStream', enabled);
 }
 
+// ========== REMOTE RELAY FUNCTIONS ==========
+
+function startRemoteRelay() {
+    const urlInput = document.getElementById('remote-stream-url');
+    const url = urlInput.value.trim();
+    
+    if (!url) {
+        alert('Please enter a remote stream URL');
+        return;
+    }
+    
+    if (!socket) initSocket();
+    
+    // Stop any existing broadcast first
+    if (isBroadcasting) {
+        stopBroadcast();
+    }
+    
+    console.log('🔗 Starting remote relay for:', url);
+    
+    // Update UI
+    document.getElementById('start-relay-btn').style.display = 'none';
+    document.getElementById('stop-relay-btn').style.display = 'inline-block';
+    document.getElementById('relay-status').textContent = 'Connecting to remote stream...';
+    document.getElementById('relay-status').style.color = '#00f3ff';
+    
+    socket.emit('start_remote_relay', { url: url });
+}
+
+function stopRemoteRelay() {
+    if (!socket) return;
+    
+    console.log('🛑 Stopping remote relay');
+    
+    socket.emit('stop_remote_relay');
+    
+    // Update UI
+    document.getElementById('start-relay-btn').style.display = 'inline-block';
+    document.getElementById('stop-relay-btn').style.display = 'none';
+    document.getElementById('relay-status').textContent = '';
+}
+
 // ========== LISTENER MODE ==========
 
 function initListenerMode() {
@@ -2272,7 +2328,12 @@ function initListenerMode() {
     socket.on('stream_status', (data) => {
         const nowPlayingEl = document.getElementById('listener-now-playing');
         if (nowPlayingEl) {
-            nowPlayingEl.textContent = data.active ? '🎵 Stream is live!' : 'Stream offline - waiting for DJ...';
+            if (data.active) {
+                const status = data.remote_relay ? '🔗 Remote stream is live!' : '🎵 DJ stream is live!';
+                nowPlayingEl.textContent = status;
+            } else {
+                nowPlayingEl.textContent = 'Stream offline - waiting for DJ...';
+            }
         }
     });