diff --git a/README.md b/README.md index 04c93a4..3e68542 100644 --- a/README.md +++ b/README.md @@ -15,20 +15,8 @@
## Changelog - -### Subsonics - Web - 0.5.0 -- **Adds :** *Web features : Search & Play* -#### Details -**Web Player Features** -> - Search & Play ->> - SEND/ SEARCH_SONGS ->> - SEND/ PLAY_SONG - - -
- ### Subsonics - Web - 0.6.0 -- **Adds :** *Web features : Playlist | Pipeline Deploy V2 | Search Ellipis* +- **Adds :** *Web features : Playlist | Pipeline Deploy V2 | Search Ellipis | Handle Playlist on Web* #### Details **Web Player Features** > - Playlist diff --git a/data/nodes.json b/data/nodes.json index 5c0fbf3..3debf94 100644 --- a/data/nodes.json +++ b/data/nodes.json @@ -16,5 +16,11 @@ "password": "horizxon.studio", "port": 443, "secure": true + }, + { + "host": "eu-lavalink.lexnet.cc", + "password": "lexn3tl@val!nk", + "port": 443, + "secure": true } ] \ No newline at end of file diff --git a/data/playlist.json b/data/playlist.json new file mode 100644 index 0000000..631993c --- /dev/null +++ b/data/playlist.json @@ -0,0 +1,39 @@ +{ + "486943594893017119": { + "Mes musiques": [ + { + "track": "QAAAlQIAJElGU0NMIFRSQUlMRVIgTVVTSUMgLSBORVcgQ0hBTExFTkdFUwAXQ2luw6ltb3JwaGlxdWUgT2ZmaWNpZWwAAAAAAAGaKAALazZkWDZSQ2NLQXMAAQAraHR0cHM6Ly93d3cueW91dHViZS5jb20vd2F0Y2g/dj1rNmRYNlJDY0tBcwAHeW91dHViZQAAAAAAAAAA", + "title": "IFSCL TRAILER MUSIC - NEW CHALLENGES", + "identifier": "k6dX6RCcKAs", + "author": "Cinémorphique Officiel", + "duration": 105000, + "isSeekable": true, + "isStream": false, + "uri": "https://www.youtube.com/watch?v=k6dX6RCcKAs", + "thumbnail": "https://img.youtube.com/vi/k6dX6RCcKAs/default.jpg" + }, + { + "track": "QAAAiwIAIk15bGVuZSBGYXJtZXIgICBhcHBlbGxlIG1vbiBudW1lcm8AD0ZhbGxpbmdPdXRPZkNhcgAAAAAABQz4AAtVSkpxUnNGZXpZUQABACtodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PVVKSnFSc0ZlellRAAd5b3V0dWJlAAAAAAAAAAA=", + "title": "Mylene Farmer appelle mon numero", + "identifier": "UJJqRsFezYQ", + "author": "FallingOutOfCar", + "duration": 331000, + "isSeekable": true, + "isStream": false, + "uri": "https://www.youtube.com/watch?v=UJJqRsFezYQ", + "thumbnail": "https://img.youtube.com/vi/UJJqRsFezYQ/default.jpg" + }, + { + "track": "QAAAdgIAElBva8OpcmFwIEdTIEZyZW5jaAAKTWVudGFsaWkxMQAAAAAAA9CQAAttbUFTZkVUblBqWQABACtodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PW1tQVNmRVRuUGpZAAd5b3V0dWJlAAAAAAAAAAA=", + "title": "Pokérap GS French", + "identifier": "mmASfETnPjY", + "author": "Mentalii11", + "duration": 250000, + "isSeekable": true, + "isStream": false, + "uri": "https://www.youtube.com/watch?v=mmASfETnPjY", + "thumbnail": "https://img.youtube.com/vi/mmASfETnPjY/default.jpg" + } + ] + } +} \ No newline at end of file diff --git a/package-lock.json b/package-lock.json index 85e4145..cd7c187 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "subsonics-web", - "version": "0.5.0", + "version": "0.6.0", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "subsonics-web", - "version": "0.5.0", + "version": "0.6.0", "dependencies": { "cookie": "^0.5.0", "cookie-parser": "^1.4.6", diff --git a/package.json b/package.json index 46100b5..20aed44 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "subsonics-web", "author": "Raphix", - "version": "0.5.0", + "version": "0.6.0", "nodemonConfig": { "ext": "js, html", "ignore": [ @@ -30,5 +30,5 @@ "start": "nodemon src/main.js", "dev": "set DEV=true& nodemon src/main.js" }, - "beta_on": true + "beta_on": false } diff --git a/src/modules/global-variables.js b/src/modules/global-variables.js index 2c763df..2fefaf2 100644 --- a/src/modules/global-variables.js +++ b/src/modules/global-variables.js @@ -16,7 +16,8 @@ const __glob = { PACKAGE: root + path.sep + "package.json", DATA: root + path.sep + "data" + path.sep, NODES: root + path.sep + "data" + path.sep + "nodes.json", - README: root + path.sep + "README.md" + README: root + path.sep + "README.md", + PLAYLIST: root + path.sep + "data" + path.sep + "playlist.json", }; const webroot = __glob.WEB_DIR + path.sep diff --git a/src/modules/sub-player.js b/src/modules/sub-player.js index 93480be..6d346bb 100644 --- a/src/modules/sub-player.js +++ b/src/modules/sub-player.js @@ -4,7 +4,6 @@ const { LogType } = require("./sub-log"); var { List } = require("./sub-list") const discord = require("./discord-bot") var ytfps = require("ytfps"); -const { use } = require("../web/routes/login"); const packageJson = require(__glob.PACKAGE); @@ -656,7 +655,7 @@ module.exports.updateMusicState = function (client, action) { data["isOnline"] = false } - clog.log("Actualisation de tous les clients - Titre : " + currentTitle) + clog.log("Actualisation de tous les clients - Titre : " + currentTitle + " - Loop : " + data.loop + " - Shuffle : " + data.shuffle + " - Playing : " + data.playing + " - Volume : " + Math.trunc(data.volume / 10) ) return data diff --git a/src/modules/sub-playlist.js b/src/modules/sub-playlist.js new file mode 100644 index 0000000..83ac233 --- /dev/null +++ b/src/modules/sub-playlist.js @@ -0,0 +1,103 @@ +const { SlashCommandBuilder, EmbedBuilder, DefaultWebSocketManagerOptions, discordSort } = require("discord.js"); +const { __glob } = require("../modules/global-variables"); +const { LogType } = require("./sub-log"); +var { List } = require("./sub-list") +const discord = require("./discord-bot") +const subplayer = require("./sub-player") +const fs = require("fs") +var playlists = {} +const plog = new LogType("Playlist-Manager") + +check() + +module.exports.getUser = function (id) { + check() + if(!playlists[id]) { + plog.log("Ajout de l'utilisateur \"" + id + "\" dans la base de donnée Playlist !") + playlists[id] = {} + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + return playlists[id] + } else { + + plog.log("L'utilisateur \"" + id + "\" existe déjà dans la base de donnée Playlist !") + return playlists[id] + } + +} + +module.exports.addPlaylist = function (id, name) { + check() + if(!playlists[id][name]) { + plog.log("Ajout de la playlist à l'utilisateur \"" + id + "\" dans la base de donnée Playlist !") + playlists[id][name] = [] + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + } else { + + plog.log("L'utilisateur \"" + id + "\" à déjà une playlist avec le nom "+ name + " dans la base de donnée Playlist !") + + } + +} + +module.exports.removePlaylist = function (id, name) { + check() + if(playlists[id][name]) { + plog.log("Supression de la playlist à l'utilisateur \"" + id + "\" dans la base de donnée Playlist !") + delete playlists[id][name] + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + } else { + + plog.log("L'utilisateur \"" + id + "\" n'a pas une playlist avec le nom "+ name + " dans la base de donnée Playlist !") + + } + +} + +module.exports.addSong = function (id, name, song) { + check() + if(playlists[id][name]) { + + plog.log("Ajout d'une chanson dans la playlist '" + name + "' à l'utilisateur \"" + id + "\" dans la base de donnée Playlist !") + + playlists[id][name].push(song) + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + } else { + + plog.log("L'utilisateur \"" + id + "\" n'a pas une playlist avec le nom "+ name + " dans la base de donnée Playlist !") + + } + +} + + +module.exports.removeSong = function (id, name, song ) { + check() + if(playlists[id][name]) { + plog.log("Supression d'une chanson dans la playlist '" + name + "' à l'utilisateur \"" + id + "\" dans la base de donnée Playlist !") + playlists[id][name].splice(playlists[id][name].indexOf(song), 1) + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + } else { + + plog.log("L'utilisateur \"" + id + "\" n'a pas une playlist avec le nom "+ name + " dans la base de donnée Playlist !") + + } + +} + + + +function check() { + + if(fs.existsSync(__glob.PLAYLIST)) { + + playlists = JSON.parse(fs.readFileSync(__glob.PLAYLIST)) + } else { + + fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2)) + } +} \ No newline at end of file diff --git a/src/modules/sub-web.js b/src/modules/sub-web.js index 873cd54..3e61088 100644 --- a/src/modules/sub-web.js +++ b/src/modules/sub-web.js @@ -1,5 +1,5 @@ const internal = require("stream"); -const { __glob, __web } = require("../modules/global-variables"); +const { __glob, __web } = require("./global-variables"); const { LogType } = require("./sub-log"); const log = require("./sub-log"); const auth = require("./sub-auth"); @@ -7,6 +7,9 @@ const cook = require("cookie") const wlog = new LogType("Web") const subplayer = require(__glob.SUBPLAYER); const { List } = require("./sub-list") +const subplaylist = require("./sub-playlist") + + module.exports.WebServer = class { constructor() { @@ -196,6 +199,20 @@ function IOConnection(io) { io.sockets.emit("/ALWAYS/MUSIC_STATE", data) }) + GetRequest(io, socket, "PLAYLIST", () => { + var cookies = socket.handshake.headers.cookie + cookies = cook.parse(cookies) + var token = cookies.token + + + + const user = auth.getUser(token) + const playlistResult = subplaylist.getUser(user.user.id) + socket.emit("ANSWER/GET/PLAYLIST", playlistResult) + + }) + + @@ -243,6 +260,15 @@ function IOConnection(io) { }) + GetRequest(io, socket, "RESTART", () => { + + const pm2 = require('pm2'); + + pm2.restart('SubSonics - Bot Discord') + + + }) + GetRequest(io, socket, "SPECIAL/MJ", () => { @@ -502,6 +528,152 @@ function IOConnection(io) { }) + + socket.on("SEND/CREATE_PLAYLIST", async (data) => { + + + var cookies = socket.handshake.headers.cookie + + if(cookies) { + + cookies = cook.parse(cookies) + var token = cookies.token + + if(auth.checkUser(token)) { + + + + var user = auth.getUser(token) + var userId = user.user.id + + + subplaylist.addPlaylist(userId, data) + + io.emit("DO_UPDATE_PLAYLIST") + io.emit("ANSWER/SEND/CREATE_PLAYLIST/OK") + + } else { + + io.emit("ANSWER/SEND/CREATE_PLAYLIST", {"error":"USER_DONT_EXIST"}) + } + } else { + io.emit("ANSWER/SEND/CREATE_PLAYLIST", {"error":"TOKEN_NOT_FINDED"}) + + } + + + + }) + + socket.on("SEND/DELETE_PLAYLIST", async (data) => { + + + var cookies = socket.handshake.headers.cookie + + if(cookies) { + + cookies = cook.parse(cookies) + var token = cookies.token + + if(auth.checkUser(token)) { + + + + var user = auth.getUser(token) + var userId = user.user.id + + + subplaylist.removePlaylist(userId, data) + + io.emit("DO_UPDATE_PLAYLIST") + io.emit("ANSWER/SEND/DELETE_PLAYLIST/OK") + + } else { + + io.emit("ANSWER/SEND/DELETE_PLAYLIST", {"error":"USER_DONT_EXIST"}) + } + } else { + io.emit("ANSWER/SEND/DELETE_PLAYLIST", {"error":"TOKEN_NOT_FINDED"}) + + } + + + + }) + + + socket.on("SEND/ADD_SONG_TO_PLAYLIST", async (data, song) => { + + + var cookies = socket.handshake.headers.cookie + + if(cookies) { + + cookies = cook.parse(cookies) + var token = cookies.token + + if(auth.checkUser(token)) { + + + + var user = auth.getUser(token) + var userId = user.user.id + + subplaylist.addSong(userId, data, song) + + io.emit("DO_UPDATE_PLAYLIST") + io.emit("ANSWER/SEND/ADD_SONG_TO_PLAYLIST/OK") + + } else { + + io.emit("ANSWER/SEND/ADD_SONG_TO_PLAYLIST", {"error":"USER_DONT_EXIST"}) + } + } else { + io.emit("ANSWER/SEND/ADD_SONG_TO_PLAYLIST", {"error":"TOKEN_NOT_FINDED"}) + + } + + + + }) + + + + socket.on("SEND/DELETE_SONG_TO_PLAYLIST", async (data, song) => { + + + var cookies = socket.handshake.headers.cookie + + if(cookies) { + + cookies = cook.parse(cookies) + var token = cookies.token + + if(auth.checkUser(token)) { + + + + var user = auth.getUser(token) + var userId = user.user.id + + subplaylist.removeSong(userId, data, song) + + io.emit("DO_UPDATE_PLAYLIST") + io.emit("ANSWER/SEND/DELETE_SONG_TO_PLAYLIST/OK") + + } else { + + io.emit("ANSWER/SEND/DELETE_SONG_TO_PLAYLIST", {"error":"USER_DONT_EXIST"}) + } + } else { + io.emit("ANSWER/SEND/DELETE_SONG_TO_PLAYLIST", {"error":"TOKEN_NOT_FINDED"}) + + } + + + + }) + @@ -528,6 +700,8 @@ function GetRequest (io, socket, name, func) { if(auth.checkUser(token)) { + const user = auth.getUser(token) + wlog.log("Requête de " + user.user.username + " avec l'information \"" + name + "\"") func() } else { diff --git a/src/web/public/images/playlist-tile.svg b/src/web/public/images/playlist-tile.svg new file mode 100644 index 0000000..f002fa6 --- /dev/null +++ b/src/web/public/images/playlist-tile.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/web/public/javascript/IO.js b/src/web/public/javascript/IO.js index 3aab475..682df77 100644 --- a/src/web/public/javascript/IO.js +++ b/src/web/public/javascript/IO.js @@ -30,11 +30,11 @@ function get(request) { } -function send(request, data) { +function send(request, data, secondata, thirddata) { return new Promise((resolve, reject) => { - socket.emit("SEND/" + request, data) + socket.emit("SEND/" + request, data, secondata, thirddata) console.log("Envoi de la requête SEND : " + request) socket.once("ANSWER/SEND/" + request, (answer) => { diff --git a/src/web/public/javascript/__index_script.js b/src/web/public/javascript/__index_script.js index ff1feec..bc9f51f 100644 --- a/src/web/public/javascript/__index_script.js +++ b/src/web/public/javascript/__index_script.js @@ -17,7 +17,7 @@ const settings_dialog = document.getElementById("SETTINGS_dialog") const settings_close = document.getElementById("SETTINGS_close") const settingsBtn = document.getElementById("settingsBtn") -const SPECIAL = document.getElementById("SPECIAL") + const loop = document.getElementById("loop") const vol = document.getElementById("vol") @@ -43,10 +43,27 @@ const report_level = document.getElementById("report_level") const report_desc = document.getElementById("report_desc") const report_send = document.getElementById("report_send") -const searchBar = document.getElementById("searchBar") -const searchcontent = document.getElementById("search_content") +const searchBtn = document.getElementById("search_btn") +const homeBtn = document.getElementById("home_btn") +const mainView = document.getElementById("mainView") -const WelcomeContent = searchcontent.outerHTML +const restartBtn = document.getElementById("restartBtn") +const WelcomeContent = mainView.firstElementChild.outerHTML +const playlistContent = document.getElementById("playlist-content") + +var playlistSelected = null +var deleteJustBefore = null + +var playlistAvailable = null + +restartBtn.addEventListener("click", () => { + + get("RESTART") +}) + + + +homeBtn.style.color = "white" var xMousePos = 0; var yMousePos = 0; @@ -57,25 +74,84 @@ document.onmousemove = function(e) }; +homeBtn.addEventListener("click", () => { -searchBar.addEventListener("change", () => { + mainView.innerHTML = WelcomeContent - if(searchBar.value == "") { +}) - searchcontent.innerHTML = WelcomeContent +function delPlayList(key) { + + send("DELETE_PLAYLIST", key) + mainView.innerHTML = WelcomeContent + +} + + + + +socket.on("DO_UPDATE_PLAYLIST", () => { + + get("PLAYLIST") +}) + + + + + +get("PLAYLIST") + +socket.on("ANSWER/GET/PLAYLIST", (data) => { + var contentToPush = new Array() + var selectionData = new Array() + + for (const [key, value] of Object.entries(data)) { + + contentToPush.push('

