fix: stream service containers lock to localhost access

docker/docker-compose.yml

@@ -3,7 +3,7 @@ services:
     image: infiniteproject/icecast:latest
     container_name: asteroid-icecast
     ports:
-      - "8000:8000"
+      - "127.0.0.1:8000:8000"
     volumes:
       - ./icecast.xml:/etc/icecast.xml
     environment:
@@ -20,7 +20,7 @@ services:
       dockerfile: Dockerfile.liquidsoap
     container_name: asteroid-liquidsoap
     ports:
-      - "1234:1234"
+      - "127.0.0.1:1234:1234"
     depends_on:
       - icecast
     volumes:

static/js/front-page.js

@@ -30,15 +30,11 @@ function changeStreamQuality() {
     const streamBaseUrl = document.getElementById('stream-base-url');
     const config = getStreamConfig(streamBaseUrl.value, selector.value);
 
-    // Update UI elements
+    // Save preference
-    document.getElementById('stream-url').textContent = config.url;
+    localStorage.setItem('stream-quality', selector.value);
-    document.getElementById('stream-format').textContent = config.format;
 
-    // Update Station Status stream quality display
+    // Update stream information with new selection
-    const statusQuality = document.querySelector('[data-text="stream-quality"]');
+    updateStreamInformation()
-    if (statusQuality) {
-        statusQuality.textContent = config.format;
-    }
 
     // Update audio player
     const audioElement = document.getElementById('live-audio');
@@ -74,19 +70,35 @@ async function updateNowPlaying() {
     }
 }
 
