fix: merged player and player-content
This commit is contained in:
Luis Pereira
Brian O'Reilly
parent
01cb0366c0
commit
b862097ca2
|
|
@ -1285,7 +1285,8 @@
|
||||||
(define-page-with-limit player-content #@"/player-content" (:limit-group "public")
|
(define-page-with-limit player-content #@"/player-content" (:limit-group "public")
|
||||||
"Player page content (displayed in content frame)"
|
"Player page content (displayed in content frame)"
|
||||||
(clip:process-to-string
|
(clip:process-to-string
|
||||||
(load-template "player-content")
|
(load-template "player")
|
||||||
|
:framesetp t
|
||||||
:title "Asteroid Radio - Web Player"
|
:title "Asteroid Radio - Web Player"
|
||||||
:stream-base-url *stream-base-url*
|
:stream-base-url *stream-base-url*
|
||||||
:default-stream-url (format nil "~a/asteroid.aac" *stream-base-url*)
|
:default-stream-url (format nil "~a/asteroid.aac" *stream-base-url*)
|
||||||
|
|
|
||||||
|
|
@ -1,157 +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/front-page.js"></script>
|
|
||||||
<script src="/asteroid/static/js/player.js"></script>
|
|
||||||
<script src="/api/asteroid/spectrum-analyzer.js"></script>
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<div class="container">
|
|
||||||
<h1 style="display: flex; align-items: center; justify-content: center; gap: 15px;">
|
|
||||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 50px; width: auto;">
|
|
||||||
<span>WEB PLAYER</span>
|
|
||||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 50px; width: auto;">
|
|
||||||
</h1>
|
|
||||||
|
|
||||||
<!-- Spectrum Analyzer Canvas -->
|
|
||||||
<div style="text-align: center; margin: 15px 0;">
|
|
||||||
<canvas id="spectrum-canvas" width="800" height="100" style="max-width: 100%; border: 1px solid #00ff00; background: #000; border-radius: 4px;"></canvas>
|
|
||||||
<div style="margin-top: 8px; font-size: 0.9em;">
|
|
||||||
<label style="margin-right: 10px;">
|
|
||||||
Style:
|
|
||||||
<select id="spectrum-style-selector" onchange="setSpectrumStyle(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
|
|
||||||
<option value="bars">Bars</option>
|
|
||||||
<option value="wave">Wave</option>
|
|
||||||
<option value="dots">Dots</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
<label>
|
|
||||||
Theme:
|
|
||||||
<select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
|
|
||||||
<option value="monotone">Monotone</option>
|
|
||||||
<option value="green">Green</option>
|
|
||||||
<option value="blue">Blue</option>
|
|
||||||
<option value="purple">Purple</option>
|
|
||||||
<option value="red">Red</option>
|
|
||||||
<option value="amber">Amber</option>
|
|
||||||
<option value="rainbow">Rainbow</option>
|
|
||||||
</select>
|
|
||||||
</label>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<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;">
|
|
||||||
<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>
|
|
||||||
|
|
||||||
<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; display: none;">
|
|
||||||
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>
|
|
||||||
|
|
@ -11,6 +11,11 @@
|
||||||
<script src="/asteroid/static/js/auth-ui.js"></script>
|
<script src="/asteroid/static/js/auth-ui.js"></script>
|
||||||
<script src="/asteroid/static/js/front-page.js"></script>
|
<script src="/asteroid/static/js/front-page.js"></script>
|
||||||
<script src="/asteroid/static/js/player.js"></script>
|
<script src="/asteroid/static/js/player.js"></script>
|
||||||
|
<c:if test="framesetp">
|
||||||
|
<c:then>
|
||||||
|
<script src="/api/asteroid/spectrum-analyzer.js"></script>
|
||||||
|
</c:then>
|
||||||
|
</c:if>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
|
|
@ -19,39 +24,90 @@
|
||||||
<span>WEB PLAYER</span>
|
<span>WEB PLAYER</span>
|
||||||
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 50px; width: auto;">
|
<img src="/asteroid/static/asteroid.png" alt="Asteroid" style="height: 50px; width: auto;">
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<!-- Spectrum Analyzer Canvas -->
|
||||||
|
<c:if test="framesetp">
|
||||||
|
<c:then>
|
||||||
|
<div style="text-align: center; margin: 15px 0;">
|
||||||
|
<canvas id="spectrum-canvas" width="800" height="100" style="max-width: 100%; border: 1px solid #00ff00; background: #000; border-radius: 4px;"></canvas>
|
||||||
|
<div style="margin-top: 8px; font-size: 0.9em;">
|
||||||
|
<label style="margin-right: 10px;">
|
||||||
|
Style:
|
||||||
|
<select id="spectrum-style-selector" onchange="setSpectrumStyle(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
|
||||||
|
<option value="bars">Bars</option>
|
||||||
|
<option value="wave">Wave</option>
|
||||||
|
<option value="dots">Dots</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
<label>
|
||||||
|
Theme:
|
||||||
|
<select id="spectrum-theme-selector" onchange="setSpectrumTheme(this.value)" style="padding: 3px; background: #000; color: #00ff00; border: 1px solid #00ff00;">
|
||||||
|
<option value="monotone">Monotone</option>
|
||||||
|
<option value="green">Green</option>
|
||||||
|
<option value="blue">Blue</option>
|
||||||
|
<option value="purple">Purple</option>
|
||||||
|
<option value="red">Red</option>
|
||||||
|
<option value="amber">Amber</option>
|
||||||
|
<option value="rainbow">Rainbow</option>
|
||||||
|
</select>
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</c:then>
|
||||||
|
</c:if>
|
||||||
|
|
||||||
<div class="nav">
|
<div class="nav">
|
||||||
<a href="/asteroid">Home</a>
|
<c:if test="(not framesetp)">
|
||||||
<a href="/asteroid/profile">Profile</a>
|
<c:then>
|
||||||
<a href="/asteroid/admin" data-show-if-admin>Admin</a>
|
<a href="/asteroid">Home</a>
|
||||||
<a href="/asteroid/login" data-show-if-logged-out>Login</a>
|
<a href="/asteroid/profile">Profile</a>
|
||||||
<a href="/asteroid/register" data-show-if-logged-out>Register</a>
|
<a href="/asteroid/admin" data-show-if-admin>Admin</a>
|
||||||
<a href="/asteroid/logout" data-show-if-logged-in class="btn-logout">Logout</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>
|
||||||
|
</c:then>
|
||||||
|
<c:else>
|
||||||
|
<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>
|
||||||
|
</c:else>
|
||||||
|
</c:if>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<!-- Live Stream Section -->
|
<!-- Live Stream Section -->
|
||||||
<div class="player-section">
|
<div class="player-section">
|
||||||
<h2 style="color: #00ff00;">
|
<h2 style="color: #00ff00;">
|
||||||
<span class="live-stream-indicator" style="font-size: 1rem;">🟢 </span>
|
<span class="live-stream-indicator" style="font-size: 1rem;">🟢 </span>
|
||||||
Live Radio Stream
|
Live Radio Stream
|
||||||
</h2>
|
</h2>
|
||||||
<div class="live-stream">
|
<c:if test="(not framesetp)">
|
||||||
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
<c:then>
|
||||||
<!-- Stream Quality Selector -->
|
<div class="live-stream">
|
||||||
<div class="live-stream-quality">
|
<input type="hidden" id="stream-base-url" lquery="(val stream-base-url)">
|
||||||
<label for="live-stream-quality"><strong>Quality:</strong></label>
|
<!-- Stream Quality Selector -->
|
||||||
<select id="live-stream-quality" onchange="changeLiveStreamQuality()">
|
<div class="live-stream-quality">
|
||||||
<option value="aac">AAC 96kbps (Recommended)</option>
|
<label for="live-stream-quality"><strong>Quality:</strong></label>
|
||||||
<option value="mp3">MP3 128kbps (Compatible)</option>
|
<select id="live-stream-quality" onchange="changeLiveStreamQuality()">
|
||||||
<option value="low">MP3 64kbps (Low Bandwidth)</option>
|
<option value="aac">AAC 96kbps (Recommended)</option>
|
||||||
</select>
|
<option value="mp3">MP3 128kbps (Compatible)</option>
|
||||||
</div>
|
<option value="low">MP3 64kbps (Low Bandwidth)</option>
|
||||||
|
</select>
|
||||||
<audio id="live-stream-audio" controls style="width: 100%; margin-top: 20px;">
|
</div>
|
||||||
<source id="live-stream-source" lquery="(attr :src default-stream-url)" type="audio/aac">
|
|
||||||
Your browser does not support the audio element.
|
<audio id="live-stream-audio" controls style="width: 100%; margin-top: 20px;">
|
||||||
</audio>
|
<source id="live-stream-source" lquery="(attr :src default-stream-url)" type="audio/aac">
|
||||||
<p><em>Listen to the live Asteroid Radio stream</em></p>
|
Your browser does not support the audio element.
|
||||||
</div>
|
</audio>
|
||||||
|
<p><em>Listen to the live Asteroid Radio stream</em></p>
|
||||||
|
</div>
|
||||||
|
</c:then>
|
||||||
|
<c:else>
|
||||||
|
<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>
|
||||||
|
</c:else>
|
||||||
|
</c:if>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="now-playing" class="now-playing"></div>
|
<div id="now-playing" class="now-playing"></div>
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue