Library
diff --git a/src/main.js b/src/main.js
index a8e6b73..55a49be 100644
--- a/src/main.js
+++ b/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) {
- let id3tags = fromPath(url).then(function(tags) {
- return tags;
- }).catch(function(reason) {
- console.log(reason);
- })
+ipcMain.handle('getAudioInfo', function(event, path) {
+ // let id3tags = fromPath(url).then(function(tags) {
+ // return tags;
+ // }).catch(function(reason) {
+ // console.log(reason);
+ // })
+
+ const filebuffer = fs.readFileSync(path);
+ let id3tags = NodeID3.read(filebuffer);
return id3tags;
});
diff --git a/src/renderer.js b/src/renderer.js
index a6b5b9d..ffa9e8d 100644
--- a/src/renderer.js
+++ b/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);
// });
diff --git a/src/style.css b/src/style.css
index e69de29..5160f4a 100644
--- a/src/style.css
+++ b/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;
+}