manager/templates/app/app.js

const {ipcRenderer} = require("electron");
const ipc = ipcRenderer;
const fs = require("fs")
const packageJson = require("../../package.json")

const logo = document.getElementById("logo")
const username = document.getElementById("username")
const signout = document.getElementById("signout")
const onlineNumber = document.getElementById("online")
const closeBtn = document.getElementById("closeBtn");
const minimizeBtn = document.getElementById("minimizeBtn");
const musicTitle = document.getElementById("music_title")
const musicURL = document.getElementById("music_img")
const exitSpan = document.getElementById("exitSpan")
const list = document.getElementById("list")
const listDialog = document.getElementById("listDialog")
const listClose = document.getElementById("listClose")
const listClear = document.getElementById("listClear")
const listcontent = document.getElementById("listContent")
const listNumber = document.getElementById("listNumber")

const search = document.getElementById("search")
const searchBar = document.getElementById("searchBar")
const searchDialog = document.getElementById("searchDialog")
const searchClose = document.getElementById("searchClose")
const searchcontent = document.getElementById("searchContent")

const durationBar = document.getElementById("duration")
const durationText = document.getElementById("durationText")


const stDialog = document.getElementById("stDialog")
const settings = document.getElementById("settings")
const stClose = document.getElementById("stClose")

const patchDialog = document.getElementById("patchDialog")
const patchnote = document.getElementById("patchnote")
const patchClose = document.getElementById("patchClose")
const patchInfo = document.getElementById("patchInfo")

const sendDialog = document.getElementById("sendDialog")
const send = document.getElementById("bug")
const sendClose = document.getElementById("sendClose")
const sendContent = document.getElementById("sendContent")
const sendInfo = document.getElementById("sendInfo")
const sendSend = document.getElementById("sendSend")
const sendText = document.getElementById("sendText")
const sendChos = document.getElementById("sendChos")


const volCursor = document.getElementById("volCursor")
const volPct =  document.getElementById("volPct")
const restart = document.getElementById("restart")

const updDialog = document.getElementById("updDialog")
const upd = document.getElementById("upd")
const updClose = document.getElementById("updClose")
const updSpan = document.getElementById("updSpan")


const favDialog = document.getElementById("favDialog")
const fav = document.getElementById("fav")
const favClose = document.getElementById("favClose")
const favClear = document.getElementById("favClear")
const favContent = document.getElementById("favContent")


fav.addEventListener("click", () => {

    favDialog.showModal()

    showFavoris()

})

favClear.addEventListener("click", () => {

    const settings = getSettings()
    settings.favoris = []
    
    saveSettings(settings)
    showFavoris()
})

function showFavoris() {

    const settings = getSettings()

    var contentToPush = new Array()

    for(var title of settings.favoris) {

        contentToPush.push('<div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button style="margin : 0;" id="' +  settings.favoris.indexOf(title) + '_fadd" class="buttonReduce"><i class="fa fa-plus"></i></button> <button id="' + settings.favoris.indexOf(title) + '_fdelete" class="buttonClose"><i class="fa fa-trash"></i></button> </div></div>')
    }

    if(contentToPush.join("") == "") {
       

        favContent.innerHTML = '<p class="error">Aucun morceau dans les favoris !</p>'
    
    } else {

        favContent.innerHTML = contentToPush.join("")
    }

    for(var title of settings.favoris) {
  
        const titleBtn = document.getElementById(settings.favoris.indexOf(title) + "_fdelete")
        const addBtn = document.getElementById(settings.favoris.indexOf(title) + "_fadd")

        addBtn.addEventListener("click", () => {

            ipc.send("addQueue", settings.favoris[addBtn.id.replace("_fadd", "")].uri)
            favDialog.close()
            
        })
        
        titleBtn.addEventListener("click", () => {

            settings.favoris.splice(titleBtn.id.replace("_fdelete", ""), 1)
            saveSettings(settings)
            showFavoris()
        })

    }
}

favClose.addEventListener("click", () => {

    favDialog.close()
})


