Version 0.9.3 - Ajout du drag&drop sur la liste de lecture

data/nodes.json

@@ -1,8 +1,8 @@
 [
   {
-    "host": "lava2.horizxon.studio",
+    "host": "lava1.horizxon.studio",
-    "password": "horizxon.studio",
     "port": 80,
-    "secure": false
+    "password": "horizxon.studio",
+    "retryAmount": 1
   }
 ]

package.json

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

src/modules/sub-list.js

@@ -178,6 +178,22 @@ module.exports.List = class {
 
     }
 
+    async replaceList(data) {
+
+        var newOrder = new Array()
+
+        for(var numOrder of data) {
+            parseInt(numOrder)
+            
+            newOrder.push(next[numOrder])
+            
+            
+        }
+        next = newOrder
+        process.emit("MUSIC_UPDATE_STATE")
+
+    }
+
     async fpPlaylistAdd(playlist, client) {
 
         let player = client.manager.players.get("137291455336022018")
@@ -253,9 +269,17 @@ module.exports.List = class {
         
             if(!player) { 
 
+                var channelId = discord.getMemberVoices().get(userId)
+
+                if(!channelId) {
+        
+                    channelId = "664355808250953739"
+                }
+            
+            
                 player = client.manager.create({
                     guild: "137291455336022018",
-                    voiceChannel: discord.getMemberVoices().get(userId),
+                    voiceChannel: channelId,
                     textChannel: "664355637685256203",
                 });
         
@@ -281,3 +305,4 @@ module.exports.List = class {
     } 
 
 }
+

src/modules/sub-web.js

@@ -790,10 +790,38 @@ function IOConnection(io) {
                 
                 } else {
 
-                    io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"USER_DONT_EXIST"})
+                    io.emit("ANSWER/SEND/MOVE_QUEUE", {"error":"USER_DONT_EXIST"})
                 }
             } else {
-                io.emit("ANSWER/SEND/DELETE_QUEUE", {"error":"TOKEN_NOT_FINDED"})
+                io.emit("ANSWER/SEND/MOVE_QUEUE", {"error":"TOKEN_NOT_FINDED"})
+
+            }
+         
+           
+
+        })
+
+        socket.on("SEND/MOVE_QUEUE_BY_ENTIRE", (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.replaceList(data)
+                
+                } else {
+
+                    io.emit("ANSWER/SEND/MOVE_QUEUE_BY_ENTIRE", {"error":"USER_DONT_EXIST"})
+                }
+            } else {
+                io.emit("ANSWER/SEND/MOVE_QUEUE_BY_ENTIRE", {"error":"TOKEN_NOT_FINDED"})
 
             }
          

src/web/public/javascript/__index_script.js

@@ -1295,7 +1295,13 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
             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>')
+            var thumbnail = title.thumbnail
+            if(!thumbnail) {
+    
+            thumbnail = "/images/black-image.svg"
+                            
+            }
+            contentToPush.push(' <div class="draggable song" id="' + data.queue.indexOf(title) + '_queue_song"> <img class="list_thumbnail" src="' + 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("") == "") {
@@ -1309,6 +1315,72 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
             listBox.innerHTML = contentToPush.join("")
         }
 
+        //CODE INTEGER QUEUE LIST MOVE
+
+            const container = document.getElementById('listBox');
+            const draggableItems = document.querySelectorAll('.draggable');
+
+            let draggingElement = null;
+
+            draggableItems.forEach(item => {
+                item.addEventListener('dragstart', (e) => {
+                e.dataTransfer.setData('text/plain', item.innerHTML);
+                draggingElement = item;
+                });
+
+                item.addEventListener('dragend', () => {
+                draggingElement = null;
+                setTimeout(() => {
+                    item.style.display = 'flex'; // Restaure l'affichage de l'élément
+                }, 0);
+                updateOrder();
+                });
+            });
+
+            container.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                const afterElement = getDragAfterElement(container, e.clientY);
+                if (draggingElement !== null) {
+                if (afterElement == null) {
+                    container.appendChild(draggingElement);
+                } else {
+                    const rect = afterElement.getBoundingClientRect();
+                    if (e.clientY < rect.top + rect.height / 2) {
+                    container.insertBefore(draggingElement, afterElement);
+                    } else {
+                    container.insertBefore(draggingElement, afterElement.nextElementSibling);
+                    }
+                }
+                }
+            });
+
+            function getDragAfterElement(container, y) {
+                const draggableElements = [...container.querySelectorAll('.draggable:not(.dragging)')];
+                return draggableElements.reduce((closest, child) => {
+                const box = child.getBoundingClientRect();
+                const offset = y - box.top - box.height / 2;
+                if (offset < 0 && offset > closest.offset) {
+                    return { offset: offset, element: child };
+                } else {
+                    return closest;
+                }
+                }, { offset: Number.NEGATIVE_INFINITY, element: null }).element;
+            }
+
+            function updateOrder() {
+                const draggableItems = document.querySelectorAll('.draggable');
+                const order = [];
+                draggableItems.forEach(item => {
+                order.push(item.id.replace("_queue_song", ""));
+                });
+                console.log('Ordre des divs:', order);
+                send("MOVE_QUEUE_BY_ENTIRE", order)
+            }
+
+
+
+            // END OF CODE INTEGER
+
         for(var title of data.queue) {
 
             console.log(data.queue.indexOf(title) + " - " + title.title)

src/web/public/stylesheets/style.css

@@ -608,12 +608,32 @@ p {
   padding-top: 1.5%;
   padding-bottom: 1.5%;
 
+  user-select: none;
+  -webkit-user-drag: element;
+  outline: none;
+
+}
+
+.song img {
+
+  transition: 0.5s;
+}
+
+.song img:hover {
+
+  transform: scale(1.3);
 }
 
 .song:hover {
 
-  color: black;
+  color: white !important;
-  background-color: white;
+  background-color: #4f4f4f;
+  width: 100%;
+}
+
+.song:active {
+
+  background-color: unset;
   width: 100%;
 }
 
@@ -653,11 +673,11 @@ p {
 
 .song:hover .list_delete {
 
-   color: black;
+   color: rgb(255, 255, 255);
 }
 .song:hover .list_upSong {
 
-  color: black;
+  color: rgb(255, 255, 255);
 }
 .list_upSong:hover {