got a lot working

package.json

@@ -3,6 +3,7 @@
   "version": "1.0.0",
   "description": "SSPM Simply Plays Music",
   "main": "src/main.js",
+  "type": "module",
   "scripts": {
     "start": "electron .",
     "test": "echo \"Error: no test specified\" && exit 1"
@@ -13,6 +14,7 @@
     "electron": "^33.0.1"
   },
   "dependencies": {
-    "@electron/remote": "^2.1.2"
+    "id3js": "^2.1.1",
+    "mp3-duration": "^1.1.0"
   }
 }

src/id3-parse.js

@@ -0,0 +1,16 @@
+const id3 = require('id3js');
+const ipcMain = require('ipc-main');
+
+ipcMain.on('getAudioInfo', function(event, file) {
+    let id3tags;
+
+    id3.fromFile(file).then(function(tags) {
+        id3tags = tags;
+    }).catch(function(reason) {
+        console.log(reason);
+    })
+
+    return id3tags;
+});
+
+

src/index.html

@@ -11,11 +11,12 @@
         http-equiv="X-Content-Security-Policy"
         content="default-src 'self'; script-src 'self'"
         />
-    <title>Hello from Electron renderer!</title>
+        <title>Menu</title>
     </head>
     <body>
-    <h1>Hello from Electron renderer!</h1>
-    <p>👋</p>
+        <div class="LibHeader">Library</div>
+        <div class="LibContents" id="libContents"></div>
     </body>
     <script src="./renderer.js"></script>
+    <link id="style" rel="stylesheet" href="./style.css">
 </html>

src/main.js

@@ -1,16 +1,25 @@
-const { app, BrowserWindow } = require('electron');
-// const { initialize, enable } = require('@electron/remote/main');
-const path = require('node:path');
+// const { app, BrowserWindow, ipcMain } = require('electron');
+// const { fromUrl } = require('id3js');
+// const path = require('node:path');
 
+import { app, BrowserWindow, ipcMain } from 'electron';
+import { fromPath } from 'id3js';
+import path from 'node:path';
+import { dirname } from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { readdir, promises } from 'fs';
 
-// initialize();
+let win;
 
 const createWindow = () => {
-    const win = new BrowserWindow({
+    const filename = fileURLToPath(import.meta.url);
+
+    win = new BrowserWindow({
         width: 800,
         height: 600,
         webPreferences: {
-            preload: path.join(__dirname, 'preload.js')
+            preload: path.join(dirname(filename), 'preload.js'),
+            contextIsolation: true
         }
     });
 
@@ -19,6 +28,18 @@ const createWindow = () => {
 };
 
 app.whenReady().then(() => {
+    // ipcMain.handle('getAudioInfo', function(event, url) {
+    //     let info;
+
+    //     fromUrl(url).then(function(tags) {
+    //         info = tags;
+    //     }).catch(function(reason) {
+    //         console.log(reason);
+    //     });
+
+    //     return info;
+    // });
+
     createWindow();
 
     app.on('activate', () => {
@@ -32,4 +53,43 @@ app.on('window-all-closed', () => {
         app.quit();
 });
 
+ipcMain.handle('readMusicLibrary', function(event, path) {
+    let files = promises.readdir(path)
+        .then(function(files) {
+            if (files) {
+                return files;
+            } else {
+                return -1;
+            }
+        })
+        .catch(err => {
+            console.log(err);
+        });
+
+    return files;
+});
+
+ipcMain.handle('getAudioInfo', function(event, url) {
+    let id3tags = fromPath(url).then(function(tags) {
+        return tags;
+    }).catch(function(reason) {
+        console.log(reason);
+    })
+
+    return id3tags;
+});
+
+// function getAudioInfo(url) {
+//     let info;
+
+//     fromUrl(url).then((tags) => {
+//         info = tags;
+//     });
+
+//     return info;
+// }
+
+// ipcMain.on('A', (event, args) => {
+
+// });
 

src/preload.js

@@ -1,7 +1,24 @@
-const { contextBridge } = require('electron/renderer')
+const { ipcRenderer, contextBridge } = require('electron/renderer');
+// const { fromUrl } = require('id3js');
 
-contextBridge.exposeInMainWorld('versions', {
-  node: () => process.versions.node,
-  chrome: () => process.versions.chrome,
-  electron: () => process.versions.electron
-})
+// import { ipcRenderer, contextBridge, ipcMain } from "electron";
+// import Main from "electron/main";
+// import { fromUrl } from "id3js";
+
+contextBridge.exposeInMainWorld('api', {
+    // sendToA: function() {
+    //     ipcRenderer.send('A');
+    // },
+    // recieveFromD: function(func){
+    //     ipcRenderer.on('D', (event, args) => func(event, args));
+    // },
+    // getAudioInfo: function(url) {
+    //     return Main.getAudioInfo(url);
+    // }
+    getAudioInfo: function(url) {
+        return ipcRenderer.invoke('getAudioInfo', url);
+    },
+    readMusicLibrary: function(path) {
+        return ipcRenderer.invoke('readMusicLibrary', path);
+    }
+});

src/renderer.js

@@ -1,6 +1,40 @@
+// const { fromUrl } = require('id3js');
+// const { fromUrl } = id3js;
+
+// import fromUrl from id3js;
+
 console.log('test');
 
-const player = new Audio('file://C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test.mp3');
-player.play().catch(e =>
-    console.error("Audio play failed with " + e)
-);
+// const url = 'file://C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test.ogg';
+// const path = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\ChangelingForest.mp3';
+const libPath = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test-library\\'
+
+// const player = new Audio(url);
+
+// let info = window.api.getAudioInfo(url);
+// const test = async function() {
+//     const info =  await window.api.getAudioInfo(path);
+//     console.log(info);
+// };
+async function getLibraryFiles() {
+    const dirInfo = await window.api.readMusicLibrary(libPath);
+    console.log(dirInfo);
+}
+
+
+document.addEventListener('DOMContentLoaded', async () => {
+    const libContentDisplay = document.getElementById('libContents');
+
+    let files = await getLibraryFiles();
+});
+
+// fromUrl(url).then((tags) => {
+//     console.log(tags);
+// });
+
+// player.play().catch(e =>
+//     console.error("Audio play failed with " + e)
+// );
+
+
+// https://www.debugandrelease.com/the-ultimate-electron-guide/ seems decent