radio95/RadioPlayer
0
1
Fork 0
mirror of https://github.com/radio95-rnt/RadioPlayer.git synced 2026-02-26 21:53:54 +01:00
Code Issues Activity
Files
decb38ce91cb02464178de43e078d05608e3fd91
RadioPlayer/modules/web.html
KubaPro010 decb38ce91 imc stuff
2025-12-14 10:59:13 +01:00

395 lines
20 KiB
HTML
Raw Blame History

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width,initial-scale=1" />
<title>Radio95 Track Monitor</title>
<style>
:root{
--bg:#0f1620; --panel:#11161c; --muted:#98a0a8; --accent:#3ea6ff; --card:#0b1014;
--success:#47d18b; --danger:#ff6b6b; --glass: rgba(255,255,255,0.03);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}
html,body{height:100%; margin:0; background:linear-gradient(180deg,#071018,#0b1220 60%); color:#e6eef6; overflow: hidden;}
.container{max-width:1400px; margin:18px auto; padding:18px; display:flex; flex-direction:column; gap:12px}
h1{margin:0; font-size:22px; font-weight:700}
.layout{display:flex; gap:14px; height:calc(100vh - 140px);}
.panel{background:var(--panel); border-radius:10px; padding:12px; box-shadow: 0 6px 18px rgba(2,8,16,0.6); display:flex; flex-direction:column; overflow:hidden}
.left{flex:1.2; min-width:420px}
.right{flex:1; display:flex; flex-direction:column; gap:12px}
.frame-title{font-size:16px; color:var(--muted); margin-bottom:8px}
.now, .next {margin-bottom:12px}
.now .track, .next .track {font-weight:600; font-size:14px; word-break:break-all}
.progress-wrap{display:flex; gap:10px; align-items:center}
.progress-bar{flex:1; height:12px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative}
.progress-fill{height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #6cc7ff); transition:width 0.2s linear}
button, .btn{background:transparent;border:1px solid rgba(255,255,255,0.06); padding:8px 12px;border-radius:8px;color:inherit;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent), #6cc7ff); color:#001; border:none; font-weight:600}
.list{background:#07121a; border-radius:8px; padding:8px; overflow:auto; border:1px solid rgba(255,255,255,0.02)}
ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
ul.playlist li{padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.12s ease;}
ul.playlist li:hover{background:rgba(255,255,255,0.02)}
ul.playlist li.current{background:rgba(62,166,255,0.08)}
ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
.controls{display:flex; gap:8px; margin-top:8px}
.two-col{display:flex; gap:8px; align-items:flex-start; height:100%}
.box{display:flex; flex-direction:column; gap:8px; flex-grow: 1; overflow: hidden;}
.listbox{height:100%; min-height:220px; overflow:auto; border-radius:6px; background:var(--card); padding:8px; font-size:14px; scrollbar-width: none;}
.listbox div.item{padding:6px; border-radius:6px; transition: background-color 0.12s ease;}
.listbox div.item:hover{background:rgba(255,255,255,0.02); cursor:pointer}
.listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
.small{font-size:12px; color:var(--muted)}
.row{display:flex; gap:8px; align-items:center}
.muted{color:var(--muted); font-size:13px}
.footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px}
@media (max-width:900px){ .layout{flex-direction:column} .right{grid-template-columns:1fr} .left{min-width:auto} }
</style>
</head>
<body>
<div class="container">
<div style="display:flex;align-items:center;justify-content:space-between">
<h1>RadioPlayer status</h1>
</div>
<div class="layout">
<div class="panel left">
<div class="now">
<div class="frame-title">Now Playing</div>
<div class="track" id="now-track">Loading...</div>
<div class="progress-wrap" style="margin-top:8px">
<div class="progress-bar" title="progress"><div class="progress-fill" id="prog-fill"></div></div>
<div class="small" id="time-label">00:00:00 / 00:00:00 (00:00:00)</div>
</div>
<div class="controls" style="margin-top:10px">
<button id="skip-btn" class="btn">⏭ Skip Track</button>
<button id="readd-btn" class="btn">↺ Re-add Selected</button>
</div>
</div>
<div class="next" style="margin-top:12px">
<div class="frame-title">Next Track</div>
<div class="track" id="next-track">Loading...</div>
</div>
<div style="margin-top:12px; display:flex; flex-direction: column; flex-grow: 1; overflow: hidden;">
<div class="box" style="flex-grow: 1;">
<div class="frame-title">Playlist Queue</div>
<div class="list listbox" id="playlist-box">
<ul class="playlist" id="playlist-ul"></ul>
</div>
</div>
<div class="box" style="margin-top: 12px; flex-shrink: 0;">
<div class="frame-title">PUT Queue</div>
<div class="list listbox" id="put-queue-box" style="min-height: 80px; max-height: 200px;">
<ul class="playlist" id="put-queue-ul"></ul>
</div>
</div>
</div>
</div>
<div class="panel right">
<div style="display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-grow:1; overflow:hidden">
<div class="box" style="padding:8px">
<div class="frame-title">Directory Browser</div>
<div class="listbox" id="dirs-box"></div>
</div>
<div class="box" style="padding:8px">
<div class="frame-title">Subdirectory Files</div>
<div class="listbox" id="subdir-box"></div>
</div>
</div>
<div style="margin-top:8px">
<button id="add-to-put-btn" class="btn primary" style="width:100%">Add Selected File to PUT Queue</button>
</div>
</div>
</div>
<div class="footer">
<div class="muted">Server: <span id="server-status">connecting...</span></div>
</div>
</div>
<script>
let ws = null;
let reconnectDelay = 1000;
let playlist = [];
let putQueue = [];
let currentTrackPath = "";
let currentTrackIndex = 0;
let selectedPlaylistIndex = null;
let selectedDir = null;
let selectedSubFile = null;
let basePath = "";
let subbasePath = "";
function connectWs(){
document.getElementById("server-status").textContent = "connecting...";
ws = new WebSocket("ws://192.168.1.93:3001");
ws.addEventListener("open", () => {
document.getElementById("server-status").textContent = "connected";
reconnectDelay = 1000;
ws.send(JSON.stringify({action:"get_toplay"}));
});
ws.addEventListener("close", () => {
document.getElementById("server-status").textContent = "disconnected — reconnecting...";
setTimeout(connectWs, reconnectDelay);
reconnectDelay = Math.min(10000, reconnectDelay + 1000);
});
ws.addEventListener("error", (e) => {
console.warn("WS error", e);
document.getElementById("server-status").textContent = "error";
});
ws.addEventListener("message", (evt) => {
try {
handleMessage(JSON.parse(evt.data));
} catch (e) {
console.warn("Bad msg", evt.data, e);
}
});
}
function handleMessage(msg){
if(msg.event === "state"){
const d = msg.data || {};
applyProgressState(d.track);
updateDirs(d.dirs);
if(d.playlist) { playlist = d.playlist; renderPlaylist(); }
} else if(msg.event === "playlist"){
playlist = msg.data || [];
renderPlaylist();
} else if(msg.event === "new_track"){
applyTrackState(msg.data);
ws.send(JSON.stringify({action:"get_toplay"}));
} else if(msg.event === "progress"){
applyProgressState(msg.data);
} else if(msg.event === "toplay") {
putQueue = msg.data.data || [];
renderPutQueue();
} else if(msg.event === "request_dir") {
applySubdir(msg.data || {})
} else if(msg.status || msg.response || msg.error) {
console.debug("ws ack", msg);
}
}
function applyTrackState(payload){
const track = payload.track || {};
const next = payload.next_track || {};
currentTrackPath = (track.official ? "" : "!") + (track.path||"<none>");
currentTrackIndex = payload.index;
document.getElementById("now-track").textContent = `${track.official ? "(official) " : ""}${track.path||"<none>"}`;
document.getElementById("next-track").textContent = `${next.official ? "(official) " : ""}${next.path||"<none>"}`;
renderPlaylist();
}
function applyProgressState(payload){
const track = payload.track || {};
const next_track = payload.next_track || {};
const elapsed = Number(payload.elapsed || 0);
const total = Number(payload.total || payload.real_total || 1) || 1;
const realtotal = Number(payload.real_total || payload.total || 1) || 1;
const percent = Math.max(0, Math.min(100, (elapsed/realtotal)*100));
document.getElementById("prog-fill").style.width = percent + "%";
document.getElementById("time-label").textContent = formatTime(elapsed) + " / " + formatTime(total) + ` (${formatTime(realtotal)})`;
currentTrackIndex = payload.index;
if(track.path){
currentTrackPath = (track.official ? "" : "!") + track.path;
document.getElementById("now-track").textContent = `${track.official ? "(official) " : ""}${track.path}`;
}
if(next_track.path){
document.getElementById("next-track").textContent = `${next_track.official ? "(official) " : ""}${next_track.path}`;
}
}
function applySubdir(payload) {
if(payload.dir !== selectedDir) return;
const dirsBox = document.getElementById("subdir-box");
dirsBox.innerHTML = "Loading...";
try {
subbasePath = payload.base || "";
const files = payload.files || [];
dirsBox.innerHTML = "";
files.sort().forEach(f => {
const node = document.createElement("div");
node.className = "item";
node.textContent = f;
node.addEventListener("click", () => {
if(node.classList.contains("selected")) {
node.classList.remove("selected");
selectedSubFile = null;
return;
}
Array.from(dirsBox.children).forEach(c=>c.classList.remove("selected"));
node.classList.add("selected"); selectedSubFile = f;
});
dirsBox.appendChild(node);
});
} catch(e) {
dirsBox.innerHTML = "Error fetching dirs: "+e.message;
}
}
function formatTime(s){
s = Number(s||0);
const h = Math.floor(s/3600), m = Math.floor((s%3600)/60), sec = Math.floor(s%60);
if(h != 0) return [h,m,sec].map(x => String(x).padStart(2,'0')).join(":");
else return [m,sec].map(x => String(x).padStart(2,'0')).join(":");
}
function renderPlaylist(){
const ul = document.getElementById("playlist-ul");
ul.innerHTML = "";
let currentIndex = null;
playlist.forEach((t, i) => {
const li = document.createElement("li");
const idx = i+1;
const path = t.path || "<no path>";
const official = t.official || false;
const displayPath = (official ? "" : "!") + path;
li.textContent = `${String(idx).padStart(2,'0')}: ${displayPath}`;
li.dataset.path = path;
li.dataset.idx = i;
li.addEventListener("click", () => { selectPlaylistItem(i, li); });
const p = li.dataset.path;
if(p && currentTrackPath.includes(p) && i === currentTrackIndex){
li.classList.add("current");
currentIndex = i;
}
ul.appendChild(li);
});
if(currentIndex !== null){
const el = ul.children[currentIndex];
if(el) el.scrollIntoView({block:'center', behavior: 'smooth'});
}
}
function renderPutQueue() {
const ul = document.getElementById("put-queue-ul");
ul.innerHTML = "";
putQueue.forEach((element, i) => {
const li = document.createElement("li");
li.textContent = element;
ul.appendChild(li);
});
}
function selectPlaylistItem(i, el){
if(el.classList.contains("selected")) {
el.classList.remove("selected");
selectedPlaylistIndex = null;
return;
}
const ul = document.getElementById("playlist-ul");
Array.from(ul.children).forEach(c => c.classList.remove("selected"));
el.classList.add("selected");
selectedPlaylistIndex = i;
}
async function updateDirs(payload){
const dirsBox = document.getElementById("dirs-box");
dirsBox.innerHTML = "Loading...";
try {
basePath = payload.base || "";
const files = payload.files || [];
const dirs = payload.dirs || [];
dirsBox.innerHTML = "";
dirs.sort().forEach(f => {
const node = document.createElement("div");
node.className = "item";
node.textContent = f;
node.addEventListener("click", () => onDirClicked(f, node));
dirsBox.appendChild(node);
});
files.sort().forEach(f => {
const node = document.createElement("div");
node.className = "item";
node.textContent = f;
node.addEventListener("click", () => {
Array.from(dirsBox.children).forEach(c=>c.classList.remove("selected"));
node.classList.add("selected");
selectedDir = null;
selectedSubFile = null;
document.getElementById("subdir-box").innerHTML = "";
});
dirsBox.appendChild(node);
});
} catch(e) {
dirsBox.innerHTML = "Error fetching dirs: "+e.message;
}
}
function onDirClicked(name, node){
if(node.classList.contains("selected")) {
node.classList.remove("selected");
selectedSubFile = null;
applySubdir({dir: selectedDir});
selectedDir = null;
return;
}
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
node.classList.add("selected");
selectedDir = name;
selectedSubFile = null;
ws.send(JSON.stringify({action:"request_dir", what: selectedDir}))
}
document.getElementById("skip-btn").addEventListener("click", () => {
if(ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({action:"skip"}));
else console.error("WebSocket not connected.");
});
document.getElementById("readd-btn").addEventListener("click", () => {
if(selectedPlaylistIndex == null){
alert("Select a playlist item to re-add.");
return;
}
const selected = playlist[selectedPlaylistIndex];
if(!selected) { alert("Invalid selection"); return; }
const path = (selected.official ? "" : "!") + selected.path;
ws.send(JSON.stringify({action:"add_to_toplay", songs: [path]}))
Array.from(document.getElementById("playlist-box").children).forEach(c => c.classList.remove("selected"));
});
document.getElementById("add-to-put-btn").addEventListener("click", () => {
let fullPath = null;
// Priority 1: Check for a selected file in the subdirectory list
if (selectedSubFile && selectedDir) {
fullPath = subbasePath.replace(/\/$/, '') + '/' + selectedSubFile;
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
selectedSubFile = null;
} else {
// Priority 2: Check for a selected file in the main directory list
const dirEls = document.getElementById("dirs-box").children;
const selectedItem = Array.from(dirEls).find(el => el.classList.contains("selected"));
if (selectedItem) {
const name = selectedItem.textContent;
// A simple check to see if the selected item is a file
if (name.includes('.')) {
fullPath = basePath.replace(/\/$/, '') + '/' + name;
Array.from(dirEls).forEach(c => c.classList.remove("selected"));
selectedDir = null;
}
}
}
if (fullPath) ws.send(JSON.stringify({action:"add_to_toplay", songs: [fullPath]}))
else alert("Please select a file to add.");
});
connectWs();
</script>
</body>
</html>
View Git Blame Copy Permalink