src/config.js

@@ -12,8 +12,9 @@ const reservedMappings = ["u", "s"];
  * Load mappings, create a table showing them with a "remove" button each
  */
 function renderMappings() {
-    // console.log(localStorage.getItem('mappings'));
+    console.log(localStorage.getItem('mappings'));
     const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
+    console.log(typeof mappings);
     const tbody = document.querySelector('#mappingTable tbody');
     tbody.innerHTML = ''; // clear table body
     mappings.forEach((directory, key) => {

src/index.html

@@ -36,7 +36,7 @@
     </main>
     <footer>
         <!-- <div class="keydebug">Key: <span id="keydebug"></span></div> -->
-        <div class="statusline">Status: <span id="status">Loading</span></div>
+        <div class="statusline">Status: <span id="status"></span></div>
         <!-- Imgsort 2 by Matthias Quintern -->
     </footer>
 </body>

src/index.js

@@ -5,7 +5,7 @@ const audioExtensions =['mp3', 'ogg', 'wav', 'flac'];
 const mappings = new Map(JSON.parse(localStorage.getItem('mappings')) || []);
 let statusLine = document.getElementById('status');
 // store for when done with sorting TODO display
-let splash = document.getElementById('current-file').innerHTML;
+let initialContent = document.getElementById('current-file').innerHTML;
 
 let history = [];
 
@@ -19,10 +19,11 @@ let history = [];
 function showServerError(fname, status, text) {
     if (status == 500) {
         message = `in ${fname}: server returned ${status}: '${text}'`;
-    } else {
+    else {
         message = `in ${fname}: server returned ${status}`;
+
     }
-    statusLine.textContent = message;
+    statusLine.innerHTML = message
     console.error(message);
 }
 
@@ -142,12 +143,8 @@ function renderCurrentFile() {
     // }
     const currentFileDiv = document.getElementById('current-file');
     currentFileDiv.innerHTML = "";
-    if (currentFile) {
-        let element = createMediaFileElement(currentFile, true);
-        currentFileDiv.appendChild(element);
-    } else {
-        currentFileDiv.innerHTML = splash;
-    }
+    let element = createMediaFileElement(currentFile, true);
+    currentFileDiv.appendChild(element);
 }
 
 
@@ -171,12 +168,7 @@ function preloadNextFile() {
 
 // set the currentFile variable according to currentFileIdx
 function setCurrentFile() {
-    // check configuration
-    if (mappings.size == 0) {
-        statusLine.textContent = "No mappings configured - Click 'Configure' first";
-        return;
-    }
-    // if none set and there are files
+    // if none set and
     if (currentFileIdx == null && fileList.length > 0) {
         currentFileIdx = 0;
     }
@@ -192,7 +184,6 @@ function setCurrentFile() {
     else {
         currentFileIdx = null;
         currentFile = "";
-        statusLine.textContent = "No more files to sort";
     }
     renderCurrentFile();
     renderFileList();
@@ -209,7 +200,7 @@ async function moveFile(directory) {
     const text = await response.text();
     // console.log(text);
     if (response.ok) {
-        statusLine.textContent = `Moved '${currentFile}' to '${directory}'`;
+        statusLine.innerHTML = `Moved '${currentFile}' to '${directory}'`;
         history.push([currentFile, directory]);
         // remove file from list
         fileList.splice(currentFileIdx, 1);
@@ -225,7 +216,7 @@ async function moveFile(directory) {
 
 async function undo() {
     if (!history.length > 0) {
-        statusLine.textContent = "Nothing to undo"
+        statusLine.innerHTML = "Nothing to undo"
         return;
     }
     const [file, directory] = history.pop();
@@ -257,7 +248,6 @@ async function initialize() {
     renderFileList();
     // setCurrentFile();
     preloadNextFile();
-    statusLine.textContent = "Loaded";
 }
 
 // load existing mappings on page load

src/style.css

@@ -183,7 +183,6 @@ button:hover {
   width: 100%;
   height: 300px;
   position: relative;
-  overflow: scroll;
 }
 .current-file .imgsort2 {
   font-size: 3rem;