upd.addEventListener("click", () => {

    updDialog.showModal()
    updSpan.innerHTML = ""
    setTimeout(() => {
        updSpan.innerHTML = '<button style="margin-left: 25%;" id="updYes" class="bug"><i class="fas fa-warning"></i> Mettre à jour</button>'
        const updYes = document.getElementById("updYes")
        updYes.addEventListener("click", () => {
            ipc.send("forceUpdate")

        })
    }, 2000)

})

updClose.addEventListener("click", () => {

    updDialog.close()
})

restart.addEventListener("click", () => {

    stDialog.close()
    ipc.send("restart")

})

if(packageJson.dev == true) {

    document.getElementById("devversion").innerHTML = "<p class='dp'>Cette version est expérimentale.<br> En cas de bug, <a style='cursor: pointer;text-decoration: underline;' id='bugD'>cliquez ici </a> </p>"
    const sendB = document.getElementById("bugD")
    
    sendB.addEventListener("click", () => {

       
        sendInfo.innerHTML = ""
        sendText.value = ""
        sendChos.value = "Bug"
        sendDialog.showModal()


    })
}

var durationAll = 0
var durationProgress = 0
var isPlaying = false


patchnote.addEventListener("click", () => {

    patchDialog.showModal()
    const data = fs.readFileSync(__dirname + require("path").sep + "../../infoupdate.html")
    patchInfo.innerHTML = data

})

patchClose.addEventListener("click", () => {

    patchDialog.close()
})

settings.addEventListener("click", () => {

    stDialog.showModal()

})

stClose.addEventListener("click", () => {

    stDialog.close()
})

send.addEventListener("click", () => {

    sendInfo.innerHTML = ""
    sendText.value = ""
    sendChos.value = "Bug"
    sendDialog.showModal()

})

sendClose.addEventListener("click", () => {

    sendDialog.close()
})

sendSend.addEventListener("click", () => {

    sendInfo.innerHTML = ""

    if(sendText.value == "") {

        sendInfo.innerHTML = '<p style="text-align: center; color: red;">Le formulaire n\'a pas été rempli correctement !</p>'
    } else {

        const report = {
            "type":sendChos.value,
            "text": sendText.value
            
        }

        ipc.send("report", report)

    }

})

ipc.on("reportForm", (ev, ans) => {
    if(ans == true) {
        sendInfo.innerHTML = '<p style="text-align: center;">Le formulaire a été envoyé !</p>'

    } else {

        sendInfo.innerHTML = '<p style="text-align: center; color: red;">Erreur lors de l\'envoi du formulaire !</p>'
    }

})

durationBar.value = 0
listNumber.classList.add("exitNotShow")



function setTime() {


        durationBar.max = durationAll
        durationProgress += 1000 
        durationBar.value = durationProgress

        
        const maxhours = Math.floor(durationAll / 3600000);
        const nowhours = Math.floor(durationProgress / 3600000);

        

        var maxmin = Math.trunc(durationAll / 60000) - (Math.floor(durationAll / 60000 / 60) * 60);
        var maxsec = Math.floor(durationAll / 1000) - (Math.floor(durationAll / 1000 / 60) * 60);
        var nowmin = Math.trunc(durationProgress / 60000) - (Math.floor(durationProgress / 60000 / 60) * 60);
        var nowsec = Math.floor(durationProgress / 1000) - (Math.floor(durationProgress / 1000 / 60) * 60);

        console.log(durationAll)
        console.log(durationProgress)
        console.log("---------------------")

        var now = ""
        var max = ""


        if (maxmin < 10) {
            maxmin = `0${maxmin}`;
        }

        if (nowmin < 10) {
            nowmin = `0${nowmin}`;
        }

        if (maxsec < 10) {
            maxsec = `0${maxsec}`;
        }

        if (nowsec < 10) {
            nowsec = `0${nowsec}`;
        }

        if(maxhours != 0) {
           
            max =  maxhours + ":" + maxmin + ":" + maxsec
        } else {
            max =  maxmin + ":" + maxsec
           
        }

        if(nowhours != 0) {
           
            now =  nowhours + ":" + nowmin + ":" + nowsec
        } else {
            now =  nowmin + ":" + nowsec
           
        }

        

        durationText.innerHTML = now + "/" + max
}


setInterval(() => {

    if(isPlaying == true) {
        setTime()

    } 

}, 1000)


