dev/playlists #13

Merged
peterino merged 19 commits from dev/playlists into integration 2026-02-09 18:58:41 +00:00
3 changed files with 9 additions and 37 deletions
Showing only changes of commit a9f69752ed - Show all commits

View File

@ -252,7 +252,6 @@
const data = JSON.parse(e.data);
// Handle channel list updates
if (data.type === "channel_list") {
console.log("[WS] Received channel_list:", data.channels.length, "channels");
M.channels = data.channels;
M.renderChannelList();
return;

View File

@ -110,7 +110,6 @@
actions.classList.remove('hidden');
const isMine = myPlaylists.some(p => p.id === selectedPlaylistId);
console.log("[Playlists] Creating container - isMine:", isMine, "selectedPlaylistId:", selectedPlaylistId);
// Create or update container (even for empty playlists, to enable drag-drop)
playlistContainer = M.trackContainer.createContainer({
@ -126,9 +125,7 @@
playlistId: selectedPlaylistId
});
console.log("[Playlists] About to call render(), playlistContainer:", playlistContainer);
playlistContainer.render();
console.log("[Playlists] After render()");
}
function reloadCurrentPlaylist() {

View File

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