trying to read sub directories

.gitignore

@@ -1,2 +1,3 @@
 node_modules
 package-lock.json
+test-library

src/main.js

@@ -59,18 +59,19 @@ app.on('window-all-closed', () => {
         app.quit();
 });
 
-ipcMain.handle('readMusicLibrary', function(event, path) {
-    let files = fs.promises.readdir(path)
-        .then(function(files) {
-            if (files) {
-                return files;
-            } else {
-                return -1;
+ipcMain.handle('readDir', async function(event, path) {
+    const options = {
+        "withFileTypes" : true
+    };
+
+    let files = await fs.promises.readdir(path, options);
+
+    // This needs to be here because the way Electron passes objects doesn't pass methods
+    for (const i in files) {
+        let file = files[i];
+
+        files[i].isDirectory = file.isDirectory();
     }
-        })
-        .catch(err => {
-            console.log(err);
-        });
 
     return files;
 });

src/preload.js

@@ -18,7 +18,7 @@ contextBridge.exposeInMainWorld('api', {
     getAudioInfo: function(url) {
         return ipcRenderer.invoke('getAudioInfo', url);
     },
-    readMusicLibrary: function(path) {
-        return ipcRenderer.invoke('readMusicLibrary', path);
+    readDir: function(path) {
+        return ipcRenderer.invoke('readDir', path);
     }
 });

src/renderer.js

@@ -9,11 +9,18 @@ console.log('test');
 // const path = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\ChangelingForest.mp3';
 const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
 
-let libEntryPathes;
+let library;
 
 let currentlyPlaying;
 let currentlyPlayingPath;
 
+class Dir {
+    constructor(path, children) {
+        this.path = path;
+        this.children = children;
+    }
+}
+
 // const player = new Audio(url);
 
 // let info = window.api.getAudioInfo(url);
@@ -21,32 +28,63 @@ let currentlyPlayingPath;
 //     const info =  await window.api.getAudioInfo(path);
 //     console.log(info);
 // };
-async function getLibraryFiles() {
-    return await window.api.readMusicLibrary(libPath);
+async function readDir(path) {
+    return await window.api.readDir(path);
 }
 
+async function readChildren(path) {
+    let dirChildren = await readDir(path);
+
+    let children = [];
+    for (const i in dirChildren) {
+        let child = dirChildren[i];
+
+        if (child.isDirectory) {
+            children.push(await readChildren(child.path));
+        } else {
+            children.push(child);
+        }
+    }
+
+    return children;
+}
 
 // Load Library
 document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
-    libEntryPathes = await getLibraryFiles();
+    libEntryPathes = await readDir(libPath);
+
+    let dirChildren = await readChildren(libPath);
+
+    let dirTest = new Dir(libPath, dirChildren);
+
+    console.log(dirTest);
+
     console.log(libEntryPathes);
 
     for (const file_i in libEntryPathes) {
-        libContentDisplay.innerHTML += `<div class="LibEntry" id="${file_i}">${libEntryPathes[file_i]}</div>`;
+        const dirent = libEntryPathes[file_i];
+
+        const filename = dirent.name;
+
+        if (dirent.isDirectory) {
+            libContentDisplay.innerHTML += `<div class="LibDir" id=${file_i}>${filename}</div`;
+        } else {
+            libContentDisplay.innerHTML += `<div class="LibEntry" id="${file_i}">${filename}</div>`;
+        }
     }
 });
 
 // Click events for library contents
-document.addEventListener('DOMContentLoaded', () => {
+document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
     libContentDisplay.addEventListener('click', (e) => {
         if (e.target.className == 'LibEntry') {
             console.log(e);
             let file_id = parseInt(e.target.id);
-            let audioPath = libPath + libEntryPathes[file_id];
+            let audioPath = libEntryPathes[file_id].path + libEntryPathes[file_id].name;
 
             console.log(`Audio Path: ${audioPath}`);
 
@@ -61,6 +99,8 @@ document.addEventListener('DOMContentLoaded', () => {
                 .catch(e => {
                     console.error(`Audio failed to play with ${e}`);
                 });
+        } else if (e.target.className == 'LibDir') {
+            let dirContents = readDir()
         }
     });
 });
@@ -123,8 +163,8 @@ async function updateSongInfo() {
     }
 
     let mediaTags = await window.api.getAudioInfo(currentlyPlayingPath);
-    console.log(mediaTags);
-    console.log(currentlyPlaying);
+    // console.log(mediaTags);
+    // console.log(currentlyPlaying);
 
     if (mediaTags.title) {
         songName.innerText = mediaTags.title;

src/style.css

@@ -1,6 +1,7 @@
 body {
     background-color: #292929;
     color: white;
+    font-family: Arial, Helvetica, sans-serif;
 }
 
 .SongInfo {
@@ -22,6 +23,7 @@ body {
 
 .PlayingInfo {
     margin: 0 0.5em;
+    min-width: 10%;
 }
 
 #ProgressBar {
@@ -39,3 +41,12 @@ body {
     /* height: 1em; */
     background-color: white;
 }
+
+.LibEntry {
+    text-indent: 1em;
+}
+
+.LibDir {
+    color: lightblue;
+    text-indent: 1em;
+}