sspm/src/renderer.js

// const { fromUrl } = require('id3js');
// const { fromUrl } = id3js;

// import fromUrl from id3js;

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 = 'C:/Users/JISAUAY/Documents/misc/sspm/test-library/';

let libEntryPathes;

let currentlyPlaying;
let currentlyPlayingPath;

// 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() {
    return await window.api.readMusicLibrary(libPath);
}


// Load Library
document.addEventListener('DOMContentLoaded', async () => {
    const libContentDisplay = document.getElementById('libContents');

    libEntryPathes = await getLibraryFiles();
    console.log(libEntryPathes);

    for (const file_i in libEntryPathes) {
        libContentDisplay.innerHTML += `<div class="LibEntry" id="${file_i}">${libEntryPathes[file_i]}</div>`;
    }
});

// Click events for library contents
document.addEventListener('DOMContentLoaded', () => {
    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];

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

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

function playMedia() {
    if (currentlyPlaying !== null) {
        currentlyPlaying.play();
    }
}

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

// player.play().catch(e =>
//     console.error("Audio play failed with " + e)
// );


// https://www.debugandrelease.com/the-ultimate-electron-guide/ seems decent