durationBar.addEventListener("change", () => {

    ipc.send("seek", durationBar.value)

})

volCursor.addEventListener("change", () => {

    ipc.send("volume", volCursor.value)

})

const loop = document.getElementById("loop")



loop.addEventListener("click", () => {

    ipc.send("loop")
})


listClear.addEventListener("click", () => {
    
    ipc.send("listClear")

})

searchBar.addEventListener("change", () => {

    ipc.send("findReq", searchBar.value)


})

ipc.on("findResult", (ev, list) => {
 
    if(list.tracks != null) {
        const data = list.tracks
     

        var contentToPush = new Array()

        for(var title of data) {
            
          
            contentToPush.push(' <div class="ressong"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="searchTitle">' + title.title + '</p></div><button id="' + data.indexOf(title) + '_sfav" class="buttonFav"><i class="fa fa-star"></i></button> <button id="' + data.indexOf(title) + '_sadd" class="buttonReduce"><i class="fa fa-plus"></i></button></div>')
        }

        if(contentToPush.join("") == "") {

            searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'
        
        } else {

            searchcontent.innerHTML = contentToPush.join("")
        }

        for(var title of data) {

     
            
            const titleBtn = document.getElementById(data.indexOf(title)+ "_sadd")
             
            const favBtn = document.getElementById(data.indexOf(title)+ "_sfav")
            
            titleBtn.addEventListener("click", () => {
                searchcontent.innerHTML = ""
                searchBar.value = ""
                ipc.send("addQueue", data[titleBtn.id.replace("_sadd", "")].uri)
            })

            favBtn.addEventListener("click", () => {

                const settings = getSettings()

                if(settings.favoris == null) {

                    settings["favoris"] = []
                   
                  
                }

                var check = false

                for(var song of settings.favoris) {

       
                    if(song.uri == data[favBtn.id.replace("_sfav", "")].uri) {

                        check = true
                    }
                }

                if(check == false) {

                    settings.favoris.push(data[favBtn.id.replace("_sfav", "")])
                } else {

                    console.log("ALREADY ADDED")
                }

                saveSettings(settings)

                searchDialog.close()


            })
        }
       

    } else {

        searchcontent.innerHTML = '<p class="error">Aucun morceau trouvé !</p>'

    }

})

const path = require("path")

function getSettings() {

    return require("../../settings.json")

}

function saveSettings(doc) {
    
    fs.writeFileSync(__dirname.replace("templates" + path.sep + "app", "settings.json"), JSON.stringify(doc, null, 2))

}

list.addEventListener("click", () => {

    listDialog.showModal()

})

listClose.addEventListener("click", () => {

    listDialog.close()
})


search.addEventListener("click", () => {

    searchDialog.showModal()
    searchcontent.innerHTML = ""
    searchBar.value = ""

})

searchClose.addEventListener("click", () => {

    searchDialog.close()
})




const backward = document.getElementById("backward")
const play = document.getElementById("play")
const forward = document.getElementById("forward")

ipc.send("askUpdateState")

document.getElementById("version").innerHTML = packageJson.version

closeBtn.addEventListener("click", () => {
   
    ipc.send("close");
    
});

minimizeBtn.addEventListener("click", () => {

    ipc.send("minimize")
})

play.addEventListener("click" ,() => {

    ipc.send("play")
    console.log("PLAY")

})

backward.addEventListener("click" ,() => {

    ipc.send("backward")
    console.log("BACKWARD")
    
})

forward.addEventListener("click" ,() => {

    ipc.send("forward")
    console.log("FORWARD")
    
})

