mirror of
https://github.com/radio95-rnt/RadioPlayer.git
synced 2026-07-30 07:49:18 +02:00
add web.js and also change how does the web html look
This commit is contained in:
+30
-422
@@ -7,13 +7,13 @@
|
|||||||
<style>
|
<style>
|
||||||
:root{
|
:root{
|
||||||
--panel:#11161c; --muted:#98a0a8; --accent:#3ea6ff; --card:#0b1014;
|
--panel:#11161c; --muted:#98a0a8; --accent:#3ea6ff; --card:#0b1014;
|
||||||
--success:#47d18b; --danger:#ff6b6b; --glass: rgba(255,255,255,0.03);
|
--success:#47d18b; --danger:#ff6b6b; --glass: rgba(255,255,255,0.05);
|
||||||
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
font-family: "Segoe UI", Roboto, "Helvetica Neue", Arial;
|
||||||
font-weight: 400;
|
font-weight: 400;
|
||||||
}
|
}
|
||||||
html,body{height:100%; margin:0; background:linear-gradient(180deg,#071018,#0b1220 60%); color:#eef2f6; overflow: hidden;}
|
html,body{height:100%; margin:0; background:linear-gradient(180deg,#071018,#0b1220 60%); color:#eef2f6; overflow: hidden;}
|
||||||
.container{max-width:1600px; margin:16px auto; padding:16px; display:flex; flex-direction:column; gap:10px}
|
.container{max-width:1600px; margin:16px auto; padding:16px; display:flex; flex-direction:column; gap:10px}
|
||||||
h1{margin:0; font-size:22px; font-weight:700}
|
h1{margin:0; font-size:22px; font-weight:500}
|
||||||
.layout{display:flex; gap:14px; height:calc(100vh - 140px);}
|
.layout{display:flex; gap:14px; height:calc(100vh - 140px);}
|
||||||
.panel{background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 6px 18px rgba(2,8,16,0.6); display:flex; flex-direction:column; overflow:hidden}
|
.panel{background:var(--panel); border-radius:10px; padding:8px; 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}
|
.left{flex:1.2; min-width:420px}
|
||||||
@@ -22,34 +22,33 @@
|
|||||||
.frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
|
.frame-title-nc{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
|
||||||
.frame-title{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
|
.frame-title{ font-size:16px; color:var(--muted); margin-bottom:6px; display: flex; justify-content: space-between; align-items: center; cursor: pointer; user-select: none; padding: 4px 0; transition: color 0.2s ease; }
|
||||||
.frame-title:hover { color: #fff; }
|
.frame-title:hover { color: #fff; }
|
||||||
.frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; }
|
.frame-title::after { content: '▼'; font-size: 10px; transition: transform 0.3s ease; opacity: 0.5; margin-left: 8px; }
|
||||||
|
|
||||||
|
.box {display:flex; flex-direction:column; gap:6px; flex-grow: 1; overflow: hidden; transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1); }
|
||||||
.box.collapsed { flex-grow: 0 !important; flex-shrink: 0; flex-basis: auto !important; }
|
.box.collapsed { flex-grow: 0 !important; flex-shrink: 0; flex-basis: auto !important; }
|
||||||
.box.collapsed .collapsible-content { display: none; }
|
.box.collapsed .collapsible-content { display: none; }
|
||||||
.box.collapsed .frame-title::after { transform: rotate(90deg); }
|
.box.collapsed .frame-title::after { transform: rotate(90deg); }
|
||||||
.box.collapsed .frame-title { margin-bottom: 0; }
|
.box.collapsed .frame-title { margin-bottom: 0; }
|
||||||
|
|
||||||
.now .track, .next .track {font-weight:600; font-size:14px; word-break:break-all}
|
.now .track, .next .track {font-weight:450; font-size:14px; word-break:break-all}
|
||||||
.progress-wrap{display:flex; gap:10px; align-items:center}
|
.progress-wrap { display:flex; gap:10px; align-items:center}
|
||||||
.progress-bar{flex:1; height:10px; background:var(--glass); border-radius:8px; overflow:hidden; position:relative}
|
.progress-bar { flex:1; height:10px; 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.5s linear}
|
.progress-fill { height:100%; width:0%; background:linear-gradient(90deg,var(--accent), #2aa2ff); transition:width 0.5s linear}
|
||||||
|
|
||||||
button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
|
button, .btn{ background:transparent; border:1px solid rgba(255,255,255,0.06); padding:8px 12px; border-radius:8px; color:inherit; cursor:pointer; transition: background-color 0.15s ease, transform 0.15s ease; }
|
||||||
button:hover, .btn:hover { background-color: var(--glass); }
|
button:hover, .btn:hover { background-color: var(--glass); }
|
||||||
button:active, .btn:active { transform: translateY(0); }
|
|
||||||
.btn.activated { background:linear-gradient(90deg, #9ed3ff46, #5bbbff2a); border-color: #5bbbff55; }
|
.btn.activated { background:linear-gradient(90deg, #9ed3ff46, #5bbbff2a); border-color: #5bbbff55; }
|
||||||
.btn.primary{background:linear-gradient(90deg,var(--accent), #6cc7ff); color:#001; border:none; font-weight:600}
|
.btn.primary{background:linear-gradient(90deg,var(--accent), #6cc7ff); color:#001; border:none; font-weight:560}
|
||||||
.btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); }
|
.btn.primary:hover { background:linear-gradient(90deg, #3399ee, #5bbaff); }
|
||||||
|
|
||||||
ul.playlist{list-style:none; padding:6px; margin:0; font-family: "Consolas",monospace; font-size:13px;}
|
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.2s ease, transform 0.15s ease; }
|
ul.playlist li{ padding:6px 8px; border-radius:6px; display:flex; justify-content:space-between; gap:8px; transition: background-color 0.2s ease, transform 0.15s ease; }
|
||||||
ul.playlist li:hover{ background:rgba(255,255,255,0.04); transform: translateX(2px); }
|
ul.playlist li:hover{ background:rgba(255,255,255,0.04); }
|
||||||
ul.playlist li.current{background:rgba(62,166,255,0.08)}
|
ul.playlist li.current{background:rgba(62,166,255,0.08)}
|
||||||
ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
|
ul.playlist li.selected{background:rgba(62, 165, 255, 0.305)}
|
||||||
ul.playlist li.pointer{background:rgba(255,255,255,0.04)}
|
ul.playlist li.pointer{background:rgba(255,255,255,0.04)}
|
||||||
|
|
||||||
.controls{display:flex; gap:6px; margin-top:6px}
|
.controls{display:flex; gap:6px; margin-top:6px}
|
||||||
.box {display:flex; flex-direction:column; gap:6px; flex-grow: 1; overflow: hidden; transition: flex 0.4s cubic-bezier(0.4, 0, 0.2, 1);}
|
|
||||||
|
|
||||||
.listbox{
|
.listbox{
|
||||||
height:100%;
|
height:100%;
|
||||||
@@ -75,7 +74,7 @@
|
|||||||
|
|
||||||
.small{font-size:12px; color:var(--muted)}
|
.small{font-size:12px; color:var(--muted)}
|
||||||
.muted{color:var(--muted); font-size:13px}
|
.muted{color:var(--muted); font-size:13px}
|
||||||
.footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px}
|
.footer{display:flex; justify-content:space-between; gap:8px; align-items:center; margin-top:8px; background:var(--panel); border-radius:10px; padding:8px; box-shadow: 0 6px 18px rgba(2,8,16,0.6);}
|
||||||
.directory-grid {
|
.directory-grid {
|
||||||
display: flex;
|
display: flex;
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
@@ -90,7 +89,8 @@
|
|||||||
#keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 6px; font-family: "Consolas", monospace; font-size: 12px; }
|
#keybinds kbd {background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px; padding: 2px 6px; font-family: "Consolas", monospace; font-size: 12px; }
|
||||||
|
|
||||||
/* ── WHEP Player ── */
|
/* ── WHEP Player ── */
|
||||||
#whep-section { flex-shrink: 0 }
|
#whep-section { flex-shrink: 0; }
|
||||||
|
#whep-section.collapsed .collapsible-content { display: none; }
|
||||||
.whep-row { display: flex; gap: 8px; align-items: center; }
|
.whep-row { display: flex; gap: 8px; align-items: center; }
|
||||||
#whep-url-input {
|
#whep-url-input {
|
||||||
flex: 1; font-size: 12px; font-family: "Consolas", monospace;
|
flex: 1; font-size: 12px; font-family: "Consolas", monospace;
|
||||||
@@ -106,26 +106,27 @@
|
|||||||
.whep-status-dot.connecting { background: #f0c040; }
|
.whep-status-dot.connecting { background: #f0c040; }
|
||||||
.whep-status-dot.connected { background: var(--success); box-shadow: 0 0 6px rgba(71,209,139,0.5); }
|
.whep-status-dot.connected { background: var(--success); box-shadow: 0 0 6px rgba(71,209,139,0.5); }
|
||||||
.whep-status-dot.error { background: var(--danger); }
|
.whep-status-dot.error { background: var(--danger); }
|
||||||
.whep-vol-row { display: flex; gap: 8px; align-items: center; }
|
.whep-vol-row { display: flex; align-items: center; gap: 3px; }
|
||||||
#whep-vol {
|
#whep-vol {
|
||||||
flex: 1; -webkit-appearance: none; appearance: none;
|
flex: 1; -webkit-appearance: none; appearance: none;
|
||||||
height: 4px; background: rgba(255,255,255,0.12); border-radius: 4px; outline: none;
|
height: 6px; background: rgba(255,255,255,0.12); border-radius: 4px; outline: none;
|
||||||
}
|
}
|
||||||
#whep-vol::-webkit-slider-thumb {
|
#whep-vol::-webkit-slider-thumb {
|
||||||
-webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%;
|
-webkit-appearance: none; width: 6px; height: 6px; border-radius: 4px;
|
||||||
background: var(--accent); cursor: pointer;
|
background: var(--accent);
|
||||||
}
|
}
|
||||||
#whep-vol::-moz-range-thumb {
|
#whep-vol::-moz-range-thumb {
|
||||||
width: 14px; height: 14px; border-radius: 50%;
|
width: 6px; height: 6px; border-radius: 4px;
|
||||||
background: var(--accent); border: none; cursor: pointer;
|
background: var(--accent); border: none;
|
||||||
}
|
}
|
||||||
#whep-log {
|
#whep-log {
|
||||||
font-family: "Consolas", monospace; font-size: 11px;
|
font-family: "Consolas", monospace; font-size: 11px;
|
||||||
background: var(--card); border-radius: 6px;
|
background: var(--card); border-radius: 6px;
|
||||||
padding: 6px 8px; max-height: 120px; overflow-y: auto;
|
padding: 6px 8px; max-height: 90px; overflow-y: auto;
|
||||||
scrollbar-width: none; line-height: 1.6;
|
scrollbar-width: none; line-height: 1.6;
|
||||||
}
|
}
|
||||||
#whep-log::-webkit-scrollbar { display: none; }
|
#whep-log::-webkit-scrollbar { display: none; }
|
||||||
|
#whep-log:empty { display: none; }
|
||||||
.wlog-ok { color: var(--success); }
|
.wlog-ok { color: var(--success); }
|
||||||
.wlog-err { color: var(--danger); }
|
.wlog-err { color: var(--danger); }
|
||||||
.wlog-info { color: var(--muted); }
|
.wlog-info { color: var(--muted); }
|
||||||
@@ -145,7 +146,7 @@
|
|||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<div class="container">
|
<div class="container">
|
||||||
<div style="display:flex;align-items:center;justify-content:space-between">
|
<div style="display:flex;align-items:center;justify-content:space-between;">
|
||||||
<h1>RadioPlayer status</h1>
|
<h1>RadioPlayer status</h1>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
@@ -213,9 +214,8 @@
|
|||||||
<button id="whep-btn" class="btn" onclick="whepToggle()" style="white-space:nowrap;padding:6px 12px;">▶ Connect</button>
|
<button id="whep-btn" class="btn" onclick="whepToggle()" style="white-space:nowrap;padding:6px 12px;">▶ Connect</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="whep-vol-row">
|
<div class="whep-vol-row">
|
||||||
<span class="small">Vol</span>
|
<input type="range" id="whep-vol" min="0" max="1" step="0.001" value="0.8" oninput="whepSetVol(this.value)" />
|
||||||
<input type="range" id="whep-vol" min="0" max="1" step="0.01" value="0.8" oninput="whepSetVol(this.value)" />
|
<span class="small" id="whep-vol-out" style="min-width:30px;text-align:right">80.0%</span>
|
||||||
<span class="small" id="whep-vol-out" style="min-width:30px;text-align:right">80%</span>
|
|
||||||
</div>
|
</div>
|
||||||
<div id="whep-log"></div>
|
<div id="whep-log"></div>
|
||||||
</div>
|
</div>
|
||||||
@@ -233,17 +233,15 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div style="margin-top:8px; display: flex; gap: 8px;">
|
<div style="margin-top:8px; display: flex; gap: 8px;">
|
||||||
<button id="add-to-queue-btn" class="btn primary" style="flex: 1;">Add to Bottom</button>
|
<button id="add-to-queue-btn" class="btn primary" style="flex: 1;">Add to Bottom ▼</button>
|
||||||
<button id="add-to-queue2-btn" class="btn primary" style="flex: 1;">Add to Top</button>
|
<button id="add-to-queue2-btn" class="btn primary" style="flex: 1;">Add to Top ▲</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="footer">
|
<div class="footer muted">
|
||||||
<div class="muted">
|
<div>Server: <span id="server-status">connecting...</span></div>
|
||||||
Server: <span id="server-status">connecting...</span>
|
<div class="small" id="keybinds">
|
||||||
</div>
|
|
||||||
<div class="muted small" id="keybinds">
|
|
||||||
<b>Keys:</b>
|
<b>Keys:</b>
|
||||||
<span><kbd>S</kbd> skip</span>
|
<span><kbd>S</kbd> skip</span>
|
||||||
<span><kbd>N</kbd> +skip</span>
|
<span><kbd>N</kbd> +skip</span>
|
||||||
@@ -253,396 +251,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script>
|
<script src="web.js"></script>
|
||||||
let ws = null;
|
|
||||||
let reconnectDelay = 1000;
|
|
||||||
let playlist = [];
|
|
||||||
let Queue = [];
|
|
||||||
let currentTrackPath = "";
|
|
||||||
let currentTrackIndex = 0;
|
|
||||||
let selectedPlaylistIndex = null;
|
|
||||||
let selectedDir = null;
|
|
||||||
let selectedSubFile = null;
|
|
||||||
let basePath = "";
|
|
||||||
let subbasePath = "";
|
|
||||||
let skipCount = 0;
|
|
||||||
|
|
||||||
function toggleSection(id) {
|
|
||||||
document.getElementById(id).classList.toggle('collapsed');
|
|
||||||
}
|
|
||||||
|
|
||||||
function initLayout() {
|
|
||||||
if (window.innerWidth <= 800) {
|
|
||||||
document.getElementById('section-playlist').classList.add('collapsed');
|
|
||||||
document.getElementById('section-dirs').classList.add('collapsed');
|
|
||||||
document.getElementById('section-subdir').classList.add('collapsed');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function connectWs(){
|
|
||||||
const statusText = document.getElementById("server-status");
|
|
||||||
statusText.textContent = "connecting...";
|
|
||||||
ws = new WebSocket("/ws");
|
|
||||||
|
|
||||||
ws.addEventListener("open", () => {
|
|
||||||
statusText.textContent = "connected";
|
|
||||||
reconnectDelay = 1500;
|
|
||||||
ws.send(JSON.stringify({action:"get_toplay"}));
|
|
||||||
ws.send(JSON.stringify({action:"skipc"}));
|
|
||||||
});
|
|
||||||
|
|
||||||
ws.addEventListener("close", () => {
|
|
||||||
statusText.textContent = "disconnected — reconnecting...";
|
|
||||||
setTimeout(connectWs, reconnectDelay);
|
|
||||||
reconnectDelay = Math.min(10000, reconnectDelay + 1500);
|
|
||||||
});
|
|
||||||
|
|
||||||
ws.addEventListener("error", (e) => {
|
|
||||||
console.error("WS error", e);
|
|
||||||
statusText.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 || {};
|
|
||||||
if(d.track) applyProgressState(d.track);
|
|
||||||
if(d.dirs) updateDirs(d.dirs);
|
|
||||||
} else if (msg.event === "rds") {
|
|
||||||
const rt = (msg.data?.rt) ?? "";
|
|
||||||
document.getElementById("rds-text").textContent = rt ?? "";
|
|
||||||
} 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"}));
|
|
||||||
ws.send(JSON.stringify({action:"skipc"}));
|
|
||||||
} else if(msg.event === "progress") applyProgressState(msg.data);
|
|
||||||
else if(msg.event === "toplay") {
|
|
||||||
Queue = msg.data.data || [];
|
|
||||||
renderQueue();
|
|
||||||
} else if(msg.event === "request_dir") applySubdir(msg.data || {})
|
|
||||||
else if(msg.event === "skipc") {
|
|
||||||
skipCount = msg.data?.data ?? 0;
|
|
||||||
document.getElementById("skpn-count").textContent = skipCount;
|
|
||||||
renderPlaylist();
|
|
||||||
renderQueue();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
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) " : "(unofficial)"}${track.path||"<none>"}`;
|
|
||||||
document.getElementById("next-track").textContent = `${next.official ? "(official) " : "(unofficial)"}${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(total-elapsed)})`;
|
|
||||||
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"));
|
|
||||||
Array.from(document.getElementById("playlist-ul").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.dataset.path = path;
|
|
||||||
li.dataset.idx = i;
|
|
||||||
li.addEventListener("click", () => { selectPlaylistItem(i, li); });
|
|
||||||
const p = li.dataset.path;
|
|
||||||
const currentPath = currentTrackPath.replace(/^!/, "");
|
|
||||||
if (p === currentPath && i === currentTrackIndex) { li.classList.add("current"); currentIndex = i; }
|
|
||||||
else if (i === currentTrackIndex) { li.classList.add("pointer"); currentIndex = i - 1; }
|
|
||||||
if(currentIndex !== null && Queue.length === 0 && i > currentIndex && i <= currentIndex + skipCount)
|
|
||||||
li.style.textDecoration = "line-through";
|
|
||||||
li.textContent = ` ${String(idx).padStart(2,'0')}: `;
|
|
||||||
li.textContent = li.textContent + (i === currentTrackIndex ? "▶ " : " ") + displayPath;
|
|
||||||
ul.appendChild(li);
|
|
||||||
});
|
|
||||||
if(currentIndex !== null){
|
|
||||||
const el = ul.children[currentIndex];
|
|
||||||
if(el) el.scrollIntoView({block:'center', behavior: 'smooth'});
|
|
||||||
} updateControls();
|
|
||||||
}
|
|
||||||
|
|
||||||
function renderQueue() {
|
|
||||||
const ul = document.getElementById("queue-ul");
|
|
||||||
ul.innerHTML = "";
|
|
||||||
Queue.forEach((element, i) => {
|
|
||||||
const li = document.createElement("li");
|
|
||||||
li.textContent = element;
|
|
||||||
if(i < skipCount) li.style.textDecoration = "line-through";
|
|
||||||
ul.appendChild(li);
|
|
||||||
});
|
|
||||||
updateControls()
|
|
||||||
}
|
|
||||||
|
|
||||||
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"));
|
|
||||||
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
el.classList.add("selected");
|
|
||||||
selectedPlaylistIndex = i;
|
|
||||||
updateControls()
|
|
||||||
}
|
|
||||||
|
|
||||||
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 => {
|
|
||||||
if(!f.startsWith(".")) {
|
|
||||||
const node = document.createElement("div");
|
|
||||||
node.className = "item";
|
|
||||||
node.textContent = f;
|
|
||||||
node.addEventListener("click", () => onDirClicked(f, node));
|
|
||||||
dirsBox.appendChild(node);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
files.sort().forEach(f => {
|
|
||||||
if(!f.startsWith(".")) {
|
|
||||||
const node = document.createElement("div");
|
|
||||||
node.className = "item";
|
|
||||||
node.textContent = f;
|
|
||||||
node.addEventListener("click", () => {
|
|
||||||
if(node.classList.contains("selected")) { node.classList.remove("selected"); selectedDir = null; selectedSubFile = null; return; }
|
|
||||||
Array.from(dirsBox.children).forEach(c=>c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
node.classList.add("selected");
|
|
||||||
selectedDir = null; selectedSubFile = null;
|
|
||||||
document.getElementById("subdir-box").innerHTML = "";
|
|
||||||
});
|
|
||||||
node.dataset.type = "file";
|
|
||||||
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"); selectedDir = null; selectedSubFile = null;
|
|
||||||
document.getElementById("subdir-box").innerHTML = ""; return;
|
|
||||||
}
|
|
||||||
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("playlist-ul").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", () => ws.send(JSON.stringify({action:"skip"})));
|
|
||||||
document.getElementById("skpn-inc").addEventListener("click", () => ws.send(JSON.stringify({action:"skipc", add: 1})));
|
|
||||||
document.getElementById("skpn-dec").addEventListener("click", () => ws.send(JSON.stringify({action:"skipc", remove: -1})));
|
|
||||||
document.getElementById("jingle-btn").addEventListener("click", () => ws.send(JSON.stringify({action:"jingle"})));
|
|
||||||
document.getElementById("clear-btn").addEventListener("click", () => ws.send(JSON.stringify({action:"clear_toplay"})));
|
|
||||||
|
|
||||||
function addSelectedFileToQueue(top) {
|
|
||||||
let fullPath = null;
|
|
||||||
let success = false;
|
|
||||||
if (selectedPlaylistIndex != null) {
|
|
||||||
const selected = playlist[selectedPlaylistIndex];
|
|
||||||
const path = (selected.official ? "" : "!") + selected.path;
|
|
||||||
ws.send(JSON.stringify({ action: "add_to_toplay", songs: [path], top: top }));
|
|
||||||
success = true;
|
|
||||||
} else if (selectedSubFile && selectedDir) fullPath = subbasePath.replace(/\/$/, '') + '/' + selectedSubFile;
|
|
||||||
else {
|
|
||||||
const dirEls = document.getElementById("dirs-box").children;
|
|
||||||
const selectedItem = Array.from(dirEls).find(el => el.classList.contains("selected"));
|
|
||||||
if (selectedItem && selectedItem.dataset.type === "file") fullPath = basePath.replace(/\/$/, '') + '/' + selectedItem.textContent;
|
|
||||||
}
|
|
||||||
if (fullPath) { ws.send(JSON.stringify({ action: "add_to_toplay", songs: [fullPath], top: top })); success = true; }
|
|
||||||
Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
|
||||||
selectedPlaylistIndex = null; selectedSubFile = null;
|
|
||||||
return success;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.getElementById("add-to-queue-btn").addEventListener("click", () => addSelectedFileToQueue(false));
|
|
||||||
document.getElementById("add-to-queue2-btn").addEventListener("click", () => addSelectedFileToQueue(true));
|
|
||||||
|
|
||||||
function updateControls() {
|
|
||||||
document.getElementById("clear-btn").disabled = Queue.length === 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
document.addEventListener("keydown", e => {
|
|
||||||
if (e.target.tagName === "INPUT") return;
|
|
||||||
if (e.key === "Enter" && addSelectedFileToQueue(e.shiftKey)) e.preventDefault();
|
|
||||||
else if (e.key === "s") ws.send(JSON.stringify({action:"skip"}));
|
|
||||||
else if (e.key === "n") ws.send(JSON.stringify({action:"skipc", add: 1}));
|
|
||||||
else if (e.key === "m") ws.send(JSON.stringify({action:"skipc", remove: -1}));
|
|
||||||
else if (e.key.toLowerCase() === "j") ws.send(JSON.stringify({action:"jingle", top: e.shiftKey}));
|
|
||||||
});
|
|
||||||
|
|
||||||
/* ── WHEP Player logic ── */
|
|
||||||
let whepPc = null;
|
|
||||||
let whepAudio = null;
|
|
||||||
let whepConnected = false;
|
|
||||||
|
|
||||||
function whepLog(msg, type = 'info') {
|
|
||||||
const el = document.getElementById('whep-log');
|
|
||||||
const line = document.createElement('div');
|
|
||||||
line.className = 'wlog-' + type;
|
|
||||||
const ts = new Date().toLocaleTimeString("pl-PL");
|
|
||||||
line.textContent = `[${ts}] ${msg}`;
|
|
||||||
el.appendChild(line);
|
|
||||||
el.scrollTop = el.scrollHeight;
|
|
||||||
// Keep log short
|
|
||||||
while (el.children.length > 30) el.removeChild(el.firstChild);
|
|
||||||
}
|
|
||||||
|
|
||||||
function whepSetDot(state) {
|
|
||||||
const dot = document.getElementById('whep-dot');
|
|
||||||
dot.className = 'whep-status-dot' + (state !== 'idle' ? ' ' + state : '');
|
|
||||||
const btn = document.getElementById('whep-btn');
|
|
||||||
if (state === 'connected' || state === 'connecting') {
|
|
||||||
btn.textContent = '⏹ Disconnect';
|
|
||||||
btn.classList.add('activated');
|
|
||||||
} else {
|
|
||||||
btn.textContent = '▶ Connect';
|
|
||||||
btn.classList.remove('activated');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function whepSetVol(v) {
|
|
||||||
document.getElementById('whep-vol-out').textContent = Math.round(v * 100) + '%';
|
|
||||||
if (whepAudio) whepAudio.volume = parseFloat(v);
|
|
||||||
}
|
|
||||||
|
|
||||||
function whepToggle() {
|
|
||||||
if (whepConnected || whepPc) { whepDisconnect(); return; }
|
|
||||||
whepConnect();
|
|
||||||
}
|
|
||||||
|
|
||||||
function whepDisconnect() {
|
|
||||||
whepConnected = false;
|
|
||||||
if (whepPc) { try { whepPc.close(); } catch(e){} whepPc = null; }
|
|
||||||
if (whepAudio) { whepAudio.pause(); whepAudio.srcObject = null; whepAudio = null; }
|
|
||||||
whepSetDot('idle');
|
|
||||||
whepLog('Disconnected');
|
|
||||||
}
|
|
||||||
|
|
||||||
async function whepConnect() {
|
|
||||||
const url = document.getElementById('whep-url-input').value.trim();
|
|
||||||
if (!url) return;
|
|
||||||
whepSetDot('connecting');
|
|
||||||
whepLog('Creating peer connection…');
|
|
||||||
try {
|
|
||||||
whepPc = new RTCPeerConnection();
|
|
||||||
whepPc.ontrack = (e) => {
|
|
||||||
whepLog('Track received, starting playback', 'ok');
|
|
||||||
whepAudio = new Audio();
|
|
||||||
whepAudio.srcObject = e.streams[0];
|
|
||||||
whepAudio.volume = parseFloat(document.getElementById('whep-vol').value);
|
|
||||||
whepAudio.play().then(() => {
|
|
||||||
whepLog('Audio playing', 'ok');
|
|
||||||
whepConnected = true;
|
|
||||||
whepSetDot('connected');
|
|
||||||
}).catch(() => {
|
|
||||||
whepLog('Autoplay blocked — click anywhere to resume', 'err');
|
|
||||||
document.addEventListener('click', () => whepAudio && whepAudio.play(), { once: true });
|
|
||||||
});
|
|
||||||
};
|
|
||||||
whepPc.onconnectionstatechange = () => {
|
|
||||||
whepLog('State: ' + whepPc.connectionState);
|
|
||||||
if (whepPc.connectionState === 'failed' || whepPc.connectionState === 'disconnected') {
|
|
||||||
whepLog('Connection lost', 'err');
|
|
||||||
whepDisconnect();
|
|
||||||
whepSetDot('error');
|
|
||||||
}
|
|
||||||
};
|
|
||||||
whepPc.oniceconnectionstatechange = () => whepLog('ICE: ' + whepPc.iceConnectionState);
|
|
||||||
whepPc.addTransceiver('audio', { direction: 'recvonly' });
|
|
||||||
const offer = await whepPc.createOffer();
|
|
||||||
offer.sdp = offer.sdp
|
|
||||||
.replace(/useinbandfec=1/g, 'useinbandfec=1;stereo=1;sprop-stereo=1')
|
|
||||||
.replace(/minptime=10/g, 'minptime=10;ptime=10;maxptime=10');
|
|
||||||
await whepPc.setLocalDescription(offer);
|
|
||||||
whepLog('Sending offer to ' + url);
|
|
||||||
const resp = await fetch(url, {
|
|
||||||
method: 'POST',
|
|
||||||
headers: { 'Content-Type': 'application/sdp', 'Accept': 'application/sdp' },
|
|
||||||
body: whepPc.localDescription.sdp
|
|
||||||
});
|
|
||||||
if (!resp.ok) throw new Error(`Server returned ${resp.status} ${resp.statusText}`);
|
|
||||||
const answerSdp = await resp.text();
|
|
||||||
whepLog(`Got SDP answer (${answerSdp.length} bytes)`, 'ok');
|
|
||||||
await whepPc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
|
|
||||||
whepLog('Waiting for ICE + track…');
|
|
||||||
} catch(err) {
|
|
||||||
whepLog('Error: ' + err.message, 'err');
|
|
||||||
whepDisconnect();
|
|
||||||
whepSetDot('error');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Start
|
|
||||||
initLayout();
|
|
||||||
setTimeout(connectWs, 100);
|
|
||||||
</script>
|
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|||||||
+393
@@ -0,0 +1,393 @@
|
|||||||
|
let ws = null;
|
||||||
|
let reconnectDelay = 1000;
|
||||||
|
let playlist = [];
|
||||||
|
let Queue = [];
|
||||||
|
let currentTrackPath = "";
|
||||||
|
let currentTrackIndex = 0;
|
||||||
|
let selectedPlaylistIndex = null;
|
||||||
|
let selectedDir = null;
|
||||||
|
let selectedSubFile = null;
|
||||||
|
let basePath = "";
|
||||||
|
let subbasePath = "";
|
||||||
|
let skipCount = 0;
|
||||||
|
|
||||||
|
function toggleSection(id) {
|
||||||
|
document.getElementById(id).classList.toggle('collapsed');
|
||||||
|
}
|
||||||
|
|
||||||
|
function initLayout() {
|
||||||
|
if (window.innerWidth <= 800) {
|
||||||
|
document.getElementById('section-playlist').classList.add('collapsed');
|
||||||
|
document.getElementById('section-dirs').classList.add('collapsed');
|
||||||
|
document.getElementById('section-subdir').classList.add('collapsed');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function connectWs(){
|
||||||
|
const statusText = document.getElementById("server-status");
|
||||||
|
statusText.textContent = "connecting...";
|
||||||
|
|
||||||
|
let url = "/ws";
|
||||||
|
if(window.location.protocol === "file:") url = "https://radio95.tnet/ws"
|
||||||
|
ws = new WebSocket(url);
|
||||||
|
|
||||||
|
ws.addEventListener("open", () => {
|
||||||
|
statusText.textContent = "connected";
|
||||||
|
reconnectDelay = 1500;
|
||||||
|
ws.send(JSON.stringify({action:"get_toplay"}));
|
||||||
|
ws.send(JSON.stringify({action:"skipc"}));
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.addEventListener("close", () => {
|
||||||
|
statusText.textContent = "disconnected — reconnecting...";
|
||||||
|
setTimeout(connectWs, reconnectDelay);
|
||||||
|
reconnectDelay = Math.min(10000, reconnectDelay + 1500);
|
||||||
|
});
|
||||||
|
|
||||||
|
ws.addEventListener("error", (e) => {
|
||||||
|
console.error("WS error", e);
|
||||||
|
statusText.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 || {};
|
||||||
|
if(d.dirs) updateDirs(d.dirs);
|
||||||
|
if(d.track) applyProgressState(d.track);
|
||||||
|
} else if (msg.event === "rds") {
|
||||||
|
const rt = (msg.data?.rt) ?? "";
|
||||||
|
document.getElementById("rds-text").textContent = rt ?? "";
|
||||||
|
} 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"}));
|
||||||
|
ws.send(JSON.stringify({action:"skipc"}));
|
||||||
|
} else if(msg.event === "progress") applyProgressState(msg.data);
|
||||||
|
else if(msg.event === "toplay") {
|
||||||
|
Queue = msg.data.data || [];
|
||||||
|
renderQueue();
|
||||||
|
} else if(msg.event === "request_dir") applySubdir(msg.data || {})
|
||||||
|
else if(msg.event === "skipc") {
|
||||||
|
skipCount = msg.data?.data ?? 0;
|
||||||
|
document.getElementById("skpn-count").textContent = skipCount;
|
||||||
|
renderPlaylist();
|
||||||
|
renderQueue();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function applyTrackState(payload){
|
||||||
|
const track = payload.track || {};
|
||||||
|
const next = payload.next_track || {};
|
||||||
|
currentTrackPath = track.path;
|
||||||
|
currentTrackIndex = payload.index;
|
||||||
|
document.getElementById("now-track").textContent = (track.official ? "(official) " : "(unofficial) ") + track.path.replace(basePath, "").slice(1);;
|
||||||
|
document.getElementById("next-track").textContent = (next.official ? "(official) " : "(unofficial) ") + next.path.replace(basePath, "").slice(1);
|
||||||
|
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(total-elapsed)})`;
|
||||||
|
currentTrackIndex = payload.index;
|
||||||
|
if(track.path){
|
||||||
|
currentTrackPath = track.path;
|
||||||
|
document.getElementById("now-track").textContent = (track.official ? "(official) " : "(unofficial) ") + track.path.replace(basePath, "").slice(1);
|
||||||
|
} if(next_track.path) document.getElementById("next-track").textContent = `${next_track.official ? "(official)" : "(unofficial)"} ${next_track.path.replace(basePath, "").slice(1)}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
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"));
|
||||||
|
Array.from(document.getElementById("playlist-ul").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;
|
||||||
|
const digits = playlist.length.toString().length
|
||||||
|
playlist.forEach((t, i) => {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
const path = t.path || "<no path>";
|
||||||
|
const official = t.official || false;
|
||||||
|
const displayPath = (official ? "(official) " : "(unofficial) ") + path.replace(basePath, "").slice(1);
|
||||||
|
li.dataset.path = path;
|
||||||
|
li.dataset.idx = i;
|
||||||
|
li.addEventListener("click", () => { selectPlaylistItem(i, li); });
|
||||||
|
if (path === currentTrackPath && i === currentTrackIndex) { li.classList.add("current"); currentIndex = i; }
|
||||||
|
else if (i === currentTrackIndex) { li.classList.add("pointer"); currentIndex = i - 1; }
|
||||||
|
if(currentIndex !== null && Queue.length === 0 && i > currentIndex && i <= currentIndex + skipCount)
|
||||||
|
li.style.textDecoration = "line-through";
|
||||||
|
li.textContent = ` ${String(i).padStart(digits,'0')}: `;
|
||||||
|
li.textContent = li.textContent + (i === currentTrackIndex ? "▶ " : " ") + displayPath;
|
||||||
|
ul.appendChild(li);
|
||||||
|
});
|
||||||
|
if(currentIndex !== null){
|
||||||
|
const el = ul.children[currentIndex];
|
||||||
|
if(el) el.scrollIntoView({block:'center', behavior: 'smooth'});
|
||||||
|
} updateControls();
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderQueue() {
|
||||||
|
const ul = document.getElementById("queue-ul");
|
||||||
|
ul.innerHTML = "";
|
||||||
|
Queue.forEach((element, i) => {
|
||||||
|
const li = document.createElement("li");
|
||||||
|
li.textContent = element;
|
||||||
|
if(i < skipCount) li.style.textDecoration = "line-through";
|
||||||
|
ul.appendChild(li);
|
||||||
|
});
|
||||||
|
updateControls()
|
||||||
|
}
|
||||||
|
|
||||||
|
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"));
|
||||||
|
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
el.classList.add("selected");
|
||||||
|
selectedPlaylistIndex = i;
|
||||||
|
updateControls()
|
||||||
|
}
|
||||||
|
|
||||||
|
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 => {
|
||||||
|
if(!f.startsWith(".")) {
|
||||||
|
const node = document.createElement("div");
|
||||||
|
node.className = "item";
|
||||||
|
node.textContent = f;
|
||||||
|
node.addEventListener("click", () => onDirClicked(f, node));
|
||||||
|
dirsBox.appendChild(node);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
files.sort().forEach(f => {
|
||||||
|
if(!f.startsWith(".")) {
|
||||||
|
const node = document.createElement("div");
|
||||||
|
node.className = "item";
|
||||||
|
node.textContent = f;
|
||||||
|
node.addEventListener("click", () => {
|
||||||
|
if(node.classList.contains("selected")) { node.classList.remove("selected"); selectedDir = null; selectedSubFile = null; return; }
|
||||||
|
Array.from(dirsBox.children).forEach(c=>c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
node.classList.add("selected");
|
||||||
|
selectedDir = null; selectedSubFile = null;
|
||||||
|
document.getElementById("subdir-box").innerHTML = "";
|
||||||
|
});
|
||||||
|
node.dataset.type = "file";
|
||||||
|
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"); selectedDir = null; selectedSubFile = null;
|
||||||
|
document.getElementById("subdir-box").innerHTML = ""; return;
|
||||||
|
}
|
||||||
|
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("playlist-ul").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", () => ws.send(JSON.stringify({action:"skip"})));
|
||||||
|
document.getElementById("skpn-inc").addEventListener("click", () => ws.send(JSON.stringify({action:"skipc", add: 1})));
|
||||||
|
document.getElementById("skpn-dec").addEventListener("click", () => ws.send(JSON.stringify({action:"skipc", remove: -1})));
|
||||||
|
document.getElementById("jingle-btn").addEventListener("click", () => ws.send(JSON.stringify({action:"jingle"})));
|
||||||
|
document.getElementById("jingle-btn").addEventListener("contextmenu", (e) => {
|
||||||
|
e.preventDefault();
|
||||||
|
ws.send(JSON.stringify({action:"jingle", top: true}));
|
||||||
|
});
|
||||||
|
document.getElementById("clear-btn").addEventListener("click", () => ws.send(JSON.stringify({action:"clear_toplay"})));
|
||||||
|
|
||||||
|
function addSelectedFileToQueue(top) {
|
||||||
|
let fullPath = null;
|
||||||
|
let success = false;
|
||||||
|
if (selectedPlaylistIndex != null) {
|
||||||
|
const selected = playlist[selectedPlaylistIndex];
|
||||||
|
const path = (selected.official ? "" : "!") + selected.path;
|
||||||
|
ws.send(JSON.stringify({ action: "add_to_toplay", songs: [path], top: top }));
|
||||||
|
success = true;
|
||||||
|
} else if (selectedSubFile && selectedDir) fullPath = subbasePath.replace(/\/$/, '') + '/' + selectedSubFile;
|
||||||
|
else {
|
||||||
|
const dirEls = document.getElementById("dirs-box").children;
|
||||||
|
const selectedItem = Array.from(dirEls).find(el => el.classList.contains("selected"));
|
||||||
|
if (selectedItem && selectedItem.dataset.type === "file") fullPath = basePath.replace(/\/$/, '') + '/' + selectedItem.textContent;
|
||||||
|
}
|
||||||
|
if (fullPath) { ws.send(JSON.stringify({ action: "add_to_toplay", songs: [fullPath], top: top })); success = true; }
|
||||||
|
Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("dirs-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected"));
|
||||||
|
selectedPlaylistIndex = null; selectedSubFile = null;
|
||||||
|
return success;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.getElementById("add-to-queue-btn").addEventListener("click", () => addSelectedFileToQueue(false));
|
||||||
|
document.getElementById("add-to-queue2-btn").addEventListener("click", () => addSelectedFileToQueue(true));
|
||||||
|
|
||||||
|
function updateControls() {
|
||||||
|
document.getElementById("clear-btn").disabled = Queue.length === 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
document.addEventListener("keydown", e => {
|
||||||
|
if (e.target.tagName === "INPUT") return;
|
||||||
|
if (e.key === "Enter" && addSelectedFileToQueue(e.shiftKey)) e.preventDefault();
|
||||||
|
else if (e.key === "s") ws.send(JSON.stringify({action:"skip"}));
|
||||||
|
else if (e.key === "n") ws.send(JSON.stringify({action:"skipc", add: 1}));
|
||||||
|
else if (e.key === "m") ws.send(JSON.stringify({action:"skipc", remove: -1}));
|
||||||
|
else if (e.key.toLowerCase() === "j") ws.send(JSON.stringify({action:"jingle", top: e.shiftKey}));
|
||||||
|
});
|
||||||
|
|
||||||
|
let whepPc = null;
|
||||||
|
let whepAudio = null;
|
||||||
|
let whepConnected = false;
|
||||||
|
|
||||||
|
function whepLog(msg, type = 'info') {
|
||||||
|
const el = document.getElementById('whep-log');
|
||||||
|
const line = document.createElement('div');
|
||||||
|
line.className = 'wlog-' + type;
|
||||||
|
const ts = new Date().toLocaleTimeString("pl-PL");
|
||||||
|
line.textContent = `[${ts}] ${msg}`;
|
||||||
|
el.appendChild(line);
|
||||||
|
el.scrollTop = el.scrollHeight;
|
||||||
|
// Keep log short
|
||||||
|
while (el.children.length > 30) el.removeChild(el.firstChild);
|
||||||
|
}
|
||||||
|
|
||||||
|
function whepSetDot(state) {
|
||||||
|
const dot = document.getElementById('whep-dot');
|
||||||
|
dot.className = 'whep-status-dot' + (state !== 'idle' ? ' ' + state : '');
|
||||||
|
const btn = document.getElementById('whep-btn');
|
||||||
|
if (state === 'connected' || state === 'connecting') {
|
||||||
|
btn.textContent = '⏹ Disconnect';
|
||||||
|
btn.classList.add('activated');
|
||||||
|
} else {
|
||||||
|
btn.textContent = '▶ Connect';
|
||||||
|
btn.classList.remove('activated');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function whepSetVol(v) {
|
||||||
|
document.getElementById('whep-vol-out').textContent = (Math.round(v * 1000) / 10).toFixed(1) + '%';
|
||||||
|
if (whepAudio) whepAudio.volume = parseFloat(v);
|
||||||
|
}
|
||||||
|
|
||||||
|
function whepToggle() {
|
||||||
|
if (whepConnected || whepPc) { whepDisconnect(); return; }
|
||||||
|
whepConnect();
|
||||||
|
}
|
||||||
|
|
||||||
|
function whepDisconnect() {
|
||||||
|
whepConnected = false;
|
||||||
|
if (whepPc) { try { whepPc.close(); } catch(e){} whepPc = null; }
|
||||||
|
if (whepAudio) { whepAudio.pause(); whepAudio.srcObject = null; whepAudio = null; }
|
||||||
|
whepSetDot('idle');
|
||||||
|
whepLog('Disconnected');
|
||||||
|
}
|
||||||
|
|
||||||
|
async function whepConnect() {
|
||||||
|
const url = document.getElementById('whep-url-input').value.trim();
|
||||||
|
if (!url) return;
|
||||||
|
whepSetDot('connecting');
|
||||||
|
whepLog('Creating peer connection…');
|
||||||
|
try {
|
||||||
|
whepPc = new RTCPeerConnection();
|
||||||
|
whepPc.ontrack = (e) => {
|
||||||
|
whepLog('Track received, starting playback', 'ok');
|
||||||
|
whepAudio = new Audio();
|
||||||
|
whepAudio.srcObject = e.streams[0];
|
||||||
|
whepAudio.volume = parseFloat(document.getElementById('whep-vol').value);
|
||||||
|
whepAudio.play().then(() => {
|
||||||
|
whepLog('Audio playing', 'ok');
|
||||||
|
whepConnected = true;
|
||||||
|
whepSetDot('connected');
|
||||||
|
}).catch(() => {
|
||||||
|
whepLog('Autoplay blocked — click anywhere to resume', 'err');
|
||||||
|
document.addEventListener('click', () => whepAudio && whepAudio.play(), { once: true });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
whepPc.onconnectionstatechange = () => {
|
||||||
|
whepLog('State: ' + whepPc.connectionState);
|
||||||
|
if (whepPc.connectionState === 'failed' || whepPc.connectionState === 'disconnected') {
|
||||||
|
whepLog('Connection lost', 'err');
|
||||||
|
whepDisconnect();
|
||||||
|
whepSetDot('error');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
whepPc.oniceconnectionstatechange = () => whepLog('ICE: ' + whepPc.iceConnectionState);
|
||||||
|
whepPc.addTransceiver('audio', { direction: 'recvonly' });
|
||||||
|
const offer = await whepPc.createOffer();
|
||||||
|
offer.sdp = offer.sdp
|
||||||
|
.replace(/useinbandfec=1/g, 'useinbandfec=1;stereo=1;sprop-stereo=1')
|
||||||
|
.replace(/minptime=10/g, 'minptime=10;ptime=10;maxptime=10');
|
||||||
|
await whepPc.setLocalDescription(offer);
|
||||||
|
whepLog('Sending offer to ' + url);
|
||||||
|
const resp = await fetch(url, {
|
||||||
|
method: 'POST',
|
||||||
|
headers: { 'Content-Type': 'application/sdp', 'Accept': 'application/sdp' },
|
||||||
|
body: whepPc.localDescription.sdp
|
||||||
|
});
|
||||||
|
if (!resp.ok) throw new Error(`Server returned ${resp.status} ${resp.statusText}`);
|
||||||
|
const answerSdp = await resp.text();
|
||||||
|
whepLog(`Got SDP answer (${answerSdp.length} bytes)`, 'ok');
|
||||||
|
await whepPc.setRemoteDescription({ type: 'answer', sdp: answerSdp });
|
||||||
|
whepLog('Waiting for ICE + track…');
|
||||||
|
} catch(err) {
|
||||||
|
whepLog('Error: ' + err.message, 'err');
|
||||||
|
whepDisconnect();
|
||||||
|
whepSetDot('error');
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Start
|
||||||
|
initLayout();
|
||||||
|
setTimeout(connectWs, 100);
|
||||||
+9
-1
@@ -113,7 +113,7 @@ def websocket_server_process(shared_data: dict, imc_q: multiprocessing.Queue, ws
|
|||||||
await websocket.close(1001, "")
|
await websocket.close(1001, "")
|
||||||
clients.discard(websocket)
|
clients.discard(websocket)
|
||||||
async def process_request(websocket: ServerConnection, request: Request):
|
async def process_request(websocket: ServerConnection, request: Request):
|
||||||
if request.path == "/" and (file := Path(__file__, "..", "web.html").resolve()).exists():
|
if request.path == "/" and (file := Path(__file__, "..", "web.html")).exists():
|
||||||
data = file.read_bytes()
|
data = file.read_bytes()
|
||||||
return Response(
|
return Response(
|
||||||
200,
|
200,
|
||||||
@@ -121,6 +121,14 @@ def websocket_server_process(shared_data: dict, imc_q: multiprocessing.Queue, ws
|
|||||||
Headers([("Content-Type", "text/html"), ("Content-Length", f"{len(data)}")]),
|
Headers([("Content-Type", "text/html"), ("Content-Length", f"{len(data)}")]),
|
||||||
data
|
data
|
||||||
)
|
)
|
||||||
|
if request.path == "/web.js" and (file := Path(__file__, "..", "web.js")).exists():
|
||||||
|
data = file.read_bytes()
|
||||||
|
return Response(
|
||||||
|
200,
|
||||||
|
"OK",
|
||||||
|
Headers([("Content-Type", "text/javascript"), ("Content-Length", f"{len(data)}")]),
|
||||||
|
data
|
||||||
|
)
|
||||||
if request.path == "/ws":
|
if request.path == "/ws":
|
||||||
if not "upgrade" in request.headers.get("Connection", "").lower():
|
if not "upgrade" in request.headers.get("Connection", "").lower():
|
||||||
return Response(
|
return Response(
|
||||||
|
|||||||
Reference in New Issue
Block a user