changed the id3 tag lib and made some screens better

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "id3js": "^2.1.1",
-    "mp3-duration": "^1.1.0"
+    "mp3-duration": "^1.1.0",
+    "node-id3": "^0.2.6"
   }
 }

src/index.html

@@ -15,10 +15,17 @@
         <script src="./renderer.js"></script>
     </head>
     <body>
-        <div class="PlayerControls" id="controls">
+        <div class="Controls" id="controls">
             <button id="play">Play</button>
             <button id="pause">Pause</button>
         </div>
+        <div class="SongInfo">
+            <div class="PlayingInfo" id="songName"></div>
+            <div class="PlayingInfo" id="durationInfo">0:00 / 0:00</div>
+            <div class="PlayingInfo" id="ProgressBar">
+                <div id="CurrentPlace"></div>
+            </div>
+        </div>
         <div class="Library">
             <h1>Library</h1>
             <div class="LibContents" id="libContents">

src/main.js

@@ -3,11 +3,17 @@
 // const path = require('node:path');
 
 import { app, BrowserWindow, ipcMain } from 'electron';
-import { fromPath } from 'id3js';
+import { Buffer } from 'node:buffer';
+// import { fromPath } from 'id3js';
+// import { read } from 'node-id3';
 import path from 'node:path';
 import { dirname } from 'node:path';
 import { fileURLToPath } from 'node:url';
-import { readdir, promises } from 'fs';
+// import { readdir, promises } from 'fs';
+// import { readFileSync } from 'node:fs';
+
+import NodeID3 from 'node-id3';
+import fs from 'node:fs';
 
 let win;
 