' + key + '

') + selectionData.push('') + } + + contentToPush.push('
Debug
') + contentToPush.push('
Ajouter une playlist
') + + + + if(contentToPush.join("") == "") { + + playlistContent.innerHTML = '

Aucun morceau trouvé !

' + } else { - send("SEARCH", searchBar.value).then(results => { - - if(results.tracks != null) { - const data = results.tracks - - console.log(data) - var contentToPush = new Array() - - for(var title of data) { - - var Formatduration = null + playlistContent.innerHTML = contentToPush.join("") + playlistAvailable = selectionData + } + + if(playlistSelected && deleteJustBefore) { + 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) + + }) + } + + function loadPlaylist(key, value) { + + var playlistToPush = new Array() + var playlist_songs = new Array() + + playlistSelected = key + + for(var title of value) { + + var Formatduration = null durationAll = title.duration const maxhours = Math.floor(durationAll / 3600000); @@ -103,74 +179,259 @@ searchBar.addEventListener("change", () => { } Formatduration = max - contentToPush.push('

' + title.title + '

' + title.author + '

' + Formatduration + '

Lire maintenant
') - } - - if(contentToPush.join("") == "") { - - searchcontent.innerHTML = '

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") - testPopup.style.display = "none" + playlist_songs.push('

' + title.title + '

