MP3 Player

[bachoo786]

@bachoo786

I changed from this:

if (MP3.config.musicData) {
        const musicList = MP3.createElement("ul", "musicList", "musicList");

        MP3.config.musicData.forEach(folderData => {
            // Folder item
            const folderItem = MP3.createElement("li", "folderItem", `folderItem-${folderData.folderName}`);
            folderItem.innerHTML = `
                <span class="folderName">${folderData.folderName}</span>
                <i class="fa fa-chevron-down"></i> 
            `; 

            // Songs list within the folder
            const songsList = MP3.createElement("ul", "songsList", `songsList-${folderData.folderName}`);
            songsList.style.display = 'none'; // Initially hide the songs list

            folderData.songs.forEach(song => {
                const songItem = MP3.createElement("li", "songItem", `songItem-${song}`);
                songItem.innerHTML = song.substr(0, song.length - 4); 
                songsList.appendChild(songItem);
            });

            // Click event listeners
            folderItem.addEventListener('click', () => {
                songsList.style.display = songsList.style.display === 'none' ? 'block' : 'none'; // Toggle display
                folderItem.querySelector('.fa').classList.toggle('fa-chevron-down');
                folderItem.querySelector('.fa').classList.toggle('fa-chevron-up');
            });

            songsList.addEventListener('click', (event) => {
                const clickedSongItem = event.target;
                if (clickedSongItem.classList.contains('songItem')) {
                    const songName = clickedSongItem.innerText;
                    const folderName = folderData.folderName;
                    MP3.playSong(folderName, songName);
                }
            });

            folderItem.appendChild(songsList);
            musicList.appendChild(folderItem);
        });

to this:

if (MP3.config.musicData) {
   const fs = require('fs');
   const path = require('path');

   const musicFolder = path.resolve(MP3.config.musicData.musicPath);
   const supportedExtensions = this.defaults.extensions; // Use module's default extensions

   fs.readdir(musicFolder, (err, files) => {
    if (err) {
     console.error("Error reading music directory:", err);
     // Handle the error - display message to user, etc. 
    } else {
     const musicFiles = files.filter(file => supportedExtensions.includes(path.extname(file).toLowerCase()));

     if (musicFiles.length > 0) {
      const musicList = MP3.createElement("ul", "musicList");

      musicFiles.forEach(musicFile => {
       const songItem = MP3.createElement('li', 'songItem');
       songItem.innerHTML = musicFile.substr(0, musicFile.length - 4); 
       songItem.addEventListener('click', () => {
        MP3.playSong(musicFile); // Assuming you want to play the song directly
       });
       musicList.appendChild(songItem);
      });

[sdetweil]

@bachoo786 you could say, I have updated the repo, git pull to get the changes…

you need to
git add,
git commit -m and
git push
to update the repo

[sdetweil]

@bachoo786 said in MP3 Player:

fs.readdir(musicFolder, (err, files) => {

the modulename.js that runs in the browser cannot read files directly, due to security restrictions ( any script could read ALL your files without you knowing)

this is why the node_helper exists…

[bachoo786]

@sdetweil said in MP3 Player:

@bachoo786 said in MP3 Player:

fs.readdir(musicFolder, (err, files) => {

the modulename.js that runs in the browser cannot read files directly, due to security restrictions ( any script could read ALL your files without you knowing)

this is why the node_helper exists…

so whats the alternative? I had this MMM-QuranPlayer module that was able to read mp3 files from the folders in the “public” directory which was located in the root folder of the module.

[sdetweil]

@bachoo786 I’m pretty sure the module used a node_helper

now if you make it a url, then you can fetch it thru the browser… but the server side is actually reading the file

but you could make it a file url

file:///server/path to file

in MagicMirror the server home folder is the MagicMirror folder