diff --git a/asteroid.lisp b/asteroid.lisp index 1116a30..c763d20 100644 --- 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/ automatically ;; They use lambda-lists for parameters and api-output for responses diff --git a/static/asteroid.css b/static/asteroid.css index 3518c32..ca48246 100644 --- 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, diff --git a/static/asteroid.lass b/static/asteroid.lass index a31f553..864fcaa 100644 --- 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") @@ -123,7 +146,7 @@ :color "#4488ff" :overflow auto) - ;; Recently Played Tracks Styles + ;; Recently Played Panel (.recently-played-panel :background "#1a2332" :border "1px solid #2a3441" @@ -210,6 +233,7 @@ :grid-column 2 :grid-row 1 :text-align right)) + (.back :color "#00ffff" :text-decoration none @@ -238,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") @@ -305,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 "#1a2332") + :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| @@ -934,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 @@ -943,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 diff --git a/static/js/recently-played.js b/static/js/recently-played.js index db79f1c..5520302 100644 --- a/static/js/recently-played.js +++ b/static/js/recently-played.js @@ -19,19 +19,18 @@ async function updateRecentlyPlayed() { html += `
  • -
    ${escapeHtml(track.song)}
    -
    ${escapeHtml(track.artist)}
    - ${timeAgo} -
    - - +
    + + ${escapeHtml(track.song)} + - MusicBrainz
    +
    ${escapeHtml(track.artist)}
    + ${timeAgo}
    • `; diff --git a/stream-queue.m3u b/stream-queue.m3u index 8611479..9412f2c 100644 --- 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 diff --git a/template/audio-player-frame.ctml b/template/audio-player-frame.ctml index e5b07a1..5421756 100644 --- a/template/audio-player-frame.ctml +++ b/template/audio-player-frame.ctml @@ -4,58 +4,13 @@ - - +
    - 🟢 LIVE: + + 🟢 + LIVE: +
    @@ -73,7 +28,7 @@ Loading... -
    diff --git a/template/front-page-content.ctml b/template/front-page-content.ctml index 46dbf67..d3495ec 100644 --- a/template/front-page-content.ctml +++ b/template/front-page-content.ctml @@ -15,11 +15,12 @@
    -

    +

    Asteroid ASTEROID RADIO Asteroid

    +

    The Station at the End of Time