' + title.author + '

' + Formatduration + '

') - add_to.addEventListener("click", () => { - - send("ADD_SONG", data[add_to.id.replace("_ladd", "")]) - }) - - test_lmore.addEventListener("click",( ) => { - - - testPopup.style.display = "flex" - testPopup.style.top = yMousePos + "px" - - document.getElementById("test").show() - console.log() - - - }) - - 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é !

' - } - }) + playlistToPush.push('

' + key + '


' + playlist_songs.join("")) + + if(playlistToPush.join("") == "") { + + mainView.innerHTML = '

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", "")]) + + }) + + + } } + + + 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 SPECIAL = document.getElementById("SPECIAL") + const addPlaylist = document.getElementById("addPlaylist") + const addPlaylist_dialog = document.getElementById("addPlaylist_dialog") + const apText = document.getElementById("apText") + const apCreate = document.getElementById("apCreate") + + + addPlaylist_close.addEventListener("click", () => { + + addPlaylist_dialog.close() + }) + + addPlaylist.addEventListener("click", () => { + + apText.value = "" + addPlaylist_dialog.showModal() + }) + + apCreate.addEventListener("click", () => { + + addPlaylist_dialog.close() + send("CREATE_PLAYLIST", apText.value) + + }) + + SPECIAL.addEventListener("click", () => { + + get("SPECIAL/MJ") + + }) + + + console.log(data) }) +searchBtn.addEventListener("click", () => { + + mainView.innerHTML = '
' + const searchBar = document.getElementById("searchBar") + const searchcontent = document.getElementById("search_content") + + + + searchBar.addEventListener("change", () => { + + + send("SEARCH", searchBar.value).then(results => { + + if(results.tracks != null) { + const data = results.tracks + + console.log(data) + var contentToPush = new Array() + + for(var title of data) { + + var Formatduration = null + durationAll = title.duration + + const maxhours = Math.floor(durationAll / 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); + + + if (maxsec < 10) { + maxsec = `0${maxsec}`; + } + + + if(maxhours != 0) { + + if (maxmin < 10) { + maxmin = `0${maxmin}`; + } + + + max = maxhours + ":" + maxmin + ":" + maxsec + } else { + max = maxmin + ":" + maxsec + + } + + Formatduration = max + contentToPush.push('

