subsonics/web
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
Raphix
2023-09-15 21:08:43 +02:00
parent 36500a1979
commit 83bfafb5c6
6 changed files with 158 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
src/modules/sub-list.js
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) {
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 {
}
}
}

32
src/modules/sub-web.js
View File

@@ -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"})
}

74
src/web/public/javascript/__index_script.js
View File

@@ -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)

28
src/web/public/stylesheets/style.css
View File

@@ -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 {