Personnes en ligne
") - - for(var user of resp ) { - - var textshadow = "" - - - if(user.admin == true) { - - textshadow = 'box-shadow: #fcff4d 0px 0px 8px;' - } - - if(user.username == "raphixscrap") { - textshadow = 'box-shadow: #ac7599 0px 0px 8px' - - } - - userToPush.push(`
${user.global_name}
${user.username}
Radio
") - radioToPush.push(` - -`) - - - - for(var title of resp ) { - - var thumbnail = title.thumbnail - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - - } - - radioToPush.push(`${title.title} - ${title.author}
${user.global_name}
${user.username}
' + key + '
Aucun morceau trouvé !
' - - } else { - - playlistContent.innerHTML = contentToPush.join("") - playlistAvailable = selectionData - } - - if(playlistSelected && deleteJustBefore || playlistSelected && wasOnPlaylist) { - deleteJustBefore = null - loadPlaylist(playlistSelected, data[playlistSelected]) - } - - for (const [key, value] of Object.entries(data)) { - - const playlist_selector = document.getElementById(key + '_playlist') - - playlist_selector.addEventListener("click", () => { - - loadPlaylist(key, value) - wasOnPlaylist = true - - }) - } - - const buttons = document.querySelectorAll(".checker"); - - buttons.forEach(button => { - button.addEventListener("click", function () { - buttons.forEach(btn => { - if (btn === button) { - btn.style.color = "white"; - } else { - btn.style.color = ""; - } - }); - }); - }); - - - const addPlaylist = document.getElementById("createPlaylist") - const addPlaylist_dialog = document.getElementById("createPlaylist_dialog") - const addPlaylist_close = document.getElementById("createPlaylist_close") - const apText = document.getElementById("apText") - const apInfo = document.getElementById("apInfo") - const apCreate = document.getElementById("apCreate") - - - addPlaylist_close.addEventListener("click", () => { - apInfo.innerHTML = "" - addPlaylist_dialog.close() - }) - - addPlaylist.addEventListener("click", () => { - - apText.innerHTML = "" - addPlaylist_dialog.showModal() - }) - - apCreate.addEventListener("click", () => { - apInfo.innerHTML = "" - var wrongName = true - - const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|'] - - for(var char of refusedChar) { - - if(apText.value.includes(char)) { - wrongName = false - - } - } - - if(apText.value != "" && apText.value != " " && wrongName) { - - addPlaylist_dialog.close() - send("CREATE_PLAYLIST", apText.value) - } else { - - apInfo.innerHTML = "Le nom n'est pas valide !" - } - - - }) - - - - console.log(data) -}) - -function loadPlaylist(key, value) { - - wasOnHome = false - - var playlistToPush = new Array() - var playlist_songs = new Array() - - playlistSelected = key - playlistValue = value - - for(var title of value) { - - var PFormatduration = null - pdurationAll = title.duration - - const pmaxhours = Math.floor(pdurationAll / 3600000); - - var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60); - var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60); - - - if (pmaxsec < 10) { - pmaxsec = `0${pmaxsec}`; - } - - - if(pmaxhours != 0) { - - if (pmaxmin < 10) { - pmaxmin = `0${pmaxmin}`; - } - - - pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec - } else { - pmax = pmaxmin + ":" + pmaxsec - - } - - PFormatduration = pmax - - var thumbnail = title.thumbnail - - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - - } - - if(title.duration == 9223372036854776000) { - - PFormatduration = " LIVE" - } - - playlist_songs.push('' + title.title + '
' + title.author + '
' + PFormatduration + '
' + key + '
Aucun morceau trouvé !
' - - } else { - - mainView.innerHTML = playlistToPush.join("") - - - } - - for(var title of value) { - - const add_to = document.getElementById(value.indexOf(title) + "_padd") - const playNow = document.getElementById(value.indexOf(title) + "_pplay") - const deleteBtn = document.getElementById(value.indexOf(title) + "_pdelete") - - add_to.addEventListener("click", () => { - - send("ADD_SONG", value[add_to.id.replace("_padd", "")]) - }) - - playNow.addEventListener("click", () => { - - send("ADD_SONG_NOW", value[add_to.id.replace("_padd", "")]) - - }) - - deleteBtn.addEventListener("click", () => { - - deleteJustBefore = true - send("DELETE_SONG_TO_PLAYLIST", key, value[add_to.id.replace("_padd", "")]) - - }) - - - } - -} - - - -searchBtn.addEventListener("click", () => { - - mainView.innerHTML = '' - const searchBar = document.getElementById("searchBar") - const searchcontent = document.getElementById("search_content") - - wasOnPlaylist = false - - searchBar.addEventListener("change", () => { - - - send("SEARCH", searchBar.value).then(answerOfResult => { - - var results = answerOfResult.results - var playlistReconnised = answerOfResult.playlist - - if(searchBar.value.includes("https://") || searchBar.value.includes("http://")) { - - searchBar.value= "" - } - - if(!playlistReconnised) { - - if(results.tracks != null) { - const data = results.tracks - - console.log(data) - var contentToPush = new Array() - - for(var title of data) { - - var PFormatduration = null - pdurationAll = title.duration - - const pmaxhours = Math.floor(pdurationAll / 3600000); - - var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60); - var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60); - - - if (pmaxsec < 10) { - pmaxsec = `0${pmaxsec}`; - } - - - if(pmaxhours != 0) { - - if (pmaxmin < 10) { - pmaxmin = `0${pmaxmin}`; - } - - - pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec - } else { - pmax = pmaxmin + ":" + pmaxsec - - } - - var thumbnail = title.thumbnail - - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - } - - - PFormatduration = pmax - - if(title.duration == 9223372036854776000) { - - PFormatduration = " LIVE" - } - - contentToPush.push('' + title.title + '
' + title.author + '
' + PFormatduration + '
Aucun morceau trouvé !
' - - } else { - - searchcontent.innerHTML = contentToPush.join("") - } - - for(var title of data) { - - const add_to = document.getElementById(data.indexOf(title) + "_ladd") - const test_lmore = document.getElementById(data.indexOf(title) + "_lmore") - const testPopup = document.getElementById(data.indexOf(title) + "_popup") - const playNow = document.getElementById(data.indexOf(title) + "_playNow") - const copy = document.getElementById(data.indexOf(title) + "_copy") - const addPlaylist = document.getElementById(data.indexOf(title) + "_goPlaylist") - - const PlaylistManager = document.getElementById(data.indexOf(title) + "playlistManager") - const playlistManager_close = document.getElementById(data.indexOf(title) + "playlistManager_close") - const playlistSelection = document.getElementById(data.indexOf(title) + "playlistSelection") - const playlist_add_music = document.getElementById(data.indexOf(title) + "playlist_add_music") - const playlist_add_img = document.getElementById(data.indexOf(title) + "playlist_add_img") - const playlistAddSong = document.getElementById(data.indexOf(title) + "playlistAddSong") - - var thumbnail = data[add_to.id.replace("_ladd", "")].thumbnail - - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - } - - testPopup.style.display = "none" - - add_to.addEventListener("click", () => { - - send("ADD_SONG", data[add_to.id.replace("_ladd", "")]) - }) - - copy.addEventListener("click", () => { - navigator.clipboard.writeText(data[add_to.id.replace("_ladd", "")].uri) - testPopup.style.display = "none" - }) - - addPlaylist.addEventListener("click", () => { - - PlaylistManager.showModal() - playlist_add_music.innerHTML = data[add_to.id.replace("_ladd", "")].title - playlist_add_img.src = thumbnail - playlistSelection.innerHTML = playlistAvailable - }) - - playlistManager_close.addEventListener("click", () => { - - PlaylistManager.close() - }) - - playlistAddSong.addEventListener("click", () => { - - - PlaylistManager.close() - - socket.emit("SEND/ADD_SONG_TO_PLAYLIST", playlistSelection.value , data[add_to.id.replace("_ladd", "")]) - - }) - - test_lmore.addEventListener("click",( ) => { - - - testPopup.style.display = "flex" - testPopup.style.top = yMousePos + "px" - - }) - - testPopup.addEventListener("mouseleave", () => { - - testPopup.style.display = "none" - - }) - - playNow.addEventListener("click", () => { - - send("ADD_SONG_NOW", data[add_to.id.replace("_ladd", "")]) - - }) - - - - - } - - - } else { - - searchcontent.innerHTML = 'Aucun morceau trouvé !
' - - } - - } else { - - //https://www.youtube.com/playlist?list=PLA8VHLKYzqTvCcIKhsjGS41nG1zBpRZPy - - - var playlistToPush = new Array() - var playlist_songs = new Array() - - - for(var title of results.videos) { - - var PFormatduration = null - pdurationAll = title.milis_length - - const pmaxhours = Math.floor(pdurationAll / 3600000); - - var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60); - var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60); - - - if (pmaxsec < 10) { - pmaxsec = `0${pmaxsec}`; - } - - - if(pmaxhours != 0) { - - if (pmaxmin < 10) { - pmaxmin = `0${pmaxmin}`; - } - - - pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec - } else { - pmax = pmaxmin + ":" + pmaxsec - - } - - PFormatduration = pmax - - if(title.milis_length == 9223372036854776000) { - - PFormatduration = " LIVE" - } - - - playlist_songs.push('' + title.title + '
' + title.author.name + '
' + PFormatduration + '
' + results.author.name + " - (" + results.videos.length + " titres)" + '
' + results.title + '
Aucun morceau trouvé !
' - - } else { - - searchcontent.innerHTML = playlistToPush.join("") - - - } - - - - - for(var title of results.videos) { - - const add_to = document.getElementById(results.videos.indexOf(title) + "_padd") - const playNow = document.getElementById(results.videos.indexOf(title) + "_pplay") - - - add_to.addEventListener("click", () => { - - send("FP_ADD_SONG", results.videos[add_to.id.replace("_padd", "")].url) - }) - - playNow.addEventListener("click", () => { - - send("FP_ADD_SONG_NOW", results.videos[add_to.id.replace("_padd", "")].url) - - }) - - - - - } - } - - }) - - }) -}) - -function fp_play_playlist(key) { - - send("FP_PLAY_PLAYLIST", key) -} - - -var timeoutId = null - -socket.on("NOTIFICATION", (data) => { - - if(timeoutId) { - - clearTimeout(timeoutId) - } - - const alertDiv = document.getElementById("alert") - const alert_image = document.getElementById("alert_image") - const alert_text = document.getElementById("alert_text") - - alert_image.src = data.image_src - alert_text.innerHTML = data.text - - - - alertDiv.classList.add("alert_div_on") - - timeoutId = setTimeout(() => { - - alertDiv.classList.remove("alert_div_on") - }, 4000) - - alertDiv.addEventListener("click", () => { - - - if(timeoutId) { - - clearTimeout(timeoutId) - } - - - alertDiv.classList.remove("alert_div_on") - - }) -}) - - - - -const cPlaylistManager = document.getElementById("current_playlistManager") -const cplaylistManager_close = document.getElementById("current_playlistManager_close") -const cplaylistSelection = document.getElementById("current_playlistSelection") -const cplaylist_add_music = document.getElementById("current_playlist_add_music") -const cplaylist_add_img = document.getElementById("current_playlist_add_img") -const cplaylistAddSong = document.getElementById("current_playlistAddSong") - -takeCurrent.addEventListener("click", () => { - - if(currentSong != null) { - - var thumbnail = currentSong.thumbnail - - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - } - - cPlaylistManager.showModal() - cplaylist_add_music.innerHTML = currentSong.title - cplaylist_add_img.src = thumbnail - cplaylistSelection.innerHTML = playlistAvailable - - } - -}) - -cplaylistManager_close.addEventListener("click", () => { - - cPlaylistManager.close() -}) - -cplaylistAddSong.addEventListener("click", () => { - - - cPlaylistManager.close() - socket.emit("SEND/ADD_SONG_TO_PLAYLIST", cplaylistSelection.value , currentSong ) - - - -}) - - - -volBox.classList.add("invisible") -listBox.classList.add("invisible") - -list.addEventListener("click" , () => { - - volBox.classList.add("invisible") - - if(listBox.classList.contains('invisible')) { - listBox.classList.remove("invisible") - - } else { - - listBox.classList.add("invisible") - } -}) - -// Apply the width of element1 to element2 - - -vol.addEventListener("click", () => { - - listBox.classList.add("invisible") - - if(volBox.classList.contains('invisible')) { - volBox.classList.remove("invisible") - - } else { - - volBox.classList.add("invisible") - } - -}) - -volRange.addEventListener("click", () => { - - - send("VOLUME", volRange.value) -}) - -volRange.addEventListener("input", () => { - - - volTxt.innerHTML = volRange.value + "%" -}) - - - -disconnect.addEventListener("click", () => { - - get("DISCONNECT") -}) - - - - -reportBtn.addEventListener("click", () => { - - report_desc.value = "" - report_level.value = "Majeur" - report_dialog.showModal() -}) - -report_close.addEventListener("click", () => { - - report_dialog.close() -}) - -report_send.addEventListener("click", () => { - - send("REPORT", {"level":report_level.value, "desc": report_desc.value}) - report_dialog.close() -}) - -loop.addEventListener("click", () => { - - get("LOOP") -}) - -shuffle.addEventListener("click", () => { - - get("SHUFFLE") -}) - - - -var durationAll = 0 -var durationProgress = 0 -var isPlaying = false -let interval; - -durationBar.addEventListener("change", () => { - - send("SEEK", durationBar.value) - -}) - - -userInfo.then(user => { - - settingsBtn.style.display = "none" - - var betastar = "" - - if(user.beta) { - - betastar = "BETA
" - } - - var textshadow = "" - - if(user.admin == true) { - - settingsBtn.style.display = "flex" - isAdmin = true - textshadow = 'box-shadow: #fcff4d 0px 0px 8px;' - } - - - - if(user.user.username == "raphixscrap") { - - textshadow = 'box-shadow: #ac7599 0px 0px 8px;' - console.log("RAPHIX !!! IS IN THE PLACE") - } - - - userInfoDiv.innerHTML = "" + user.user.global_name + "
" + user.user.username + "
![](https://cdn.discordapp.com/avatars/" + user.user.id + "/" + user.user.avatar + ")
" + betastar + "
'
- musicTitle.innerHTML = "Aucun titre joué
" - loop.classList.add("invisible") - takeCurrent.classList.add("invisible") - } else { - - var thumbnail = data.current.thumbnail - - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - } - - musicURL.innerHTML = '" + data.current.title + "
" - currentSong = data.current - takeCurrent.classList.remove("invisible") - loop.classList.remove("invisible") - } - - if(data.durationAll) { - durationBar.disabled = false - durationBar.classList.remove("grised") - setTime() - - durationAll = data.durationAll - durationProgress = data.durationNow - durationBar.value = durationProgress - setTime() - - } else { - - - isPlaying = false - durationAll = 0 - durationProgress = 0 - durationBar.disabled = true - durationBar.classList.add("grised") - durationBar.value = 0 - durationTextAct.innerHTML = "-:--" - durationTextTotal.innerHTML = "-:--" - - } - - - if(data.playing == 1) { - play.innerHTML = '' - isPlaying = true - startInterval() - } else { - - play.innerHTML = '' - isPlaying = false - - } - - - - if(data.current && data.playing == 0) { - setTime() - - } - - if(data.durationAll == 9223372036854776000) { - - isPlaying = false - durationAll = 0 - durationProgress = 0 - durationBar.disabled = true - durationBar.classList.add("grised") - durationBar.style.display = "none" - durationBar.value = 0 - durationTextAct.innerHTML = "" - durationTextTotal.innerHTML = " LIVE" - - } else { - - durationBar.style.display = "unset" - } - - - - 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) - var thumbnail = title.thumbnail - if(!thumbnail) { - - thumbnail = "/images/black-image.svg" - - } - contentToPush.push('' + title.title + '
Aucun morceau dans la liste de lecture !
' - - } else { - listNumber.innerHTML = '' + queueNum + '' - listNumber.classList.remove("invisible") - listBox.innerHTML = contentToPush.join("") - } - - //CODE INTEGER QUEUE LIST MOVE - - const container = document.getElementById('listBox'); - const draggableItems = document.querySelectorAll('.draggable'); - - let draggingElement = null; - - draggableItems.forEach(item => { - item.addEventListener('dragstart', (e) => { - e.dataTransfer.setData('text/plain', item.innerHTML); - draggingElement = item; - }); - - item.addEventListener('dragend', () => { - draggingElement = null; - setTimeout(() => { - item.style.display = 'flex'; // Restaure l'affichage de l'élément - }, 0); - updateOrder(); - }); - }); - - container.addEventListener('dragover', (e) => { - e.preventDefault(); - const afterElement = getDragAfterElement(container, e.clientY); - if (draggingElement !== null) { - if (afterElement == null) { - container.appendChild(draggingElement); - } else { - const rect = afterElement.getBoundingClientRect(); - if (e.clientY < rect.top + rect.height / 2) { - container.insertBefore(draggingElement, afterElement); - } else { - container.insertBefore(draggingElement, afterElement.nextElementSibling); - } - } - } - }); - - function getDragAfterElement(container, y) { - const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]; - return draggableElements.reduce((closest, child) => { - const box = child.getBoundingClientRect(); - const offset = y - box.top - box.height / 2; - if (offset < 0 && offset > closest.offset) { - return { offset: offset, element: child }; - } else { - return closest; - } - }, { offset: Number.NEGATIVE_INFINITY, element: null }).element; - } - - function updateOrder() { - const draggableItems = document.querySelectorAll('.draggable'); - const order = []; - draggableItems.forEach(item => { - order.push(item.id.replace("_queue_song", "")); - }); - console.log('Ordre des divs:', order); - send("MOVE_QUEUE_BY_ENTIRE", order) - } - - - - // END OF CODE INTEGER - - 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", () => { - - socket.emit("SEND/DELETE_QUEUE", titleBtn.id.replace("_ldelete", ""), data.queue[moveBtn.id.replace("_lmove", "")].title ) - }) - - moveBtn.addEventListener("click", () => { - - send("MOVE_QUEUE", moveBtn.id.replace("_lmove", "")) - - }) - } - - - } else { - - listBox.innerHTML = 'Lancez un titre et ajoutez vos morceaux ici !
' - listNumber.classList.add("invisible") - } - -}) - -function startInterval() { - interval = setInterval(() => { - - - if(isPlaying == true) { - setTime() - - } - - }, 1000) - -} - -function stopInterval() { - clearInterval(interval); -} - - - - - - -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 - - } - - - - durationTextAct.innerHTML = now - durationTextTotal.innerHTML = max -} - - - -function disableDrag() { - // Ajoutez un gestionnaire d'événement pour l'événement dragover - document.addEventListener('dragover', function (e) { - e.preventDefault(); // Empêche le comportement par défaut du navigateur - }); - - // Ajoutez un gestionnaire d'événement pour l'événement drop - document.addEventListener('drop', function (e) { - e.preventDefault(); // Empêche le comportement par défaut du navigateur - }); -} - - - -// Pour réactiver le drag-and-drop, vous pouvez supprimer les gestionnaires d'événements -function enableDrag() { - // Supprimez le gestionnaire d'événement pour l'événement dragover - document.removeEventListener('dragover', function (e) { - e.preventDefault(); // Empêche le comportement par défaut du navigateur - }); - - // Supprimez le gestionnaire d'événement pour l'événement drop - document.removeEventListener('drop', function (e) { - e.preventDefault(); // Empêche le comportement par défaut du navigateur - }); -} - diff --git a/src/web/public/javascript/__login_script.js b/src/web/public/javascript/__login_script.js deleted file mode 100644 index b1b43c6..0000000 --- a/src/web/public/javascript/__login_script.js +++ /dev/null @@ -1,11 +0,0 @@ -const loginBtn = document.getElementById("loginBtn") - -loginBtn.addEventListener("click", () => { - - const discordLink = get("DISCORD_LOGIN_LINK") - discordLink.then(link => { - - window.location.href = link - }) - -}) \ No newline at end of file diff --git a/src/web/public/javascript/basics.js b/src/web/public/javascript/basics.js new file mode 100644 index 0000000..a990651 --- /dev/null +++ b/src/web/public/javascript/basics.js @@ -0,0 +1,187 @@ +/** + * @param {string} id + * @returns element + */ +function getID(id) { + return document.getElementById(id); +} + +// Get The position of the mouse + +var xMousePos = 0; +var yMousePos = 0; + +document.onmousemove = function(e) +{ + xMousePos = e.clientX + window.scrollX; + yMousePos = e.clientY + window.scrollY; + +} + +function disableDrag() { + // Ajoutez un gestionnaire d'événement pour l'événement dragover + document.addEventListener('dragover', function (e) { + e.preventDefault(); // Empêche le comportement par défaut du navigateur + }); + + // Ajoutez un gestionnaire d'événement pour l'événement drop + document.addEventListener('drop', function (e) { + e.preventDefault(); // Empêche le comportement par défaut du navigateur + }); +} + + + +// Pour réactiver le drag-and-drop, vous pouvez supprimer les gestionnaires d'événements +function enableDrag() { + // Supprimez le gestionnaire d'événement pour l'événement dragover + document.removeEventListener('dragover', function (e) { + e.preventDefault(); // Empêche le comportement par défaut du navigateur + }); + + // Supprimez le gestionnaire d'événement pour l'événement drop + document.removeEventListener('drop', function (e) { + e.preventDefault(); // Empêche le comportement par défaut du navigateur + }); +} + + +function startInterval() { + interval = setInterval(() => { + + + if(isPlaying == true) { + setTime() + + } + + }, 1000) + +} + +function stopInterval() { + clearInterval(interval); +} + + + +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 + + } + + + + durationTextAct.innerHTML = now + durationTextTotal.innerHTML = max +} + +function getTimeCode(pdurationAll) { + var pmax = "" + + + const pmaxhours = Math.floor(pdurationAll / 3600000); + + var pmaxmin = Math.trunc(pdurationAll / 60000) - (Math.floor(pdurationAll / 60000 / 60) * 60); + var pmaxsec = Math.floor(pdurationAll / 1000) - (Math.floor(pdurationAll / 1000 / 60) * 60); + + + if (pmaxsec < 10) { + pmaxsec = `0${pmaxsec}`; + } + + + if(pmaxhours != 0) { + + if (pmaxmin < 10) { + pmaxmin = `0${pmaxmin}`; + } + + + pmax = pmaxhours + ":" + pmaxmin + ":" + pmaxsec + } else { + pmax = pmaxmin + ":" + pmaxsec + + } + return pmax +} + +function loadHome() { + + userLocation = "home" + + mainView.innerHTML = WelcomeContent + + get("ALL_CONNECTED_USER") + get("ALL_RADIO") + + + +} + +const buttons = document.querySelectorAll(".sside_line"); + + buttons.forEach(button => { + button.addEventListener("click", function () { + buttons.forEach(btn => { + if (btn === button) { + btn.style.color = "white"; + } else { + btn.style.color = ""; + } + }); + }); + }); \ No newline at end of file diff --git a/src/web/public/javascript/indexscript.js b/src/web/public/javascript/indexscript.js new file mode 100644 index 0000000..1fa1629 --- /dev/null +++ b/src/web/public/javascript/indexscript.js @@ -0,0 +1,137 @@ + +updateUsersPictures() + +AlwaysRequest("UPDATE_SELF", () => { + updateUsersPictures() +}) + +function updateUsersPictures() { + + const userInfo = get("USER_INFO") + + userInfo.then(user => { + + settingsBtn.style.display = "none" + + if(user.admin == true) { + + settingsBtn.style.display = "flex" + userAdmin = true + } + + userInfoDiv.innerHTML = "" + user.user.global_name + "
" + user.user.username + "
Utilisateurs connecté(es)
") + + for(var user of data) { + + userToPush.push(`${user.global_name}
${user.username}
'
+ musicTitle.innerHTML = "Aucun titre joué
" + loop.classList.add("invisible") + takeCurrent.classList.add("invisible") + } else { + + var thumbnail = data.current.thumbnail + + if(!thumbnail) { + + thumbnail = "/images/black-image.svg" + } + + musicURL.innerHTML = '" + data.current.title + "
" + currentSong = data.current + takeCurrent.classList.remove("invisible") + loop.classList.remove("invisible") + } + + if(data.durationAll) { + durationBar.disabled = false + durationBar.classList.remove("grised") + setTime() + + durationAll = data.durationAll + durationProgress = data.durationNow + durationBar.value = durationProgress + setTime() + + } else { + + + isPlaying = false + durationAll = 0 + durationProgress = 0 + durationBar.disabled = true + durationBar.classList.add("grised") + durationBar.value = 0 + durationTextAct.innerHTML = "-:--" + durationTextTotal.innerHTML = "-:--" + + } + + + if(data.playing == 1) { + play.innerHTML = '' + isPlaying = true + startInterval() + } else { + + play.innerHTML = '' + isPlaying = false + + } + + + + if(data.current && data.playing == 0) { + setTime() + + } + + if(data.durationAll == 9223372036854776000) { + + isPlaying = false + durationAll = 0 + durationProgress = 0 + durationBar.disabled = true + durationBar.classList.add("grised") + durationBar.style.display = "none" + durationBar.value = 0 + durationTextAct.innerHTML = "" + durationTextTotal.innerHTML = " LIVE" + + } else { + + durationBar.style.display = "unset" + } + + + + 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) + var thumbnail = title.thumbnail + if(!thumbnail) { + + thumbnail = "/images/black-image.svg" + + } + contentToPush.push('' + title.title + '
Aucun morceau dans la liste de lecture !
' + + } else { + listNumber.innerHTML = '' + queueNum + '' + listNumber.classList.remove("invisible") + listBox.innerHTML = contentToPush.join("") + } + + //CODE INTEGER QUEUE LIST MOVE + + const container = document.getElementById('listBox'); + const draggableItems = document.querySelectorAll('.draggable'); + + let draggingElement = null; + + draggableItems.forEach(item => { + item.addEventListener('dragstart', (e) => { + e.dataTransfer.setData('text/plain', item.innerHTML); + draggingElement = item; + }); + + item.addEventListener('dragend', () => { + draggingElement = null; + setTimeout(() => { + item.style.display = 'flex'; // Restaure l'affichage de l'élément + }, 0); + updateOrder(); + }); + }); + + container.addEventListener('dragover', (e) => { + e.preventDefault(); + const afterElement = getDragAfterElement(container, e.clientY); + if (draggingElement !== null) { + if (afterElement == null) { + container.appendChild(draggingElement); + } else { + const rect = afterElement.getBoundingClientRect(); + if (e.clientY < rect.top + rect.height / 2) { + container.insertBefore(draggingElement, afterElement); + } else { + container.insertBefore(draggingElement, afterElement.nextElementSibling); + } + } + } + }); + + function getDragAfterElement(container, y) { + const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')]; + return draggableElements.reduce((closest, child) => { + const box = child.getBoundingClientRect(); + const offset = y - box.top - box.height / 2; + if (offset < 0 && offset > closest.offset) { + return { offset: offset, element: child }; + } else { + return closest; + } + }, { offset: Number.NEGATIVE_INFINITY, element: null }).element; + } + + function updateOrder() { + const draggableItems = document.querySelectorAll('.draggable'); + const order = []; + draggableItems.forEach(item => { + order.push(item.id.replace("_queue_song", "")); + }); + console.log('Ordre des divs:', order); + post("MOVE_QUEUE_BY_ENTIRE", order) + } + + + + // END OF CODE INTEGER + + 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", () => { + + post("DELETE_QUEUE", titleBtn.id.replace("_ldelete", ""), data.queue[moveBtn.id.replace("_lmove", "")].title ) + }) + + moveBtn.addEventListener("click", () => { + + post("MOVE_QUEUE", moveBtn.id.replace("_lmove", "")) + + }) + } + + + } else { + + listBox.innerHTML = 'Lancez un titre et ajoutez vos morceaux ici !
' + listNumber.classList.add("invisible") + } + +}) + + + +play.addEventListener('click', () => { + + get("PAUSE") +}) + +document.body.onkeyup = function(e) { + + if ((e.key == " " || + e.code == "Space" || + e.keyCode == 32) && + e.srcElement.localName != "input" && e.srcElement.localName != "textarea" + ) { + play.click() + } + } + +backward.addEventListener('click', () => { + + get("BACKWARD") +}) + + +forward.addEventListener("click", () => { + + get("FORWARD") +}) + +volBox.classList.add("invisible") +listBox.classList.add("invisible") + +list.addEventListener("click" , () => { + + volBox.classList.add("invisible") + + if(listBox.classList.contains('invisible')) { + listBox.classList.remove("invisible") + + } else { + + listBox.classList.add("invisible") + } +}) + +vol.addEventListener("click", () => { + + listBox.classList.add("invisible") + + if(volBox.classList.contains('invisible')) { + volBox.classList.remove("invisible") + + } else { + + volBox.classList.add("invisible") + } + +}) + +volRange.addEventListener("click", () => { + + + post("VOLUME", volRange.value) +}) + +volRange.addEventListener("input", () => { + + + volTxt.innerHTML = volRange.value + "%" +}) + +loop.addEventListener("click", () => { + + get("LOOP") +}) + +shuffle.addEventListener("click", () => { + + get("SHUFFLE") +}) + + +disconnect.addEventListener("click", () => { + + get("DISCONNECT") +}) + + +durationBar.addEventListener("change", () => { + + post("SEEK", durationBar.value) + +}) \ No newline at end of file diff --git a/src/web/public/javascript/playlist.js b/src/web/public/javascript/playlist.js new file mode 100644 index 0000000..2d87301 --- /dev/null +++ b/src/web/public/javascript/playlist.js @@ -0,0 +1,312 @@ +function delPlayList(key) { + + post("DELETE_PLAYLIST", key) + mainView.innerHTML = WelcomeContent + playlistSelected = null + playlistValue = null + +} + + +function playPlayList(key) { + + post("PLAY_PLAYLIST", key) + + +} + +function sendPlayList(key) { + + const playlist_popup = document.getElementById("playlist_popup") + + if(playlist_popup) { + + get("USER_LIST").then(resp => { + + const userToPush = new Array() + + for(var user of resp) { + + userToPush.push(`${user.global_name}
${user.username}
' + title.title + '
' + title.author + '
' + PFormatduration + '
' + key + '
Aucun morceau trouvé !
' + + } else { + + mainView.innerHTML = playlistToPush.join("") + + + } + + for(var title of value) { + + const add_to = document.getElementById(value.indexOf(title) + "_padd") + const playNow = document.getElementById(value.indexOf(title) + "_pplay") + const deleteBtn = document.getElementById(value.indexOf(title) + "_pdelete") + + add_to.addEventListener("click", () => { + + post("ADD_SONG", value[add_to.id.replace("_padd", "")]) + }) + + playNow.addEventListener("click", () => { + + post("ADD_SONG_NOW", value[add_to.id.replace("_padd", "")]) + + }) + + deleteBtn.addEventListener("click", () => { + + deleteJustBefore = true + post("DELETE_SONG_TO_PLAYLIST", {data: key, song: value[add_to.id.replace("_padd", "")]}) + + }) + + + } + +} + +function fp_play_playlist(key) { + + post("FP_PLAY_PLAYLIST", key) +} + +socket.on("DO_UPDATE_PLAYLIST", () => { + + get("PLAYLIST") +}) + +get("PLAYLIST") + + +socket.on("ANSWER/GET/PLAYLIST", (data) => { + var contentToPush = new Array() + var selectionData = new Array() + + contentToPush.push(`Mes Playlists
`) + contentToPush.push('' + key + '
Aucun morceau trouvé !
' + + } else { + + playlistContent.innerHTML = contentToPush.join("") + playlistAvailable = selectionData + } + + if(playlistSelected && deleteJustBefore || playlistSelected && userLocation == "playlist") { + deleteJustBefore = null + loadPlaylist(playlistSelected, data[playlistSelected]) + } + + for (const [key, value] of Object.entries(data)) { + + const playlist_selector = document.getElementById(key + '_playlist') + + playlist_selector.addEventListener("click", () => { + + loadPlaylist(key, value) + userLocation = "playlist" + + }) + } + + const buttons = document.querySelectorAll(".checker"); + + buttons.forEach(button => { + button.addEventListener("click", function () { + buttons.forEach(btn => { + if (btn === button) { + btn.style.color = "white"; + } else { + btn.style.color = ""; + } + }); + }); + }); + + + const addPlaylist = document.getElementById("createPlaylist") + const addPlaylist_dialog = document.getElementById("createPlaylist_dialog") + const addPlaylist_close = document.getElementById("createPlaylist_close") + const apText = document.getElementById("apText") + const apInfo = document.getElementById("apInfo") + const apCreate = document.getElementById("apCreate") + + + addPlaylist_close.addEventListener("click", () => { + apInfo.innerHTML = "" + addPlaylist_dialog.close() + }) + + addPlaylist.addEventListener("click", () => { + + apText.innerHTML = "" + addPlaylist_dialog.showModal() + }) + + apCreate.addEventListener("click", () => { + apInfo.innerHTML = "" + var wrongName = true + + const refusedChar = ['\\','/' ,':' ,'*','?' ,'"','<','>','|'] + + for(var char of refusedChar) { + + if(apText.value.includes(char)) { + wrongName = false + + } + } + + if(apText.value != "" && apText.value != " " && wrongName) { + + addPlaylist_dialog.close() + post("CREATE_PLAYLIST", apText.value) + } else { + + apInfo.innerHTML = "Le nom n'est pas valide !" + } + + + }) + + + + console.log(data) +}) + + + +// Current Playlist and Song + +const cPlaylistManager = document.getElementById("current_playlistManager") +const cplaylistManager_close = document.getElementById("current_playlistManager_close") +const cplaylistSelection = document.getElementById("current_playlistSelection") +const cplaylist_add_music = document.getElementById("current_playlist_add_music") +const cplaylist_add_img = document.getElementById("current_playlist_add_img") +const cplaylistAddSong = document.getElementById("current_playlistAddSong") + +takeCurrent.addEventListener("click", () => { + + if(currentSong != null) { + + var thumbnail = currentSong.thumbnail + + if(!thumbnail) { + + thumbnail = "/images/black-image.svg" + } + + cPlaylistManager.showModal() + cplaylist_add_music.innerHTML = currentSong.title + cplaylist_add_img.src = thumbnail + cplaylistSelection.innerHTML = playlistAvailable + + } + +}) + +cplaylistManager_close.addEventListener("click", () => { + + cPlaylistManager.close() +}) + +cplaylistAddSong.addEventListener("click", () => { + + + cPlaylistManager.close() + post("ADD_SONG_TO_PLAYLIST", {data: cplaylistSelection.value , song: currentSong} ) + + + +}) \ No newline at end of file diff --git a/src/web/public/javascript/radios.js b/src/web/public/javascript/radios.js new file mode 100644 index 0000000..015e235 --- /dev/null +++ b/src/web/public/javascript/radios.js @@ -0,0 +1,100 @@ +AlwaysRequest("ALL_RADIO", (resp) => { + if(userLocation == "home") { + + const radio_list = document.getElementById("radio_list") + const radioToPush = new Array() + + radioToPush.push("Radio
") + radioToPush.push(` + + `) + + + + for(var title of resp ) { + + var thumbnail = title.thumbnail + if(!thumbnail) { + + thumbnail = "/images/black-image.svg" + + } + + radioToPush.push(`${title.title} - ${title.author}
' + title.title + '
' + title.author + '
' + PFormatduration + '
Aucun morceau trouvé !
' + + } else { + + searchcontent.innerHTML = contentToPush.join("") + } + + for(var title of data) { + + const add_to = document.getElementById(data.indexOf(title) + "_ladd") + const test_lmore = document.getElementById(data.indexOf(title) + "_lmore") + const testPopup = document.getElementById(data.indexOf(title) + "_popup") + const playNow = document.getElementById(data.indexOf(title) + "_playNow") + const copy = document.getElementById(data.indexOf(title) + "_copy") + const addPlaylist = document.getElementById(data.indexOf(title) + "_goPlaylist") + + const PlaylistManager = document.getElementById(data.indexOf(title) + "playlistManager") + const playlistManager_close = document.getElementById(data.indexOf(title) + "playlistManager_close") + const playlistSelection = document.getElementById(data.indexOf(title) + "playlistSelection") + const playlist_add_music = document.getElementById(data.indexOf(title) + "playlist_add_music") + const playlist_add_img = document.getElementById(data.indexOf(title) + "playlist_add_img") + const playlistAddSong = document.getElementById(data.indexOf(title) + "playlistAddSong") + + var thumbnail = data[add_to.id.replace("_ladd", "")].thumbnail + + if(!thumbnail) { + + thumbnail = "/images/black-image.svg" + } + + testPopup.style.display = "none" + + add_to.addEventListener("click", () => { + + post("ADD_SONG", data[add_to.id.replace("_ladd", "")]) + }) + + copy.addEventListener("click", () => { + navigator.clipboard.writeText(data[add_to.id.replace("_ladd", "")].uri) + testPopup.style.display = "none" + }) + + addPlaylist.addEventListener("click", () => { + + PlaylistManager.showModal() + playlist_add_music.innerHTML = data[add_to.id.replace("_ladd", "")].title + playlist_add_img.src = thumbnail + playlistSelection.innerHTML = playlistAvailable + }) + + playlistManager_close.addEventListener("click", () => { + + PlaylistManager.close() + }) + + playlistAddSong.addEventListener("click", () => { + + + PlaylistManager.close() + + post("ADD_SONG_TO_PLAYLIST", {data: playlistSelection.value , song: data[add_to.id.replace("_ladd", "")]}) + + }) + + test_lmore.addEventListener("click",( ) => { + + + testPopup.style.display = "flex" + testPopup.style.top = yMousePos + "px" + + }) + + testPopup.addEventListener("mouseleave", () => { + + testPopup.style.display = "none" + + }) + + playNow.addEventListener("click", () => { + + post("ADD_SONG_NOW", data[add_to.id.replace("_ladd", "")]) + + }) + + + + + } + + + } else { + + searchcontent.innerHTML = 'Aucun morceau trouvé !
' + + } + + } else { + + //https://www.youtube.com/playlist?list=PLA8VHLKYzqTvCcIKhsjGS41nG1zBpRZPy + + + var playlistToPush = new Array() + var playlist_songs = new Array() + + + for(var title of results.videos) { + + var PFormatduration = getTimeCode(title.milis_length) + + if(title.milis_length == 9223372036854776000) { + + PFormatduration = " LIVE" + } + + + playlist_songs.push('' + title.title + '
' + title.author.name + '
' + PFormatduration + '
' + results.author.name + " - (" + results.videos.length + " titres)" + '
' + results.title + '
Aucun morceau trouvé !
' + + } else { + + searchcontent.innerHTML = playlistToPush.join("") + + + } + + + + + for(var title of results.videos) { + + const add_to = document.getElementById(results.videos.indexOf(title) + "_padd") + const playNow = document.getElementById(results.videos.indexOf(title) + "_pplay") + + + add_to.addEventListener("click", () => { + + post("FP_ADD_SONG", results.videos[add_to.id.replace("_padd", "")].url) + }) + + playNow.addEventListener("click", () => { + + post("FP_ADD_SONG_NOW", results.videos[add_to.id.replace("_padd", "")].url) + + }) + + + + + } + } + + }) + + }) +}) \ No newline at end of file diff --git a/src/web/public/javascript/__settings_script.js b/src/web/public/javascript/settings.js similarity index 74% rename from src/web/public/javascript/__settings_script.js rename to src/web/public/javascript/settings.js index 0e3bba4..726220c 100644 --- a/src/web/public/javascript/__settings_script.js +++ b/src/web/public/javascript/settings.js @@ -1,9 +1,7 @@ -var wasOnNodes = false settingsBtn.addEventListener("click", () => { - wasOnHome = false - + mainView.innerHTML = `BETA
" + user.user.global_name + "
" + user.user.username + "
" + user.user.global_name + "
" + user.user.username + "
DEVELOPEMENT
"}) + } else { + + res.render("index", {welcome: fileMd, dev: ""}) + } + } diff --git a/src/web/routes/internal.js b/src/web/routes/internal.js index 2a724c9..21172f6 100644 --- a/src/web/routes/internal.js +++ b/src/web/routes/internal.js @@ -2,7 +2,7 @@ var express = require('express'); var router = express.Router(); var path = require("path") var auth = require("../../modules/sub-auth") -var log = require("../../modules/sub-log") +var log = require("loguix") var uuid = require("uuid") var fs = require("fs"); const { __glob, __web } = require('../../modules/global-variables'); @@ -31,7 +31,12 @@ router.get('/redirect', function(req, res, next) { var user = data const token = uuid.v4().toString() - user.token = token + if(typeof user.token != "object") { + + user.token = [] + } + + user.token.push(token) auth.addUser(user) res.cookie("token", token, { maxAge: 90000000000000, httpOnly: true }) @@ -51,11 +56,7 @@ router.get('/redirect', function(req, res, next) { res.redirect('/login?error=MIGRATE_ACCOUNT_ONLY') - } else if(error == "NOT_IN_BETA") { - - res.redirect('/login?error=NOT_IN_BETA') - - } else if(error == "NOT_IN_CLP") { + } else if(error == "NOT_IN_CLP") { res.redirect('/login?error=NOT_IN_CLP') @@ -92,11 +93,25 @@ router.get("/socketlink", (req,res,next) => { } }) +router.get("/discordlink", (req,res,next) => { + var discordlink = null + if(process.env.DEV) { + + alog.log("Mode Developpeur Actif : Redirige vers LOCALHOST") + discordlink = "https://discord.com/api/oauth2/authorize?client_id=1094727789682380922&redirect_uri=http%3A%2F%2Flocalhost%3A4000%2Finternal%2Fredirect&response_type=code&scope=identify%20guilds%20guilds.members.read" //DEV + } else { + discordlink = "https://discord.com/api/oauth2/authorize?client_id=1094727789682380922&redirect_uri=https%3A%2F%2Fsubsonics.raphix.fr%2Finternal%2Fredirect&response_type=code&scope=identify%20guilds%20guilds.members.read" //OFFICIEL + } + + res.redirect(302, discordlink) + +}) + router.get("/logout", (req,res,next) => { if(auth.checkUser(req.cookies.token)) { - auth.removeUser(req.cookies.token) + auth.removeToken(req.cookies.token) res.clearCookie("token") res.redirect(302, "/login") } else { diff --git a/src/web/routes/login.js b/src/web/routes/login.js index e2a1f65..1514905 100644 --- a/src/web/routes/login.js +++ b/src/web/routes/login.js @@ -2,7 +2,7 @@ var express = require('express'); var router = express.Router(); var path = require("path") var auth = require("../../modules/sub-auth") -var log = require("../../modules/sub-log") +var log = require("loguix") var package = require('../../../package.json') var uuid = require("uuid") @@ -49,12 +49,7 @@ router.get('/', function(req, res, next) { } - if(req.query.error == "NOT_IN_BETA") { - - error = "Demande Ă Raphix pour t'inscrire Ă la Beta !
" - - } - + res.render("login", {login: error, version: verInfo}) } diff --git a/src/web/templates/index.ejs b/src/web/templates/index.ejs index 3c321f7..b8ac743 100644 --- a/src/web/templates/index.ejs +++ b/src/web/templates/index.ejs @@ -148,8 +148,19 @@ - - + + + + + + + + + + + + +
+ Subsonics
+Accueil
+Rechercher
+Paramètres
+
+ Aucun titre joué
+ <%- dev %> +
+ Lorem ipsum, dolor sit amet consectetur adipisicing elit.
+