' + title.title + '

' + title.author + '

' + Formatduration + '

Lire maintenant
Ajouter à une playlist

Ajouter à une playlist

Selectionner la playlist

') + } + + if(contentToPush.join("") == "") { + + searchcontent.innerHTML = '

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 addPlaylist = document.getElementById(data.indexOf(title) + "_addPlaylist") + + 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") + + + + + testPopup.style.display = "none" + + add_to.addEventListener("click", () => { + + send("ADD_SONG", data[add_to.id.replace("_ladd", "")]) + }) + + addPlaylist.addEventListener("click", () => { + + PlaylistManager.showModal() + playlist_add_music.innerHTML = data[add_to.id.replace("_ladd", "")].title + playlist_add_img.src = data[add_to.id.replace("_ladd", "")].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é !

' + + } + + }) + + + + }) +}) + + + + + + volBox.classList.add("invisible") listBox.classList.add("invisible") @@ -216,11 +477,6 @@ disconnect.addEventListener("click", () => { get("DISCONNECT") }) -SPECIAL.addEventListener("click", () => { - - get("SPECIAL/MJ") - -}) /*settingsBtn.addEventListener("click", () => { @@ -283,6 +539,8 @@ userInfo.then(user => { } userInfoDiv.innerHTML = "

" + user.user.global_name + "

