Version 0.8.1 - Ajout des tooltips et du playlistshare

README.md

@@ -28,7 +28,7 @@
 > - Popup Prefab
 > - Declencher lors de l'action
 
-**Playlist Share**
+**Playlist Share (Done)**
 
 > - Envoyer des playlist avec la liste des utilisateurs
 

data/playlist.json

@@ -143,6 +143,17 @@
         "isStream": false,
         "uri": "https://www.youtube.com/watch?v=ChireNiqxTo",
         "thumbnail": "https://img.youtube.com/vi/ChireNiqxTo/default.jpg"
+      },
+      {
+        "track": "QAAAkQIALE1JQ0hBRUwgSkFDS1NPTiAtIEJBRCBbQUpBWMK0UyBFWFRFTkRFRCBNSVhdAAtBamF4U3RyaWtlcgAAAAAACDGoAAszRWE3XzZRdTJ4bwABACtodHRwczovL3d3dy55b3V0dWJlLmNvbS93YXRjaD92PTNFYTdfNlF1MnhvAAd5b3V0dWJlAAAAAAAAAAA=",
+        "title": "MICHAEL JACKSON - BAD [AJAX´S EXTENDED MIX]",
+        "identifier": "3Ea7_6Qu2xo",
+        "author": "AjaxStriker",
+        "duration": 537000,
+        "isSeekable": true,
+        "isStream": false,
+        "uri": "https://www.youtube.com/watch?v=3Ea7_6Qu2xo",
+        "thumbnail": "https://img.youtube.com/vi/3Ea7_6Qu2xo/default.jpg"
       }
     ]
   }

package.json

