+
+ ${this.userName}
+${this.userId}
+
-${this.userName}
+${this.userId}
+${timecode}
+${this.title}
+${this.author}
+Chargement en cours ...
` + + } else { + loadView(` +Chargement en cours ...
+ `) + } } -const buttons = document.querySelectorAll(".sside_line"); +function saveToPlaylist(url) { + get("PLAYLIST").then((res) => { + + var allPlaylistOptions = new Array() + for(var playlist in res) { + var indicator = "[Privée] " - 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 + if(res[playlist].source == "shared") { + indicator = "[Partagée] " + } + + if(res[playlist].source != "youtube") { + allPlaylistOptions.push(``) + } + + + + } + + if(allPlaylistOptions.length == 0) { + //Make a modal named "Error" with close button and a message + const modalError = new ModalComponent({"title": " Erreur", width: "20%"}) + + modalError.setContent(`Vous n'avez aucune playlist pour ajouter cette musique
+" + user.user.global_name + "
" + user.user.username + "
Utilisateurs connecté(es)
") - - for(var user of data) { - - userToPush.push(`${user.global_name}
${user.username}
En utilisant ce site, vous consentez à l'utilisation de vos données fournis par Discord (c) afin d'assurer le bon fonctionnement de la plateforme. Vous avez la possibilité de demander la suppression de vos données à tout moment en contactant Raphix (raphixscrap). Tout acte intentionnel de dégradation du bot entraînera un bannissement du site.
+Ce bot est destiné à un usage privé exclusivement et n'est pas conçu pour être utilisé par le grand public.
+Toutes les musiques disponibles sur ce site sont hébergées sur les plateformes suivantes : Youtube, Soundcloud, Vimeo.
+En utilisant Subsonics, vous bénéficiez du droit d'accès au service et de l'écoute du contenu. Cependant, veuillez noter que Raphix n'est pas tenu de fournir la provenance ni l'autorisation d'exploitation des musiques par les ayants droits. Il vous incombe donc d'obtenir les autorisations nécessaires des ayants droits pour écouter le contenu.
+Les paroles fournies sur ce site sont obtenues auprès de Genius (c).
+En utilisant Subsonics, vous acceptez de respecter les conditions d'utilisation de Genius (c) et de ne pas utiliser les paroles à des fins commerciales.
+En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus illégaux, violents, haineux, discriminatoires, ou à caractère sexuel.
+En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère politique, religieux, ou incitant à la haine.
+En utilisant Subsonics, vous acceptez de ne pas utiliser le bot pour diffuser des contenus à caractère publicitaire ou pornographique.
+` + + +get("OOBE_CHECK").then((res) => { + if(res) { + loadOOBE() + } +}) + +function loadOOBE() { + const modal = new ModalComponent({"title": "
Bienvenue sur Subsonics WEB Subsonics Web est un outil pour gérer le bot Discord Subsonics.
+Vous pouvez créer des playlists, jouer de la musique, importer des playlists depuis YouTube, et bien plus encore.
+Avant de commencer à utiliser Subsonics Web, vous devez accepter les conditions d'utilisation.
+En utilisant Subsonics Web, vous acceptez de respecter les conditions d'utilisation suivantes :
+ ${cgu} + Bienvenue sur Subsonics WEB Le player est l'élément central de Subsonics Web. C'est ici que vous pourrez contrôler la musique que vous écoutez.
+Titre de la vidéo
+Nom de la chaine
+Appuyez sur ce bouton mettre en pause ou reprendre la lecture de la musique.
+Appuyez sur ce bouton pour revenir au début de la musique actuelle.
+Appuyez sur ce bouton pour passer à la musique suivante.
+Appuyez sur ce bouton pour activer ou désactiver la répétition de la musique actuelle.
+Appuyez sur ce bouton pour activer ou désactiver la lecture aléatoire des musiques.
+Appuyez sur ce bouton pour afficher les paroles - Ctrl + Click Recherche n'importe quelles paroles sur Genius.
+Appuyez sur ce bouton pour déconnecter le bot de votre salon vocal.
+Appuyez sur ce bouton pour déplacer le bot dans votre salon vocal.
+Utilisez ce curseur pour régler le volume de la musique.
+Utilisez ce curseur pour régler la position de la musique.
+ Bienvenue sur Subsonics WEB La liste de lecture est l'endroit où vous pouvez gérer les musiques que vous souhaitez écouter.
+Liste de lecture
+ +-:--
Titre de la vidéo
+Nom de la chaine
+-:--
Titre de la vidéo
+Nom de la chaine
+À suivre
+Historique
+Utilisez ces boutons pour changer de liste de lecture.
+ +-:--
Vous pouvez déplacer les titres dans l'ordre que vous le souhaitez en glissant et en déposant
+Appuyez sur ce bouton pour vider la liste de lecture.
+Appuyez sur ce bouton pour afficher les options de la musique. - Ctrl + Click Permet de supprimer la musique de la liste de lecture.
+ Bienvenue sur Subsonics WEB Les playlists sont un moyen pratique de regrouper vos musiques préférées. Elles peuvent provenir de Youtube, peuvent être privé comme partagé.
+Playlists
+ + +Playlist Privé
+Playlist importé depuis Youtube
+Playlist Partagé
+ Bienvenue sur Subsonics WEB Les playlists sont un moyen pratique de regrouper vos musiques préférées. Elles peuvent provenir de Youtube, peuvent être privé comme partagé.
+Titre de la playlist
+-- titres
+Titre d'une playlist Youtube
+-- titres - --- vues
+Description de la playlist
+
+
+
+
+ Cliquez dessus pour accéder à la chaine Youtube de l'auteur de la playlist.
+Ctrl + Click pour copier le lien de la playlist
+Appuyez sur ce bouton pour ajouter la playlist à la liste de lecture.
+Appuyez sur ce bouton pour lire directement la playlist.
+Appuyez sur ce bouton pour partager la playlist.
+Appuyez sur ce bouton pour supprimer la playlist.
+Appuyez sur ce bouton pour renommer la playlist.
+ Bienvenue sur Subsonics WEB La recherche est un outil puissant pour trouver des musiques depuis Vimeo, Soundcloud et Youtube. Vous pouvez aussi rechercher des playlists sur Youtube.
+-:--
+Titre de la vidéo
+Nom de la chaine
+
-:--
+Titre de la vidéo
+Nom de la chaine
+
-:--
+Titre de la vidéo
+Nom de la chaine
+
-:--
+Titre de la vidéo
+Nom de la chaine
+
Utilisez cette barre de recherche pour trouver des musiques sur Youtube, Soundcloud et Vimeo.
+Appuyez sur ce bouton pour ajouter la musique à la liste de lecture.
+Appuyez sur ce bouton pour lire directement la musique.
+Appuyez sur ce bouton pour sauvegarder la musique dans une playlist.
+ Bienvenue sur Subsonics WEB Vous avez maintenant appris les bases de Subsonics Web. Vous pouvez maintenant commencer à utiliser le site.
+Mais avant de commencer, n'oubliez pas ces quelques conseils :
+ +" + data.current.title + "
" + video_artist.innerHTML = "" + data.current.author + "
" + + // Get the width of the title and check if it's above 400px (the max width of the title) + var titleWidth = video_title.querySelector("p").offsetWidth + if(titleWidth > 400) { + video_title.innerHTML = "" + data.current.title + " -
" + "" + data.current.title + " -
" + video_title.classList.add("scroll") + } else { + video_title.classList.remove("scroll") + } + + video_img.classList.remove("invisible") + video_title.classList.remove("invisible") + video_artist.classList.remove("invisible") + + + + play.classList.remove("disabled") + setTime() + + + } else { + + video_img.classList.add("invisible") + video_title.classList.add("invisible") + video_artist.classList.add("invisible") + + + play.classList.add("disabled") + currentTitle = "" + } + + if(data.queue) { + loadQueue(data.queue, "next") + actualiseQueue() + } else { + loadQueue(null, "next") + actualiseQueue() + } + + if(data.previous) { + loadQueue(data.previous, "previous") + actualiseQueue() + } else { + loadQueue(null, "previous") + actualiseQueue() + } + + if(data.volume) { - volRange.step = 1 - volRange.max = 200 - volRange.min = 1 - volRange.value = Math.trunc(data.volume / 10) + volume.step = 1 + volume.max = 200 + volume.min = 1 + volume.value = Math.trunc(data.volume / 10) volTxt.innerHTML = Math.trunc(data.volume / 10) + "%" var volNum = Math.trunc(data.volume / 10) - - - } else { - - volRange.classList.add("disabled") - volRange.disabled = true - volRange.value = 0 - volTxt.innerHTML = "0%" - } - - if(data.shuffle == true) { - shuffle.innerHTML = '' - - } else { - - shuffle.innerHTML = '' - } - - if(data.loop == true) { - loop.innerHTML = '' - - } else { - - loop.innerHTML = '' - } - - if(data.current == null) { - - musicURL.innerHTML = '
'
- 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" + if(volNum == 1) { + volIcon.innerHTML = '' + } else if(volNum < 99) { + volIcon.innerHTML = '' + } else { + volIcon.innerHTML = '' } - 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 + play.innerHTML = '' + playerState = "PLAYING" startInterval() } else { - play.innerHTML = '' - isPlaying = false + play.innerHTML = '' + playerState = "PAUSED" } - - - 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("") + durationTotal = data.durationAll + durationAct = data.durationNow + setTime() + durationBar.disabled = false + durationBar.max = durationTotal + durationBar.value = durationAct + durationBar.classList.remove("invisible") + setTime() } - - //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", () => { + + } else { - post("VOLUME", volRange.value) + durationBar.classList.add("invisible") + durationBar.disabled = true + time_act.innerHTML = " " + time_total.innerHTML = " " + + } + + + + }) -volRange.addEventListener("input", () => { - - - volTxt.innerHTML = volRange.value + "%" -}) loop.addEventListener("click", () => { @@ -364,8 +237,190 @@ disconnect.addEventListener("click", () => { }) -durationBar.addEventListener("change", () => { - +durationBar.addEventListener("click", (event) => { + stopInterval() post("SEEK", durationBar.value) + startInterval() +}) + +durationBar.addEventListener("input", (event) => { + stopInterval() + time_act.innerHTML = getTimeCode(durationBar.value) +}) -}) \ No newline at end of file +volume.addEventListener("click", () => { + + + post("VOLUME", volume.value) +}) + +volume.addEventListener("dblclick", () => { + + post("VOLUME", 100) +}) + +play.addEventListener('click', () => { + + get("PAUSE") +}) + +forward.addEventListener('click', () => { + + get("FORWARD") +}) + +backward.addEventListener('click', () => { + + get("BACKWARD") +}) + + +moveout.addEventListener('click', () => { + get("MOVEOUT") +}) + +lyrics.addEventListener('click', (e) => { + + currentTitle = currentTitle.replace(/\(.*?\)/g, "").replace(/\[.*?\]/g, "").trim() + + if(e.ctrlKey) { + const modal = new ModalComponent({"title": "Rechercher des paroles" , "width": "25%", "closable": true}) + + modal.setContent(` +Lancez une musique pour rechercher les paroles ou faites Ctrl + Click !
+ `) + + modal.show() + } + } + + +}) + +function showLyrics(title) { + post("LYRICS", title).then((res) => { + if(!res) { + const modal = new ModalComponent({"title": "Paroles" , "width": "50%", "closable": true}) + modal.setContent(` +Aucune paroles trouvées pour cette musique !
+ `) + + modal.show() + } else { + + + const lyricsArray = new Array() + + for(var line of res.split("\n")) { + if(line == "") { + lyricsArray.push("" + line + "
") + } else { + lyricsArray.push("" + line + "
") + } + + + } + + + lyricsArray.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"; + post("CREATE_PLAYLIST", data).then((data) => { + if(data.status == "error") { + getID("playlist-add-info").innerHTML = "" + data.message } else { - btn.style.color = ""; + win.hide() + loadPlaylistList() } - }); - }); - }); - - - 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 !" + getID("playlist-add-info").innerHTML = " Le nom de la playlist ne peut pas être vide" } - - }) - - - 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" + source.addEventListener("change", () => { + if(source.value == "youtube") { + url.style.display = "block" + } else { + url.style.display = "none" } - - cPlaylistManager.showModal() - cplaylist_add_music.innerHTML = currentSong.title - cplaylist_add_img.src = thumbnail - cplaylistSelection.innerHTML = playlistAvailable - - } - + }) }) -cplaylistManager_close.addEventListener("click", () => { +loadPlaylistList() - cPlaylistManager.close() -}) +AlwaysRequest("PLAYLIST_REFRESH", () => { -cplaylistAddSong.addEventListener("click", () => { - - - cPlaylistManager.close() - post("ADD_SONG_TO_PLAYLIST", {data: cplaylistSelection.value , song: currentSong} ) - + loadPlaylistList() -}) \ No newline at end of file +}) + +function loadPlaylistList() { + get("PLAYLIST").then((data) => { + + var playlists = new Array() + playlistList.innerHTML = "" + + for(var playlist in data) { + + const playlistTile = new PlaylistComponent(playlist, data[playlist]) + playlists.push(playlistTile) + playlistList.innerHTML += playlistTile.generateHTML() + + if(playlistId == playlist) { + loadPlaylist(playlistId, data[playlist]) + + } + } + + for(var playlist of playlists) { + playlist.loadScript() + } + + + + + }) +} + +class PlaylistComponent { + constructor(id, data) { + this.title = data.title + this.id = id + this.source = data.source + this.content = data.content + this.self = data + } + + generateHTML() { + + var logo = "fa fa-music" + if(this.source == "shared") { + logo = "fas fa-share-alt" + } else if(this.source == "youtube") { + logo = "fab fa-youtube" + } + + return ` +${this.title}
+${properties.title}
+${properties.content.length} titres
+Aucun titre dans cette playlist
" + } + + for(var song of songList) { + song.loadScript(true, true) + } + +} + + +function loadYoutubePlaylist(res, id, properties) { + var author = "" + console.log(res.results.author) + + if(res.results.author) { + author = ` +${res.results.title}
+${res.results.videos.length} titres - ${res.results.view_count} vues
+${res.results.description}
+Êtes-vous sûr de vouloir supprimer la playlist ?
+ +Subsonics est déconnecté
" + if(type == "previous") { + listDiv.innerHTML = "Aucune musique n'a été jouée
" + } + + } else if(queue.length > 0) { + console.log(queue) + var videoList = new Array() + + for(var song of queue) { + if(type == "next") { + song.type = "next" + } else { + song.type = "previous" + } + song.numList = queue.indexOf(song) + var video = new VideoQueue(song) + listDiv.innerHTML += video.generateHTML() + videoList.push(video) + } + + for(var video of videoList) { + + video.loadScript() + } + + const container = listDiv; + 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); + } + } + } + }); + + } else { + if(type == "next") { + listDiv.innerHTML = "Aucune musique n'est en attente
" + } else if(type == "previous") { + listDiv.innerHTML = "Aucune musique n'a été jouée
" + } + } +} + +function actualiseQueue() { + if(selectedQueue == "next") { + showQueue(nextQueue, "next") + } else if(selectedQueue == "previous") { + showQueue(previousQueue, "previous") + } +} + + +class VideoQueue { + constructor(data) { + console.log(data) + this.title = data.title + this.author = data.author + this.thumbnail = data.thumbnail + this.url = data.uri + this.duration = data.duration + this.identifier = data.numList + "_" + data.identifier + this.type = data.type + this.numList = data.numList + } + + generateHTML() { + var dragOn = "" + var idOn = "" + if(this.type == "next") { + dragOn = "draggable" + idOn = `${this.numList}_queue_song` + } + + var timecode = null + + // Check if live + + if(this.duration == 9223372036854776000) { + + timecode = " LIVE" + + } else { + timecode = getTimeCode(this.duration) + } + + return ` +${timecode}
${this.title}
+${this.author}
+Placer au dessus
") + menu.add("delete", "Supprimer
") + } else { + menu.add("add", "Ajouter à la file d'attente
") + } + + // Add to a playlist + + menu.add("playlist", "Ajouter à une playlist
") + + identifier.addEventListener("click", (event) => { + if(event.ctrlKey || event.metaKey) { + post("DELETE_QUEUE", this.numList, this.title) + } else { + menu.show() + + const play = getID(`${menu.id}_play`) + const playlist = getID(`${menu.id}_playlist`) + + playlist.addEventListener("click", () => { + saveToPlaylist(this.url) + }) + + play.addEventListener("click", () => { + post("PLAY_QUEUE", [this.numList, this.type]) + + }) + + if(this.type == "next") { + + const up = getID(`${menu.id}_up`) + const deleteEl = getID(`${menu.id}_delete`) + + up.addEventListener("click", () => { + post("MOVE_QUEUE", this.numList) + }) + + deleteEl.addEventListener("click", () => { + post("DELETE_QUEUE", this.numList, this.title) + }) + + } else { + const add = getID(`${menu.id}_add`) + + add.addEventListener("click", () => { + post("CHANGE_QUEUE", this.numList) + }) + } + + } + }) + + + + } +} + + +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) +} \ No newline at end of file diff --git a/src/web/public/javascript/radios.js b/src/web/public/javascript/radios.js deleted file mode 100644 index 015e235..0000000 --- a/src/web/public/javascript/radios.js +++ /dev/null @@ -1,100 +0,0 @@ -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 + + function searchResults(data) { + + post("SEARCH", data).then((res) => { + + var songList = new Array() + playlistInfo.innerHTML = "" + + if(res.playlist) { + console.log(res.results) + var author = "" + if(res.results.author) { + author = ` +${res.results.title}
+${res.results.videos.length} titres - ${res.results.view_count} vues
+${res.results.description}
+Aucun résultat pour "${searchInput.value}" !
` + } + + for(var video of songList) { + video.loadScript() + } + + + }) + + } + + + + function loadSplash() { + searchList.style.display = "flex" + searchList.style.flexDirection = "column" + + get("README").then((res) => { + searchList.innerHTML = res + }) + } +} + diff --git a/src/web/public/javascript/settings.js b/src/web/public/javascript/settings.js index 726220c..79a9994 100644 --- a/src/web/public/javascript/settings.js +++ b/src/web/public/javascript/settings.js @@ -1,363 +1,456 @@ +function loadSettingsView(isAdmin) { -settingsBtn.addEventListener("click", () => { + const stContent = getID("st-content") + const stReport = getID("st-report") + if(isAdmin) { + const stUsers = getID("st-users") + const stNodes = getID("st-nodes") + const stLogs = getID("st-logs") + stUsers.addEventListener("click", () => { + stReport.classList.remove("selected") + stUsers.classList.add("selected") + stNodes.classList.remove("selected") + stLogs.classList.remove("selected") + loadUsersView() + }) + + stNodes.addEventListener("click", () => { + stReport.classList.remove("selected") + stUsers.classList.remove("selected") + stNodes.classList.add("selected") + stLogs.classList.remove("selected") + loadNodesView() + }) + + stLogs.addEventListener("click", () => { + stReport.classList.remove("selected") + stUsers.classList.remove("selected") + stNodes.classList.remove("selected") + stLogs.classList.add("selected") + loadLogsView() + }) + + stReport.addEventListener("click", () => { + stReport.classList.add("selected") + stUsers.classList.remove("selected") + stNodes.classList.remove("selected") + stLogs.classList.remove("selected") + loadReportView() + }) + + } + + loadReportView() + +} + +function loadReportView() { + + const stContent = getID("st-content") + + + + stContent.innerHTML = ` +