Version 0.9.3 - Ajout du drag&drop sur la liste de lecture
This commit is contained in:
parent
36500a1979
commit
83bfafb5c6
@ -1,8 +1,8 @@
|
||||
[
|
||||
{
|
||||
"host": "lava2.horizxon.studio",
|
||||
"password": "horizxon.studio",
|
||||
"host": "lava1.horizxon.studio",
|
||||
"port": 80,
|
||||
"secure": false
|
||||
"password": "horizxon.studio",
|
||||
"retryAmount": 1
|
||||
}
|
||||
]
|
||||
@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "subsonics-web",
|
||||
"author": "Raphix",
|
||||
"version": "0.9.2",
|
||||
"version": "0.9.3",
|
||||
"nodemonConfig": {
|
||||
"ext": "js, html",
|
||||
"ignore": [
|
||||
|
||||
@ -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")
|
||||
@ -252,10 +268,18 @@ module.exports.List = class {
|
||||
let player = client.manager.players.get("137291455336022018")
|
||||
|
||||
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",
|
||||
});
|
||||
|
||||
@ -280,4 +304,5 @@ module.exports.List = class {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -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"})
|
||||
|
||||
}
|
||||
|
||||
|
||||
@ -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)
|
||||
|
||||
@ -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;
|
||||
background-color: white;
|
||||
color: white !important;
|
||||
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 {
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user