|
|
|
|
@ -4,15 +4,6 @@
|
|
|
|
|
(function() {
|
|
|
|
|
const M = window.MusicRoom;
|
|
|
|
|
|
|
|
|
|
// Global debug: see if ANY drop event fires
|
|
|
|
|
document.addEventListener('drop', (e) => {
|
|
|
|
|
console.log("[GLOBAL drop] target:", e.target.tagName, e.target.className, "id:", e.target.id);
|
|
|
|
|
}, true);
|
|
|
|
|
|
|
|
|
|
document.addEventListener('dragend', (e) => {
|
|
|
|
|
console.log("[GLOBAL dragend] target:", e.target.tagName, e.target.className);
|
|
|
|
|
}, true);
|
|
|
|
|
|
|
|
|
|
// Track if a drag is in progress (to prevent re-renders from canceling it)
|
|
|
|
|
let isDragging = false;
|
|
|
|
|
|
|
|
|
|
@ -64,8 +55,6 @@
|
|
|
|
|
onRender
|
|
|
|
|
} = config;
|
|
|
|
|
|
|
|
|
|
console.log("[createContainer] type:", type, "canRemove:", canRemove, "playlistId:", playlistId);
|
|
|
|
|
|
|
|
|
|
let currentTracks = [];
|
|
|
|
|
|
|
|
|
|
// Get canEdit dynamically (permissions may change)
|
|
|
|
|
@ -77,12 +66,10 @@
|
|
|
|
|
function render() {
|
|
|
|
|
// Defer render if a drag is in progress (would cancel the drag)
|
|
|
|
|
if (isDragging) {
|
|
|
|
|
console.log("[render] DEFERRED - drag in progress, type:", type);
|
|
|
|
|
pendingRender = true;
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
pendingRender = false;
|
|
|
|
|
console.log("[render] type:", type, "canRemove:", canRemove, "playlistId:", playlistId);
|
|
|
|
|
const canEdit = getCanEdit();
|
|
|
|
|
element.innerHTML = "";
|
|
|
|
|
|
|
|
|
|
@ -94,7 +81,6 @@
|
|
|
|
|
wireQueueContainerDrop(element);
|
|
|
|
|
}
|
|
|
|
|
if (canRemove && type === 'playlist' && playlistId) {
|
|
|
|
|
console.log("[Playlist] Wiring container drop on element:", element.id || element.className);
|
|
|
|
|
wirePlaylistContainerDrop(element);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -160,7 +146,6 @@
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
container.ondrop = (e) => {
|
|
|
|
|
console.log("[Container ondrop] dragSource:", dragSource, "trackIds:", draggedTrackIds, "dropTargetIndex:", dropTargetIndex);
|
|
|
|
|
container.classList.remove("drop-target");
|
|
|
|
|
// Clear any drop indicators on tracks
|
|
|
|
|
container.querySelectorAll(".drop-above, .drop-below").forEach(el => {
|
|
|
|
|
@ -215,9 +200,7 @@
|
|
|
|
|
|
|
|
|
|
// Get current tracks and insert at position
|
|
|
|
|
const current = currentTracks.map(t => (t.track || t).id);
|
|
|
|
|
console.log("[addTracksToPlaylistAt] current:", current, "inserting:", trackIds, "at:", position);
|
|
|
|
|
const newList = [...current.slice(0, position), ...trackIds, ...current.slice(position)];
|
|
|
|
|
console.log("[addTracksToPlaylistAt] newList:", newList);
|
|
|
|
|
|
|
|
|
|
const res = await fetch(`/api/playlists/${playlistId}/tracks`, {
|
|
|
|
|
method: "PATCH",
|
|
|
|
|
@ -317,17 +300,9 @@
|
|
|
|
|
div.ondrop = (e) => handleDrop(e, div, originalIndex);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// Debug: log playlist track wiring conditions
|
|
|
|
|
if (type === 'playlist') {
|
|
|
|
|
console.log("[Playlist wireTrackEvents] type:", type, "playlistId:", playlistId, "canRemove:", canRemove);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
// For playlist tracks, allow reordering and insertion (separate from canEdit)
|
|
|
|
|
if (type === 'playlist' && playlistId && canRemove) {
|
|
|
|
|
console.log("[Playlist] Wiring drag handlers for track:", trackId);
|
|
|
|
|
|
|
|
|
|
div.ondragover = (e) => {
|
|
|
|
|
console.log("[Playlist track ondragover] dragSource:", dragSource);
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
e.dataTransfer.dropEffect = dragSource === 'playlist' ? "move" : "copy";
|
|
|
|
|
|
|
|
|
|
@ -357,8 +332,6 @@
|
|
|
|
|
div.classList.remove("drop-above", "drop-below");
|
|
|
|
|
element.classList.remove("drop-target");
|
|
|
|
|
|
|
|
|
|
console.log("[Track ondrop] dragSource:", dragSource, "trackIds:", draggedTrackIds, "dropTargetIndex:", dropTargetIndex);
|
|
|
|
|
|
|
|
|
|
if (draggedTrackIds.length > 0 && dropTargetIndex !== null) {
|
|
|
|
|
if (dragSource === 'playlist') {
|
|
|
|
|
// Reorder within playlist
|
|
|
|
|
@ -422,8 +395,16 @@
|
|
|
|
|
if (type === 'queue') {
|
|
|
|
|
draggedIndices = selection.queue.has(index) ? [...selection.queue] : [index];
|
|
|
|
|
draggedTrackIds = draggedIndices.map(i => M.queue[i]?.id).filter(Boolean);
|
|
|
|
|
} else if (type === 'playlist') {
|
|
|
|
|
// Playlist uses indices for selection (supports duplicates)
|
|
|
|
|
draggedIndices = selection.playlist.has(index) ? [...selection.playlist] : [index];
|
|
|
|
|
draggedTrackIds = draggedIndices.map(i => {
|
|
|
|
|
const t = currentTracks[i];
|
|
|
|
|
return t ? (t.track || t).id : null;
|
|
|
|
|
}).filter(Boolean);
|
|
|
|
|
} else {
|
|
|
|
|
draggedTrackIds = selection[type].has(trackId) ? [...selection[type]] : [trackId];
|
|
|
|
|
// Library uses trackIds
|
|
|
|
|
draggedTrackIds = selection.library.has(trackId) ? [...selection.library] : [trackId];
|
|
|
|
|
draggedIndices = [];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
@ -448,7 +429,6 @@
|
|
|
|
|
|
|
|
|
|
// Execute deferred render if any
|
|
|
|
|
if (pendingRender) {
|
|
|
|
|
console.log("[handleDragEnd] Executing deferred render for:", type);
|
|
|
|
|
setTimeout(() => render(), 50);
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
@ -478,7 +458,6 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function handleDrop(e, div, index) {
|
|
|
|
|
console.log("[handleDrop] type:", type, "dragSource:", dragSource, "dropTargetIndex:", dropTargetIndex, "draggedIndices:", draggedIndices);
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
div.classList.remove("drop-above", "drop-below");
|
|
|
|
|
|
|
|
|
|
@ -616,7 +595,6 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function showContextMenu(e, track, index, canEdit) {
|
|
|
|
|
console.log("[showContextMenu] type:", type, "canEdit:", canEdit, "canRemove:", canRemove, "playlistId:", playlistId);
|
|
|
|
|
const trackId = track.id || track.filename;
|
|
|
|
|
const title = track.title?.trim() || (track.filename || trackId || "Unknown").replace(/\.[^.]+$/, "");
|
|
|
|
|
|
|
|
|
|
@ -779,7 +757,6 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function removeFromQueue(indices) {
|
|
|
|
|
console.log("[removeFromQueue] indices:", indices, "channelId:", M.currentChannelId);
|
|
|
|
|
if (!M.currentChannelId) return;
|
|
|
|
|
|
|
|
|
|
const res = await fetch("/api/channels/" + M.currentChannelId + "/queue", {
|
|
|
|
|
@ -796,7 +773,6 @@
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
async function removeFromPlaylist(indices) {
|
|
|
|
|
console.log("[removeFromPlaylist] indices:", indices, "playlistId:", playlistId);
|
|
|
|
|
if (!playlistId) return;
|
|
|
|
|
|
|
|
|
|
const res = await fetch(`/api/playlists/${playlistId}/tracks`, {
|
|
|
|
|
|