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

ux, vibe coded

Browse Source
This commit is contained in:
KubaPro010
2025-12-27 22:28:18 +01:00
parent a036786140
commit 119542b748
1 changed files with 111 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

160
modules/web.html
View File

@@ -17,7 +17,33 @@
.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} .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} .left{flex:1.2; min-width:420px}
.right{flex:1; display:flex; flex-direction:column; gap:12px} .right{flex:1; display:flex; flex-direction:column; gap:12px}
.frame-title{font-size:16px; color:var(--muted); margin-bottom:8px}
/* Collapsible Header Styling */
.frame-title{
font-size:16px;
color:var(--muted);
margin-bottom:8px;
display: flex;
justify-content: space-between;
align-items: center;
cursor: pointer;
user-select: none;
padding: 4px 0;
}
.frame-title:hover { color: #fff; }
.frame-title::after {
content: '▼';
font-size: 10px;
transition: transform 0.2s;
opacity: 0.5;
}
/* Collapsed States */
.box.collapsed { flex-grow: 0 !important; flex-shrink: 0; }
.box.collapsed .collapsible-content { display: none; }
.box.collapsed .frame-title::after { transform: rotate(-90deg); }
.box.collapsed .frame-title { margin-bottom: 0; }
.now, .next {margin-bottom:12px} .now, .next {margin-bottom:12px}
.now .track, .next .track {font-weight:600; font-size:14px; word-break:break-all} .now .track, .next .track {font-weight:600; 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}
@@ -38,7 +64,7 @@
.controls{display:flex; gap:8px; margin-top:8px} .controls{display:flex; gap:8px; margin-top:8px}
.two-col{display:flex; gap:8px; align-items:flex-start; height:100%} .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;} .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{height:100%; min-height:100px; 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{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:hover{background:rgba(255,255,255,0.02); cursor:pointer}
.listbox div.item.selected{background:rgba(62, 165, 255, 0.305)} .listbox div.item.selected{background:rgba(62, 165, 255, 0.305)}
@@ -49,15 +75,18 @@
.directory-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-grow:1; overflow:hidden} .directory-grid{display:grid; grid-template-columns:1fr 1fr; gap:12px; flex-grow:1; overflow:hidden}
#keybinds {display: flex; gap: 10px; align-items: center; white-space: nowrap; } #keybinds {display: flex; gap: 10px; align-items: center; white-space: nowrap; }
#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; color: #e6eef6; } #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; color: #e6eef6; }
@media (max-width:800px){ @media (max-width:800px){
html, body{overflow: auto; height: auto} html, body{overflow: auto; height: auto}
.container{padding: 10px; margin: 0} .container{padding: 10px; margin: 0}
.layout{flex-direction: column; height: auto} .layout{flex-direction: column; height: auto}
.left{min-width:auto} .left{min-width:auto}
.directory-grid {grid-template-columns: 1fr} .directory-grid {grid-template-columns: 1fr; height: auto; overflow: visible}
.listbox {min-height: 250px} .listbox {min-height: 200px}
button, .btn {padding: 10px 14px} button, .btn {padding: 10px 14px}
#playlist-box {display: none;} /* Mobile accessibility fix: remove fixed heights so collapsed items actually shrink */
.box { flex-grow: 0; }
.panel.right { height: auto; }
} }
</style> </style>
</head> </head>
@@ -68,59 +97,65 @@
</div> </div>
<div class="layout"> <div class="layout">
<!-- Left Panel -->
<div class="panel left"> <div class="panel left">
<div class="now"> <div class="now">
<div class="frame-title">Now Playing</div> <div class="frame-title" style="cursor: default; pointer-events: none;">Now Playing</div>
<div class="track" id="now-track">Loading...</div> <div class="track" id="now-track">Loading...</div>
<div class="progress-wrap" style="margin-top:8px"> <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="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)</div> <div class="small" id="time-label">00:00 / 00:00 (00:00)</div>
</div> </div>
<div class="controls" style="margin-top:10px"> <div class="controls" style="margin-top:10px">
<button id="skip-btn" class="btn">⏭ Skip Track</button> <button id="skip-btn" class="btn">⏭ Skip</button>
<button id="clear-btn" class="btn">✖ Clear the Queue</button> <button id="clear-btn" class="btn">✖ Clear Queue</button>
<button id="skpn-btn" class="btn">⏭? Toggle skip next</button> <button id="skpn-btn" class="btn">⏭? Skip Next</button>
<button id="jingle-btn" class="btn">🕭 Add Jingle</button> <button id="jingle-btn" class="btn">🕭 Jingle</button>
<button id="jingle2-btn" class="btn">🕭 Add Jingle (prepend)</button>
</div> </div>
</div> </div>
<div class="next" style="margin-top:12px"> <div class="next" style="margin-top:12px">
<div class="frame-title">Next Track</div> <div class="frame-title" style="cursor: default; pointer-events: none;">Next Track</div>
<div class="track" id="next-track">Loading...</div> <div class="track" id="next-track">Loading...</div>
</div> </div>
<div style="margin-top:12px; display:flex; flex-direction: column; flex-grow: 1; overflow: hidden;"> <div style="margin-top:12px; display:flex; flex-direction: column; flex-grow: 1; overflow: hidden; gap: 12px;">
<div class="box" style="flex-grow: 1;"> <!-- Playlist Viewer -->
<div class="frame-title">Playlist Queue</div> <div class="box" id="section-playlist">
<div class="list listbox" id="playlist-box"> <div class="frame-title" onclick="toggleSection('section-playlist')">Playlist Viewer</div>
<div class="collapsible-content flex-grow listbox" style="flex-grow:1">
<div class="list" id="playlist-box" style="height: 100%;">
<ul class="playlist" id="playlist-ul"></ul> <ul class="playlist" id="playlist-ul"></ul>
</div> </div>
</div> </div>
<div class="box" style="margin-top: 12px; flex-shrink: 0;"> </div>
<div class="frame-title">Queue</div>
<div class="list listbox" id="queue-box" style="min-height: 80px; max-height: 200px;"> <!-- Queue -->
<div class="box" id="section-queue" style="flex-grow: 0;">
<div class="frame-title" onclick="toggleSection('section-queue')">Queue</div>
<div class="collapsible-content listbox" id="queue-box" style="height: 140px;">
<ul class="playlist" id="queue-ul"></ul> <ul class="playlist" id="queue-ul"></ul>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- Right Panel -->
<div class="panel right"> <div class="panel right">
<div class="directory-grid"> <div class="directory-grid">
<div class="box" style="padding:8px"> <div class="box" id="section-dirs">
<div class="frame-title">Directory Browser</div> <div class="frame-title" onclick="toggleSection('section-dirs')">Directory Browser</div>
<div class="listbox" id="dirs-box"></div> <div class="collapsible-content listbox" id="dirs-box"></div>
</div> </div>
<div class="box" style="padding:8px"> <div class="box" id="section-subdir">
<div class="frame-title">Subdirectory Files</div> <div class="frame-title" onclick="toggleSection('section-subdir')">Subdirectory Files</div>
<div class="listbox" id="subdir-box"></div> <div class="collapsible-content listbox" id="subdir-box"></div>
</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 of Queue</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 of Queue</button> <button id="add-to-queue2-btn" class="btn primary" style="flex: 1;">Add to Top</button>
</div> </div>
</div> </div>
</div> </div>
@@ -139,7 +174,6 @@
</div> </div>
<script> <script>
let ws = null; let ws = null;
let reconnectDelay = 1000; let reconnectDelay = 1000;
let playlist = []; let playlist = [];
@@ -153,6 +187,22 @@
let subbasePath = ""; let subbasePath = "";
let skipNext = false; let skipNext = false;
// UI Toggle Function
function toggleSection(id) {
const el = document.getElementById(id);
el.classList.toggle('collapsed');
}
// Mobile Default Setup
function initLayout() {
if (window.innerWidth <= 800) {
// Collapse major sections by default on mobile
document.getElementById('section-playlist').classList.add('collapsed');
document.getElementById('section-dirs').classList.add('collapsed');
document.getElementById('section-subdir').classList.add('collapsed');
}
}
function connectWs(){ function connectWs(){
document.getElementById("server-status").textContent = "connecting..."; document.getElementById("server-status").textContent = "connecting...";
ws = new WebSocket("ws://192.168.1.93:3001"); ws = new WebSocket("ws://192.168.1.93:3001");
@@ -206,12 +256,11 @@
applySubdir(msg.data || {}) applySubdir(msg.data || {})
} else if(msg.event === "skip_next") { } else if(msg.event === "skip_next") {
skipNext = msg.data?.data === true; skipNext = msg.data?.data === true;
if(!skipNext && document.getElementById("skpn-btn").classList.contains("activated")) document.getElementById("skpn-btn").classList.remove("activated") const btn = document.getElementById("skpn-btn");
else if(skipNext) document.getElementById("skpn-btn").classList.add("activated") if(!skipNext) btn.classList.remove("activated");
else btn.classList.add("activated");
renderPlaylist(); renderPlaylist();
renderQueue(); renderQueue();
} else if(msg.status || msg.response || msg.error) {
console.debug("ws ack", msg);
} }
} }
@@ -247,7 +296,6 @@
function applySubdir(payload) { function applySubdir(payload) {
if(payload.dir !== selectedDir) return; if(payload.dir !== selectedDir) return;
const dirsBox = document.getElementById("subdir-box"); const dirsBox = document.getElementById("subdir-box");
dirsBox.innerHTML = "Loading..."; dirsBox.innerHTML = "Loading...";
try { try {
@@ -407,83 +455,63 @@
} }
document.getElementById("skip-btn").addEventListener("click", () => { document.getElementById("skip-btn").addEventListener("click", () => {
if(ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({action:"skip"})); ws.send(JSON.stringify({action:"skip"}));
else console.error("WebSocket not connected.");
}); });
document.getElementById("skpn-btn").addEventListener("click", () => { document.getElementById("skpn-btn").addEventListener("click", () => {
if(ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({action:"skip_next"})); ws.send(JSON.stringify({action:"skip_next"}));
else console.error("WebSocket not connected.");
}); });
document.getElementById("jingle-btn").addEventListener("click", () => { document.getElementById("jingle-btn").addEventListener("click", () => {
if(ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({action:"jingle"})); ws.send(JSON.stringify({action:"jingle"}));
else console.error("WebSocket not connected.");
}); });
document.getElementById("jingle2-btn").addEventListener("click", () => { document.getElementById("clear-btn").addEventListener("click", () => {
if(ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({action:"jingle", top: true})); ws.send(JSON.stringify({action:"clear_toplay"}))
else console.error("WebSocket not connected.");
}); });
document.getElementById("clear-btn").addEventListener("click", () => {ws.send(JSON.stringify({action:"clear_toplay"}))});
function addSelectedFileToQueue(top) { function addSelectedFileToQueue(top) {
let fullPath = null; let fullPath = null;
if(selectedPlaylistIndex != null) { if(selectedPlaylistIndex != null) {
const selected = playlist[selectedPlaylistIndex]; const selected = playlist[selectedPlaylistIndex];
if(!selected) { alert("Invalid selection"); return; }
const path = (selected.official ? "" : "!") + selected.path; const path = (selected.official ? "" : "!") + selected.path;
ws.send(JSON.stringify({action:"add_to_toplay", songs: [path], top: top})) ws.send(JSON.stringify({action:"add_to_toplay", songs: [path], top: top}))
Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected")); Array.from(document.getElementById("playlist-ul").children).forEach(c => c.classList.remove("selected"));
selectedPlaylistIndex = null; selectedPlaylistIndex = null;
return; return true;
} }
// Priority 1: selected subdirectory file
if (selectedSubFile && selectedDir) { if (selectedSubFile && selectedDir) {
fullPath = subbasePath.replace(/\/$/, '') + '/' + selectedSubFile; fullPath = subbasePath.replace(/\/$/, '') + '/' + selectedSubFile;
Array.from(document.getElementById("subdir-box").children).forEach(c => c.classList.remove("selected")); } else {
selectedSubFile = null;
}
// Priority 2: selected main directory file
else {
const dirEls = document.getElementById("dirs-box").children; const dirEls = document.getElementById("dirs-box").children;
const selectedItem = Array.from(dirEls).find(el => el.classList.contains("selected")); const selectedItem = Array.from(dirEls).find(el => el.classList.contains("selected"));
if (selectedItem && selectedItem.dataset.type === "file") { if (selectedItem && selectedItem.dataset.type === "file") {
fullPath = basePath.replace(/\/$/, '') + '/' + selectedItem.textContent; fullPath = basePath.replace(/\/$/, '') + '/' + selectedItem.textContent;
Array.from(dirEls).forEach(c => c.classList.remove("selected"));
selectedDir = null;
} }
} }
if (fullPath) {
if (fullPath && ws && ws.readyState === WebSocket.OPEN) {
ws.send(JSON.stringify({ action:"add_to_toplay", songs:[fullPath], top: top})); ws.send(JSON.stringify({ action:"add_to_toplay", songs:[fullPath], top: top}));
return true; return true;
} }
return false; return false;
} }
document.getElementById("add-to-queue-btn").addEventListener("click", () => addSelectedFileToQueue(false)); document.getElementById("add-to-queue-btn").addEventListener("click", () => addSelectedFileToQueue(false));
document.getElementById("add-to-queue2-btn").addEventListener("click", () => addSelectedFileToQueue(true)); document.getElementById("add-to-queue2-btn").addEventListener("click", () => addSelectedFileToQueue(true));
function updateControls() { function updateControls() {
document.getElementById("clear-btn").disabled = document.getElementById("clear-btn").disabled = Queue.length === 0;
Queue.length === 0;
} }
document.addEventListener("keydown", e => { document.addEventListener("keydown", e => {
if (e.target.tagName === "INPUT") return; if (e.target.tagName === "INPUT") return;
if (e.key === "Enter") { if (e.key === "Enter") {
const added = addSelectedFileToQueue(e.shiftKey); if (addSelectedFileToQueue(e.shiftKey)) e.preventDefault();
if (added) e.preventDefault();
} }
if (e.key === "s") ws.send(JSON.stringify({action:"skip"})); if (e.key === "s") ws.send(JSON.stringify({action:"skip"}));
if (e.key === "n") ws.send(JSON.stringify({action:"skip_next"})); if (e.key === "n") ws.send(JSON.stringify({action:"skip_next"}));
if (e.key === "j") ws.send(JSON.stringify({action:"jingle", top: e.shiftKey})); if (e.key === "j") ws.send(JSON.stringify({action:"jingle", top: e.shiftKey}));
}); });
setTimeout(connectWs, 100) // Start
initLayout();
setTimeout(connectWs, 100);
</script> </script>
</body> </body>
</html> </html>