peterino
/
blastoise-archive
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

redesing of frontend

This commit is contained in:
peterino2 2026-02-02 20:17:40 -08:00
parent f02147e302
commit c7ad16e9f6
5 changed files with 157 additions and 60 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
musicroom.db
View File

Binary file not shown.

46
public/app.js
View File

@ -16,6 +16,7 @@
let currentIndex = 0; let currentIndex = 0;
let currentUser = null; let currentUser = null;
let serverStatus = null; let serverStatus = null;
let library = [];
let prefetchController = null; let prefetchController = null;
let loadingSegments = new Set(); let loadingSegments = new Set();
let trackCaches = new Map(); // Map of filename -> Set of cached segment indices let trackCaches = new Map(); // Map of filename -> Set of cached segment indices
@ -453,6 +454,10 @@
function renderPlaylist() { function renderPlaylist() {
const container = $("#playlist"); const container = $("#playlist");
container.innerHTML = ""; container.innerHTML = "";
if (playlist.length === 0) {
container.innerHTML = '<div class="empty">Playlist empty</div>';
return;
}
playlist.forEach((track, i) => { playlist.forEach((track, i) => {
const div = document.createElement("div"); const div = document.createElement("div");
div.className = "track" + (i === currentIndex ? " active" : ""); div.className = "track" + (i === currentIndex ? " active" : "");
@ -486,6 +491,46 @@
}); });
} }
function renderLibrary() {
const container = $("#library");
container.innerHTML = "";
if (library.length === 0) {
container.innerHTML = '<div class="empty">No tracks discovered</div>';
return;
}
library.forEach((track) => {
const div = document.createElement("div");
div.className = "track";
const title = track.title?.trim() || track.filename.replace(/\.[^.]+$/, "");
div.innerHTML = `<span>${title}</span><span class="duration">${fmt(track.duration)}</span>`;
div.onclick = async () => {
// In local mode, play directly from library
if (!synced) {
currentFilename = track.filename;
serverTrackDuration = track.duration;
$("#track-title").textContent = title;
loadingSegments.clear();
const cachedUrl = await loadTrackBlob(track.filename);
audio.src = cachedUrl || getTrackUrl(track.filename);
audio.currentTime = 0;
localTimestamp = 0;
audio.play();
}
};
container.appendChild(div);
});
}
async function loadLibrary() {
try {
const res = await fetch("/api/library");
library = await res.json();
renderLibrary();
} catch (e) {
console.warn("Failed to load library");
}
}
async function handleUpdate(data) { async function handleUpdate(data) {
if (!data.track) { if (!data.track) {
$("#track-title").textContent = "No tracks"; $("#track-title").textContent = "No tracks";
@ -820,6 +865,7 @@
// Initialize // Initialize
Promise.all([initStorage(), loadServerStatus()]).then(() => { Promise.all([initStorage(), loadServerStatus()]).then(() => {
loadLibrary();
loadCurrentUser().then(() => { loadCurrentUser().then(() => {
if (currentUser) loadStreams(); if (currentUser) loadStreams();
}); });

21
public/index.html
View File

@ -35,6 +35,7 @@
</div> </div>
<div id="player-content"> <div id="player-content">
<div id="header-row">
<div id="auth-section"> <div id="auth-section">
<div class="user-info"> <div class="user-info">
<span class="username" id="current-username"></span> <span class="username" id="current-username"></span>
@ -43,12 +44,27 @@
<button id="btn-logout">Logout</button> <button id="btn-logout">Logout</button>
</div> </div>
<div id="stream-select"></div> <div id="stream-select"></div>
</div>
<div id="main-content">
<div id="library-panel">
<h3>Library</h3>
<div id="library"></div>
</div>
<div id="playlist-panel">
<h3>Playlist</h3>
<div id="playlist"></div>
</div>
</div>
<div id="player-bar">
<div id="now-playing"> <div id="now-playing">
<div id="stream-name"></div> <div id="stream-name"></div>
<div id="track-name" class="empty"> <div id="track-name" class="empty">
<span id="track-title">Loading...</span> <span id="track-title">Loading...</span>
</div> </div>
</div> </div>
<div id="player-controls">
<div id="progress-row"> <div id="progress-row">
<span id="btn-sync" title="Toggle sync">sync</span> <span id="btn-sync" title="Toggle sync">sync</span>
<span id="btn-prev" title="Previous track">⏮</span> <span id="btn-prev" title="Previous track">⏮</span>
@ -59,12 +75,13 @@
</div> </div>
<div id="buffer-bar"></div> <div id="buffer-bar"></div>
<div id="download-speed"></div> <div id="download-speed"></div>
<div id="controls"> </div>
<div id="volume-controls">
<span id="btn-mute" title="Toggle mute">🔊</span> <span id="btn-mute" title="Toggle mute">🔊</span>
<input type="range" id="volume" min="0" max="1" step="0.01" value="1"> <input type="range" id="volume" min="0" max="1" step="0.01" value="1">
</div> </div>
</div>
<div id="status"></div> <div id="status"></div>
<div id="playlist"></div>
</div> </div>
</div> </div>
<script src="trackStorage.js"></script> <script src="trackStorage.js"></script>

82
public/styles.css
View File

@ -1,23 +1,42 @@
* { margin: 0; padding: 0; box-sizing: border-box; } * { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111; color: #eee; display: flex; justify-content: center; align-items: center; min-height: 100vh; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111; color: #eee; min-height: 100vh; }
#app { width: 100%; max-width: 480px; padding: 2rem; } #app { width: 100%; max-width: 1200px; margin: 0 auto; padding: 1rem; display: flex; flex-direction: column; min-height: 100vh; }
h1 { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; } h1 { font-size: 1.2rem; color: #888; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; }
h3 { font-size: 0.9rem; color: #666; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
#sync-indicator { width: 8px; height: 8px; border-radius: 50%; background: #4e8; display: none; flex-shrink: 0; } #sync-indicator { width: 8px; height: 8px; border-radius: 50%; background: #4e8; display: none; flex-shrink: 0; }
#sync-indicator.visible { display: inline-block; } #sync-indicator.visible { display: inline-block; }
#sync-indicator.disconnected { background: #e44; } #sync-indicator.disconnected { background: #e44; }
#stream-select { margin-bottom: 1.5rem; }
/* Header */
#header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
#auth-section { display: flex; gap: 0.5rem; align-items: center; }
#auth-section .user-info { display: flex; align-items: center; gap: 0.5rem; }
#auth-section .username { color: #4e8; font-weight: 600; }
#auth-section .admin-badge { background: #c4f; color: #111; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
#stream-select select { background: #222; color: #eee; border: 1px solid #333; padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.9rem; } #stream-select select { background: #222; color: #eee; border: 1px solid #333; padding: 0.4rem 0.8rem; border-radius: 4px; font-size: 0.9rem; }
#now-playing { margin-bottom: 0.5rem; }
#stream-name { font-size: 0.85rem; color: #888; margin-bottom: 0.2rem; } /* Main content - library and playlist */
#track-name { font-size: 1.4rem; font-weight: 600; } #main-content { display: flex; gap: 1rem; flex: 1; min-height: 0; margin-bottom: 1rem; }
#library-panel, #playlist-panel { flex: 1; background: #1a1a1a; border-radius: 8px; padding: 1rem; display: flex; flex-direction: column; min-height: 300px; max-height: 60vh; }
#library, #playlist { flex: 1; overflow-y: auto; }
#library .track, #playlist .track { padding: 0.5rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; display: flex; justify-content: space-between; }
#library .track:hover, #playlist .track:hover { background: #222; }
#playlist .track.active { background: #2a4a3a; color: #4e8; }
#library .track .duration, #playlist .track .duration { color: #666; font-size: 0.8rem; }
/* Player bar */
#player-bar { background: #1a1a1a; border-radius: 8px; padding: 1rem; display: flex; gap: 1rem; align-items: center; }
#now-playing { min-width: 200px; }
#stream-name { font-size: 0.75rem; color: #666; margin-bottom: 0.2rem; }
#track-name { font-size: 1rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#player-controls { flex: 1; }
#progress-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.3rem; }
#progress-row.denied { animation: flash-red 0.5s ease-out; }
@keyframes flash-red { 0% { background: #e44; } 100% { background: transparent; } }
#btn-sync { font-size: 0.75rem; cursor: pointer; color: #666; transition: color 0.2s, text-shadow 0.2s; letter-spacing: 0.05em; } #btn-sync { font-size: 0.75rem; cursor: pointer; color: #666; transition: color 0.2s, text-shadow 0.2s; letter-spacing: 0.05em; }
#btn-sync:hover { color: #888; } #btn-sync:hover { color: #888; }
#btn-sync.synced { color: #eb0; text-shadow: 0 0 8px #eb0, 0 0 12px #eb0; } #btn-sync.synced { color: #eb0; text-shadow: 0 0 8px #eb0, 0 0 12px #eb0; }
#btn-sync.synced.connected { color: #4e8; text-shadow: 0 0 8px #4e8, 0 0 12px #4e8; } #btn-sync.synced.connected { color: #4e8; text-shadow: 0 0 8px #4e8, 0 0 12px #4e8; }
#time { font-size: 0.8rem; color: #888; margin: 0; line-height: 1; }
#progress-row { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem; }
#progress-row.denied { animation: flash-red 0.5s ease-out; }
@keyframes flash-red { 0% { background: #e44; } 100% { background: transparent; } }
#btn-prev, #btn-next { font-size: 0.8rem; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; } #btn-prev, #btn-next { font-size: 0.8rem; cursor: pointer; opacity: 0.6; transition: opacity 0.2s; }
#btn-prev:hover, #btn-next:hover { opacity: 1; } #btn-prev:hover, #btn-next:hover { opacity: 1; }
#status-icon { font-size: 0.9rem; width: 1rem; text-align: center; cursor: pointer; } #status-icon { font-size: 0.9rem; width: 1rem; text-align: center; cursor: pointer; }
@ -27,26 +46,26 @@ h1 { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; display: flex; align
#progress-bar.playing.local { background: #c4f; } #progress-bar.playing.local { background: #c4f; }
#progress-bar.muted { background: #555 !important; } #progress-bar.muted { background: #555 !important; }
#seek-tooltip { position: absolute; bottom: 12px; background: #333; color: #eee; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; pointer-events: none; display: none; transform: translateX(-50%); } #seek-tooltip { position: absolute; bottom: 12px; background: #333; color: #eee; padding: 2px 6px; border-radius: 3px; font-size: 0.75rem; pointer-events: none; display: none; transform: translateX(-50%); }
#buffer-bar { display: flex; gap: 2px; margin-bottom: 0.5rem; } #time { font-size: 0.8rem; color: #888; margin: 0; line-height: 1; white-space: nowrap; }
#buffer-bar .segment { flex: 1; height: 4px; background: #333; border-radius: 2px; } #buffer-bar { display: flex; gap: 2px; margin-bottom: 0.3rem; }
#buffer-bar .segment { flex: 1; height: 3px; background: #333; border-radius: 2px; }
#buffer-bar .segment.available { background: #396; } #buffer-bar .segment.available { background: #396; }
#buffer-bar .segment.loading { background: #666; animation: throb 0.6s ease-in-out infinite alternate; } #buffer-bar .segment.loading { background: #666; animation: throb 0.6s ease-in-out infinite alternate; }
@keyframes throb { from { background: #444; } to { background: #888; } } @keyframes throb { from { background: #444; } to { background: #888; } }
#download-speed { font-size: 0.7rem; color: #666; text-align: right; margin-bottom: 0.5rem; } #download-speed { font-size: 0.65rem; color: #555; text-align: right; }
#time { display: flex; justify-content: space-between; font-size: 0.8rem; color: #888; margin-bottom: 1rem; } #volume-controls { display: flex; gap: 0.5rem; align-items: center; }
#controls { display: flex; gap: 0.5rem; align-items: center; }
#btn-mute { font-size: 1.2rem; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; } #btn-mute { font-size: 1.2rem; cursor: pointer; opacity: 0.8; transition: opacity 0.2s; }
#btn-mute:hover { opacity: 1; } #btn-mute:hover { opacity: 1; }
#volume { width: 100px; accent-color: #4e8; } #volume { width: 80px; accent-color: #4e8; }
/* Common */
button { background: #222; color: #eee; border: 1px solid #333; padding: 0.5rem 1.2rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; } button { background: #222; color: #eee; border: 1px solid #333; padding: 0.5rem 1.2rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; }
button:hover { background: #333; } button:hover { background: #333; }
#status { margin-top: 1.5rem; font-size: 0.8rem; color: #666; } #status { margin-top: 0.5rem; font-size: 0.8rem; color: #666; text-align: center; }
.empty { color: #666; font-style: italic; } .empty { color: #666; font-style: italic; }
#auth-section { margin-bottom: 1.5rem; display: flex; gap: 0.5rem; align-items: center; justify-content: space-between; }
#auth-section .user-info { display: flex; align-items: center; gap: 0.5rem; } /* Login panel */
#auth-section .username { color: #4e8; font-weight: 600; } #login-panel { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #1a1a1a; border-radius: 8px; border: 1px solid #333; max-width: 400px; margin: auto; }
#auth-section .admin-badge { background: #c4f; color: #111; padding: 0.1rem 0.4rem; border-radius: 3px; font-size: 0.7rem; }
#login-panel { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #1a1a1a; border-radius: 8px; border: 1px solid #333; }
#login-panel.hidden { display: none; } #login-panel.hidden { display: none; }
#login-panel h2 { font-size: 1.1rem; color: #888; margin-bottom: 0.5rem; } #login-panel h2 { font-size: 1.1rem; color: #888; margin-bottom: 0.5rem; }
#login-panel .tabs { display: flex; gap: 1rem; margin-bottom: 1rem; } #login-panel .tabs { display: flex; gap: 1rem; margin-bottom: 1rem; }
@ -64,14 +83,11 @@ button:hover { background: #333; }
#guest-section .divider::before, #guest-section .divider::after { content: ""; flex: 1; height: 1px; background: #333; } #guest-section .divider::before, #guest-section .divider::after { content: ""; flex: 1; height: 1px; background: #333; }
#guest-section .guest-btn { width: 100%; background: #333; color: #eee; border: 1px solid #444; padding: 0.6rem; border-radius: 4px; font-size: 0.95rem; cursor: pointer; } #guest-section .guest-btn { width: 100%; background: #333; color: #eee; border: 1px solid #444; padding: 0.6rem; border-radius: 4px; font-size: 0.95rem; cursor: pointer; }
#guest-section .guest-btn:hover { background: #444; } #guest-section .guest-btn:hover { background: #444; }
#player-content { display: none; }
#player-content.visible { display: block; } #player-content { display: none; flex-direction: column; flex: 1; }
#playlist { margin-top: 1.5rem; max-height: 300px; overflow-y: auto; } #player-content.visible { display: flex; }
#playlist .track { padding: 0.5rem 0.75rem; border-radius: 4px; cursor: pointer; font-size: 0.9rem; display: flex; justify-content: space-between; }
#playlist .track:hover { background: #222; } ::-webkit-scrollbar { width: 8px; }
#playlist .track.active { background: #2a4a3a; color: #4e8; } ::-webkit-scrollbar-track { background-color: #111; border-radius: 4px; }
#playlist .track .duration { color: #666; font-size: 0.8rem; } ::-webkit-scrollbar-thumb { background-color: #333; border-radius: 4px; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background-color: #000; border-radius: 6px; }
::-webkit-scrollbar-thumb { background-color: #333; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background-color: #555; } ::-webkit-scrollbar-thumb:hover { background-color: #555; }

24
server.ts
View File

@ -71,16 +71,25 @@ async function discoverTracks(): Promise<string[]> {
} }
} }
// Initialize streams // Store all library tracks
let libraryTracks: Track[] = [];
// Initialize streams and library
async function init(): Promise<Map<string, Stream>> { async function init(): Promise<Map<string, Stream>> {
const playlistData = await file(PLAYLIST_PATH).json(); const playlistData = await file(PLAYLIST_PATH).json();
const streams = new Map<string, Stream>(); const streams = new Map<string, Stream>();
// Load all tracks in music directory for library
const allFiles = await discoverTracks();
const allTracks = await Promise.all(allFiles.map(loadTrack));
libraryTracks = allTracks.filter((t) => t.duration > 0);
console.log(`Library: ${libraryTracks.length} tracks discovered`);
for (const cfg of playlistData.streams) { for (const cfg of playlistData.streams) {
let trackFiles: string[] = cfg.tracks; let trackFiles: string[] = cfg.tracks;
if (trackFiles.length === 0) { if (trackFiles.length === 0) {
trackFiles = await discoverTracks(); trackFiles = allFiles;
console.log(`Stream "${cfg.id}": auto-discovered ${trackFiles.length} tracks`); console.log(`Stream "${cfg.id}": using all ${trackFiles.length} tracks`);
} }
const tracks = await Promise.all(trackFiles.map(loadTrack)); const tracks = await Promise.all(trackFiles.map(loadTrack));
const validTracks = tracks.filter((t) => t.duration > 0); const validTracks = tracks.filter((t) => t.duration > 0);
@ -188,6 +197,15 @@ serve({
return Response.json(list, { headers }); return Response.json(list, { headers });
} }
// API: get library (all tracks)
if (path === "/api/library") {
const { user, headers } = getOrCreateUser(req, server);
if (!user) {
return Response.json({ error: "Authentication required" }, { status: 401 });
}
return Response.json(libraryTracks, { headers });
}
// Auth: signup // Auth: signup
if (path === "/api/auth/signup" && req.method === "POST") { if (path === "/api/auth/signup" && req.method === "POST") {
try { try {