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

This commit is contained in:
CICD - Pipeline 2023-09-15 21:08:43 +02:00
parent 36500a1979
commit 83bfafb5c6
6 changed files with 158 additions and 13 deletions

View File

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

View File

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

View File

@ -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) { async fpPlaylistAdd(playlist, client) {
let player = client.manager.players.get("137291455336022018") let player = client.manager.players.get("137291455336022018")
@ -253,9 +269,17 @@ module.exports.List = class {
if(!player) { if(!player) {
var channelId = discord.getMemberVoices().get(userId)
if(!channelId) {
channelId = "664355808250953739"
}
player = client.manager.create({ player = client.manager.create({
guild: "137291455336022018", guild: "137291455336022018",
voiceChannel: discord.getMemberVoices().get(userId), voiceChannel: channelId,
textChannel: "664355637685256203", textChannel: "664355637685256203",
}); });
@ -281,3 +305,4 @@ module.exports.List = class {
} }
} }

View File

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

View File

@ -1295,7 +1295,13 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
queueNum += 1 queueNum += 1
console.log(queueNum) console.log(queueNum)
console.log(data.queue.indexOf(title) + " - " + title.title) 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("") == "") { if(contentToPush.join("") == "") {
@ -1309,6 +1315,72 @@ socket.on("/ALWAYS/MUSIC_STATE", (data) => {
listBox.innerHTML = contentToPush.join("") 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) { for(var title of data.queue) {
console.log(data.queue.indexOf(title) + " - " + title.title) console.log(data.queue.indexOf(title) + " - " + title.title)

View File

@ -608,12 +608,32 @@ p {
padding-top: 1.5%; padding-top: 1.5%;
padding-bottom: 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 { .song:hover {
color: black; color: white !important;
background-color: white; background-color: #4f4f4f;
width: 100%;
}
.song:active {
background-color: unset;
width: 100%; width: 100%;
} }
@ -653,11 +673,11 @@ p {
.song:hover .list_delete { .song:hover .list_delete {
color: black; color: rgb(255, 255, 255);
} }
.song:hover .list_upSong { .song:hover .list_upSong {
color: black; color: rgb(255, 255, 255);
} }
.list_upSong:hover { .list_upSong:hover {