@@ -1,7 +1,7 @@
 {
   "name": "subsonics-web",
   "author": "Raphix",
-  "version": "0.8.0",
+  "version": "0.8.1",
   "nodemonConfig": {
     "ext": "js, html",
     "ignore": [

src/modules/sub-auth.js

@@ -153,6 +153,22 @@ module.exports.getUsers = function () {
 }
 
 
+module.exports.getUsersList = function () {
+
+    var userList = new Array()
+    const userDB = JSON.parse(fs.readFileSync(__glob.USERS))
+
+    for(var user of userDB) {
+
+        userList.push({"username": user.user.username, "global_name":user.user.global_name, "avatar": user.user.avatar, "id": user.user.id})
+
+    }
+
+    return userList
+
+}
+
+
 module.exports.getUser = function (token) {
     return users.get(token)
 }

src/modules/sub-playlist.js

@@ -4,7 +4,8 @@ const { LogType } = require("./sub-log");
 var { List } = require("./sub-list")
 const discord = require("./discord-bot")
 const subplayer = require("./sub-player")
-const fs = require("fs")
+const fs = require("fs");
+const { type } = require("os");
 var playlists = {}
 const plog = new LogType("Playlist-Manager")
 
@@ -41,6 +42,23 @@ module.exports.addPlaylist = function (id, name) {
 
 }
 
+module.exports.copyPlaylist = function (id, from, dest) {
+    this.getUser(dest)
+    check()
+    let playlistDest = playlists[dest][from]
+    if(!playlistDest) {
+        plog.log("Ajout de la playlist à l'utilisateur \"" + id  + "\" dans la base de donnée Playlist !")
+        playlists[dest][from] = playlists[id][from]
+
+        fs.writeFileSync(__glob.PLAYLIST, JSON.stringify(playlists, null, 2))
+    } else {
+
+        plog.log("L'utilisateur \"" + dest  + "\" à déjà une playlist avec le nom "+ from + " dans la base de donnée Playlist !")
+    
+    }
+
+}
+
 module.exports.removePlaylist = function (id, name) {
     check()
     if(playlists[id][name]) {

src/modules/sub-web.js

@@ -274,6 +274,26 @@ function IOConnection(io) {
       
         })
 
+        GetRequest(io, socket, "USER_LIST", () => {  
+            var cookies = socket.handshake.headers.cookie
+            cookies = cook.parse(cookies)
+            var token = cookies.token
+
+            const user = auth.getUser(token)
+    
+
+            if(user.admin == true) {
+                
+                const users_data = auth.getUsersList()
+
+                socket.emit("ANSWER/GET/USER_LIST", users_data)
+
+            }
+
+          
+      
+        })
+
 
 
 
@@ -667,7 +687,7 @@ function IOConnection(io) {
                     subplayer.report(null, null, data)
 
                     const user = auth.getUser(token)
-                    io.emit("NOTIFICATION", {"image_src": "https://www.google.com/url?sa=i&url=https%3A%2F%2Fwww.vecteezy.com%2Fvector-art%2F19521981-green-check-mark-vector-icon-with-circle-checkmark-illustration&psig=AOvVaw1-8kuUXImHNwIoVvySyiSK&ust=1694119774978000&source=images&cd=vfe&opi=89978449&ved=0CBAQjRxqFwoTCLjb2YzuloEDFQAAAAAdAAAAABAE", "text": "Votre rapport de bug a été correctement envoyé !" })
+                    socket.emit("NOTIFICATION", {"image_src": "https://static.vecteezy.com/system/resources/previews/019/521/981/non_2x/green-check-mark-icon-with-circle-checkmark-illustration-free-vector.jpg", "text": "Votre rapport de bug a été correctement envoyé !" })
                 
                 } else {
 
@@ -998,6 +1018,44 @@ function IOConnection(io) {
 
         })
 
+        socket.on("SEND/SEND_PLAYLIST", async (key, dest) => {
+
+
+            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.copyPlaylist(userId, key, dest)
+                    
+                    io.sockets.emit("DO_UPDATE_PLAYLIST")
+                    socket.emit("NOTIFICATION", {"image_src": "https://static.vecteezy.com/system/resources/previews/019/521/981/non_2x/green-check-mark-icon-with-circle-checkmark-illustration-free-vector.jpg", "text": "La playlist a été correctement envoyé ! (Si le destinataire a déjà une playlist avec le même nom, l'opération est annulé" })
+                    io.emit("ANSWER/SEND/SEND_PLAYLIST/OK")
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/SEND_PLAYLIST", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/SEND_PLAYLIST", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+
+
 
         socket.on("SEND/ADD_SONG_TO_PLAYLIST", async (data, song) => {
 

src/web/public/javascript/__index_script.js

@@ -19,9 +19,9 @@ const settingsBtn = document.getElementById("settings_btn")
 
 
 const loop = document.getElementById("loop")
-const vol = document.getElementById("vol")
+const vol = document.getElementById("volbtn")
 const shuffle = document.getElementById("shuffle")
-const list = document.getElementById("list")
+const list = document.getElementById("list_btn")
 const takeCurrent =  document.getElementById("takeCurrent")
 
 const volBox = document.getElementById("volumeBox")
@@ -72,12 +72,49 @@ homeBtn.style.color = "white"
 
 var xMousePos = 0;
 var yMousePos = 0;
+
+const tooltip = document.getElementById("tooltip")
+
 document.onmousemove = function(e)
 {
-  xMousePos = e.clientX + window.pageXOffset;
+  xMousePos = e.clientX + window.scrollX;
-  yMousePos = e.clientY + window.pageYOffset;
+  yMousePos = e.clientY + window.scrollY;
+
+  tooltip.style.visibility = 'hidden'
+  tooltip.style.display = 'none'
+  showToolTip("pplay", "Jouer maintenant", e)
+  showToolTip("delete", "Supprimer", e)
+  showToolTip("add", "Ajouter à la liste de lecture", e)
+  showToolTip("loop", "Répéter le titre", e)
+  showToolTip("shuffle", "Mélanger la liste de lecture", e)
+  showToolTip("list_btn", "Liste de lecture", e)
+  showToolTip("disconnect", "Déconnecter le bot", e)
+  showToolTip("sendplaylist", "Envoyer la playlist", e)
+  showToolTip("playlistdelete", "Effacer la playlist", e)
+  showToolTip("reload", "Relancer le serveur", e)
+  showToolTip("admin", "Donner les permissions Administrateur", e)
+  showToolTip("takeCurrent", "Ajouter le titre à une playlist", e)
+  showToolTip("volbtn", "Volume", e)
 };
 
+function showToolTip(id, text, e) {
+
+    if(e.target) {
+        
+        if(e.target.id.includes(id) || e.target.parentNode.parentNode.id.includes(id)) {
+            tooltip.style.visibility = 'visible'
+            tooltip.style.display = 'unset'
+            tooltip.style.top = ( yMousePos - ( tooltip.offsetHeight + 20)) + "px"
+            tooltip.style.width = "150px"
+            tooltip.style.left =(xMousePos - 75 )+ "px"
+            tooltip.innerHTML = text
+        
+        } 
+
+    }
+
+    
+}
 
 homeBtn.addEventListener("click", () => {
 
@@ -103,6 +140,54 @@ function playPlayList(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(`<div id='${resp.indexOf(user)}' style='padding: 1%;' class="INDEX_line set_user_info"><img src="https://cdn.discordapp.com/avatars/${user.id}/${user.avatar}"><div style="display: flex; flex-direction: column; justify-content: center;"><p class="INDEX_gbname">${user.global_name}</p><p class="INDEX_usrname">${user.username}</p></div></div>`)
+
+            }
+
+            playlist_popup.innerHTML = userToPush.join("")
+            playlist_popup.style.width = '170px'
+            playlist_popup.style.top = (yMousePos - 30) + "px"
+            playlist_popup.style.left = (xMousePos - 165) + "px"
+            playlist_popup.classList.remove("invisible")
+
+
+            playlist_popup.addEventListener("mouseleave", () => {
+            
+                playlist_popup.classList.add("invisible")
+
+            })
+
+            for(var user of resp) {
+
+                const userElement = document.getElementById(resp.indexOf(user))
+
+                userElement.addEventListener("click", () => {
+
+                    playlist_popup.classList.add("invisible")
+                    send("SEND_PLAYLIST", key, resp[userElement.id].id)
+                })
+            }
+    
+            //send("SEND_PLAYLIST", key, user.id)
+    
+        })
+    }
+
+    
+ 
+}
 
 socket.on("DO_UPDATE_PLAYLIST", () => {
 
@@ -116,7 +201,7 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
     var selectionData = new Array()
 
 
-    contentToPush.push('<div id="addPlaylist" class="playlist_div"><i class="fa-solid fa-plus playlist_tile"></i> Créer une playlist</div>')
+    contentToPush.push('<div id="createPlaylist" class="playlist_div"><i class="fa-solid fa-plus playlist_tile"></i> Créer une playlist</div>')
 
 
     for (const [key, value] of Object.entries(data)) {
@@ -170,8 +255,9 @@ socket.on("ANSWER/GET/PLAYLIST", (data) => {
     });
     
     
-    const addPlaylist = document.getElementById("addPlaylist")
+    const addPlaylist = document.getElementById("createPlaylist")
-    const addPlaylist_dialog = document.getElementById("addPlaylist_dialog")
+    const addPlaylist_dialog = document.getElementById("createPlaylist_dialog")
+    const addPlaylist_close = document.getElementById("createPlaylist_close")
     const apText = document.getElementById("apText")
     const apCreate = document.getElementById("apCreate")
 
@@ -249,7 +335,8 @@ function loadPlaylist(key, value) {
 
     }
 
-    playlistToPush.push('<div class="apPres"><div class="apTitle"><img class="apTile" src="/images/playlist-tile.svg"><p class="apName">' + key + '</p></div><div class="apButtons"><button onclick="playPlayList(\''+ key +'\')" id="'+ key +'_playlistplay" class="primary"><i class="fas fa-play"></i></button><button onclick="delPlayList(\''+ key +'\')" "id="'+ key +'_playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
+    playlistToPush.push(`<div class="INDEX_userPopup invisible" id="playlist_popup"></div>`)
+    playlistToPush.push('<div class="apPres"><div class="apTitle"><img class="apTile" src="/images/playlist-tile.svg"><p class="apName">' + key + '</p></div><div class="apButtons"><button onclick="playPlayList(\''+ key +'\')" id="'+ key +'_playlistplay" class="primary"><i class="fas fa-play"></i><button onclick="sendPlayList(\''+ key +'\')" id="sendplaylist" class="list_upSong"><i class="fas fa-paper-plane"></i></button></button><button onclick="delPlayList(\''+ key +'\')" id="playlistdelete" class="list_delete"><i class="fas fa-trash"></i></button></div></div><hr>' + playlist_songs.join(""))
     
     if(playlistToPush.join("") == "") {
 
@@ -354,7 +441,7 @@ searchBtn.addEventListener("click", () => {
                     }
 
                     PFormatduration = pmax
-                    contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) +  '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_addPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div><div id="' + data.indexOf(title) +'_copy" class="INDEX_line"><i class="fa-regular fa-copy"></i> Copier le lien</div></div></div><dialog id="' +  data.indexOf(title) + 'playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-square-plus"></i> Ajouter à une playlist</p><button id="' +  data.indexOf(title) + 'playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="' +  data.indexOf(title) + 'playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="' +  data.indexOf(title) + 'playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="' +  data.indexOf(title) + 'playlistSelection"></select><button id="' +  data.indexOf(title) + 'playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog></div>')
+                    contentToPush.push(' <div class="search_song"> <img class="search_thumbnail" src="' + thumbnail + '"><div class="search_titleSong"> <p class="search_title">' + title.title + '</p></div> <p>' + title.author + '</p><p>' + PFormatduration + '</p> <div class="search_buttons"><button id="' + data.indexOf(title) +  '_ladd" class="search_add"><i class="fa fa-plus"></i></button> <div class="searchMoreDiv"><button id="' + data.indexOf(title) + '_lmore" class="search_lmore"><i class="fa-solid fa-ellipsis"></i></button></div><div class="searchPopup" id="' + data.indexOf(title) + '_popup"><div id="' + data.indexOf(title) + '_playNow" class="INDEX_line"><i class="fa-solid fa-play"></i> Lire maintenant</div><div id="' + data.indexOf(title) +'_goPlaylist" class="INDEX_line"><i class="fa-regular fa-square-plus"></i> Ajouter à une playlist</div><div id="' + data.indexOf(title) +'_copy" class="INDEX_line"><i class="fa-regular fa-copy"></i> Copier le lien</div></div></div><dialog id="' +  data.indexOf(title) + 'playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-square-plus"></i> Ajouter à une playlist</p><button id="' +  data.indexOf(title) + 'playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="' +  data.indexOf(title) + 'playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="' +  data.indexOf(title) + 'playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="' +  data.indexOf(title) + 'playlistSelection"></select><button id="' +  data.indexOf(title) + 'playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog></div>')
                 }
         
                 if(contentToPush.join("") == "") {
@@ -373,7 +460,7 @@ searchBtn.addEventListener("click", () => {
                     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) + "_addPlaylist")  
+                    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")
@@ -589,6 +676,8 @@ socket.on("NOTIFICATION", (data) => {
 })
 
 
+
+
 const cPlaylistManager = document.getElementById("current_playlistManager")
 const cplaylistManager_close = document.getElementById("current_playlistManager_close")
 const cplaylistSelection = document.getElementById("current_playlistSelection")

src/web/public/javascript/__settings_script.js

@@ -236,70 +236,6 @@ socket.on("ALWAYS/USERS",(data) => {
 
 socket.on("ALWAYS/NODES",(data) => {
 
-    /*settings_content.innerHTML = `
-        <div style='width: 100%; text-align: right;'>
-            <button class='primary'><i class='fa fa-plus'></i></button>
-        </div>
-        <hr>
-        <div class='connexion_div'>
-            <div class='connexion_info'>
-                <div class='connexion_logo'>
-                    <i class='fa fa-wifi'></i>
-                </div>
-                <p class='connexion_title'>lava2.horizxon.studio</p>
-                <p class='connexion_logo_on'>Connecté</p>
-            </div>
-            <div>
-                <button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
-                <button class='list_delete'><i class='fa fa-trash'></i></button>
-            </div>
-        
-            </div>
-            <div class='connexion_div'>
-            <div class='connexion_info'>
-                <div class='connexion_logo'>
-                    <i class='fa fa-wifi'></i>
-                </div>
-                <p class='connexion_title'>lava2.horizxon.studio</p>
-                <p class='connexion_logo_on'>Connecté</p>
-            </div>
-            <div>
-                <button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
-                <button class='list_delete'><i class='fa fa-trash'></i></button>
-            </div>
-        
-        </div>
-            <div class='connexion_div'>
-            <div class='connexion_info'>
-                <div class='connexion_logo'>
-                    <i class='fa fa-wifi'></i>
-                </div>
-                <p class='connexion_title'>lava2.horizxon.studio</p>
-                <p class='connexion_logo_off'>Déconnecté</p>
-            </div>
-            <div>
-                <button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
-                <button class='list_delete'><i class='fa fa-trash'></i></button>
-            </div>
-
-        </div>
-            <div class='connexion_div'>
-            <div class='connexion_info'>
-                <div class='connexion_logo'>
-                    <i class='fa fa-wifi'></i>
-                </div>
-                <p class='connexion_title'>lava2.horizxon.studio</p>
-                <p class='connexion_logo_off'>Déconnecté</p>
-            </div>
-            <div>
-                <button class='list_upSong'><i class="fa-solid fa-rotate-right"></i></button>
-                <button class='list_delete'><i class='fa fa-trash'></i></button>
-            </div>
-
-            </div>
-
-        `*/
-
     const settings_content = document.getElementById("settings_content")
 
     if(settings_content && wasOnNodes) {

src/web/public/stylesheets/style.css

@@ -16,7 +16,9 @@ body {
   background-color: black;
   color: white;
   font-family: 'Roboto', sans-serif;
-  background: linear-gradient(225deg, #342348 0%, #1C1A31 100%);;
+  background: linear-gradient(225deg, #342348 0%, #1C1A31 100%);
+  overflow-x: hidden;
+
 
 }
 
@@ -360,8 +362,7 @@ p {
 
 .report_dialog {
 
-  width: 40vw;
+  width: 50%;
-  height: 25vw;
   padding: 0;
   background:  linear-gradient(90deg, #515151 0%, #2e2e2e 100%);
   border: none;
@@ -980,8 +981,8 @@ p {
   display: flex;
   justify-content: end;
   align-items: center;
-  gap: 10%;
+  gap: 5%;
-  width: 10%;
+  width: 20%;
 
 }
 
@@ -1134,6 +1135,7 @@ p {
 
 .alert_div {
 
+  visibility: hidden;
   width: 20%;
   position: absolute;
   top: -10%;
@@ -1165,4 +1167,18 @@ p {
 .alert_div_on {
   transition: all 2s;
   top: 4% !important;
+  visibility: visible;
+}
+
+.tooltip-text {
+  visibility: hidden;
+  position: absolute;
+  z-index: 50;
+  width: 100px;
+  color: white;
+  background-color: #2e2e2e;
+  padding: 7px;
+  border-radius: 12px;
+  text-align: center;
+  opacity: 0.5;
 }

src/web/templates/index.ejs

@@ -7,6 +7,7 @@
     <title>Subsonics - Web</title>
 </head>
 <body>
+    <span id="tooltip" class="tooltip-text">Tooltip Text</span>
     <div class="INDEX_Content">
             <div style='cursor: pointer;' class="alert_div" id="alert">
                 <img class="alert_image" id="alert_image" src="/images/playlist-tile.svg">
@@ -47,10 +48,10 @@
 
                 </div>
                
-                <dialog id="addPlaylist_dialog" class="report_dialog">
+                <dialog id="createPlaylist_dialog" class="report_dialog">
                     <div class="rlineclose">
                         <p class="rtitle"><i class="fa fa-plus"></i> Créer une playlist</p>
-                        <button id="addPlaylist_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
+                        <button id="createPlaylist_close" class="report_close"><i class="fa-solid fa-xmark"></i></button>
                     </div>
                     <div class="apContent">
                         <img class="apTile" src="/images/playlist-tile.svg">
@@ -96,11 +97,11 @@
                     <p id="durationTextTotal" class="durationText">0:00</p>
                 </div>
             </div>
-            <dialog id="current_playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-list-ol"></i> Créer à une playlist</p><button id="current_playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="current_playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="current_playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="current_playlistSelection"></select><button id="current_playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog>
+            <dialog id="current_playlistManager" class="report_dialog"><div class="rlineclose"><p class="rtitle"><i class="fa fa-list-ol"></i> Ajouter à une playlist</p><button id="current_playlistManager_close" class="report_close"><i class="fa-solid fa-xmark"></i></button></div><div class="apContent"><img id="current_playlist_add_img" class="ppTile" src="/images/playlist-tile.svg"><p style="padding: 1%;" id="current_playlist_add_music"></p><p>Selectionner la playlist</p><select style=" color: white; background-color: transparent; border: solid 2px #2c3df4;padding: 1%; border-radius: 12px;" id="current_playlistSelection"></select><button id="current_playlistAddSong" class="rsend"><i class="fa fa-plus"></i> Ajouter</button></div></dialog>
             <div class="PLAYER_actionbar">
                 <button id="disconnect" class="third-leave"><i class="fa fa-sign-out"></i></button>
                 <div id="volDiv" class="volDiv">
-                    <button id="vol" class="third"><i class="fa fa-volume-up"></i></button>
+                    <button id="volbtn" class="third"><i class="fa fa-volume-up"></i></button>
                     <div id="volumeBox">
                         <input type="range" id="volumeInput"  >
                         <p id="volumeTxt">100%</p>
@@ -108,7 +109,7 @@
                 </div>
                 <button id="shuffle" class="third"><i class="fa fa-shuffle"></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>
+                    <button id="list_btn" class="list third"><i class="fa fa-list-ol"></i><p class="number" id="listNumber"></p></button>
                     <div id="listBox">
                         
                     </div>