From bd15a4509055800ea0ce0763b08d41ed65b76c8b Mon Sep 17 00:00:00 2001 From: Stefan Kratochwil Date: Wed, 14 Jan 2026 00:16:35 +0100 Subject: [PATCH 1/4] feat: filesystem browser button in nav bar Previously, the playlist_filebrowser always contained a 'cancel' and 'add tracks' button, because it was used in context of the playlist editor only. The playlist_filebrowser now differentiates between the intents it is being used with. In context of the new filesystem browser button, the 'cancel' and 'add tracks' buttons are actively hidden. --- software/frontend/index.html | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/software/frontend/index.html b/software/frontend/index.html index 43de408..a36fa06 100644 --- a/software/frontend/index.html +++ b/software/frontend/index.html @@ -147,6 +147,7 @@ + @@ -243,7 +244,7 @@
-

Playlist Editor

+

Playlist Editor

@@ -787,6 +788,8 @@ PLAYLIST EDITOR LOGIC - ADD FILES SCREEN ------------------------------------------- */ Screens.playlist_filebrowser = (() => { + let isFilesystemMode = false; + function init() { document.getElementById('playlist-filebrowser-cancel').addEventListener("click", (e) => { showScreen("playlist_edit", {}); @@ -805,13 +808,32 @@ }); tree.init(); } - + async function onShow(intent) { + console.log(intent) document.getElementById('playlist-filebrowser-addtrack').disabled = true; + + const title = document.getElementById('playlist-filebrowser-title'); + const cancelButton = document.getElementById('playlist-filebrowser-cancel'); + const addTracksButton = document.getElementById('playlist-filebrowser-addtrack'); + if (intent !== 'refresh') { + isFilesystemMode = (intent === 'filesystem'); + document.getElementById('playlist-filebrowser-upload-progress').value = 0; document.getElementById("playlist-filebrowser-upload-files").value = ""; } + + if (isFilesystemMode) { + title.innerText = "Filesystem"; + cancelButton.style.display = 'none'; + addTracksButton.style.display = 'none'; + } else { + title.innerText = "Playlist Editor"; + cancelButton.style.display = '' + addTracksButton.style.display = '' + } + tree = document.getElementById("playlist-filebrowser-tree"); tree.innerHTML = "Loading..."; fetch('/api/v1/audiofiles') From 4e9a902a1c417ba9b2abd775a34913ab4bf8cff1 Mon Sep 17 00:00:00 2001 From: Stefan Kratochwil Date: Wed, 14 Jan 2026 00:46:22 +0100 Subject: [PATCH 2/4] doc: added documentation for CORS error mitigation during ui development --- DEVELOP.md | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/DEVELOP.md b/DEVELOP.md index 9de3655..62c2ded 100644 --- a/DEVELOP.md +++ b/DEVELOP.md @@ -52,3 +52,23 @@ would be stored in the following key/value pairs in the btree db: * 00aa11bb22/playlist/00000: a.mp3 * 00aa11bb22/playlist/00001: b.mp3 * 00aa11bb22/playlistpos: 00000 + +## Notes for UI development with chromium + +Features for the web interface are best prototyped in a browser directly. By using the built-in developmer tools and +and their "override" feature, the web contents are replaced by a locally stored copy, which can be used to directly +test the modifications without going all the way through the build and flash process. + +However, modern browsers may restrict or even completely forbid the execution of dynamic content like JavaScript, if +the content is stored on the local machine and/or the content is accessed using http. In such a case, chromium issues +an error message similar to the following one: + +> Access to fetch at 'http://192.168.4.1/api/v1/audiofiles' from origin 'http://192.168.4.1' has been blocked by CORS +> policy: The request client is not a secure context and the resource is in more-private address space `local`. + +To mitigate this, chromium offers two flags that need modification: +- 'chrome://flags/#local-network-access-check' must be `Disabled` +- 'chrome://flags/#unsafely-treat-insecure-origin-as-secure' must be `Enabled` + +Note that these settings leave the browser susceptible to security issues and should be returned to +their default values as soon as possible. From f9a82c121e961dc6d7c0d8fceb1b04b838aad180 Mon Sep 17 00:00:00 2001 From: Stefan Kratochwil Date: Tue, 27 Jan 2026 20:19:07 +0100 Subject: [PATCH 3/4] feat: make intents explicit and rename screen accordingly --- software/frontend/index.html | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/software/frontend/index.html b/software/frontend/index.html index a36fa06..6e6068f 100644 --- a/software/frontend/index.html +++ b/software/frontend/index.html @@ -147,7 +147,7 @@ - + @@ -243,7 +243,7 @@
-
+

Playlist Editor

@@ -655,7 +655,7 @@ 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"); + showScreen("filebrowser", "playlist"); }); document.getElementById('playlist-edit-save').addEventListener("click", (e) => save()); } @@ -787,7 +787,7 @@ /* ---------------------------------------- PLAYLIST EDITOR LOGIC - ADD FILES SCREEN ------------------------------------------- */ - Screens.playlist_filebrowser = (() => { + Screens.filebrowser = (() => { let isFilesystemMode = false; function init() { From 69fbb15bca8ea3fae42a625c19203453b13dc75b Mon Sep 17 00:00:00 2001 From: Stefan Kratochwil Date: Tue, 27 Jan 2026 20:20:22 +0100 Subject: [PATCH 4/4] feat: unify bottom margin between scroll container and buttons --- software/frontend/index.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/software/frontend/index.html b/software/frontend/index.html index 6e6068f..7f82628 100644 --- a/software/frontend/index.html +++ b/software/frontend/index.html @@ -246,7 +246,7 @@

Playlist Editor

-
+
  • Loading...