" + user.user.username + "

" + betastar + "
" + + }) @@ -297,6 +555,7 @@ userInfoDiv.addEventListener("click", () => { } }) + userInfoPopup.classList.add("invisible") userInfoPopup.addEventListener("mouseleave", () => { @@ -306,6 +565,8 @@ userInfoPopup.addEventListener("mouseleave", () => { + + get("MUSIC_STATE").then(data => { console.log(data) }) @@ -328,7 +589,6 @@ forward.addEventListener("click", () => { socket.on("/ALWAYS/MUSIC_STATE", (data) => { - stopInterval() console.log(data) diff --git a/src/web/public/stylesheets/style.css b/src/web/public/stylesheets/style.css index b264ac9..915b468 100644 --- a/src/web/public/stylesheets/style.css +++ b/src/web/public/stylesheets/style.css @@ -770,9 +770,10 @@ p { .INDEX_playlist { background-color: #2e2e2e86; - width: 0%; + width: 20%; height: 68vh; border-radius: 12px; + overflow-y: auto; } .INDEX_search { @@ -837,7 +838,7 @@ p { .search_thumbnail { width: 100px; height: 75px; - + margin-right: 20px; } .search_middle { @@ -902,3 +903,131 @@ p { z-index: 2; } +/* PLAYLIST */ + +.pSearch { + + display: flex; + color: rgba(255, 255, 255, 0.719); + flex-direction: row; + align-items: center; + margin-top: 5%; + width: 100%; + padding: 2%; + padding-left: 7%; + font-size: 20px; + transition: 0.1s; +} + +.pSearch:hover { + + cursor: pointer; +} + + + +.pSearch p { + + width: 100%; + +} + +.playlist-content { + + + +} + +.playlist_div { + + color: rgba(255, 255, 255, 0.719); + display: flex; + flex-direction: row; + align-items: center; + width: 100%; + padding: 4%; + +} + +.playlist_div:hover { + + background-color: rgb(255, 255, 255); + color: black !important; + cursor: pointer; +} + +.playlist_tile { + + width: 60px; + height: 60px; + margin-right: 5%; + +} + +.apContent { + + display: flex; + flex-direction: column; + text-align: center; + align-items: center; + color: white; + margin-top: 5%; +} + + +.apContent p { + + padding: 3%; +} + +#apText { + + border: none; + border-radius: 12px; + padding: 0.5%; + padding-left: 1%; +} + +.apTile { + + width: 150px; + height: 150px; + + +} + +.apTitle { + + display: flex; + width: 60%; + align-items: end; +} + +.apPres { + + display: flex; + align-items: end; + justify-content: space-between; +} + +.apName { + + font-family: "Gunship", sans-serif; + font-size: 35px; + margin-left: 2% !important; +} + +.apButtons { + + display: flex; + justify-content: end; + align-items: center; + gap: 10%; + width: 10%; + +} + +.ppTile { + + width: 180px; +} \ No newline at end of file diff --git a/src/web/templates/index.ejs b/src/web/templates/index.ejs index 556fda3..affce9a 100644 --- a/src/web/templates/index.ejs +++ b/src/web/templates/index.ejs @@ -17,34 +17,48 @@
-
Debug
Rapport
+
Redémarrer
Déconnexion
- -
-