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 volCursor = document.getElementById("volCursor")
const volPct =  document.getElementById("volPct")
const restart = document.getElementById("restart")

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

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

})

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



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

    stDialog.showModal()

})

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

    stDialog.close()
})

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="song"> <img class="thumbnail" src="' + title.thumbnail + '"><div class="titleSong"> <p class="searchTitle">' + title.title + '</p></div> <button id="' + data.indexOf(title) + '_add" 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)+ "_add")
            
            titleBtn.addEventListener("click", () => {
                searchDialog.close()
                searchcontent.innerHTML = ""
                searchBar.value = ""
                ipc.send("addQueue", data[titleBtn.id.replace("_add", "")].uri)
            })
        }
       

    } else {

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

    }

})

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

    listDialog.showModal()

})

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

    listDialog.close()
})


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

    searchDialog.showModal()

})

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) + '_delete" class="buttonClose"><i class="fa fa-trash"></i></button> </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)+ "_delete")
            
            titleBtn.addEventListener("click", () => {

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

    } 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")

})