Matthias Blankertz
355a8bd345
Having to press the power button again to wake up the device is less annoying to the user than not being able to apply settings when the device is on battery. Signed-off-by: Matthias Blankertz <matthias@blankertz.org>
1047 lines
39 KiB
HTML
1047 lines
39 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>TonBERRY pico</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
padding: 20px;
|
|
max-width: 700px;
|
|
margin: auto;
|
|
}
|
|
|
|
/* Navigation */
|
|
nav button {
|
|
margin: 5px;
|
|
padding: 10px 16px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
/* Screens */
|
|
.screen {
|
|
display: none;
|
|
margin-top: 20px;
|
|
}
|
|
.screen.active {
|
|
display: block;
|
|
}
|
|
|
|
/* Config editor UI */
|
|
label {
|
|
font-weight: bold;
|
|
margin-top: 12px;
|
|
display: block;
|
|
}
|
|
input {
|
|
width: 100%;
|
|
padding: 6px;
|
|
box-sizing: border-box;
|
|
margin-top: 4px;
|
|
}
|
|
.nested {
|
|
margin-left: 20px;
|
|
border-left: 2px solid #ddd;
|
|
padding-left: 10px;
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* Tree view */
|
|
.tree ul {
|
|
list-style: none;
|
|
padding-left: 1rem;
|
|
}
|
|
|
|
.tree li {
|
|
margin: 2px 0;
|
|
}
|
|
|
|
.caret {
|
|
cursor: pointer;
|
|
display: inline-block;
|
|
width: 1em;
|
|
height: 1em;
|
|
user-select: none;
|
|
}
|
|
|
|
.caret::before {
|
|
content: "▶";
|
|
opacity: 0.6;
|
|
}
|
|
|
|
li.expanded > .caret::before {
|
|
content: "▼";
|
|
}
|
|
|
|
li:not(:has(ul)) > .caret::before {
|
|
content: "";
|
|
}
|
|
|
|
.node {
|
|
cursor: pointer;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
user-select: none;
|
|
}
|
|
|
|
.node:hover {
|
|
background: #eee;
|
|
}
|
|
|
|
.node.selected {
|
|
background: #0078d7;
|
|
color: white;
|
|
}
|
|
|
|
.tree ul ul {
|
|
display: none;
|
|
}
|
|
|
|
li.expanded > ul {
|
|
display: block;
|
|
}
|
|
|
|
.scroll-container {
|
|
border: 1px solid #ccc;
|
|
border-radius: 4px;
|
|
|
|
height: 500px;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.flex-horizontal {
|
|
display:flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.flex-vertical {
|
|
display:flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.list {
|
|
list-style: none;
|
|
}
|
|
|
|
.footer {
|
|
font-size: x-small;
|
|
color: gray;
|
|
margin-top: 20px;
|
|
}
|
|
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<h1>TonBERRY pico</h1>
|
|
|
|
<nav>
|
|
<button onclick="showScreen('menu')">🏠 Main Menu</button>
|
|
<button onclick="showScreen('config')">⚙️ Config Editor</button>
|
|
<button onclick="showScreen('playlist')">🖹 Playlist Editor</button>
|
|
</nav>
|
|
|
|
<!-- MAIN MENU -->
|
|
<div id="screen-menu" class="screen active">
|
|
<h2>Main Menu</h2>
|
|
<p>Select a tool:</p>
|
|
|
|
<ul>
|
|
<li><button onclick="showScreen('config')">Open Config Editor</button></li>
|
|
<li><button onclick="showScreen('playlist')">Open Playlist Editor</button></li>
|
|
<!-- More screens can be added later -->
|
|
</ul>
|
|
<hr>
|
|
<button onclick="requestReboot()">Reboot to bootloader</button>
|
|
</div>
|
|
|
|
<!-- CONFIG EDITOR SCREEN -->
|
|
<div id="screen-config" class="screen">
|
|
<h2>Configuration Editor</h2>
|
|
<div id="config-container">Loading…</div>
|
|
<button id="config-save-btn" disabled>Save & Reboot</button>
|
|
</div>
|
|
|
|
<!-- PLAYLIST EDITOR SCREEN 1: list of playlists -->
|
|
<div id="screen-playlist" class="screen">
|
|
<h2>Playlist Editor</h2>
|
|
<div id="playlist-container">
|
|
<div id="playlist-new">
|
|
<label>New playlist</label>
|
|
<div class="flex-horizontal">
|
|
<input id="playlist-new-tag" type="text" placeholder="Tag ID" pattern="[0-9a-fA-F]+" style="max-width: 70%" />
|
|
<button id="playlist-new-button-gettag">Get last Tag</button>
|
|
<button id="playlist-new-button-new">New playlist</button>
|
|
</div>
|
|
</div>
|
|
<hr />
|
|
<div id="playlist-existing">
|
|
<label>Playlists</label>
|
|
<div class="scroll-container" style="margin-bottom: 10px">
|
|
<ul class="list" id="playlist-exist-list">
|
|
<li>Loading...</li>
|
|
</ul>
|
|
</div>
|
|
<div class="flex-horizontal">
|
|
<button id="playlist-exist-button-delete" style="background-color: orangered">Delete Playlist</button>
|
|
<button id="playlist-exist-button-gettag">Select last Tag</button>
|
|
<button id="playlist-exist-button-edit">Edit Playlist</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLAYLIST EDITOR SCREEN 2: playlist tracks -->
|
|
<div id="screen-playlist_edit" class="screen">
|
|
<h2>Playlist Editor</h2>
|
|
<div id="playlist-edit-container">
|
|
<div id="playlist-edit" style="gap: 10px">
|
|
<div>
|
|
<label>Playlist type</label>
|
|
<select id="playlist-edit-type">
|
|
<option value="album">Album (no shuffle, always start at beginning)</option>
|
|
<option value="audiobook">Audiobook (no shuffle, start at previous position)</option>
|
|
<option value="random">Random Collection (shuffle)</option>
|
|
<option value="audioplay">Audioplay (no shuffle, start at previous track)</option>
|
|
</select>
|
|
</div>
|
|
<div>
|
|
<label>Playlist name</label>
|
|
<input type="text" placeholder="Playlist name" id="playlist-edit-name" />
|
|
</div>
|
|
<div class="flex-horizontal">
|
|
<div style="flex-grow: 1">
|
|
<label>Tracks</label>
|
|
<div class="scroll-container">
|
|
<ul class="list" id="playlist-edit-list">
|
|
<li>Loading...</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex-vertical">
|
|
<button id="playlist-edit-trackmove-up">↑</button>
|
|
<button id="playlist-edit-trackmove-down">↓</button>
|
|
</div>
|
|
</div>
|
|
<div class="flex-horizontal">
|
|
<button id="playlist-edit-back">Cancel</button>
|
|
<button id="playlist-edit-removetrack">Remove track(s)</button>
|
|
<button id="playlist-edit-addtrack">Add track(s)</button>
|
|
<button id="playlist-edit-save">Save</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- PLAYLIST EDITOR SCREEN 3: file browser -->
|
|
<div id="screen-playlist_filebrowser" class="screen">
|
|
<h2>Playlist Editor</h2>
|
|
<div id="playlist-filebrowser-container">
|
|
<div class="scroll-container">
|
|
<div class="tree" id="playlist-filebrowser-tree">
|
|
<ul><li>Loading...</li></ul>
|
|
</div>
|
|
</div>
|
|
<div class="flex-horizontal">
|
|
<button id="playlist-filebrowser-cancel">Cancel</button>
|
|
<button id="playlist-filebrowser-delete" style="background-color: orangered">Delete selected</button>
|
|
<button id="playlist-filebrowser-addtrack">Add track(s)</button>
|
|
</div>
|
|
<hr>
|
|
<div class="flex-horizontal">
|
|
<input type="file" id="playlist-filebrowser-upload-files" multiple accept="audio/mpeg" />
|
|
<progress id="playlist-filebrowser-upload-progress" max="100" value="0" style:"flex-grow: 1">0%</progress>
|
|
<button id="playlist-filebrowser-upload">Upload</button>
|
|
</div>
|
|
<div class="flex-horizontal">
|
|
<input type="text" id="playlist-filebrowser-mkdir-name" placeholder="Directory Name" />
|
|
<button id="playlist-filebrowser-mkdir" style="width: 20%">Create directory</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="footer">
|
|
<hr>
|
|
<div class="flex-horizontal">
|
|
<div>
|
|
<a href="https://git.ka.blankertz.org/TonBERRY/tonberry-pico">TonBERRY pico</a>
|
|
</div>
|
|
<div>
|
|
Version: <span id="footer-version">unknown</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
const Screens = {};
|
|
let activeScreen = null;
|
|
/* -----------------------------
|
|
Screen switching
|
|
----------------------------- */
|
|
function showScreen(name, arg=null) {
|
|
document.querySelectorAll('.screen').forEach(s => s.classList.remove('active'));
|
|
document.getElementById('screen-' + name).classList.add('active');
|
|
|
|
activeScreen = name;
|
|
Screens[name]?.onShow?.(arg);
|
|
}
|
|
|
|
/* -----------------------------
|
|
CONFIG EDITOR LOGIC
|
|
----------------------------- */
|
|
Screens.config = (() => {
|
|
let screenroot = null;
|
|
function init() {
|
|
screenroot = document.getElementById('screen-config');
|
|
document.getElementById('config-save-btn').addEventListener('click', async () => {
|
|
const res = await fetch('/api/v1/config');
|
|
const original = await res.json();
|
|
const updated = serialize(original);
|
|
|
|
try {
|
|
const saveRes = await fetch('/api/v1/config', {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(updated, null, 2)
|
|
});
|
|
|
|
if (!saveRes.ok) {
|
|
alert("Failed to save config: " + await saveRes.text());
|
|
return;
|
|
}
|
|
|
|
alert("Configuration saved successfully, device will now reboot/shutdown! " +
|
|
"On battery, press Power button after shutdown to restart.");
|
|
await fetch('/api/v1/reboot/application', {'method': 'POST'});
|
|
} catch (err) {
|
|
alert("Error saving configuration: " + err);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function onShow() {
|
|
const container = document.getElementById('config-container');
|
|
container.innerHTML = "Loading…";
|
|
document.getElementById('config-save-btn').disabled = true;
|
|
|
|
try {
|
|
const res = await fetch('/api/v1/config');
|
|
const config = await res.json();
|
|
render(config);
|
|
} catch (err) {
|
|
container.innerHTML = "Failed to load config: " + err;
|
|
}
|
|
}
|
|
|
|
function render(config) {
|
|
const container = document.getElementById('config-container');
|
|
container.innerHTML = "";
|
|
container.appendChild(renderObject(config, "root"));
|
|
document.getElementById('config-save-btn').disabled = false;
|
|
}
|
|
|
|
const config_names = {
|
|
'root.IDLE_TIMEOUT_SECS': 'Idle Timeout (seconds)',
|
|
'root.BUTTON_MAP': 'Button map',
|
|
'root.BUTTON_MAP.NEXT': 'Next track',
|
|
'root.BUTTON_MAP.PREV': 'Previous track',
|
|
'root.BUTTON_MAP.VOLUP': 'Volume up',
|
|
'root.BUTTON_MAP.VOLDOWN': 'Volume down',
|
|
'root.BUTTON_MAP.PLAY_PAUSE': 'Play/Pause',
|
|
'root.TAG_TIMEOUT_SECS': 'Tag removal timeout (seconds)',
|
|
'root.TAGMODE': 'Tag mode',
|
|
'root.LED_COUNT': 'Length of WS2182 (Neopixel) LED chain',
|
|
'root.VOLUME_MAX': 'Maximum volume (0-255)'
|
|
};
|
|
const config_input_override = {
|
|
'root.TAGMODE': {
|
|
'element': 'select',
|
|
'values': {
|
|
'tagremains': 'Play until tag is removed',
|
|
'tagstartstop': 'Present tag once to start, present again to stop playback'
|
|
}
|
|
},
|
|
'root.BUTTON_MAP.NEXT': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.BUTTON_MAP.PREV': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.BUTTON_MAP.VOLUP': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.BUTTON_MAP.VOLDOWN': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.BUTTON_MAP.PLAY_PAUSE': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.IDLE_TIMEOUT_SECS': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.TAG_TIMEOUT_SECS': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.LED_COUNT': {
|
|
'input-type': 'number'
|
|
},
|
|
'root.WLAN.SSID': {
|
|
'input-type': 'text'
|
|
},
|
|
'root.WLAN.PASSPHRASE': {
|
|
'input-type': 'text'
|
|
},
|
|
'root.VOLUME_MAX': {
|
|
'input-type': 'number'
|
|
}
|
|
};
|
|
|
|
function renderObject(obj, path) {
|
|
const wrapper = document.createElement('div');
|
|
|
|
Object.entries(obj).forEach(([key, value]) => {
|
|
const currentPath = path + '.' + key;
|
|
const label = document.createElement('label');
|
|
if (currentPath in config_names) {
|
|
label.textContent = config_names[currentPath];
|
|
} else {
|
|
label.textContent = key;
|
|
}
|
|
|
|
if (value !== null && typeof value === 'object') {
|
|
wrapper.appendChild(label);
|
|
const nested = document.createElement('div');
|
|
nested.className = "nested";
|
|
nested.appendChild(renderObject(value, currentPath));
|
|
wrapper.appendChild(nested);
|
|
} else {
|
|
wrapper.appendChild(label);
|
|
if (currentPath in config_input_override && 'element' in config_input_override[currentPath]) {
|
|
const override = config_input_override[currentPath];
|
|
if (override['element'] === 'select') {
|
|
const input = document.createElement('select');
|
|
input.dataset.path = currentPath;
|
|
|
|
for (const val in override.values) {
|
|
const option = document.createElement('option');
|
|
option.value = val;
|
|
option.textContent = override.values[val];
|
|
if (val === value) {
|
|
option.selected = true;
|
|
}
|
|
|
|
input.appendChild(option);
|
|
}
|
|
|
|
wrapper.appendChild(input);
|
|
}
|
|
} else {
|
|
const input = document.createElement('input');
|
|
if (currentPath in config_input_override && 'input-type' in config_input_override[currentPath]) {
|
|
input.type = config_input_override[currentPath]['input-type'];
|
|
}
|
|
input.value = value === null ? "" : value;
|
|
input.dataset.path = currentPath;
|
|
|
|
wrapper.appendChild(input);
|
|
}
|
|
}
|
|
});
|
|
|
|
return wrapper;
|
|
}
|
|
|
|
function serialize(rootObj) {
|
|
const inputs = screenroot.querySelectorAll("input[data-path], select[data-path]");
|
|
|
|
inputs.forEach(input => {
|
|
const path = input.dataset.path.split('.').slice(1); // remove "root"
|
|
let current = rootObj;
|
|
|
|
for (let i = 0; i < path.length - 1; i++) {
|
|
current = current[path[i]];
|
|
}
|
|
|
|
let val = input.value.trim();
|
|
if (val === "") val = null;
|
|
else if (!isNaN(val) && input.type != 'text') val = Number(val);
|
|
|
|
current[path[path.length - 1]] = val;
|
|
});
|
|
|
|
return rootObj;
|
|
}
|
|
|
|
return { init, onShow };
|
|
})();
|
|
|
|
/* ----------------------------------------
|
|
PLAYLIST EDITOR LOGIC - SELECTION SCREEN
|
|
------------------------------------------- */
|
|
Screens.playlist = (() => {
|
|
let lastSelected = null;
|
|
|
|
function init() {
|
|
//tree.init();
|
|
document.getElementById('playlist-new-button-gettag')
|
|
.addEventListener('click', updateLastTag);
|
|
document.getElementById('playlist-new-button-new')
|
|
.addEventListener('click', (e) => {
|
|
const tagid = document.getElementById('playlist-new-tag').value;
|
|
if (/^[0-9a-fA-F]+$/.exec(tagid)) {
|
|
showScreen("playlist_edit", {create: tagid});
|
|
} else {
|
|
alert("Invalid tag id");
|
|
}
|
|
});
|
|
document.getElementById('playlist-exist-button-delete')
|
|
.addEventListener('click', (e) => {
|
|
if (lastSelected === null) return;
|
|
const tagid = lastSelected.getAttribute('data-tag');
|
|
if(confirm(`Really delete playlist ${tagid}?`)) {
|
|
fetch(`/api/v1/playlist/${tagid}`, {
|
|
method: 'DELETE'})
|
|
.then(() => showScreen('playlist'));
|
|
}
|
|
});
|
|
document.getElementById('playlist-exist-button-gettag')
|
|
.addEventListener('click', selectLastTag);
|
|
document.getElementById('playlist-exist-button-edit').addEventListener("click", (e) => {
|
|
if (lastSelected !== null)
|
|
showScreen("playlist_edit", {load: lastSelected.getAttribute('data-tag')});
|
|
});
|
|
document.getElementById('playlist-exist-list').addEventListener("click", (e) => {
|
|
const node = e.target.closest("li");
|
|
if (!node) return;
|
|
|
|
document.getElementById('playlist-exist-list')
|
|
.querySelectorAll(".selected")
|
|
.forEach(n => n.classList.remove("selected")
|
|
);
|
|
|
|
node.classList.toggle("selected");
|
|
|
|
lastSelected = node;
|
|
});
|
|
}
|
|
|
|
async function onShow() {
|
|
const container = document.getElementById('playlist-exist-list');
|
|
container.innerHTML = "<li>Loading…</li>";
|
|
//document.getElementById('playlist-save-btn').disabled = true;
|
|
|
|
fetch('/api/v1/playlists')
|
|
.then((res) => res.json())
|
|
.then((playlists) => renderPlaylistForm(playlists))
|
|
.catch((err) => {
|
|
container.innerHTML = "<li>Failed to load playlists: " + err + "</li>";
|
|
});
|
|
fetch('/api/v1/last_tag_uid')
|
|
.then((res) => res.json())
|
|
.then((tag) => {
|
|
if (tag.tag !== null) {
|
|
fillLastTag(tag);
|
|
selectTag(tag);
|
|
}
|
|
});
|
|
}
|
|
|
|
async function updateLastTag() {
|
|
fetch('/api/v1/last_tag_uid')
|
|
.then((res) => res.json())
|
|
.then((tag) => fillLastTag(tag));
|
|
}
|
|
|
|
async function selectLastTag() {
|
|
fetch('/api/v1/last_tag_uid')
|
|
.then((res) => res.json())
|
|
.then((tag) => selectTag(tag));
|
|
}
|
|
|
|
function renderPlaylistForm(playlists) {
|
|
const container = document.getElementById('playlist-exist-list');
|
|
container.innerHTML = "";
|
|
for (const playlist of playlists) {
|
|
const li = document.createElement("li");
|
|
li.innerHTML = `${playlist.name} (${playlist.tag})`;
|
|
li.className = "node"
|
|
li.setAttribute('data-tag', playlist.tag);
|
|
container.appendChild(li)
|
|
}
|
|
}
|
|
|
|
function bytesToHex(bytes) {
|
|
return bytes
|
|
.map(b => b.toString(16).padStart(2, '0'))
|
|
.join('');
|
|
}
|
|
|
|
function fillLastTag(tag) {
|
|
const container = document.getElementById('playlist-new-tag');
|
|
if (tag.tag !== null) {
|
|
container.value = bytesToHex(tag.tag);
|
|
}
|
|
}
|
|
|
|
function selectTag(tag) {
|
|
const container = document.getElementById('playlist-exist-list');
|
|
if (tag.tag === null) return;
|
|
const tagtext = bytesToHex(tag.tag);
|
|
document.getElementById('playlist-exist-list')
|
|
.querySelectorAll("li")
|
|
.forEach(n => {
|
|
if (n.getAttribute('data-tag') == tagtext) {
|
|
n.classList.add("selected");
|
|
lastSelected = n;
|
|
} else {
|
|
n.classList.remove("selected");
|
|
}
|
|
});
|
|
}
|
|
|
|
return { init, onShow };
|
|
})();
|
|
|
|
/* -----------------------------------
|
|
PLAYLIST EDITOR LOGIC - EDIT SCREEN
|
|
-------------------------------------- */
|
|
Screens.playlist_edit = (() => {
|
|
let lastSelected = null;
|
|
let playlistId = null;
|
|
|
|
function init() {
|
|
document.getElementById('playlist-edit-list').addEventListener("click", (e) => {
|
|
const node = e.target.closest("li");
|
|
if (!node) return;
|
|
|
|
if (e.ctrlKey || e.metaKey) {
|
|
node.classList.toggle("selected");
|
|
} else {
|
|
clearSelection();
|
|
node.classList.add("selected");
|
|
}
|
|
|
|
lastSelected = node;
|
|
});
|
|
document.getElementById('playlist-edit-trackmove-up').addEventListener("click", (e) => moveSelectedTracks(true));
|
|
document.getElementById('playlist-edit-trackmove-down').addEventListener("click", (e) => moveSelectedTracks(false));
|
|
document.getElementById('playlist-edit-removetrack').addEventListener("click", (e) => deleteSelectedTracks());
|
|
document.getElementById('playlist-edit-back').addEventListener("click", (e) => showScreen('playlist'));
|
|
document.getElementById('playlist-edit-addtrack').addEventListener("click", (e) => {
|
|
showScreen("playlist_filebrowser");
|
|
});
|
|
document.getElementById('playlist-edit-save').addEventListener("click", (e) => save());
|
|
}
|
|
|
|
function clearSelection() {
|
|
document.getElementById('playlist-edit-list')
|
|
.querySelectorAll(".selected")
|
|
.forEach(n => n.classList.remove("selected"));
|
|
}
|
|
|
|
async function onShow(intent) {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
if ('load' in intent) {
|
|
const playlist = intent.load;
|
|
document.getElementById('playlist-edit-save').disabled = true;
|
|
container.innerHTML = "<li>Loading…</li>";
|
|
|
|
fetch(`/api/v1/playlist/${playlist}`)
|
|
.then((res) => res.json())
|
|
.then((playlistRes) => {
|
|
playlistId = playlist;
|
|
renderPlaylistForm(playlistRes);
|
|
document.getElementById('playlist-edit-save').disabled = false;
|
|
}).catch((err) => {
|
|
container.innerHTML = "<li>Failed to load playlist: " + err + "</li>";
|
|
});
|
|
} else if ('create' in intent) {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
container.innerHTML = "";
|
|
playlistId = intent.create;
|
|
const playlisttype = document.getElementById('playlist-edit-type');
|
|
playlisttype.value = "album";
|
|
document.getElementById('playlist-edit-save').disabled = false;
|
|
} else if ('addtracks' in intent) {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
intent.addtracks.forEach((track) => {
|
|
const li = document.createElement("li");
|
|
li.innerHTML = track;
|
|
li.className = "node"
|
|
container.appendChild(li)
|
|
});
|
|
}
|
|
}
|
|
|
|
function renderPlaylistForm(playlist) {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
container.innerHTML = "";
|
|
for (const track of playlist.paths) {
|
|
const li = document.createElement("li");
|
|
li.innerHTML = track;
|
|
li.className = "node"
|
|
container.appendChild(li)
|
|
}
|
|
const playlisttype = document.getElementById('playlist-edit-type');
|
|
if (playlist.persist === "no" && playlist.shuffle === "no") {
|
|
playlisttype.value = "album";
|
|
} else if (playlist.persist === "offset" && playlist.shuffle === "no") {
|
|
playlisttype.value = "audiobook";
|
|
} else if (playlist.persist === "no" && playlist.shuffle === "yes") {
|
|
playlisttype.value = "random";
|
|
} else if (playlist.persist === "track" && playlist.shuffle === "no") {
|
|
playlisttype.value = "audioplay";
|
|
}
|
|
const playlistname = document.getElementById('playlist-edit-name');
|
|
playlistname.value = playlist.name;
|
|
}
|
|
|
|
async function save() {
|
|
const playlistData = {};
|
|
switch(document.getElementById('playlist-edit-type').value) {
|
|
case "album":
|
|
playlistData.persist = "no";
|
|
playlistData.shuffle = "no";
|
|
break;
|
|
case "audiobook":
|
|
playlistData.persist = "offset";
|
|
playlistData.shuffle = "no";
|
|
break;
|
|
case "random":
|
|
playlistData.persist = "no";
|
|
playlistData.shuffle = "yes";
|
|
break;
|
|
case "audioplay":
|
|
playlistData.persist = "track";
|
|
playlistData.shuffle = "no";
|
|
break;
|
|
}
|
|
const playlistname = document.getElementById('playlist-edit-name');
|
|
playlistData.name = playlistname.value;
|
|
const container = document.getElementById('playlist-edit-list');
|
|
playlistData.paths = [...container.querySelectorAll("li")].map((node) => node.innerText);
|
|
const saveRes = await fetch(`/api/v1/playlist/${playlistId}`,
|
|
{
|
|
method: 'PUT',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(playlistData)});
|
|
|
|
if (!saveRes.ok) {
|
|
alert("Failed to save playlist: " + await saveRes.text());
|
|
return;
|
|
}
|
|
showScreen('playlist');
|
|
}
|
|
|
|
function moveSelectedTracks(up) {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
let selected_nodes = [...container.querySelectorAll(".selected")];
|
|
if (!up) {
|
|
selected_nodes = selected_nodes.reverse()
|
|
}
|
|
for (node of selected_nodes) {
|
|
const sibling = up ? node.previousElementSibling : node.nextElementSibling;
|
|
if (sibling === null ||
|
|
sibling.classList.contains("selected")) continue;
|
|
container.insertBefore(node, up ? sibling : sibling.nextElementSibling);
|
|
}
|
|
}
|
|
|
|
function deleteSelectedTracks() {
|
|
const container = document.getElementById('playlist-edit-list');
|
|
container.querySelectorAll(".selected").forEach((node) => node.remove());
|
|
}
|
|
|
|
return { init, onShow };
|
|
})();
|
|
|
|
/* ----------------------------------------
|
|
PLAYLIST EDITOR LOGIC - ADD FILES SCREEN
|
|
------------------------------------------- */
|
|
Screens.playlist_filebrowser = (() => {
|
|
function init() {
|
|
document.getElementById('playlist-filebrowser-cancel').addEventListener("click", (e) => {
|
|
showScreen("playlist_edit", {});
|
|
});
|
|
document.getElementById('playlist-filebrowser-addtrack').addEventListener("click", (e) => {
|
|
returnSelectedTracks();
|
|
});
|
|
document.getElementById('playlist-filebrowser-upload').addEventListener("click", (e) => {
|
|
uploadFiles();
|
|
});
|
|
document.getElementById('playlist-filebrowser-mkdir').addEventListener("click", (e) => {
|
|
createDirectory();
|
|
});
|
|
document.getElementById('playlist-filebrowser-delete').addEventListener("click", (e) => {
|
|
deleteItems();
|
|
});
|
|
tree.init();
|
|
}
|
|
|
|
async function onShow(intent) {
|
|
document.getElementById('playlist-filebrowser-addtrack').disabled = true;
|
|
tree = document.getElementById("playlist-filebrowser-tree");
|
|
tree.innerHTML = "Loading...";
|
|
fetch('/api/v1/audiofiles')
|
|
.then((res) => res.json())
|
|
.then((files) => renderFilebrowserForm(files))
|
|
.catch((err) => {
|
|
alert("Failed to load file list: " + err);
|
|
});
|
|
}
|
|
|
|
function findChildByName(node, name) {
|
|
for (const child of node.querySelectorAll(':scope > li')) {
|
|
const childLabel = child.querySelector(':scope > span.node');
|
|
if (childLabel.innerText === name)
|
|
return child.querySelector(':scope > ul');
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function addTreeNode(parent, name, type, data) {
|
|
const node = document.createElement('li');
|
|
const caret = document.createElement('span');
|
|
const label = document.createElement('span');
|
|
caret.className = 'caret';
|
|
label.className = 'node';
|
|
label.innerText = name;
|
|
node.appendChild(caret);
|
|
node.appendChild(label);
|
|
if (data !== null)
|
|
label.setAttribute('data-path', data);
|
|
label.setAttribute('data-type', type);
|
|
if (type === 'directory') {
|
|
const nested = document.createElement('ul');
|
|
node.appendChild(nested);
|
|
node.classList.add('expanded');
|
|
parent.appendChild(node);
|
|
return nested;
|
|
}
|
|
parent.appendChild(node);
|
|
return null;
|
|
}
|
|
|
|
function renderFilebrowserForm(files) {
|
|
const tree = document.getElementById("playlist-filebrowser-tree");
|
|
tree.innerHTML = "";
|
|
const rootnode = document.createElement('ul');
|
|
tree.appendChild(rootnode);
|
|
|
|
files.sort((a, b) => a.name < b.name ? -1 : (a.name > b.name ? 1 : 0));
|
|
for (const file of files) {
|
|
const path = file.name.split('/').slice(1);
|
|
let treeIterator = rootnode;
|
|
let curPath = ''
|
|
for (const elem of path) {
|
|
curPath += '/' + elem;
|
|
let node = findChildByName(treeIterator, elem);
|
|
if (node === null) {
|
|
node = addTreeNode(treeIterator, elem, file.type, curPath);
|
|
}
|
|
treeIterator = node;
|
|
}
|
|
}
|
|
|
|
document.getElementById('playlist-filebrowser-addtrack').disabled = false;
|
|
}
|
|
|
|
function returnSelectedTracks() {
|
|
const tree = document.getElementById("playlist-filebrowser-tree");
|
|
const selectedNodes = [...tree.querySelectorAll(".selected")];
|
|
const tracks = [];
|
|
for (const node of selectedNodes) {
|
|
if (node.getAttribute('data-type') === "file") {
|
|
tracks.push(node.getAttribute('data-path'));
|
|
} else {
|
|
// recursivly add directory contents
|
|
for (const child of node.parentNode.querySelector('ul').querySelectorAll("span.node")) {
|
|
if (child.getAttribute('data-type') === "file")
|
|
tracks.push(child.getAttribute('data-path'));
|
|
}
|
|
}
|
|
}
|
|
showScreen("playlist_edit", {addtracks: tracks});
|
|
}
|
|
|
|
function uploadFiles() {
|
|
const tree = document.getElementById("playlist-filebrowser-tree");
|
|
const selectedNodes = [...tree.querySelectorAll(".selected")];
|
|
const files = [...document.getElementById("playlist-filebrowser-upload-files").files];
|
|
if (selectedNodes.length !== 1 ||
|
|
selectedNodes[0].getAttribute('data-type') !== "directory") {
|
|
alert("Please select a single directory for upload");
|
|
return;
|
|
}
|
|
uploadFileHelper(files.length, 0, selectedNodes[0].getAttribute('data-path'), files);
|
|
}
|
|
|
|
function uploadFileHelper(totalcount, donecount, destdir, files) {
|
|
// Upload files sequentially by recursivly calling this function from the 'load' callback when
|
|
// the previous upload is completed.
|
|
if (files.length === 0)
|
|
return;
|
|
const reader = new FileReader();
|
|
const ctrl = document.getElementById("playlist-filebrowser-upload-progress");
|
|
const xhr = new XMLHttpRequest();
|
|
const location = destdir + '/' + files[0].name;
|
|
|
|
xhr.upload.addEventListener("progress", (e) => {
|
|
if (e.lengthComputable) {
|
|
const percentage = Math.round((e.loaded * 100) / e.total / totalcount + donecount * 100 / totalcount);
|
|
ctrl.value = percentage;
|
|
}
|
|
});
|
|
//xhr.upload.addEventListener("load", (e) => {
|
|
xhr.onreadystatechange = () => {
|
|
if (xhr.readyState === XMLHttpRequest.DONE) {
|
|
if (xhr.status !== 204) {
|
|
alert(`File upload failed: ${xhr.responseText} (${xhr.status})`);
|
|
return;
|
|
}
|
|
if (donecount + 1 === totalcount) {
|
|
// Reload file list from device
|
|
onShow();
|
|
} else {
|
|
uploadFileHelper(totalcount, donecount + 1, destdir, files.slice(1));
|
|
}
|
|
}
|
|
};
|
|
xhr.open("POST", `/api/v1/audiofiles?type=file&location=${location}`);
|
|
xhr.overrideMimeType("audio/mpeg");
|
|
xhr.send(files[0]);
|
|
}
|
|
|
|
async function createDirectory() {
|
|
const name = document.getElementById('playlist-filebrowser-mkdir-name');
|
|
const selectedNodes = [...tree.querySelectorAll(".selected")];
|
|
const files = [...document.getElementById("playlist-filebrowser-upload-files").files];
|
|
if (selectedNodes.length > 1 ||
|
|
(selectedNodes.length === 1 &&
|
|
selectedNodes[0].getAttribute('data-type') !== "directory")) {
|
|
alert("Please select a single directory for upload");
|
|
return;
|
|
}
|
|
const location = selectedNodes.length === 1
|
|
? selectedNodes[0].getAttribute('data-path') + '/' + name.value
|
|
: '/' + name.value;
|
|
const saveRes = await fetch(`/api/v1/audiofiles?type=directory&location=${location}`,
|
|
{method: 'POST'});
|
|
// Reload file list from device
|
|
onShow();
|
|
}
|
|
|
|
async function deleteItems() {
|
|
const tree = document.getElementById("playlist-filebrowser-tree");
|
|
const selectedNodes = [...tree.querySelectorAll(".selected")];
|
|
if (selectedNodes.length === 0) {
|
|
alert("Please select something to delete");
|
|
return;
|
|
}
|
|
const items = selectedNodes.map(n => n.getAttribute('data-path'));
|
|
items.sort();
|
|
items.reverse();
|
|
for (const item of items) {
|
|
const saveRes = await fetch(`/api/v1/audiofiles?location=${item}`,
|
|
{method: 'DELETE'});
|
|
if (!saveRes.ok) {
|
|
alert(`Failed to delete item ${item}: ${await saveRes.text()}`);
|
|
}
|
|
}
|
|
// Reload file list from device
|
|
onShow();
|
|
}
|
|
|
|
let tree = (() => {
|
|
let tree = null;
|
|
function init() {
|
|
tree = document.getElementById("playlist-filebrowser-tree");
|
|
tree.addEventListener("click", (e) => {
|
|
// CARET CLICK → expand/collapse
|
|
const caret = e.target.closest(".caret");
|
|
if (caret) {
|
|
const li = caret.parentElement;
|
|
if (li.querySelector("ul")) {
|
|
li.classList.toggle("expanded");
|
|
}
|
|
return; // IMPORTANT: don't affect selection
|
|
}
|
|
|
|
// NODE LABEL CLICK → selection only
|
|
const node = e.target.closest(".node");
|
|
if (!node) return;
|
|
|
|
if (e.shiftKey && lastSelected) {
|
|
selectRange(lastSelected, node);
|
|
} else if (e.ctrlKey || e.metaKey) {
|
|
node.classList.toggle("selected");
|
|
} else {
|
|
clearSelection();
|
|
node.classList.add("selected");
|
|
}
|
|
|
|
lastSelected = node;
|
|
});
|
|
}
|
|
|
|
function clearSelection() {
|
|
tree.querySelectorAll(".selected").forEach(n =>
|
|
n.classList.remove("selected")
|
|
);
|
|
}
|
|
|
|
function selectRange(start, end) {
|
|
const nodes = [...tree.querySelectorAll(".node")];
|
|
const startIndex = nodes.indexOf(start);
|
|
const endIndex = nodes.indexOf(end);
|
|
|
|
const [from, to] = startIndex < endIndex
|
|
? [startIndex, endIndex]
|
|
: [endIndex, startIndex];
|
|
|
|
clearSelection();
|
|
nodes.slice(from, to + 1).forEach(n =>
|
|
n.classList.add("selected")
|
|
);
|
|
}
|
|
|
|
return { init };
|
|
})();
|
|
|
|
return { init, onShow };
|
|
})();
|
|
|
|
// Misc
|
|
async function requestReboot() {
|
|
const resp = await fetch('/api/v1/reboot/bootloader', {'method': 'POST'});
|
|
if (!resp.ok) {
|
|
alert('Reboot to bootloader failed: ' + await resp.text());
|
|
}
|
|
}
|
|
|
|
// Initialization
|
|
Object.values(Screens).forEach(screen => {
|
|
screen.init?.();
|
|
});
|
|
|
|
showScreen("menu");
|
|
|
|
fetch('/api/v1/info')
|
|
.then((resp) => resp.json())
|
|
.then((info) => {
|
|
const version = document.getElementById('footer-version');
|
|
version.innerText = info.version;
|
|
});
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|