Add phase metadata to stream-queue.m3u

Merge upstream/main into main
feat: add blinking live cursor
2025-11-24 07:35:14 +03:00 · 2025-11-24 07:34:26 +03:00 · 2025-11-23 18:43:45 -05:00 · 2025-11-23 18:43:45 -05:00 · 2025-11-22 09:06:05 -05:00 · 2025-11-22 09:06:05 -05:00
11 changed files with 359 additions and 257 deletions
--- a/asteroid.lisp
+++ b/asteroid.lisp
@ -73,7 +73,6 @@
  (let ((query (format nil "~a ~a" artist song)))
    (format nil "https://musicbrainz.org/search?query=~a&type=recording"
            (drakma:url-encode query :utf-8))))
-
 ;; API Routes using Radiance's define-api
 ;; API endpoints are accessed at /api/<name> automatically
 ;; They use lambda-lists for parameters and api-output for responses
--- a/static/asteroid.css
+++ b/static/asteroid.css
@ -175,17 +175,49 @@ body .recently-played-panel .recently-played-list .error{
    color: #ff4444;
 }

-body .recently-played-panel .recently-played-list.track-list{
+body .recently-played-panel .recently-played-list .track-link{
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    color: #00ffff;
+    text-decoration: none;
+    font-weight: 500;
+    font-size: 1em;
+    -moz-transition: all 0.2s;
+    -o-transition: all 0.2s;
+    -webkit-transition: all 0.2s;
+    -ms-transition: all 0.2s;
+    transition: all 0.2s;
+}
+
+body .recently-played-panel .recently-played-list .track-link .external-icon{
+    width: 14px;
+    height: 14px;
+    margin-left: 2px;
+    vertical-align: middle;
+}
+
+body .recently-played-panel .recently-played-list .track-link:hover{
+    color: #00ff00;
+    text-decoration: underline;
+    text-underline-offset: 3px;
+}
+
+body .recently-played-panel .recently-played-list .track-link:visited{
+    color: #4488ff;
+}
+
+body .recently-played-panel .recently-played-list .track-list{
    list-style: none;
-    padding: 0;
+    padding: 0 12px;
    margin: 0;
    border: none;
    max-height: none;
    overflow-y: visible;
 }

-body .recently-played-panel .recently-played-list.track-item{
-    padding: 6px 12px;
+body .recently-played-panel .recently-played-list .track-item{
+    padding: 10px 0;
    border-bottom: 1px solid #2a3441;
    -moz-transition: background-color 0.2s;
    -o-transition: background-color 0.2s;
@ -194,11 +226,11 @@ body .recently-played-panel .recently-played-list.track-item{
    transition: background-color 0.2s;
 }

-body .recently-played-panel .recently-played-list.track-item LAST-CHILD{
+body .recently-played-panel .recently-played-list .track-item LAST-CHILD{
    border-bottom: none;
 }

-body .recently-played-panel .recently-played-list.track-item HOVER{
+body .recently-played-panel .recently-played-list .track-item HOVER{
    background-color: #2a3441;
 }

@ -211,9 +243,6 @@ body .recently-played-panel .recently-played-list.track-info{
 }

 body .recently-played-panel .recently-played-list.track-title{
-    color: #4488ff;
-    font-weight: 500;
-    font-size: 1em;
    grid-column: 1;
    grid-row: 1;
 }
@ -233,41 +262,6 @@ body .recently-played-panel .recently-played-list.track-time{
    text-align: right;
 }

-body .recently-played-panel .recently-played-list.track-meta{
-    grid-column: 2;
-    grid-row: 2;
-    text-align: right;
-}
-
-
-
-body .recently-played-list .allmusic-link{
-    display: inline-flex;
-    align-items: center;
-    gap: 4px;
-    color: #4488ff;
-    text-decoration: none;
-    font-size: 0.85em;
-    letter-spacing: 0.08rem;
-    -moz-transition: all 0.2s;
-    -o-transition: all 0.2s;
-    -webkit-transition: all 0.2s;
-    -ms-transition: all 0.2s;
-    transition: all 0.2s;
-    white-space: nowrap;
-}
-
-body .recently-played-list .allmusic-link HOVER{
-    color: #00ff00;
-    text-decoration: underline;
-    text-underline-offset: 5px;
-}
-
-body .recently-played-list .allmusic-link svg{
-    width: 14px;
-    height: 14px;
-}
-
 body .back{
    color: #00ffff;
    text-decoration: none;
@ -396,7 +390,7 @@ body .audio-player{
 }

 body audio::-webkit-media-controls-panel{
-    background-color: #1a1a1a;
+    background-color: #1a2332;
 }

 body audio::-webkit-media-controls-current-time-display,
--- a/static/asteroid.lass
+++ b/static/asteroid.lass
@ -1,11 +1,14 @@
 ;; LASS stylesheet for Asteroid Radio
 ;; Hacker-themed green terminal styling

-(:let ()
+(:let ((color-dodger-blue "#4488FF")
+       (color-aqua "#00FFFF")
+       (color-accented-black "#1a2332")
+       (main-font "VT323, monospace"))
  (:import (url "https://fonts.googleapis.com/css2?family=VT323&display=swap"))
  (body
    ;; :font-family "Courier New, monospace"
-    :font-family "VT323, monospace"
+    :font-family #(main-font)
    :font-weight 400
    :font-style normal
    :background "#0a0a0a"
@ -14,6 +17,26 @@
    :padding "20px"
    :box-sizing "border-box"

+    (select
+     :font-family #(main-font))
+
+    (header
+     (.page-title
+      :display "flex"
+      :align-items "center"
+      :justify-content "center"
+      :gap "15px"
+      :margin 0)
+
+     (.page-subtitle
+      :color #(color-dodger-blue)
+      :display "flex"
+      :justify-content "center"
+      :font-style "italic"
+      :margin 0
+      :margin-top ".8rem"
+      :margin-bottom "4rem"))
+
    (.container
     :max-width "1200px"
     :margin "0 auto")
@ -145,23 +168,47 @@
       :padding "20px"
       :font-style italic)
      
-      (.error :color "#ff4444"))
-     
-     ((:and .recently-played-list .track-list)
-      :list-style none
-      :padding 0
-      :margin 0
-      :border none
-      :max-height none
-      :overflow-y visible)
-     
-     ((:and .recently-played-list .track-item)
-      :padding "6px 12px"
-      :border-bottom "1px solid #2a3441"
-      :transition "background-color 0.2s"
+      (.error :color "#ff4444")
      
-      ((:and :last-child) :border-bottom none)
-      ((:and :hover) :background-color "#2a3441"))
+      (.track-link
+       :display inline-flex
+       :align-items center
+       :gap "4px"
+       :color "#00ffff"
+       :text-decoration none
+       :font-weight 500
+       :font-size "1em"
+       :transition "all 0.2s"
+       
+       (.external-icon
+        :width "14px"
+        :height "14px"
+        :margin-left "2px"
+        :vertical-align middle))
+      
+      ((:and .track-link :hover)
+       :color "#00ff00"
+       :text-decoration underline
+       :text-underline-offset "3px")
+      
+      ((:and .track-link :visited)
+       :color "#4488ff")
+      
+      (.track-list
+       :list-style none
+       :padding "0 12px"
+       :margin 0
+       :border none
+       :max-height none
+       :overflow-y visible)
+      
+      (.track-item
+       :padding "10px 0"
+       :border-bottom "1px solid #2a3441"
+       :transition "background-color 0.2s"
+       
+       ((:and :last-child) :border-bottom none)
+       ((:and :hover) :background-color "#2a3441")))
     
     ((:and .recently-played-list .track-info)
      :display grid
@ -171,9 +218,6 @@
      :align-items center)
     
     ((:and .recently-played-list .track-title)
-      :color "#4488ff"
-      :font-weight 500
-      :font-size "1em"
      :grid-column 1
      :grid-row 1)
     
@ -188,32 +232,7 @@
      :font-size "0.85em"
      :grid-column 2
      :grid-row 1
-      :text-align right)
-     
-     ((:and .recently-played-list .track-meta)
-      :grid-column 2
-      :grid-row 2
      :text-align right))
-     
-     (.recently-played-list
-      (.allmusic-link
-       :display inline-flex
-       :align-items center
-       :gap "4px"
-       :color "#4488ff"
-       :text-decoration none
-       :font-size "0.85em"
-       :letter-spacing "0.08rem"
-       :transition "all 0.2s"
-       :white-space nowrap
-       
-       ((:and :hover)
-        :color "#00ff00"
-        :text-decoration underline
-        :text-underline-offset "5px")
-       
-       (svg :width "14px"
-            :height "14px")))

    (.back
     :color "#00ffff"
@ -243,23 +262,45 @@
     :border "1px solid #2a3441"
     :margin "20px 0"
     :border-radius "5px"
+
     (.live-stream
-      :overflow auto) )
+      :overflow auto))

    (.live-stream
-     ((:or p label) :font-size "1.5rem")
+     :margin-top "2rem"
+     :font-size "1.1rem"
+     :color #(color-dodger-blue)

-     (code :font-size "1rem")
+     (.live-stream-label
+      :font-size "1.2rem"
+      :color #(color-aqua))
+
+     (code :font-size "0.9rem")
+
+     (.frame-enable-message
+      :color #(color-aqua))

     (.live-stream-quality

      :display "flex"
+      :align-items "center"
+      :flex-wrap "wrap"

      (label
       :margin-right "10px")

      (select
-       :padding "5px")))
+       :background "transparent"
+       :color "#00ff00"
+       :border "1px solid #00ff00"
+       :letter-spacing "0.08rem"
+       :font-size "0.95rem"
+       :min-width "220px"
+       :width "fit-content"
+       :padding "5px")
+
+      ((:and select :hover)
+       :background "#2a3441")))

    (.track-browser
     :margin "15px 0")
@ -310,8 +351,14 @@
    (.audio-player
     :text-align center)

+    ((:and "@-moz-document" "url-prefix()")
+      (audio
+       :background-color "red"))
+
    ((:and audio |::-webkit-media-controls-panel|)
-     :background-color "#1a1a1a")
+     :border "1px solid"
+     :border-color #(color-accented-black)
+     :background-color #(color-accented-black))

    ;; ((:and audio (:or |::-webkit-media-controls-mute-button|
    ;;                   |::-webkit-media-controls-play-button|
@ -939,6 +986,165 @@

  ) ;; Close main body block

+  ;; Persistent bottom player overrides
+  ((:and body .persistent-player-container)
+   :margin 0
+   :padding "10px;"
+   :background #(color-accented-black)
+
+   (.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 "transparent"
+     :color "#00ff00"
+     :letter-spacing "0.08rem"
+     :border "1px solid #00ff00"
+     :padding "3px 8px")
+    ((:and select :hover)
+     :background "#2a3441"))
+
+   (audio
+    :flex 1
+    :min-width "200px"
+    :border 0)
+
+   ;; ((:and audio |::-webkit-media-controls-panel|)
+   ;;   :border 1 solid #(color-accented-black)
+   ;;   :background-color #(color-accented-black))
+
+   (.now-playing-mini
+    :color "#00ff00"
+    :font-size "0.9em"
+    :white-space "nowrap"
+    :overflow "hidden"
+    :text-overflow "ellipsis"
+    :flex 1
+    :min-width "300px")
+
+   (.persistent-disable-btn
+    :background transparent
+    :color "#00ff00"
+    :border "1px solid #00ff00"
+    :padding "5px 10px"
+    :cursor "pointer"
+    :font-family #(main-font)
+    :font-size "0.85em"
+    :white-space nowrap)
+
+   ((:and .persistent-disable-btn :hover)
+    :background "#2a3441"))
+
+  ;; Popout player overrides
+  ((:and body .popout-body)
+   :margin 0
+   :padding "10px"
+   :background "#0a0a0a"
+   :overflow "hidden"
+
+   (.popout-player
+    :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 #(color-dodger-blue)
+    (.popout-subtitle
+     :margin-top 0
+     :margin-left "2rem"
+     :font-style italic
+     :font-size ".8rem"))
+
+   (.close-btn
+    :background transparent
+    :font-family #(main-font)
+    :color "#00ff00"
+    :border "1px solid #00ff00"
+    :padding "5px 10px"
+    :cursor "pointer"
+    :border-radius "3px"
+    :font-size "0.9em")
+
+   ((:and .close-btn :hover)
+     :background "#2a3441")
+
+   (.now-playing-mini
+    :background #(color-accented-black)
+    :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 #(color-accented-black)
+    :border-radius "5px"
+    :border "1px solid #2a3441"
+
+    (label
+     :color "#00ff00"
+     :margin-right "10px")
+
+    (select
+     :background transparent
+     :color "#00ff00"
+     :border "1px solid #00ff00"
+     :padding "5px"
+     :border-radius "3px")
+
+    ((:and select :hover)
+     :background "#2a3441"))
+
+   (audio
+    :width "100%"
+    :margin "10px 0")
+
+   (.status-mini
+    :text-align "center"
+    :color "#888"
+    :font-size "0.85em"
+    :margin-top "10px"))
+
  ;; media queries for reponsiveness
  (:media "(max-width: 576px)"
          (body
@ -948,4 +1154,17 @@
            (>* :width "100%")
            (button :margin-left 0
                    :margin-right 0))))
+
+  ;; specific browser queries
+  (:supports "(-moz-appearance: none)"
+                  (audio
+                   :opacity 1
+                   :background-color #(color-accented-black)))
+
+  ;; Live stream blink animation
+  (.live-stream-indicator
+   :animation "asteroid-blink 1s steps(5, start) infinite")
+
+  (:keyframes asteroid-blink
+              (to :visibility "hidden"))
 ) ;; End of let block
--- a/static/js/recently-played.js
+++ b/static/js/recently-played.js
@ -19,19 +19,18 @@ async function updateRecentlyPlayed() {
                html += `
                    <li class="track-item">
                        <div class="track-info">
-                            <div class="track-title">${escapeHtml(track.song)}</div>
-                            <div class="track-artist">${escapeHtml(track.artist)}</div>
-                            <span class="track-time">${timeAgo}</span>
-                            <div class="track-meta">
-                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="allmusic-link">
-                                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <div class="track-title">
+                                <a href="${track.search_url}" target="_blank" rel="noopener noreferrer" class="track-link">
+                                    ${escapeHtml(track.song)}
+                                    <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" class="external-icon">
                                        <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
                                        <polyline points="15 3 21 3 21 9"></polyline>
                                        <line x1="10" y1="14" x2="21" y2="3"></line>
                                    </svg>
-                                    MusicBrainz
                                </a>
                            </div>
+                            <div class="track-artist">${escapeHtml(track.artist)}</div>
+                            <span class="track-time">${timeAgo}</span>
                        </div>
                    </li>
                `;
--- a/stream-queue.m3u
+++ b/stream-queue.m3u
@ -1,4 +1,9 @@
 #EXTM3U
+#PLAYLIST:Low Orbit - Asteroid Radio Main Rotation
+#PHASE:Low Orbit
+#DURATION:Variable
+#CURATOR:Asteroid Radio
+#DESCRIPTION:Fast-paced electronic journey through IDM, ambient, and experimental sounds
 #EXTINF:-1,Underworld - Underworld - Confusion The Waitress
 /app/music/Underworld/1996 - Second Toughest In The Infants/03. Underworld - Confusion The Waitress.flac
 #EXTINF:-1,The Orb - Towers Of Dub
--- a/template/audio-player-frame.ctml
+++ b/template/audio-player-frame.ctml
@ -4,58 +4,13 @@
  <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: 'VT323', 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: 'VT323', 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>
+<body class="persistent-player-container">
  <div class="persistent-player">
-    <span class="player-label">🟢 LIVE:</span>
+    <span class="player-label">
+      <span class="live-stream-indicator">🟢 </span>
+      LIVE:
+    </span>
    
    <div class="quality-selector">
      <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
@ -73,7 +28,7 @@
    
    <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: 'VT323', monospace; font-size: 0.85em; white-space: nowrap;">
+    <button onclick="disableFramesetMode()" class="persistent-disable-btn">
      ✕ Disable
    </button>
  </div>
--- a/template/front-page-content.ctml
+++ b/template/front-page-content.ctml
@ -15,11 +15,12 @@
 <body>
  <div class="container">
    <header>
-      <h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
+      <h1 class="page-title">
        <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
        <span data-text="station-name">ASTEROID RADIO</span>
        <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
      </h1>
+      <h3 class="page-subtitle">The Station at the End of Time</h3>
      <nav class="nav">
        <a href="/asteroid/content" target="content-frame">Home</a>
        <a href="/asteroid/player-content" target="content-frame">Player</a>
@ -34,12 +35,12 @@

    <main>
      <div class="live-stream">
-        <h2 style="color: #00ff00;">🟢 LIVE STREAM</h2>
+          <h2 style="color: #00ff00; margin: 0;"><span class="live-stream-indicator" style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
        <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>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
-        <p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
-        <p><em>The live stream player is now in the persistent bar at the bottom of the page.</em></p>
+        <p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
+        <p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
+        <p><strong class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers</span></p>
+        <p class="frame-enable-message"><em>The live stream player is now in the persistent bar at the bottom of the page</em></p>
      </div>
      
      <div id="now-playing" class="now-playing"></div>
--- a/template/front-page.ctml
+++ b/template/front-page.ctml
@ -15,11 +15,12 @@
 <body>
  <div class="container">
    <header>
-      <h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
+      <h1 class="page-title">
        <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
        <span data-text="station-name">ASTEROID RADIO</span>
        <img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 60px; width: auto;">
      </h1>
+      <h3 class="page-subtitle">The Station at the End of Time</h3>
      <nav class="nav">
        <a href="/asteroid/">Home</a>
        <a href="/asteroid/player">Player</a>
@ -34,13 +35,13 @@

    <main>
      <div class="live-stream">
-        <div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;">
-          <h2 style="color: #00ff00; margin: 0;">🟢 LIVE STREAM</h2>
+        <div style="margin-bottom: 20px;">
+          <h2 style="color: #00ff00; margin: 0;"><span class="live-stream-indicator" style="font-size: 1rem;">🟢</span> LIVE STREAM</h2>
        </div>
        
        <!-- Stream Quality Selector -->
        <div class="live-stream-quality">
-          <label for="stream-quality" ><strong>Quality:</strong></label>
+          <label for="stream-quality" class="live-stream-label" ><strong>Quality:</strong></label>
          <select id="stream-quality" onchange="changeStreamQuality()">
            <option value="aac">AAC 96kbps (Recommended)</option>
            <option value="mp3">MP3 128kbps (Compatible)</option>
@ -49,9 +50,9 @@
        </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>Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
-        <p><strong>BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers on The Station at the End of Time.</span></p>
+        <p><strong class="live-stream-label">Stream URL:</strong> <code id="stream-url" lquery="(text default-stream-url)"></code></p>
+        <p><strong class="live-stream-label">Stream Quality:</strong> <span id="stream-format" lquery="(text default-stream-encoding-desc)"></span></p>
+        <p><strong class="live-stream-label" class="live-stream-label">BROADCASTING:</strong> <span id="stream-status" style="">Asteroid music for Hackers</span></p>

        <div style="display: flex; gap: 10px; justify-content: end; margin-bottom: 20px;">
            <button id="popout-btn" class="btn btn-info" onclick="openPopoutPlayer()" style="font-size: 0.9em;">
--- a/template/player-content.ctml
+++ b/template/player-content.ctml
@ -22,7 +22,10 @@
    
    <!-- Live Stream Section - Note about persistent player -->
    <div class="player-section">
-      <h2 style="color: #00ff00;">🟢 Live Radio Stream</h2>
+      <h2 style="color: #00ff00;">
+        <span class="live-stream-indicator" style="font-size: 1rem;">🟢 </span>
+        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>

@ -65,7 +68,7 @@
          </div>
        </div>
        
-        <audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0;">
+        <audio id="audio-player" controls preload="none" style="width: 100%; margin: 20px 0; display: none;">
          Your browser does not support the audio element.
        </audio>
        
--- a/template/player.ctml
+++ b/template/player.ctml
@ -22,7 +22,10 @@
    
    <!-- Live Stream Section -->
    <div class="player-section">
-      <h2 style="color: #00ff00;">🟢 Live Radio Stream</h2>
+      <h2 style="color: #00ff00;">
+        <span class="live-stream-indicator" style="font-size: 1rem;">🟢 </span>
+        Live Radio Stream
+      </h2>
      <div class="live-stream">
        <input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
        <!-- Stream Quality Selector -->
--- a/template/popout-player.ctml
+++ b/template/popout-player.ctml
@ -5,95 +5,16 @@
    <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>
+<body class="popout-body">
    <div class="popout-container">
        <div class="popout-header">
-            <div class="popout-title">🎵 Asteroid Radio</div>
+            <div class="popout-title">
+              🎵 Asteroid Radio
+              <br/>
+              <span class="popout-subtitle">The Station at the End of Time</span>
+            </div>
            <button class="close-btn" onclick="window.close()">✖ Close</button>
        </div>

@ -120,7 +41,9 @@
        </audio>

        <div class="status-mini">
-            <span style="color: #00ff00;">● LIVE</span>
+            <span style="color: #00ff00;">
+              <span class="live-stream-indicator">●</span>
+              LIVE</span>
        </div>
    </div>
Author	SHA1	Message	Date
Glenn Thompson	7493885e4e	Add phase metadata to stream-queue.m3u	2025-11-24 07:35:14 +03:00
Glenn Thompson	4bfc31a3c3	Merge upstream/main into main	2025-11-24 07:34:26 +03:00
Luis Pereira	4c534a0a4f	feat: add blinking live cursor	2025-11-23 18:43:45 -05:00
Luis Pereira	709affa957	fix: improve live stream text proportions	2025-11-23 18:43:45 -05:00
Glenn Thompson	57af5663ab	style: Match audio player color to app panels - Change audio player background from #1a1a1a to #1a2332 - Matches the blue-grey color used throughout the app - Addresses Fade's feedback about brownish grey appearance	2025-11-22 09:06:05 -05:00
Glenn Thompson	9a7b5eb50f	style: Update recently played track styling - Change track link colors: cyan default, green hover, blue visited - Add equal left/right padding (12px) to track-list for centered separators - Increase track-item top/bottom padding from 6px to 10px for better spacing - Move track-list and track-item inside recently-played-list block for proper CSS nesting - Addresses feedback from easilok on symmetry and breathing room	2025-11-22 09:06:05 -05:00
Glenn Thompson	2fae9f80f4	fix: Correct LASS hover syntax for track links - Move track-link styles inside recently-played-list block for proper CSS nesting - Use (:and .track-link :hover) at correct nesting level per LASS documentation - Fixes hover color change to green when mousing over track names - Generates correct CSS selector: .recently-played-list .track-link:hover	2025-11-22 09:06:05 -05:00
Glenn Thompson	ea3cd4a8f6	refactor: Make track name clickable with external link icon - Replace separate MusicBrainz link with clickable track name - Add external link icon next to track name - Simplify grid layout by removing track-meta column - Update CSS styling for track-link with hover effects - Improves UX by making the primary action (clicking track) more intuitive	2025-11-22 09:06:05 -05:00
Glenn Thompson	6bf19ade01	Add recently played tracks feature with MusicBrainz integration - Display last 3 played tracks on front page - Auto-updates every 30 seconds - Shows track title, artist, and time ago - Links to MusicBrainz search for each track - Thread-safe in-memory storage - Works in both normal and frameset modes - Hacker-themed green styling Implements feature request from fade to show recently played tracks with linkage to track info at music database.	2025-11-22 09:06:05 -05:00