asteroid.lisp

@@ -277,19 +277,6 @@
                     ("message" . ,(format nil "Error reordering queue: ~a" e)))
                   :status 500))))
 
-(define-api asteroid/stream/queue/load-m3u () ()
-  "Load stream queue from stream-queue.m3u file"
-  (require-role :admin)
-  (handler-case
-      (let ((count (load-queue-from-m3u-file)))
-        (api-output `(("status" . "success")
-                      ("message" . "Queue loaded from M3U file")
-                      ("count" . ,count))))
-    (error (e)
-      (api-output `(("status" . "error")
-                    ("message" . ,(format nil "Error loading from M3U: ~a" e)))
-                  :status 500))))
-
 (defun get-track-by-id (track-id)
   "Get a track by its ID - handles type mismatches"
   ;; Try direct query first
@@ -516,7 +503,7 @@
      ("message" . "Listening history cleared successfully"))))
 |#
 
-;; Front page - regular view by default
+;; Front page
 (define-page front-page #@"/" ()
   "Main front page"
   (let ((template-path (merge-pathnames "template/front-page.chtml" 
@@ -537,44 +524,6 @@
      :now-playing-album "Startup Sounds"
      :now-playing-duration "∞")))
 
-;; Frameset wrapper for persistent player mode
-(define-page frameset-wrapper #@"/frameset" ()
-  "Frameset wrapper with persistent audio player"
-  (let ((template-path (merge-pathnames "template/frameset-wrapper.chtml" 
-                                       (asdf:system-source-directory :asteroid))))
-    (clip:process-to-string 
-     (plump:parse (alexandria:read-file-into-string template-path))
-     :title "🎵 ASTEROID RADIO 🎵")))
-
-;; Content frame - front page content without player
-(define-page front-page-content #@"/content" ()
-  "Front page content (displayed in content frame)"
-  (let ((template-path (merge-pathnames "template/front-page-content.chtml" 
-                                       (asdf:system-source-directory :asteroid))))
-    (clip:process-to-string 
-     (plump:parse (alexandria:read-file-into-string template-path))
-     :title "🎵 ASTEROID RADIO 🎵"
-     :station-name "🎵 ASTEROID RADIO 🎵"
-     :status-message "🟢 LIVE - Broadcasting asteroid music for hackers"
-     :listeners "0"
-     :stream-quality "128kbps MP3"
-     :stream-base-url *stream-base-url*
-     :now-playing-artist "The Void"
-     :now-playing-track "Silence"
-     :now-playing-album "Startup Sounds"
-     :now-playing-duration "∞")))
-
-;; Persistent audio player frame (bottom frame)
-(define-page audio-player-frame #@"/audio-player-frame" ()
-  "Persistent audio player frame (bottom of page)"
-  (let ((template-path (merge-pathnames "template/audio-player-frame.chtml" 
-                                       (asdf:system-source-directory :asteroid))))
-    (clip:process-to-string 
-     (plump:parse (alexandria:read-file-into-string template-path))
-     :stream-base-url *stream-base-url*
-     :default-stream-url (concatenate 'string *stream-base-url* "/asteroid.aac")
-     :default-stream-encoding "audio/aac")))
-
 ;; Configure static file serving for other files
 (define-page static #@"/static/(.*)" (:uri-groups (path))
   (serve-file (merge-pathnames (concatenate 'string "static/" path) 
@@ -875,28 +824,6 @@
      :now-playing-album "Startup Sounds"
      :player-status "Stopped")))
 
-;; Player content frame (for frameset mode)
-(define-page player-content #@"/player-content" ()
-  "Player page content (displayed in content frame)"
-  (let ((template-path (merge-pathnames "template/player-content.chtml" 
-                                       (asdf:system-source-directory :asteroid))))
-    (clip:process-to-string 
-     (plump:parse (alexandria:read-file-into-string template-path))
-     :title "Asteroid Radio - Web Player"
-     :stream-base-url *stream-base-url*
-     :default-stream-url (concatenate 'string *stream-base-url* "/asteroid.aac")
-     :default-stream-encoding "audio/aac")))
-
-(define-page popout-player #@"/popout-player" ()
-  "Pop-out player window"
-  (let ((template-path (merge-pathnames "template/popout-player.chtml" 
-                                       (asdf:system-source-directory :asteroid))))
-    (clip:process-to-string 
-     (plump:parse (alexandria:read-file-into-string template-path))
-     :stream-base-url *stream-base-url*
-     :default-stream-url (concatenate 'string *stream-base-url* "/asteroid.aac")
-     :default-stream-encoding "audio/aac")))
-
 (define-api asteroid/status () ()
   "Get server status"
   (api-output `(("status" . "running")

docker/asteroid-radio-docker.liq

@@ -9,11 +9,6 @@ set("init.allow_root", true)
 # Set log level for debugging
 log.level.set(4)
 
-# Audio buffering settings to prevent choppiness
-settings.frame.audio.samplerate.set(44100)
-settings.frame.audio.channels.set(2)
-settings.audio.converter.samplerate.libsamplerate.quality.set("best")
-
 # Enable telnet server for remote control
 settings.server.telnet.set(true)
 settings.server.telnet.port.set(1234)
@@ -24,8 +19,8 @@ settings.server.telnet.bind_addr.set("0.0.0.0")
 # Falls back to directory scan if playlist file doesn't exist
 radio = playlist(
   mode="normal",  # Play in order (not randomized)
-  reload=30,      # Check for playlist updates every 30 seconds
-  reload_mode="seconds",  # Reload every N seconds (prevents running out of tracks)
+  reload=5,       # Check for playlist updates every 5 seconds
+  reload_mode="watch",  # Watch file for changes
   "/app/stream-queue.m3u"
 )
 
@@ -39,11 +34,24 @@ radio_fallback = playlist.safe(
 # Use main playlist, fall back to directory scan
 radio = fallback(track_sensitive=false, [radio, radio_fallback])
 
-# Simple crossfade for smooth transitions
+# Add some audio processing
+# Use ReplayGain for consistent volume without pumping
+radio = amplify(1.0, override="replaygain", radio)
+
+# Add smooth crossfade between tracks (5 seconds)
 radio = crossfade(
-  duration=3.0,        # 3 second crossfade
-  fade_in=2.0,         # 2 second fade in
-  fade_out=2.0,        # 2 second fade out
+  duration=5.0,        # 5 second crossfade
+  fade_in=3.0,         # 3 second fade in
+  fade_out=3.0,        # 3 second fade out
+  radio
+)
+
+# Add a compressor to prevent clipping
+radio = compress(
+  ratio=3.0,           # Compression ratio
+  threshold=-15.0,     # Threshold in dB
+  attack=50.0,         # Attack time in ms
+  release=400.0,       # Release time in ms
   radio
 )
 

static/js/admin.js

@@ -28,13 +28,11 @@ document.addEventListener('DOMContentLoaded', function() {
     
     // Queue controls
     const refreshQueueBtn = document.getElementById('refresh-queue');
-    const loadFromM3uBtn = document.getElementById('load-from-m3u');
     const clearQueueBtn = document.getElementById('clear-queue-btn');
     const addRandomBtn = document.getElementById('add-random-tracks');
     const queueSearchInput = document.getElementById('queue-track-search');
     
     if (refreshQueueBtn) refreshQueueBtn.addEventListener('click', loadStreamQueue);
-    if (loadFromM3uBtn) loadFromM3uBtn.addEventListener('click', loadQueueFromM3U);
     if (clearQueueBtn) clearQueueBtn.addEventListener('click', clearStreamQueue);
     if (addRandomBtn) addRandomBtn.addEventListener('click', addRandomTracks);
     if (queueSearchInput) queueSearchInput.addEventListener('input', searchTracksForQueue);
@@ -105,6 +103,8 @@ function renderPage() {
                 <div class="track-album">${track.album || 'Unknown Album'}</div>
             </div>
             <div class="track-actions">
+                <button onclick="playTrack(${track.id})" class="btn btn-sm btn-success">▶️ Play</button>
+                <button onclick="streamTrack(${track.id})" class="btn btn-sm btn-info">🎵 Stream</button>
                 <button onclick="addToQueue(${track.id}, 'end')" class="btn btn-sm btn-primary">➕ Add to Queue</button>
                 <button onclick="deleteTrack(${track.id})" class="btn btn-sm btn-danger">🗑️ Delete</button>
             </div>
@@ -368,20 +368,14 @@ function displayStreamQueue() {
     let html = '<div class="queue-items">';
     streamQueue.forEach((item, index) => {
         if (item) {
-            const isFirst = index === 0;
-            const isLast = index === streamQueue.length - 1;
             html += `
-                <div class="queue-item" data-track-id="${item.id}" data-index="${index}">
+                <div class="queue-item" data-track-id="${item.id}">
                     <span class="queue-position">${index + 1}</span>
                     <div class="queue-track-info">
                         <div class="track-title">${item.title || 'Unknown'}</div>
                         <div class="track-artist">${item.artist || 'Unknown Artist'}</div>
                     </div>
-                    <div class="queue-actions">
-                        <button class="btn btn-sm btn-secondary" onclick="moveTrackUp(${index})" ${isFirst ? 'disabled' : ''}>⬆️</button>
-                        <button class="btn btn-sm btn-secondary" onclick="moveTrackDown(${index})" ${isLast ? 'disabled' : ''}>⬇️</button>
-                        <button class="btn btn-sm btn-danger" onclick="removeFromQueue(${item.id})">Remove</button>
-                    </div>
+                    <button class="btn btn-sm btn-danger" onclick="removeFromQueue(${item.id})">Remove</button>
                 </div>
             `;
         }
@@ -416,74 +410,6 @@ async function clearStreamQueue() {
     }
 }
 
-// Load queue from M3U file
-async function loadQueueFromM3U() {
-    if (!confirm('Load queue from stream-queue.m3u file? This will replace the current queue.')) {
-        return;
-    }
-    
-    try {
-        const response = await fetch('/api/asteroid/stream/queue/load-m3u', {
-            method: 'POST'
-        });
-        const result = await response.json();
-        const data = result.data || result;
-        
-        if (data.status === 'success') {
-            alert(`Successfully loaded ${data.count} tracks from M3U file!`);
-            loadStreamQueue();
-        } else {
-            alert('Error loading from M3U: ' + (data.message || 'Unknown error'));
-        }
-    } catch (error) {
-        console.error('Error loading from M3U:', error);
-        alert('Error loading from M3U: ' + error.message);
-    }
-}
-
-// Move track up in queue
-async function moveTrackUp(index) {
-    if (index === 0) return;
-    
-    // Swap with previous track
-    const newQueue = [...streamQueue];
-    [newQueue[index - 1], newQueue[index]] = [newQueue[index], newQueue[index - 1]];
-    
-    await reorderQueue(newQueue);
-}
-
-// Move track down in queue
-async function moveTrackDown(index) {
-    if (index === streamQueue.length - 1) return;
-    
-    // Swap with next track
-    const newQueue = [...streamQueue];
-    [newQueue[index], newQueue[index + 1]] = [newQueue[index + 1], newQueue[index]];
-    
-    await reorderQueue(newQueue);
-}
-
-// Reorder the queue
-async function reorderQueue(newQueue) {
-    try {
-        const trackIds = newQueue.map(track => track.id).join(',');
-        const response = await fetch('/api/asteroid/stream/queue/reorder?track-ids=' + trackIds, {
-            method: 'POST'
-        });
-        const result = await response.json();
-        const data = result.data || result;
-        
-        if (data.status === 'success') {
-            loadStreamQueue();
-        } else {
-            alert('Error reordering queue: ' + (data.message || 'Unknown error'));
-        }
-    } catch (error) {
-        console.error('Error reordering queue:', error);
-        alert('Error reordering queue');
-    }
-}
-
 // Remove track from queue
 async function removeFromQueue(trackId) {
     try {

static/js/front-page.js

@@ -89,110 +89,7 @@ window.addEventListener('DOMContentLoaded', function() {
     }
     // Update playing information right after load
     updateNowPlaying();
-
-    // Auto-reconnect on stream errors
-    const audioElement = document.getElementById('live-audio');
-    if (audioElement) {
-        audioElement.addEventListener('error', function(e) {
-            console.log('Stream error, attempting reconnect in 3 seconds...');
-            setTimeout(function() {
-                audioElement.load();
-                audioElement.play().catch(err => console.log('Reconnect failed:', err));
-            }, 3000);
-        });
-
-        audioElement.addEventListener('stalled', function() {
-            console.log('Stream stalled, reloading...');
-            audioElement.load();
-            audioElement.play().catch(err => console.log('Reload failed:', err));
-        });
-    }
 });
 
 // Update every 10 seconds
 setInterval(updateNowPlaying, 10000);
-
-// Pop-out player functionality
-let popoutWindow = null;
-
-function openPopoutPlayer() {
-    // Check if popout is already open
-    if (popoutWindow && !popoutWindow.closed) {
-        popoutWindow.focus();
-        return;
-    }
-
-    // Calculate centered position
-    const width = 420;
-    const height = 300;
-    const left = (screen.width - width) / 2;
-    const top = (screen.height - height) / 2;
-
-    // Open popout window
-    const features = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no,status=no,menubar=no,toolbar=no,location=no`;
-    
-    popoutWindow = window.open('/asteroid/popout-player', 'AsteroidPlayer', features);
-
-    // Update button state
-    updatePopoutButton(true);
-}
-
-function updatePopoutButton(isOpen) {
-    const btn = document.getElementById('popout-btn');
-    if (btn) {
-        if (isOpen) {
-            btn.textContent = '✓ Player Open';
-            btn.classList.remove('btn-info');
-            btn.classList.add('btn-success');
-        } else {
-            btn.textContent = '🗗 Pop Out Player';
-            btn.classList.remove('btn-success');
-            btn.classList.add('btn-info');
-        }
-    }
-}
-
-// Listen for messages from popout window
-window.addEventListener('message', function(event) {
-    if (event.data.type === 'popout-opened') {
-        updatePopoutButton(true);
-    } else if (event.data.type === 'popout-closed') {
-        updatePopoutButton(false);
-        popoutWindow = null;
-    }
-});
-
-// Check if popout is still open periodically
-setInterval(function() {
-    if (popoutWindow && popoutWindow.closed) {
-        updatePopoutButton(false);
-        popoutWindow = null;
-    }
-}, 1000);
-
-// Frameset mode functionality
-function enableFramesetMode() {
-    // Save preference
-    localStorage.setItem('useFrameset', 'true');
-    // Redirect to frameset wrapper
-    window.location.href = '/asteroid/frameset';
-}
-
-function disableFramesetMode() {
-    // Clear preference
-    localStorage.removeItem('useFrameset');
-    // Redirect to regular view
-    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') || 
-                           path.includes('/audio-player-frame') || path.includes('/player-content');
-    
-    if (localStorage.getItem('useFrameset') === 'true' && !isFramesetPage && path === '/asteroid/') {
-        // User wants frameset but is on regular front page, redirect
-        window.location.href = '/asteroid/frameset';
-    }
-});

stream-control.lisp

@@ -177,46 +177,3 @@
         (setf *stream-queue* (subseq track-ids 0 (min count (length track-ids))))
         (regenerate-stream-playlist)
         *stream-queue*))))
-
-(defun convert-from-docker-path (docker-path)
-  "Convert Docker container path back to host file path"
-  (if (and (stringp docker-path)
-           (>= (length docker-path) 11)
-           (string= docker-path "/app/music/" :end1 11))
-      (concatenate 'string 
-                   (namestring *music-library-path*)
-                   (subseq docker-path 11))
-      docker-path))
-
-(defun load-queue-from-m3u-file ()
-  "Load the stream queue from the stream-queue.m3u file"
-  (let* ((m3u-path (merge-pathnames "stream-queue.m3u" 
-                                    (asdf:system-source-directory :asteroid)))
-         (track-ids '())
-         (all-tracks (db:select "tracks" (db:query :all))))
-    
-    (when (probe-file m3u-path)
-      (with-open-file (stream m3u-path :direction :input)
-        (loop for line = (read-line stream nil)
-              while line
-              do (unless (or (string= line "")
-                           (char= (char line 0) #\#))
-                   ;; This is a file path line
-                   (let* ((docker-path (string-trim '(#\Space #\Tab #\Return #\Newline) line))
-                          (host-path (convert-from-docker-path docker-path)))
-                     ;; Find track by file path
-                     (let ((track (find-if 
-                                   (lambda (trk)
-                                     (let ((fp (gethash "file-path" trk)))
-                                       (let ((file-path (if (listp fp) (first fp) fp)))
-                                         (string= file-path host-path))))
-                                   all-tracks)))
-                       (when track
-                         (let ((id (gethash "_id" track)))
-                           (push (if (listp id) (first id) id) track-ids)))))))))
-    
-    ;; Reverse to maintain order from file
-    (setf track-ids (nreverse track-ids))
-    (setf *stream-queue* track-ids)
-    (regenerate-stream-playlist)
-    (length track-ids)))

stream-queue.m3u

@@ -1 +1,19 @@
 #EXTM3U
+#EXTINF:0,
+/app/music/Model500/2015 - Digital Solutions/02-model_500-electric_night.flac
+#EXTINF:0,
+/app/music/Kraftwerk/1978 - The Man-Machine \[2009 Digital Remaster]/02 - Spacelab.flac
+#EXTINF:0,
+/app/music/Kraftwerk/1981 - Computer World \[2009 Digital Remaster]/03 - Numbers.flac
+#EXTINF:0,
+/app/music/Model500/2015 - Digital Solutions/08-model_500-digital_solutions.flac
+#EXTINF:0,
+/app/music/Model500/2015 - Digital Solutions/02-model_500-electric_night.flac
+#EXTINF:0,
+/app/music/This Mortal Coil/1984 - It'll End In Tears/09 - Barramundi.flac
+#EXTINF:0,
+/app/music/Underworld/1996 - Second Toughest In The Infants/04. Underworld - Rowla.flac
+#EXTINF:0,
+/app/music/This Mortal Coil/1984 - It'll End In Tears/10 - Dreams Made Flesh.flac
+#EXTINF:0,
+/app/music/Underworld/1996 - Second Toughest In The Infants/07. Underworld - Blueski.flac

template/admin.chtml

@@ -12,9 +12,9 @@
   <div class="container">
     <h1>🎛️ ADMIN DASHBOARD</h1>
     <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
-      <a href="/asteroid/player-content" target="content-frame">Player</a>
-      <a href="/asteroid/profile" target="content-frame">Profile</a>
+      <a href="/asteroid/">Home</a>
+      <a href="/asteroid/player/">Player</a>
+      <a href="/asteroid/profile">Profile</a>
       <a href="/asteroid/admin/users">👥 Users</a>
       <a href="/asteroid/logout" class="btn-logout">Logout</a>
     </div>
@@ -127,7 +127,6 @@
       
       <div class="queue-controls">
         <button id="refresh-queue" class="btn btn-secondary">🔄 Refresh Queue</button>
-        <button id="load-from-m3u" class="btn btn-success">📂 Load Queue from M3U</button>
         <button id="clear-queue-btn" class="btn btn-warning">🗑️ Clear Queue</button>
         <button id="add-random-tracks" class="btn btn-info">🎲 Add 10 Random Tracks</button>
       </div>

template/audio-player-frame.chtml

@@ -1,174 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-  <style>
-    body {
-      margin: 0;
-      padding: 10px;
-      background: #1a1a1a;
-      font-family: 'Courier New', monospace;
-    }
-    .persistent-player {
-      display: flex;
-      align-items: center;
-      gap: 15px;
-      max-width: 100%;
-    }
-    .player-label {
-      color: #00ff00;
-      font-weight: bold;
-      white-space: nowrap;
-    }
-    .quality-selector {
-      display: flex;
-      align-items: center;
-      gap: 5px;
-    }
-    .quality-selector label {
-      color: #00ff00;
-      font-size: 0.9em;
-    }
-    .quality-selector select {
-      background: #2a2a2a;
-      color: #00ff00;
-      border: 1px solid #00ff00;
-      padding: 3px 8px;
-      font-family: 'Courier New', monospace;
-    }
-    audio {
-      flex: 1;
-      min-width: 200px;
-    }
-    .now-playing-mini {
-      color: #00ff00;
-      font-size: 0.9em;
-      white-space: nowrap;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      flex: 1;
-      min-width: 300px;
-    }
-  </style>
-</head>
-<body>
-  <div class="persistent-player">
-    <span class="player-label">🟢 LIVE:</span>
-    
-    <div class="quality-selector">
-      <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
-      <label for="stream-quality">Quality:</label>
-      <select id="stream-quality" onchange="changeStreamQuality()">
-        <option value="aac">AAC 96k</option>
-        <option value="mp3">MP3 128k</option>
-        <option value="low">MP3 64k</option>
-      </select>
-    </div>
-    
-    <audio id="persistent-audio" controls preload="metadata">
-      <source id="audio-source" lquery="(attr :src default-stream-url :type default-stream-encoding)">
-    </audio>
-    
-    <span class="now-playing-mini" id="mini-now-playing">Loading...</span>
-    
-    <button onclick="disableFramesetMode()" style="background: #2a2a2a; color: #00ff00; border: 1px solid #00ff00; padding: 5px 10px; cursor: pointer; font-family: 'Courier New', monospace; font-size: 0.85em; white-space: nowrap;">
-      ✕ Disable
-    </button>
-  </div>
-
-  <script>
-    // Configure audio element for better streaming
-    document.addEventListener('DOMContentLoaded', function() {
-      const audioElement = document.getElementById('persistent-audio');
-      
-      // Try to enable low-latency mode if supported
-      if ('mediaSession' in navigator) {
-        navigator.mediaSession.metadata = new MediaMetadata({
-          title: 'Asteroid Radio Live Stream',
-          artist: 'Asteroid Radio',
-          album: 'Live Broadcast'
-        });
-      }
-      
-      // Add event listeners for debugging
-      audioElement.addEventListener('waiting', function() {
-        console.log('Audio buffering...');
-      });
-      
-      audioElement.addEventListener('playing', function() {
-        console.log('Audio playing');
-      });
-      
-      audioElement.addEventListener('error', function(e) {
-        console.error('Audio error:', e);
-      });
-    });
-
-    // Stream quality configuration
-    function getStreamConfig(streamBaseUrl, encoding) {
-      const config = {
-        aac: {
-          url: streamBaseUrl + '/asteroid.aac',
-          type: 'audio/aac'
-        },
-        mp3: {
-          url: streamBaseUrl + '/asteroid.mp3',
-          type: 'audio/mpeg'
-        },
-        low: {
-          url: streamBaseUrl + '/asteroid-low.mp3',
-          type: 'audio/mpeg'
-        }
-      };
-      return config[encoding];
-    }
-
-    // Change stream quality
-    function changeStreamQuality() {
-      const selector = document.getElementById('stream-quality');
-      const streamBaseUrl = document.getElementById('stream-base-url').value;
-      const config = getStreamConfig(streamBaseUrl, selector.value);
-      
-      const audioElement = document.getElementById('persistent-audio');
-      const sourceElement = document.getElementById('audio-source');
-      
-      const wasPlaying = !audioElement.paused;
-      
-      sourceElement.src = config.url;
-      sourceElement.type = config.type;
-      audioElement.load();
-      
-      if (wasPlaying) {
-        audioElement.play().catch(e => console.log('Autoplay prevented:', e));
-      }
-    }
-
-    // Update mini now playing display
-    async function updateMiniNowPlaying() {
-      try {
-        const response = await fetch('/api/asteroid/partial/now-playing-inline');
-        if (response.ok) {
-          const text = await response.text();
-          document.getElementById('mini-now-playing').textContent = text;
-        }
-      } catch(error) {
-        console.log('Could not fetch now playing:', error);
-      }
-    }
-
-    // Update every 10 seconds
-    setTimeout(updateMiniNowPlaying, 1000);
-    setInterval(updateMiniNowPlaying, 10000);
-
-    // Disable frameset mode function
-    function disableFramesetMode() {
-      // Clear preference
-      localStorage.removeItem('useFrameset');
-      // Redirect parent window to regular view
-      window.parent.location.href = '/asteroid/';
-    }
-  </script>
-</body>
-</html>

template/frameset-wrapper.chtml

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title lquery="(text title)">🎵 ASTEROID RADIO 🎵</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <script>
-    // Prevent nested framesets - break out if we're already in a frame
-    if (window.self !== window.top) {
-      window.top.location.href = window.self.location.href;
-    }
-  </script>
-</head>
-<frameset rows="*,80" frameborder="0" border="0" framespacing="0">
-  <frame src="/asteroid/content" name="content-frame" noresize>
-  <frame src="/asteroid/audio-player-frame" name="player-frame" noresize scrolling="no">
-  <noframes>
-    <body>
-      <p>Your browser does not support frames. Please use a modern browser or visit <a href="/asteroid/content">the main site</a>.</p>
-    </body>
-  </noframes>
-</frameset>
-</html>

template/front-page-content.chtml

@@ -1,47 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title data-text="title">🎵 ASTEROID RADIO 🎵</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-  <script src="/asteroid/static/js/auth-ui.js"></script>
-  <script src="/asteroid/static/js/front-page.js"></script>
-</head>
-<body>
-  <div class="container">
-    <header>
-      <h1 data-text="station-name">🎵 ASTEROID RADIO 🎵</h1>
-      <nav class="nav">
-        <a href="/asteroid/content" target="content-frame">Home</a>
-        <a href="/asteroid/player-content" target="content-frame">Player</a>
-        <a href="/asteroid/status" target="content-frame">Status</a>
-        <a href="/asteroid/profile" target="content-frame" data-show-if-logged-in>Profile</a>
-        <a href="/asteroid/admin" target="content-frame" data-show-if-admin>Admin</a>
-        <a href="/asteroid/login" target="content-frame" data-show-if-logged-out>Login</a>
-        <a href="/asteroid/register" target="content-frame" data-show-if-logged-out>Register</a>
-        <a href="/asteroid/logout" data-show-if-logged-in class="btn-logout">Logout</a>
-      </nav>
-    </header>
-
-    <main>
-      <div class="status">
-        <h2>Station Status</h2>
-        <p data-text="status-message">🟢 LIVE - Broadcasting asteroid music for hackers</p>
-        <p>Current listeners: <span data-text="listeners">0</span></p>
-        <p>Stream quality: <span data-text="stream-quality">AAC 96kbps Stereo</span></p>
-      </div>
-      
-      <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>
-        <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>
-      </div>
-      
-      <div id="now-playing" class="now-playing"></div>
-    </main>
-  </div>
-</body>
-</html>

template/front-page.chtml

@@ -33,17 +33,7 @@
       </div>
       
       <div class="live-stream">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px;">
-          <h2 style="color: #00ff00; margin: 0;">🟢 LIVE STREAM</h2>
-          <div style="display: flex; gap: 10px;">
-            <button id="popout-btn" class="btn btn-info" onclick="openPopoutPlayer()" style="font-size: 0.9em;">
-              🗗 Pop Out Player
-            </button>
-            <button id="frameset-btn" class="btn btn-secondary" onclick="enableFramesetMode()" style="font-size: 0.9em;">
-              🖼️ Enable Persistent Player
-            </button>
-          </div>
-        </div>
+        <h2 style="color: #00ff00;">🟢 LIVE STREAM</h2>
         
         <!-- Stream Quality Selector -->
         <div class="live-stream-quality">

template/login.chtml

@@ -11,9 +11,9 @@
     <header>
       <h1>🎵 ASTEROID RADIO - LOGIN</h1>
       <nav class="nav">
-        <a href="/asteroid/content" target="content-frame">Home</a>
-        <a href="/asteroid/player-content" target="content-frame">Player</a>
-        <a href="/asteroid/status" target="content-frame">Status</a>
+        <a href="/asteroid/">Home</a>
+        <a href="/asteroid/player">Player</a>
+        <a href="/asteroid/status">Status</a>
         <a href="/asteroid/register">Register</a>
       </nav>
     </header>

template/player-content.chtml

@@ -1,120 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <title data-text="title">Asteroid Radio - Web Player</title>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-  <script src="/asteroid/static/js/auth-ui.js"></script>
-  <script src="/asteroid/static/js/player.js"></script>
-</head>
-<body>
-  <div class="container">
-    <h1>🎵 WEB PLAYER</h1>
-    <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
-      <a href="/asteroid/profile" target="content-frame" data-show-if-logged-in>Profile</a>
-      <a href="/asteroid/admin" target="content-frame" data-show-if-admin>Admin</a>
-      <a href="/asteroid/login" target="content-frame" data-show-if-logged-out>Login</a>
-      <a href="/asteroid/register" target="content-frame" data-show-if-logged-out>Register</a>
-      <a href="/asteroid/logout" data-show-if-logged-in class="btn-logout">Logout</a>
-    </div>
-    
-    <!-- Live Stream Section - Note about persistent player -->
-    <div class="player-section">
-      <h2 style="color: #00ff00;">🟢 Live Radio Stream</h2>
-      <p><em>The live stream player is now in the persistent bar at the bottom of the page. It will continue playing as you navigate between pages!</em></p>
-    </div>
-
-    <div id="now-playing" class="now-playing"></div>
-
-    <!-- Track Browser -->
-    <div class="player-section">
-      <h2>Personal Track Library</h2>
-      <div class="track-browser">
-        <input type="text" id="search-tracks" placeholder="Search tracks..." class="search-input">
-        <select id="library-tracks-per-page" class="sort-select" onchange="changeLibraryTracksPerPage()" style="margin: 10px 0px;">
-          <option value="10">10 per page</option>
-          <option value="20" selected>20 per page</option>
-          <option value="50">50 per page</option>
-        </select>
-        <div id="track-list" class="track-list">
-          <div class="loading">Loading tracks...</div>
-        </div>
-        <!-- Pagination Controls -->
-        <div id="library-pagination-controls" style="display: none; margin-top: 20px; text-align: center;">
-          <button onclick="libraryGoToPage(1)" class="btn btn-secondary">« First</button>
-          <button onclick="libraryPreviousPage()" class="btn btn-secondary">‹ Prev</button>
-          <span id="library-page-info" style="margin: 0 15px; font-weight: bold;">Page 1 of 1</span>
-          <button onclick="libraryNextPage()" class="btn btn-secondary">Next ›</button>
-          <button onclick="libraryGoToLastPage()" class="btn btn-secondary">Last »</button>
-        </div>
-      </div>
-    </div>
-
-    <!-- Audio Player Widget -->
-    <div class="player-section">
-      <h2>Audio Player</h2>
-      <div class="audio-player">
-        <div class="now-playing">
-          <div class="track-art">🎵</div>
-          <div class="track-details">
-            <div class="track-title" id="current-title">No track selected</div>
-            <div class="track-artist" id="current-artist">Unknown Artist</div>
-            <div class="track-album" id="current-album">Unknown Album</div>
-          </div>
-        </div>
-        
-        <audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0;">
-          Your browser does not support the audio element.
-        </audio>
-        
-        <div class="player-controls">
-          <button id="prev-btn" class="btn btn-secondary">⏮️ Previous</button>
-          <button id="play-pause-btn" class="btn btn-primary">▶️ Play</button>
-          <button id="next-btn" class="btn btn-secondary">⏭️ Next</button>
-          <button id="shuffle-btn" class="btn btn-info">🔀 Shuffle</button>
-          <button id="repeat-btn" class="btn btn-warning">🔁 Repeat</button>
-        </div>
-        
-        <div class="player-info">
-          <div class="time-display">
-            <span id="current-time">0:00</span> / <span id="total-time">0:00</span>
-          </div>
-          <div class="volume-control">
-            <label for="volume-slider">🔊</label>
-            <input type="range" id="volume-slider" min="0" max="100" value="50" class="volume-slider">
-          </div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Playlist Management -->
-    <div class="player-section">
-      <h2>Playlists</h2>
-      <div class="playlist-controls">
-        <input type="text" id="new-playlist-name" placeholder="New playlist name..." class="playlist-input">
-        <button id="create-playlist" class="btn btn-success">➕ Create Playlist</button>
-      </div>
-      
-      <div class="playlist-list">
-        <div id="playlists-container">
-          <div class="no-playlists">No playlists created yet.</div>
-        </div>
-      </div>
-    </div>
-
-    <!-- Queue -->
-    <div class="player-section">
-      <h2>Play Queue</h2>
-      <div class="queue-controls">
-        <button id="clear-queue" class="btn btn-danger">🗑️ Clear Queue</button>
-        <button id="save-queue" class="btn btn-info">💾 Save as Playlist</button>
-      </div>
-      <div id="play-queue" class="play-queue">
-        <div class="empty-queue">Queue is empty</div>
-      </div>
-    </div>
-  </div>
-</body>
-</html>

template/player.chtml

@@ -12,9 +12,9 @@
   <div class="container">
     <h1>🎵 WEB PLAYER</h1>
     <div class="nav">
-      <a href="/asteroid/content" target="content-frame">Home</a>
-      <a href="/asteroid/profile" target="content-frame" data-show-if-logged-in>Profile</a>
-      <a href="/asteroid/admin" target="content-frame" data-show-if-admin>Admin</a>
+      <a href="/asteroid/">Home</a>
+      <a href="/asteroid/profile" data-show-if-logged-in>Profile</a>
+      <a href="/asteroid/admin" data-show-if-admin>Admin</a>
       <a href="/asteroid/login" data-show-if-logged-out>Login</a>
       <a href="/asteroid/register" data-show-if-logged-out>Register</a>
       <a href="/asteroid/logout" data-show-if-logged-in class="btn-logout">Logout</a>

template/popout-player.chtml

@@ -1,234 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <title>🎵 Asteroid Radio - Player</title>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <link rel="stylesheet" type="text/css" href="/asteroid/static/asteroid.css">
-    <style>
-        body {
-            margin: 0;
-            padding: 10px;
-            background: #0a0a0a;
-            overflow: hidden;
-        }
-        .popout-container {
-            max-width: 400px;
-            margin: 0 auto;
-        }
-        .popout-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 10px;
-            padding-bottom: 10px;
-            border-bottom: 1px solid #2a3441;
-        }
-        .popout-title {
-            font-size: 1.2em;
-            color: #00ff00;
-        }
-        .close-btn {
-            background: #ff4444;
-            color: white;
-            border: none;
-            padding: 5px 10px;
-            cursor: pointer;
-            border-radius: 3px;
-            font-size: 0.9em;
-        }
-        .close-btn:hover {
-            background: #ff6666;
-        }
-        .now-playing-mini {
-            background: #1a1a1a;
-            padding: 10px;
-            border-radius: 5px;
-            margin-bottom: 10px;
-            border: 1px solid #2a3441;
-        }
-        .track-info-mini {
-            font-size: 0.9em;
-        }
-        .track-title-mini {
-            color: #00ff00;
-            font-weight: bold;
-            margin-bottom: 3px;
-        }
-        .track-artist-mini {
-            color: #4488ff;
-            font-size: 0.85em;
-        }
-        .quality-selector {
-            margin: 10px 0;
-            padding: 10px;
-            background: #1a1a1a;
-            border-radius: 5px;
-            border: 1px solid #2a3441;
-        }
-        .quality-selector label {
-            color: #00ff00;
-            margin-right: 10px;
-        }
-        .quality-selector select {
-            background: #0a0a0a;
-            color: #00ff00;
-            border: 1px solid #2a3441;
-            padding: 5px;
-            border-radius: 3px;
-        }
-        audio {
-            width: 100%;
-            margin: 10px 0;
-        }
-        .status-mini {
-            text-align: center;
-            color: #888;
-            font-size: 0.85em;
-            margin-top: 10px;
-        }
-    </style>
-    <script src="/asteroid/static/js/front-page.js"></script>
-</head>
-<body>
-    <div class="popout-container">
-        <div class="popout-header">
-            <div class="popout-title">🎵 Asteroid Radio</div>
-            <button class="close-btn" onclick="window.close()">✖ Close</button>
-        </div>
-
-        <div class="now-playing-mini">
-            <div class="track-info-mini">
-                <div class="track-title-mini" id="popout-track-title">Loading...</div>
-                <div class="track-artist-mini" id="popout-track-artist">Please wait</div>
-            </div>
-        </div>
-
-        <div class="quality-selector">
-            <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
-            <label for="popout-stream-quality"><strong>Quality:</strong></label>
-            <select id="popout-stream-quality" onchange="changeStreamQuality()">
-                <option value="aac">AAC 96kbps</option>
-                <option value="mp3">MP3 128kbps</option>
-                <option value="low">MP3 64kbps</option>
-            </select>
-        </div>
-
-        <audio id="live-audio" controls autoplay style="width: 100%;">
-            <source id="audio-source" lquery="(attr :src default-stream-url :type default-stream-encoding)">
-            Your browser does not support the audio element.
-        </audio>
-
-        <div class="status-mini">
-            <span style="color: #00ff00;">● LIVE</span>
-        </div>
-    </div>
-
-    <script>
-        // Stream quality configuration for popout
-        function getStreamConfig(streamBaseUrl, encoding) {
-            const config = {
-                aac: {
-                    url: `${streamBaseUrl}/asteroid.aac`,
-                    format: 'AAC 96kbps Stereo',
-                    type: 'audio/aac',
-                    mount: 'asteroid.aac'
-                },
-                mp3: {
-                    url: `${streamBaseUrl}/asteroid.mp3`,
-                    format: 'MP3 128kbps Stereo',
-                    type: 'audio/mpeg',
-                    mount: 'asteroid.mp3'
-                },
-                low: {
-                    url: `${streamBaseUrl}/asteroid-low.mp3`,
-                    format: 'MP3 64kbps Stereo',
-                    type: 'audio/mpeg',
-                    mount: 'asteroid-low.mp3'
-                }
-            };
-            return config[encoding];
-        }
-
-        // Change stream quality in popout
-        function changeStreamQuality() {
-            const selector = document.getElementById('popout-stream-quality');
-            const streamBaseUrl = document.getElementById('stream-base-url');
-            const config = getStreamConfig(streamBaseUrl.value, selector.value);
-
-            // Update audio player
-            const audioElement = document.getElementById('live-audio');
-            const sourceElement = document.getElementById('audio-source');
-
-            const wasPlaying = !audioElement.paused;
-
-            sourceElement.src = config.url;
-            sourceElement.type = config.type;
-            audioElement.load();
-
-            // Resume playback if it was playing
-            if (wasPlaying) {
-                audioElement.play().catch(e => console.log('Autoplay prevented:', e));
-            }
-        }
-
-        // Update now playing info for popout
-        async function updatePopoutNowPlaying() {
-            try {
-                const response = await fetch('/api/asteroid/partial/now-playing-inline');
-                const html = await response.text();
-                
-                // Parse the HTML to extract track info
-                const parser = new DOMParser();
-                const doc = parser.parseFromString(html, 'text/html');
-                const trackText = doc.body.textContent || doc.body.innerText || '';
-                
-                // Try to split artist - title format
-                const parts = trackText.split(' - ');
-                if (parts.length >= 2) {
-                    document.getElementById('popout-track-artist').textContent = parts[0].trim();
-                    document.getElementById('popout-track-title').textContent = parts.slice(1).join(' - ').trim();
-                } else {
-                    document.getElementById('popout-track-title').textContent = trackText.trim();
-                    document.getElementById('popout-track-artist').textContent = 'Asteroid Radio';
-                }
-            } catch (error) {
-                console.error('Error updating now playing:', error);
-            }
-        }
-
-        // Update every 10 seconds
-        setInterval(updatePopoutNowPlaying, 10000);
-        // Initial update
-        updatePopoutNowPlaying();
-
-        // Auto-reconnect on stream errors
-        const audioElement = document.getElementById('live-audio');
-        audioElement.addEventListener('error', function(e) {
-            console.log('Stream error, attempting reconnect in 3 seconds...');
-            setTimeout(function() {
-                audioElement.load();
-                audioElement.play().catch(err => console.log('Reconnect failed:', err));
-            }, 3000);
-        });
-
-        audioElement.addEventListener('stalled', function() {
-            console.log('Stream stalled, reloading...');
-            audioElement.load();
-            audioElement.play().catch(err => console.log('Reload failed:', err));
-        });
-
-        // Notify parent window that popout is open
-        if (window.opener && !window.opener.closed) {
-            window.opener.postMessage({ type: 'popout-opened' }, '*');
-        }
-
-        // Notify parent when closing
-        window.addEventListener('beforeunload', function() {
-            if (window.opener && !window.opener.closed) {
-                window.opener.postMessage({ type: 'popout-closed' }, '*');
-            }
-        });
-    </script>
-</body>
-</html>

template/profile.chtml

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

template/register.chtml

@@ -11,9 +11,9 @@
     <header>
         <h1>🎵 ASTEROID RADIO - REGISTER</h1>
         <nav class="nav">
-            <a href="/asteroid/content" target="content-frame">Home</a>
-            <a href="/asteroid/player-content" target="content-frame">Player</a>
-            <a href="/asteroid/status" target="content-frame">Status</a>
+            <a href="/asteroid/">Home</a>
+            <a href="/asteroid/player">Player</a>
+            <a href="/asteroid/status">Status</a>
             <a href="/asteroid/login">Login</a>
         </nav>
     </header>

template/users.chtml

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