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 currentUser = null;
let serverStatus = null;
let library = [];
let prefetchController = null;
let loadingSegments = new Set();
let trackCaches = new Map(); // Map of filename -> Set of cached segment indices
@ -453,6 +454,10 @@
function renderPlaylist() {
const container = $("#playlist");
container.innerHTML = "";
if (playlist.length === 0) {
container.innerHTML = '<div class="empty">Playlist empty</div>';
return;
}
playlist.forEach((track, i) => {
const div = document.createElement("div");
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) {
if (!data.track) {
$("#track-title").textContent = "No tracks";
@ -820,6 +865,7 @@
// Initialize
Promise.all([initStorage(), loadServerStatus()]).then(() => {
loadLibrary();
loadCurrentUser().then(() => {
if (currentUser) loadStreams();
});

21
public/index.html
View File

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

82
public/styles.css
View File

@ -1,23 +1,42 @@
* { 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; }
#app { width: 100%; max-width: 480px; padding: 2rem; }
h1 { font-size: 1.2rem; color: #888; margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem; }
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; background: #111; color: #eee; min-height: 100vh; }
#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: 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.visible { display: inline-block; }
#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; }
#now-playing { margin-bottom: 0.5rem; }
#stream-name { font-size: 0.85rem; color: #888; margin-bottom: 0.2rem; }
#track-name { font-size: 1.4rem; font-weight: 600; }
/* Main content - library and playlist */
#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:hover { color: #888; }
#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; }
#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:hover, #btn-next:hover { opacity: 1; }
#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.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%); }
#buffer-bar { display: flex; gap: 2px; margin-bottom: 0.5rem; }
#buffer-bar .segment { flex: 1; height: 4px; background: #333; border-radius: 2px; }
#time { font-size: 0.8rem; color: #888; margin: 0; line-height: 1; white-space: nowrap; }
#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.loading { background: #666; animation: throb 0.6s ease-in-out infinite alternate; }
@keyframes throb { from { background: #444; } to { background: #888; } }
#download-speed { font-size: 0.7rem; color: #666; text-align: right; margin-bottom: 0.5rem; }
#time { display: flex; justify-content: space-between; font-size: 0.8rem; color: #888; margin-bottom: 1rem; }
#controls { display: flex; gap: 0.5rem; align-items: center; }
#download-speed { font-size: 0.65rem; color: #555; text-align: right; }
#volume-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: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: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; }
#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; }
#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; }
#login-panel { display: flex; flex-direction: column; gap: 1rem; padding: 2rem; background: #1a1a1a; border-radius: 8px; border: 1px solid #333; }
/* Login panel */
#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; }
#login-panel.hidden { display: none; }
#login-panel h2 { font-size: 1.1rem; color: #888; margin-bottom: 0.5rem; }
#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 .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; }
#player-content { display: none; }
#player-content.visible { display: block; }
#playlist { margin-top: 1.5rem; max-height: 300px; overflow-y: auto; }
#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; }
#playlist .track.active { background: #2a4a3a; color: #4e8; }
#playlist .track .duration { color: #666; font-size: 0.8rem; }
::-webkit-scrollbar { width: 12px; }
::-webkit-scrollbar-track { background-color: #000; border-radius: 6px; }
::-webkit-scrollbar-thumb { background-color: #333; border-radius: 6px; }
#player-content { display: none; flex-direction: column; flex: 1; }
#player-content.visible { display: flex; }
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background-color: #111; border-radius: 4px; }
::-webkit-scrollbar-thumb { background-color: #333; border-radius: 4px; }
::-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>> {
const playlistData = await file(PLAYLIST_PATH).json();
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) {
let trackFiles: string[] = cfg.tracks;
if (trackFiles.length === 0) {
trackFiles = await discoverTracks();
console.log(`Stream "${cfg.id}": auto-discovered ${trackFiles.length} tracks`);
trackFiles = allFiles;
console.log(`Stream "${cfg.id}": using all ${trackFiles.length} tracks`);
}
const tracks = await Promise.all(trackFiles.map(loadTrack));
const validTracks = tracks.filter((t) => t.duration > 0);
@ -188,6 +197,15 @@ serve({
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
if (path === "/api/auth/signup" && req.method === "POST") {
try {