-// Initialize stream quality display on page load
+// Update stream information
-window.addEventListener('DOMContentLoaded', function() {
+function updateStreamInformation() {
     // Set initial quality display to match the selected stream
     const selector = document.getElementById('stream-quality');
     const streamBaseUrl = document.getElementById('stream-base-url');
-    const config = getStreamConfig(streamBaseUrl.value, selector.value);
+    const streamQuality = localStorage.getItem('stream-quality') || 'aac';
+    if (selector && selector.value !== streamQuality) {
+        selector.value = streamQuality;
+        selector.dispatchEvent(new Event('change'));
+    }
+    if (streamBaseUrl) {
+        const config = getStreamConfig(streamBaseUrl.value, streamQuality);
         document.getElementById('stream-url').textContent = config.url;
         document.getElementById('stream-format').textContent = config.format;
-
         const statusQuality = document.querySelector('[data-text="stream-quality"]');
         if (statusQuality) {
             statusQuality.textContent = config.format;
         }
+    }
+}
+
+// Initialize stream quality display on page load
+window.addEventListener('DOMContentLoaded', function() {
+    // Set initial quality display to match the selected stream
+    updateStreamInformation()
+    // Periodicaly updates stream information if on frameset.
+    // This handles changes from the player frame
+    const isFramesetPage = window.parent !== window.self;
+    if (isFramesetPage) setInterval(updateStreamInformation, 1000);
     // Update playing information right after load
     updateNowPlaying();
 
@@ -185,14 +197,28 @@ function disableFramesetMode() {
     window.location.href = '/asteroid/';
 }
 
+function redirectWhenFrame() {
+    const path = window.location.pathname;
+    const isFramesetPage = window.parent !== window.self;
+    const isContentFrame = path.includes('asteroid/content');
+
+    if (isFramesetPage && !isContentFrame) {
+        window.location.href = '/asteroid/content';
+    }
+    if (!isFramesetPage && isContentFrame) {
+        window.location.href = '/asteroid';
+    }
+}
+
 // Check if user prefers frameset mode on page load
 window.addEventListener('DOMContentLoaded', function() {
     const path = window.location.pathname;
-    const isFramesetPage = path.includes('/frameset') || path.includes('/content') || 
+    const isFramesetPage = window.parent !== window.self;
-                           path.includes('/audio-player-frame') || path.includes('/player-content');
 
-    if (localStorage.getItem('useFrameset') === 'true' && !isFramesetPage && path === '/asteroid/') {
+    if (localStorage.getItem('useFrameset') === 'true' && !isFramesetPage && path.includes('/asteroid')) {
         // User wants frameset but is on regular front page, redirect
         window.location.href = '/asteroid/frameset';
     }
+
+    redirectWhenFrame();
 });

static/js/player.js

@@ -14,6 +14,7 @@ let filteredLibraryTracks = [];
 
 document.addEventListener('DOMContentLoaded', function() {
     audioPlayer = document.getElementById('audio-player');
+    redirectWhenFrame();
     loadTracks();
     loadPlaylists();
     setupEventListeners();
@@ -26,8 +27,28 @@ document.addEventListener('DOMContentLoaded', function() {
         // Reduce buffer to minimize delay
         liveAudio.preload = 'none';
     }
+    // Restore user quality preference
+    const selector = document.getElementById('live-stream-quality');
+    const streamQuality = localStorage.getItem('stream-quality') || 'aac';
+    if (selector && selector.value !== streamQuality) {
+        selector.value = streamQuality;
+        selector.dispatchEvent(new Event('change'));
+    }
 });
 
+function redirectWhenFrame () {
+    const path = window.location.pathname;
+    const isFramesetPage = window.parent !== window.self;
+    const isContentFrame = path.includes('player-content');
+
+    if (isFramesetPage && !isContentFrame) {
+        window.location.href = '/asteroid/player-content';
+    }
+    if (!isFramesetPage && isContentFrame) {
+        window.location.href = '/asteroid/player';
+    }
+}
+
 function setupEventListeners() {
     // Search
     document.getElementById('search-tracks').addEventListener('input', filterTracks);

template/admin.ctml

@@ -12,8 +12,8 @@
   <div class="container">
     <h1>🎛️ ADMIN DASHBOARD</h1>
     <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
+      <a href="/asteroid" target="content-frame">Home</a>
-      <a href="/asteroid/player-content" target="content-frame">Player</a>
+      <a href="/asteroid/player" target="content-frame">Player</a>
       <a href="/asteroid/profile" target="content-frame">Profile</a>
       <a href="/asteroid/admin/users">👥 Users</a>
       <a href="/asteroid/logout" class="btn-logout">Logout</a>

template/audio-player-frame.ctml

@@ -104,6 +104,13 @@
       audioElement.addEventListener('error', function(e) {
         console.error('Audio error:', e);
       });
+
+      const selector = document.getElementById('stream-quality');
+      const streamQuality = localStorage.getItem('stream-quality') || 'aac';
+      if (selector && selector.value !== streamQuality) {
+        selector.value = streamQuality;
+        selector.dispatchEvent(new Event('change'));
+      }
     });
 
     // Stream quality configuration
@@ -131,6 +138,9 @@
       const streamBaseUrl = document.getElementById('stream-base-url').value;
       const config = getStreamConfig(streamBaseUrl, selector.value);
 
+      // Save preference
+      localStorage.setItem('stream-quality', selector.value);
+      
       const audioElement = document.getElementById('persistent-audio');
       const sourceElement = document.getElementById('audio-source');
       

template/front-page-content.ctml

@@ -35,6 +35,7 @@
       <div class="live-stream">
         <h2 style="color: #00ff00;">🟢 LIVE STREAM</h2>
         <p><em>The live stream player is now in the persistent bar at the bottom of the page.</em></p>
+        <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
         <p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
         <p><strong>Format:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
         <p><strong>Status:</strong> <span id="stream-status" style="color: #00ff00;">● BROADCASTING</span></p>

template/front-page.ctml

@@ -47,7 +47,6 @@
         
         <!-- Stream Quality Selector -->
         <div class="live-stream-quality">
-          <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
           <label for="stream-quality" ><strong>Quality:</strong></label>
           <select id="stream-quality" onchange="changeStreamQuality()">
             <option value="aac">AAC 96kbps (Recommended)</option>
@@ -56,6 +55,7 @@
           </select>
         </div>
         
+        <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
         <p><strong>Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
         <p><strong>Format:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
         <p><strong>Status:</strong> <span id="stream-status" style="color: #00ff00;">● BROADCASTING</span></p>

template/profile.ctml

@@ -12,8 +12,8 @@
   <div class="container">
     <h1>👤 USER PROFILE</h1>
     <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
+      <a href="/asteroid" target="content-frame">Home</a>
-      <a href="/asteroid/player-content" target="content-frame">Player</a>
+      <a href="/asteroid/player" target="content-frame">Player</a>
       <a href="/asteroid/admin" target="content-frame" data-show-if-admin>Admin</a>
       <a href="/asteroid/logout" class="btn-logout">Logout</a>
     </div>

template/users.ctml

@@ -11,7 +11,7 @@
   <div class="container">
     <h1>👥 USER MANAGEMENT</h1>
     <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
+      <a href="/asteroid" target="content-frame">Home</a>
       <a href="/asteroid/admin" target="content-frame">Admin</a>
       <a href="/asteroid/logout" class="btn-logout">Logout</a>
     </div>