@@ -54,7 +60,7 @@ app.on('window-all-closed', () => {
 });
 
 ipcMain.handle('readMusicLibrary', function(event, path) {
-    let files = promises.readdir(path)
+    let files = fs.promises.readdir(path)
         .then(function(files) {
             if (files) {
                 return files;
@@ -69,12 +75,15 @@ ipcMain.handle('readMusicLibrary', function(event, path) {
     return files;
 });
 
-ipcMain.handle('getAudioInfo', function(event, url) {
+ipcMain.handle('getAudioInfo', function(event, path) {
-    let id3tags = fromPath(url).then(function(tags) {
+    // let id3tags = fromPath(url).then(function(tags) {
-        return tags;
+    //     return tags;
-    }).catch(function(reason) {
+    // }).catch(function(reason) {
-        console.log(reason);
+    //     console.log(reason);
-    })
+    // })
+
+    const filebuffer = fs.readFileSync(path);
+    let id3tags = NodeID3.read(filebuffer);
 
     return id3tags;
 });

src/renderer.js

@@ -7,11 +7,12 @@ console.log('test');
 
 // const url = 'file://C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\test.ogg';
 // const path = 'C:\\Users\\JISAUAY\\Documents\\misc\\sspm\\ChangelingForest.mp3';
-const libPath = './test-library/';
+const libPath = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';
 
 let libEntryPathes;
 
 let currentlyPlaying;
+let currentlyPlayingPath;
 
 // const player = new Audio(url);
 
@@ -25,6 +26,7 @@ async function getLibraryFiles() {
 }
 
 
+// Load Library
 document.addEventListener('DOMContentLoaded', async () => {
     const libContentDisplay = document.getElementById('libContents');
 
@@ -36,6 +38,7 @@ document.addEventListener('DOMContentLoaded', async () => {
     }
 });
 
+// Click events for library contents
 document.addEventListener('DOMContentLoaded', () => {
     const libContentDisplay = document.getElementById('libContents');
 
@@ -43,11 +46,17 @@ document.addEventListener('DOMContentLoaded', () => {
         if (e.target.className == 'LibEntry') {
             console.log(e);
             let file_id = parseInt(e.target.id);
-            let audioPath = '../' + libPath + libEntryPathes[file_id];
+            let audioPath = libPath + libEntryPathes[file_id];
 
             console.log(`Audio Path: ${audioPath}`);
 
+            if (currentlyPlaying != null) {
+                currentlyPlaying.pause();
+            }
+
             currentlyPlaying = new Audio(audioPath);
+            currentlyPlayingPath = audioPath;
+            updateSongInfo();
             currentlyPlaying.play()
                 .catch(e => {
                     console.error(`Audio failed to play with ${e}`);
@@ -56,12 +65,12 @@ document.addEventListener('DOMContentLoaded', () => {
     });
 });
 
+// Pause Play Button Events
 document.addEventListener('DOMContentLoaded', () => {
     document.getElementById('play').addEventListener('click', playMedia);
     document.getElementById('pause').addEventListener('click', pauseMedia);
 });
 
-
 function pauseMedia() {
     if (currentlyPlaying !== null) {
         currentlyPlaying.pause();
@@ -74,6 +83,67 @@ function playMedia() {
     }
 }
 
+document.addEventListener('DOMContentLoaded', () => {
+    const progressBar = document.getElementById('CurrentPlace');
+
+    let timer = setInterval(() => {
+        if (currentlyPlaying != null) {
+
+            updateSongInfo();
+
+            let currentTime = currentlyPlaying.currentTime;
+            let duration = currentlyPlaying.duration;
+
+            // console.log(`Duration: ${duration}`);
+            // console.log(`Current Time: ${currentTime}`);
+
+            progressBar.style.width = ((currentTime / duration) * 100) + '%';
+
+            // console.log(`Width: ${progressBar.style.width}`);
+
+            // if (currentlyPlaying.ended) {
+            //     stopProgressBar();
+            // }
+        }
+    },
+    250);
+
+    function stopProgressBar() {
+        clearInterval(timer);
+    }
+});
+
+async function updateSongInfo() {
+    const songName = document.getElementById('songName');
+    const durationInfo = document.getElementById('durationInfo');
+
+    if (currentlyPlaying == null) {
+        console.warn(`updateSongInfo called when currently playing was null.`);
+        return;
+    }
+
+    let mediaTags = await window.api.getAudioInfo(currentlyPlayingPath);
+    console.log(mediaTags);
+    console.log(currentlyPlaying);
+
+    if (mediaTags.title) {
+        songName.innerText = mediaTags.title;
+    } else {
+        songName.innerHTML = currentlyPlayingPath.split('/').at(-1);
+    }
+
+    let currentTime = currentlyPlaying.currentTime;
+    let duration = currentlyPlaying.duration;
+
+    let currentTimeSeconds = Math.floor(currentTime % 60);
+    let durationSeconds = Math.floor(duration % 60);
+
+    let currentTimeStr = Math.floor(currentTime / 60) + ':' + ((currentTimeSeconds < 10) ? '0' + currentTimeSeconds : currentTimeSeconds);
+    let totalTimeStr = Math.floor(duration / 60) + ':' + ((durationSeconds < 10) ? '0' + durationSeconds : durationSeconds);
+
+    durationInfo.innerHTML = currentTimeStr + ' / ' + totalTimeStr;
+}
+
 // fromUrl(url).then((tags) => {
 //     console.log(tags);
 // });

src/style.css

@@ -0,0 +1,41 @@
+body {
+    background-color: #292929;
+    color: white;
+}
+
+.SongInfo {
+    display: flex;
+    margin: 0.5em 0;
+    width: 100%;
+    padding: 0.5em 0;
+    background-color: grey;
+}
+
+/* .SongInfo div {
+    display: inline-block;
+} */
+
+.Controls {
+    width: 100%;
+    /* background-color: grey; */
+}
+
+.PlayingInfo {
+    margin: 0 0.5em;
+}
+
+#ProgressBar {
+    flex: 1;
+    /* justify-self: center; */
+    width: 100%;
+    height: 1em;
+    /* padding: 1px 1px; */
+    background-color: darkgrey;
+}
+
+#CurrentPlace {
+    width: 0%;
+    height: 100%;
+    /* height: 1em; */
+    background-color: white;
+}