changed the id3 tag lib and made some screens better

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);
 // });