ipc.on("actualize", (ev, data) => {

    isPlaying = false

    console.log(data)
    onlineNumber.innerHTML = data.onlineNumber

    if(data.loop == true) {
        loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'

    } else {

        loop.innerHTML = '<i class="fa fa-retweet"></i>'
    }

   
    if(data.volume) {
        volCursor.step = 1
        volCursor.max = 100
        volCursor.value = Math.trunc(data.volume / 10)
        volPct.innerHTML = Math.trunc(data.volume / 10) + "%"

    } else {

        volPct.innerHTML = "0%"
    }

    if(data.isOnline == true) {

        exitSpan.classList.remove("exitNotShow")
        loop.classList.remove("exitNotShow")
        exitSpan.innerHTML = ' <button id="exit" class="third-leave"><i class="fa fa-phone-slash"></i></button>'
        
        const exit = document.getElementById("exit")

        exit.addEventListener("click", () => {

            ipc.send("exitBot")

        })

        volCursor.disabled = false
        volCursor.classList.remove("grised")

       
        durationBar.disabled = false
        durationBar.classList.remove("grised")
    } else {
        exitSpan.classList.add("exitNotShow")
        loop.classList.add("exitNotShow")
        exitSpan.innerHTML = ""
        durationBar.disabled = true
        durationBar.classList.add("grised")
        durationBar.value = 0

        volCursor.disabled = true
        volCursor.classList.add("grised")
        volCursor.value = 0
    }

    

    if(data.queue != null) {

        var contentToPush = new Array()
        var queueNum = 0

        for(var title of data.queue) {
            queueNum += 1
            console.log(queueNum)
            console.log(data.queue.indexOf(title) + " - " + title.title)
            contentToPush.push(' <div class="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="listTitle">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_lmove" class="buttonReduce"><i class="fa fa-arrow-up"></i></button> <button id="' + data.queue.indexOf(title) + '_ldelete" class="buttonClose"><i class="fa fa-trash"></i></button> </div></div>')
        }

        if(contentToPush.join("") == "") {
           
            listNumber.classList.add("exitNotShow")
            listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
        
        } else {
            listNumber.innerHTML = '<span class="numtext">' + queueNum + '</span>'
            listNumber.classList.remove("exitNotShow")
            listcontent.innerHTML = contentToPush.join("")
        }

        for(var title of data.queue) {

            console.log(data.queue.indexOf(title) + " - " + title.title)
            
            const titleBtn = document.getElementById(data.queue.indexOf(title)+ "_ldelete")
            const moveBtn = document.getElementById(data.queue.indexOf(title)+ "_lmove")
            
            titleBtn.addEventListener("click", () => {

                ipc.send("deleteQueue", titleBtn.id.replace("_ldelete", ""))
            })

            moveBtn.addEventListener("click", () => {

                ipc.send("moveQueue", moveBtn.id.replace("_lmove", ""))

            })
        }
       

    } else {

        listcontent.innerHTML = '<p class="error">Aucun morceau dans la liste de lecture !</p>'
        listNumber.classList.add("exitNotShow")
    }

    if(data.current == null) {

        musicURL.innerHTML = '<img class="thumbnail" src="../common/Mediamodifier-Design.svg">'
        musicTitle.innerHTML = "Aucun titre joué"
    } else {
        setTime()
        musicURL.innerHTML = '<img class="thumbnail" src="' + data.current.thumbnail + '">'
        musicTitle.innerHTML = data.current.title
    }


    durationProgress = 0
    durationAll = 0
    durationBar.value = 0
    durationText.innerHTML = "=:==/=:=="

    
   

    if(data.durationAll) {
        isPlaying = true
        durationBar.disabled = false
        durationBar.classList.remove("grised")
        setTime()
       
        durationAll = data.durationAll
        durationProgress = data.durationNow
        durationBar.value = durationProgress

    } else {

       
        isPlaying = false
        durationAll = 0
        durationProgress = 0
        durationBar.disabled = true
        durationBar.classList.add("grised")
        durationBar.value = 0
        durationText.innerHTML = "=:==/=:=="

    }

    
    if(data.playing == 1) {
        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-pause"></i>'
        isPlaying = true
        setTime()
    } else {

        
        play.innerHTML = '<i style="width: 25px; height: 25px" class="fas fa-play"></i>'
        isPlaying = false
       
    }

    if(data.current && data.playing == 0) {
        setTime()

    }

    
   

})

ipc.on("updateData", (ev, data) => {

    
    username.innerHTML = data.username
    logo.innerHTML = "<img class='logo' src='https://cdn.discordapp.com/avatars/" + data.id + "/" + data.avatar + ".png'>"

})

signout.addEventListener("click", () => {
    ipc.send("signout")

})