Version 0.4.1 - Ajout de la liste de lecture et du Rapport de Bug

package.json

@@ -1,7 +1,7 @@
 {
   "name": "subsonics-web",
   "author": "Raphix",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "nodemonConfig": {
     "ext": "js, html",
     "ignore": [
@@ -20,6 +20,7 @@
     "express": "^4.18.2",
     "express-favicon": "^2.0.4",
     "nodemon": "^2.0.22",
+    "pm2": "^5.3.0",
     "socket.io": "^4.6.1",
     "uuid": "^9.0.0",
     "ytfps": "^1.1.0"

src/commands/report.js

@@ -3,7 +3,7 @@ const { __glob } = require("../modules/global-variables");
 const { LogType } = require("../modules/sub-log");
 const { List } = require("../modules/sub-list");
 const subplayer = require(__glob.SUBPLAYER);
-const packageJson = require(__glob.PACKAGE);
+
 
 module.exports = {
 
@@ -11,46 +11,14 @@ module.exports = {
     .setName("report")
     .setDescription("[NEW] Donne le lien vers le panel !")
     .addStringOption(option => option.setName("level").setDescription("Niveau du report").setRequired(true).addChoices(
-        {name: "Urgent", value: "urgent"},
+        {name: "Majeur", value: "Majeur"},
-        {name: "Mineur", value: "minor"}
+        {name: "Mineur", value: "Mineur"},
+        {name: "Suggestion", value: "Suggestion"}
     )).addStringOption(option => option.setName("desc").setDescription("Description du bug").setRequired(true)),
 
     async execute(client, interaction) {
 
-        const level = interaction.options.getString("level")
+        subplayer.report(client, interaction)
-        const desc = interaction.options.getString("desc")
-
-        var embed = new EmbedBuilder()
-        .setTitle('Report de ' + interaction.member.user.username )
-        .setDescription('**Version **' + packageJson.version)
-        .setTimestamp();
-
-
-        var levelString = null
-
-        if(level == "urgent") {
-
-            levelString = "Urgent"
-            embed.setColor(0xc20f02)
-        } else {
-
-            levelString = "Mineur"
-            embed.setColor(0xdcff17)
-        }
-
-        embed.addFields({name: "Niveau", value: levelString},{name: "Description", value: desc})
-
-        const channel = await client.channels.fetch('1102177962817749033')
-
-        channel.send({embeds: [embed]})
-        channel.send({content: "<@486943594893017119>"})
-
-        const membed = new EmbedBuilder()
-        .setColor(0x00ff66)
-        .setTitle('Rapport de Bug envoyé !')
-       
-        interaction.reply({embeds: [membed]})
-
         
     }   
 

src/commands/restart.js

@@ -0,0 +1,23 @@
+const { SlashCommandBuilder, EmbedBuilder, Client } = require("discord.js");
+const { __glob } = require("../modules/global-variables");
+const pm2 = require("pm2")
+
+module.exports = {
+
+    data: new SlashCommandBuilder()
+    .setName("restart")
+    .setDescription("[NEW] Redémarre intégralement le Bot !"),
+
+    async execute(client, interaction) {
+
+        const membed = new EmbedBuilder()
+        .setColor(0xffffff)
+        .setTitle('Redémarrage du bot !')
+       
+        interaction.reply({embeds: [membed]})
+
+        pm2.restart('SubSonics - Bot Discord')
+        
+    }   
+
+}

src/modules/discord-bot.js

@@ -215,20 +215,24 @@ function startErelaManager(dlog, config) {
 
     })
 
-    client.manager.on("trackStart",async (player) => {
+    client.manager.on("trackStart", async (player) => {
-        plog.log("Lecture de '" + player.queue.current.title + "' de '" + player.queue.current.author + "'")
+
-        await  list.setCurrent(player)
+        if(player) {
-        await player.seek(0)
+            plog.log("Lecture de '" + player.queue.current.title + "' de '" + player.queue.current.author + "'")
-        process.emit("MUSIC_UPDATE_STATE")
+            await list.setCurrent(player)
+            await player.seek(0)
+            process.emit("MUSIC_UPDATE_STATE")
+        }
+       
     })
 
     
     client.manager.on("queueEnd", async () => {
-        let player = client.manager.players.get("137291455336022018")
+        let player = await client.manager.players.get("137291455336022018")
         if(player) { 
 
-            await list.passCurrent()
+            await list.addCurrentToPrevious()
-            if(list.haveSongs()) {
+            if(await list.haveSongs()) {
                 await player.play(list.next())
 
             }

src/modules/sub-list.js

@@ -7,6 +7,7 @@ const dlog = new LogType("Queue-List")
 var next = new Array()
 var previous = new Array()
 var current = null;
+var shuffle = false
 
 module.exports.List = class {
 
@@ -24,12 +25,39 @@ module.exports.List = class {
         next = new Array()
         previous = new Array()
         current = null
+        shuffle = false
+    }
+
+    setShuffle(state) {
+     
+        shuffle = state
+
+    }
+
+    getShuffle() {
+
+        return shuffle
     }
 
     next() {
-        const song = next[0]
+
-        next.splice(0, 1)
+        if(!shuffle) {
-        return song
+            const song = next[0]
+            next.splice(0, 1)
+            return song
+           
+        } else {
+
+           
+            const randomIndex = Math.floor(Math.random() * next.length);
+            const song = next[randomIndex]
+            next.splice(randomIndex, 1)
+            return song
+            
+        }
+
+  
+       
     }
 
     previous() {
@@ -46,7 +74,7 @@ module.exports.List = class {
   
     }
 
-    passCurrent() {
+    addCurrentToPrevious() {
 
         previous.unshift(current)
  
@@ -100,6 +128,8 @@ module.exports.List = class {
 
             interaction.reply({embeds: [embed]})
         }
+
+        process.emit("MUSIC_UPDATE_STATE")
     }
 
     remove(song) {
@@ -111,6 +141,24 @@ module.exports.List = class {
 
     }
 
+    removeByIndex(index) {
+
+        dlog.log("Supression d'un titre dans la liste de lecture : '" + next[index].title + "' de '" + next[index].author + "'")
+        
+       
+        next.splice(index, 1)
+
+        process.emit("MUSIC_UPDATE_STATE")
+    }
+
+    moveUp(index) {
+
+        let elementToMove = next[index]
+        next.splice(index, 1)
+        next.unshift(elementToMove);
+        process.emit("MUSIC_UPDATE_STATE")
+    }
+
     __previous_add(song) {
 
         previous.unshift(song)

src/modules/sub-player.js

@@ -1,9 +1,10 @@
-const { SlashCommandBuilder, EmbedBuilder, DefaultWebSocketManagerOptions } = require("discord.js");
+const { SlashCommandBuilder, EmbedBuilder, DefaultWebSocketManagerOptions, discordSort } = require("discord.js");
 const { __glob } = require("../modules/global-variables");
 const { LogType } = require("./sub-log");
-const { List } = require("./sub-list")
+var { List } = require("./sub-list")
 const discord = require("./discord-bot")
 var ytfps = require("ytfps");
+const packageJson = require(__glob.PACKAGE);
 
 
 const list = new List()
@@ -200,11 +201,22 @@ module.exports.SPECIAL_MJ = async function (client) {
 
     
     const songs = await client.manager.search("Earth MJ")
-    const songs2 = await client.manager.search("They don't care About Us")
+    const songs2 = await client.manager.search("https://www.youtube.com/watch?v=_mwsc6xqb3w")
+    const songs3 = await client.manager.search("https://www.youtube.com/watch?v=IdjgmRa3k-g")
 
-    player.play(songs.tracks[0])
+    if(!player.playing) {
+        player.play(songs.tracks[0])
+
+    } else {
+        
+        list.add(songs.tracks[0])
+
+    }
+
+ 
 
     list.add(songs2.tracks[0])
+    list.add(songs3.tracks[0])
 
 
 }
@@ -336,6 +348,31 @@ module.exports.loop = function (client) {
 
 } 
 
+module.exports.changeShuffle = function (client) {
+
+    const shuffle = list.getShuffle()
+
+    if(!client) {
+
+        client = discord.getClient()
+    }
+
+    let player = client.manager.players.get("137291455336022018")
+
+    if(player) {
+
+        if(shuffle == true) {
+            list.setShuffle(false)
+        } else {
+
+            list.setShuffle(true)
+        }
+
+    }
+
+    process.emit("MUSIC_UPDATE_STATE")
+}
+
 
 
 
@@ -399,7 +436,82 @@ module.exports.previous = function (client, interaction) {
 
 const clog = new LogType("Actualisation")
 
+module.exports.report = async function (client, interaction, data) {
+
+    if(!client) {
+
+        client = discord.getClient()
+    }
+
+    var level = null
+    var desc = null
+
+    if(interaction) {
+
+        level = interaction.options.getString("level")
+        desc = interaction.options.getString("desc")
+    } 
+
+    if(data) {
+        level = data.level
+        desc = data.desc
+
+    }
+
+  
+
+    var embed = new EmbedBuilder()
+        .setDescription('**Version **' + packageJson.version)
+        .setTimestamp();
+
+    if(interaction) {
+
+        embed.setTitle('Report de ' + interaction.member.user.username )
+    }
+
+    if(data) {
+        embed.setTitle('Report de ' + data.username.user.username )
+        
+    }
+
+    var levelString = null
+
+    if(level == "Majeur") {
+
+            levelString = "Urgent"
+            embed.setColor(0xc20f02)
+    } else if(level == "Mineur") {
+            levelString = "Mineur"
+            embed.setColor(0xdcff17)
+            
+    } else {
+            levelString = "Suggestion"
+            embed.setColor(0xffffff)
+          
+    }
+
+    embed.addFields({name: "Niveau", value: levelString},{name: "Description", value: desc})
+
+    const channel = await client.channels.fetch('1102177962817749033')
+
+    channel.send({embeds: [embed]})
+    channel.send({content: "<@486943594893017119>"})
+
+    if(interaction) {
+
+        const membed = new EmbedBuilder()
+        .setColor(0x00ff66)
+        .setTitle('Rapport de Bug envoyé !')
+       
+        interaction.reply({embeds: [membed]})
+    }
+
+        
+
+}
+
 module.exports.updateMusicState = function (client, action) {
+    
 
     if(!client) {
 
@@ -414,6 +526,7 @@ module.exports.updateMusicState = function (client, action) {
         "current":null,
         "isOnline": false,
         "queue": null,
+        "shuffle": false,
         "loop": false,
         "durationNow": null,
         "durationAll": null,
@@ -422,6 +535,14 @@ module.exports.updateMusicState = function (client, action) {
 
     if(player) {
 
+        
+        const shuffle = list.getShuffle()
+
+        if(shuffle) {
+
+            data["shuffle"] = true
+        }
+
         data["current"] = player.queue.current
   
         if(player.queueRepeat == true) {

src/modules/sub-web.js

@@ -6,6 +6,7 @@ const auth = require("./sub-auth");
 const cook = require("cookie")
 const wlog = new LogType("Web")
 const subplayer = require(__glob.SUBPLAYER);
+const { List } = require("./sub-list")
 module.exports.WebServer = class {
 
     constructor() {
@@ -172,7 +173,7 @@ function IOConnection(io) {
             io.emit("ANSWER/GET/DISCORD_LOGIN_LINK", discordlink )
         })
 
-        GetRequest(socket, "USER_INFO", () => {  
+        GetRequest(io, socket, "USER_INFO", () => {  
             var cookies = socket.handshake.headers.cookie
             cookies = cook.parse(cookies)
             var token = cookies.token
@@ -183,7 +184,7 @@ function IOConnection(io) {
             socket.emit("ANSWER/GET/USER_INFO",user)
         })
 
-        GetRequest(socket, "MUSIC_STATE", () => {  
+        GetRequest(io, socket, "MUSIC_STATE", () => {  
             var cookies = socket.handshake.headers.cookie
             cookies = cook.parse(cookies)
             var token = cookies.token
@@ -198,43 +199,56 @@ function IOConnection(io) {
 
 
 
-        GetRequest(socket, "PAUSE", () => {
+        GetRequest(io, socket, "PAUSE", () => {
             
             subplayer.pause()
             io.emit("ANSWER/GET/PAUSE", "OK")
+
         })
 
         
-        GetRequest(socket, "BACKWARD", () => {
+        GetRequest(io, socket, "BACKWARD", () => {
 
             subplayer.previous()
             io.emit("ANSWER/GET/BACKWARD", "OK")
+
         })
         
-        GetRequest(socket, "FORWARD", () => {
+        GetRequest(io, socket, "FORWARD", () => {
 
             subplayer.skip()
             io.emit("ANSWER/GET/FORWARD", "OK")
+
         })
 
-        GetRequest(socket, "LOOP", () => {
+        GetRequest(io, socket, "LOOP", () => {
 
             subplayer.loop()
             io.emit("ANSWER/GET/LOOP", "OK")
+
+        })
+
+        GetRequest(io, socket, "SHUFFLE", () => {
+
+            subplayer.changeShuffle()
+            io.emit("ANSWER/GET/SHUFFLE", "OK")
+
         })
 
         
-        GetRequest(socket, "DISCONNECT", () => {
+        GetRequest(io, socket, "DISCONNECT", () => {
 
             subplayer.leave()
             io.emit("ANSWER/GET/DISCONNECT", "OK")
+
         })
 
 
-        GetRequest(socket, "SPECIAL/MJ", () => {
+        GetRequest(io, socket, "SPECIAL/MJ", () => {
 
             subplayer.SPECIAL_MJ()
             io.emit("ANSWER/GET/SPECIAL/MJ", "OK")
+
         })
 
 
@@ -293,6 +307,91 @@ function IOConnection(io) {
            
 
         })
+
+        socket.on("SEND/DELETE_QUEUE", (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+                    var sublist = new List()
+                    sublist.removeByIndex(data)
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+
+        socket.on("SEND/MOVE_QUEUE", (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+                    var sublist = new List()
+                    sublist.moveUp(data)
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+
+        socket.on("SEND/REPORT", (data) => {
+
+
+            var cookies = socket.handshake.headers.cookie
+
+            if(cookies) {
+
+                cookies = cook.parse(cookies)
+                var token = cookies.token
+                 
+                if(auth.checkUser(token)) {
+
+                    data.username = auth.getUser(token)
+                    subplayer.report(null, null, data)
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/REPORT", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/REPORT", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+      
       
         
     })
@@ -302,7 +401,7 @@ function IOConnection(io) {
 }
 
 
-function GetRequest (socket, name, func) {
+function GetRequest (io, socket, name, func) {
 
   
         socket.on("GET/" + name, () => {
@@ -324,7 +423,7 @@ function GetRequest (socket, name, func) {
                     io.emit("ANSWER/GET/" + name, {"error":"USER_DONT_EXIST"})
                 }
             } else {
-                io.emit("ANSWER/GET/" + name, {"error":"TOKEN_NOT_FINDED"})
+                    io.emit("ANSWER/GET/" + name, {"error":"TOKEN_NOT_FINDED"})
 
             }
          

src/web/public/javascript/__index_script.js

@@ -29,14 +29,43 @@ const volTxt = document.getElementById("volumeTxt")
 const volDiv = document.getElementById("volDiv")
 const volRange = document.getElementById("volumeInput")
 
+const listBox = document.getElementById("listBox")
+const listNumber = document.getElementById("listNumber")
+
 const disconnect = document.getElementById("disconnect")
 
 const userInfo = get("USER_INFO")
 
+const report_dialog = document.getElementById("report_dialog")
+const report_close = document.getElementById("report_close")
+const reportBtn = document.getElementById("reportBtn")
+const report_level =  document.getElementById("report_level")
+const report_desc =  document.getElementById("report_desc")
+const report_send =  document.getElementById("report_send")
+
+
+
 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")
       
@@ -70,11 +99,34 @@ SPECIAL.addEventListener("click", () => {
     settings_dialog.showModal()
 })*/
 
+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")
+})
+
 
 settings_close.addEventListener("click",() => {
 
@@ -186,6 +238,14 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
         volTxt.innerHTML = "0%"
     }
 
+    if(data.shuffle == true) {
+        shuffle.innerHTML = '<i class="third-join fa fa-shuffle"></i>'
+
+    } else {
+
+        shuffle.innerHTML = '<i class="fa fa-shuffle"></i>'
+    }
+
     if(data.loop == true) {
         loop.innerHTML = '<i class="third-join fa fa-retweet"></i>'
 
@@ -249,7 +309,54 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
 
 
 
+    if(data.queue != null) {
 
+        var contentToPush = new Array()
+        var queueNum = 0
+
+        for(var title of data.queue) {
+            queueNum += 1
+            console.log(queueNum)
+            console.log(data.queue.indexOf(title) + " - " + title.title)
+            contentToPush.push(' <div class="song"> <img class="list_thumbnail" src="' + title.thumbnail + '"><div class="list_titleSong"> <p class="list_title">' + title.title + '</p></div> <button id="' + data.queue.indexOf(title) + '_lmove" class="list_upSong"><i class="fa fa-arrow-up"></i></button> <button id="' + data.queue.indexOf(title) + '_ldelete" class="list_delete"><i class="fa fa-trash"></i></button> </div>')
+        }
+
+        if(contentToPush.join("") == "") {
+           
+            listNumber.classList.add("invisible")
+            listBox.innerHTML = '<p class="list_error">Aucun morceau dans la liste de lecture !</p>'
+        
+        } else {
+            listNumber.innerHTML = '<span class="numtext">' + queueNum + '</span>'
+            listNumber.classList.remove("invisible")
+            listBox.innerHTML = contentToPush.join("")
+        }
+
+        for(var title of data.queue) {
+
+            console.log(data.queue.indexOf(title) + " - " + title.title)
+            
+            const titleBtn = document.getElementById(data.queue.indexOf(title)+ "_ldelete")
+            const moveBtn = document.getElementById(data.queue.indexOf(title)+ "_lmove")
+            
+            titleBtn.addEventListener("click", () => {
+
+               send("DELETE_QUEUE", titleBtn.id.replace("_ldelete", ""))
+            })
+
+            moveBtn.addEventListener("click", () => {
+
+                send("MOVE_QUEUE", moveBtn.id.replace("_lmove", ""))
+
+            })
+        }
+       
+
+    } else {
+
+        listBox.innerHTML = '<p class="list_error">Lancez un titre et ajouter vos morceaux ici !</p>'
+        listNumber.classList.add("invisible")
+    }
 
 })
 

src/web/public/stylesheets/style.css

@@ -12,7 +12,7 @@ html {
 }
 
 body {
-
+  
   background-color: black;
   color: white;
   font-family: 'Roboto', sans-serif;
@@ -180,7 +180,7 @@ body {
 .INDEX_line {
 
   width: 100%;
-  color:  rgb(155, 155, 155);
+  color:  rgb(255, 255, 255);
   text-decoration: none;
   outline: none;
   padding: 10%;
@@ -308,8 +308,8 @@ p {
 
   margin: 0 !important;
   margin-bottom: 10px;
-  width: 4vw;
+  width: 6vw;
-  height: 4vw;
+  height: 4.5vw;
 }
 
 .title {
@@ -335,9 +335,112 @@ p {
 
 .disabled {
 
-  color: rgb(47, 47, 47);
+  color: rgb(47, 47, 47) !important;
 }
 
+/*RAPPORT*/
+
+.report_close {
+  color: whitesmoke;
+  background-color: transparent;
+  padding: 5px;
+  width: 40px;
+  height: 40px;
+  border: none;
+  transition: all 0.2s ease 0s;
+  user-select: none;
+  -webkit-user-select: none;
+
+}
+
+.report_close:hover {
+
+  color: red;
+  cursor: pointer;
+}
+
+.report_dialog {
+
+  width: 40vw;
+  height: 25vw;
+  padding: 0;
+  background:  linear-gradient(90deg, #515151 0%, #2e2e2e 100%);
+  border: none;
+  border-radius: 12px;
+}
+
+.rlineclose {
+  position: sticky;
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+}
+
+.rtitle {
+  color: white;
+  font-family: 'Gunship', sans-serif;
+  padding: 2%;
+}
+
+.rcontent {
+
+  padding: 2%;
+  display: flex;
+  flex-direction: column;
+  
+}
+
+.runder {
+
+  padding-bottom: 2%;
+  padding-top: 2%;
+  color: white;
+}
+
+.rsend {
+  color: white;
+  margin: 2%;
+  align-self: center;
+  width: 20%;
+  background-color: transparent;
+  border: none;
+  border-style: solid;
+  border-color: #2c3df4;
+  border-radius: 12px;
+  transition: 0.1s;
+}
+
+#report_level {
+
+  color: white;
+  background-color: transparent;
+  border: solid 2px #2c3df4;
+  padding: 1%;
+  border-radius: 12px;
+}
+
+#report_level option {
+
+  color: rgb(255, 255, 255);
+  background-color: #515151;
+}
+
+.rsend:hover {
+
+  background-color: #2c3df4;
+}
+
+.rsend:active {
+  background-color: transparent;
+}
+
+#report_desc {
+  border-radius: 12px;
+  height: 20vh;
+}
+
+
 /*SETTINGS*/
 
 .SETTINGS_dialog {
@@ -407,10 +510,6 @@ p {
 
 }
 
-.SETTINGS_close {
-
-
-}
 
 .dialogTitle {
 
@@ -495,23 +594,24 @@ p {
   background-color: #2e2e2e;
   position: absolute;
   bottom: 50px;
-  width: 3vw;
   left: 50%;
   transform: translateX(-50%);
-  padding: 40%;
   text-align: center;
   border-radius: 12px;
+  justify-content: center;
 }
 
 #volumeInput {
   width: 0.5vw;
   height: 20vh;
+  margin: 1vw;
+  margin-bottom: 0;
   appearance: slider-vertical;
 }
 
 #volumeTxt {
-  font-size: 16px;
+  font-size: 1vw;
-  padding-top: 30%;
+  margin: 1vw !important;
   text-align: center;
 }
 
@@ -523,4 +623,144 @@ p {
 .pri_disable {
 
     background-color: #515151;
-}
+}
+
+
+#listBox {
+
+  background-color: #2e2e2e;
+  position: absolute;
+  bottom: 50px;
+  width: 400px;
+  height: 300px;
+  right: 0%;
+  text-align: center;
+  border-radius: 12px;
+  overflow-y:auto;
+}
+
+
+
+.song {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  padding-left: 2%;
+  padding-right: 2%;
+  padding-top: 1.5%;
+  padding-bottom: 1.5%;
+
+}
+
+.song:hover {
+
+  color: black;
+  background-color: white;
+  width: 100%;
+}
+
+.list_thumbnail {
+
+
+  width: 60px;
+  height: 45px;
+  margin-right: 10px;
+
+}
+
+.list_title {
+
+  font-size: 12px;
+  word-break: break-all;
+
+}
+
+.list_titleSong {
+
+    width: 100%;
+}
+
+.list_delete {
+
+  background-color: transparent;
+  color: white;
+  border: none;
+  transition: 0.1s;
+}
+
+.list_delete:hover {
+
+    color: red !important;
+}
+
+.song:hover .list_delete {
+
+   color: black;
+}
+.song:hover .list_upSong {
+
+  color: black;
+}
+.list_upSong:hover {
+
+  color: #19a7d2 !important;
+}
+
+
+.list_upSong {
+
+  margin-left: 10px;
+  margin-right: 10px;
+  background-color: transparent;
+  color: white;
+  border: none;
+  transition: 0.1s;
+}
+
+.list_error {
+
+  text-align: center;
+  padding-top: 35%;
+
+}
+
+/*SCROLL BAR*/
+
+/* width */
+::-webkit-scrollbar {
+  width: 10px;
+  margin-right: 20px;
+}
+
+/* Track */
+::-webkit-scrollbar-track {
+  border-radius: 12px;
+}
+
+/* Handle */
+::-webkit-scrollbar-thumb {
+  background: #ffffffa8;
+  border-radius: 10px;
+}
+
+.number {
+
+    
+  font-size: 11px;
+  color: rgb(255, 255, 255);
+  border: none;
+  border-radius: 100%;
+  text-align: center;
+  justify-content: center;
+  vertical-align: middle;
+  width: 14px;
+  height: 14px;
+  background-color: rgb(99, 0, 129);
+  margin: 0;
+  position: absolute; /* Position the badge within the relatively positioned button */
+  top: 0;
+  right: -2px;
+
+
+
+}

src/web/routes/login.js

@@ -3,6 +3,7 @@ var router = express.Router();
 var path = require("path")
 var auth = require("../../modules/sub-auth")
 var log = require("../../modules/sub-log")
+var package = require('../../../package.json')
 var uuid = require("uuid")
 
 
@@ -22,6 +23,7 @@ router.get('/', function(req, res, next) {
         }
 
         var error = ""
+        var verInfo = "<p>Version : " + package.version + "</p>"
 
         if(req.query.error == "CANCEL_LOGIN") {
 
@@ -53,7 +55,7 @@ router.get('/', function(req, res, next) {
 
         }
  
-        res.render("login", {login: error})
+        res.render("login", {login: error, version: verInfo})
     }
   
 });

src/web/templates/index.ejs

@@ -17,6 +17,7 @@
                 <div class="INDEX_userInfo" id="userInfo"></div>
                 <div class="INDEX_userPopup" id="userPopup">
                     <!--div id="settingsBtn" class="INDEX_line"><i class="fa-solid fa-wrench"></i> Paramètres</div>-->
+                    <div id="reportBtn" class="INDEX_line"><i class="fa-solid fa-bug"></i> Rapport</div>
                     <a class="INDEX_signout" href="/internal/logout"><i class="fa fa-sign-out " aria-hidden="true"></i> Déconnexion</a>
                 </div>
             </div>
@@ -56,7 +57,12 @@
                 </div>
                 <button id="loop" class="third"><i class="fa fa-retweet"></i></button>
                 <button id="shuffle" class="third"><i class="fa fa-shuffle"></i></button>
-                <button id="list" class="list third"><i class="fa fa-list-ol"><p class="number" id="listNumber"></p></i></button>
+                <div id="listDiv" class="volDiv">
+                    <button id="list" class="list third"><i class="fa fa-list-ol"></i><p class="number" id="listNumber"></p></button>
+                    <div id="listBox">
+                        
+                    </div>
+                </div>
             </div>
            
         </div>
@@ -76,8 +82,8 @@
                 </div>
                 <div class="scontent">
                     <div class="slineclose">
+               
                         <button id="SETTINGS_close" class="SETTINGS_close"><i class="fa-solid fa-xmark"></i></button>
-                      
                     </div>
 
                     <p style="color: red; font-size: 72px; text-align: center; font-family: 'Gunship', sans-serif;" >NOT WORKING</p>
@@ -85,6 +91,25 @@
                 </div>
             </div>
         </dialog>
+
+        <dialog class="report_dialog" id="report_dialog">
+            <div class="rlineclose">
+                <p class="rtitle"><i class="fa fa-bug"></i> Rapport de bug</p>
+                <button id="report_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
+            </div>
+            <div class="rcontent">
+                <p class="runder">Catégorie :</p>
+                <select id="report_level">
+                    <option>Majeur</option>
+                    <option>Mineur</option>
+                    <option>Suggestion</option>
+                </select>
+                <p class="runder">Description</p>
+                <textarea id="report_desc"></textarea>
+                <button id="report_send" class="rsend"><i class="fa-solid fa-paper-plane"></i> Envoyer</button>
+            </div>
+        </dialog>
+
     
     
     <script src="/socket.io/socket.io.js"></script>

src/web/templates/login.ejs

@@ -18,6 +18,7 @@
        
 
         <p style="padding: 20px;">Fait avec le 💖 par Raphix</p>
+        <div style="font-size: 12px;"><%- version %></div>
     </div>
     
     <script src="/socket.io/socket.io.js"></script>