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. diff --git a/software/frontend/index.html b/software/frontend/index.html index 4a56059..9fa3e13 100644 --- a/software/frontend/index.html +++ b/software/frontend/index.html @@ -147,6 +147,7 @@ + @@ -242,10 +243,10 @@ -
-

Playlist Editor

+
+

Playlist Editor

-
+
  • Loading...
@@ -654,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()); } @@ -786,7 +787,9 @@ /* ---------------------------------------- PLAYLIST EDITOR LOGIC - ADD FILES SCREEN ------------------------------------------- */ - Screens.playlist_filebrowser = (() => { + Screens.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')