672 lines
22 KiB
TypeScript
672 lines
22 KiB
TypeScript
import { useEffect, useRef, useState } from "react";
|
|
import { Link, useNavigate, useParams } from "react-router";
|
|
import { API_URL } from "../config/api.ts";
|
|
import type { PlaylistWithDumps, RawPlaylistWithDumps } from "../model.ts";
|
|
import { deserializePlaylistWithDumps } from "../model.ts";
|
|
import { useAuth } from "../hooks/useAuth.ts";
|
|
import { useWS } from "../hooks/useWS.ts";
|
|
import { relativeTime } from "../utils/relativeTime.ts";
|
|
import { DumpCard } from "../components/DumpCard.tsx";
|
|
import { PageShell } from "../components/PageShell.tsx";
|
|
import { PageError } from "../components/PageError.tsx";
|
|
import { ConfirmModal } from "../components/ConfirmModal.tsx";
|
|
import { ImagePicker } from "../components/ImagePicker.tsx";
|
|
import { Markdown } from "../components/Markdown.tsx";
|
|
import { FollowPlaylistButton } from "../components/FollowButton.tsx";
|
|
import { ErrorCard } from "../components/ErrorCard.tsx";
|
|
import { friendlyFetchError } from "../utils/apiError.ts";
|
|
|
|
type LoadState =
|
|
| { status: "loading" }
|
|
| { status: "error"; error: string }
|
|
| { status: "loaded"; playlist: PlaylistWithDumps };
|
|
|
|
export function PlaylistDetail() {
|
|
const { playlistId } = useParams<{ playlistId: string }>();
|
|
const navigate = useNavigate();
|
|
const { user, authFetch, token } = useAuth();
|
|
const {
|
|
voteCounts,
|
|
myVotes,
|
|
castVote,
|
|
removeVote,
|
|
deletedDumpIds,
|
|
lastPlaylistEvent,
|
|
} = useWS();
|
|
|
|
const [state, setState] = useState<LoadState>({ status: "loading" });
|
|
|
|
// activeDumpIds: which dumps are currently in the playlist (the canonical set)
|
|
const [activeDumpIds, setActiveDumpIds] = useState<Set<string>>(new Set());
|
|
|
|
// fading: dumps whose removal is being animated — same cooldown→dismissing pattern as upvoted list
|
|
const [fading, setFading] = useState<
|
|
Record<string, "cooldown" | "dismissing">
|
|
>({});
|
|
const cancels = useRef<Map<string, () => void>>(new Map());
|
|
|
|
const [dragSrcIndex, setDragSrcIndex] = useState<number | null>(null);
|
|
const [dragOverIndex, setDragOverIndex] = useState<number | null>(null);
|
|
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
const [editTitle, setEditTitle] = useState("");
|
|
const [editDescription, setEditDescription] = useState("");
|
|
const [editIsPublic, setEditIsPublic] = useState(true);
|
|
const [editSaving, setEditSaving] = useState(false);
|
|
const [editError, setEditError] = useState<string | null>(null);
|
|
const [confirmDelete, setConfirmDelete] = useState(false);
|
|
const [imageFile, setImageFile] = useState<File | null>(null);
|
|
const [imagePreview, setImagePreview] = useState<string | null>(null);
|
|
|
|
// prevActiveDumpIds: used by the WS effect to diff incoming dumpIds
|
|
const prevActiveDumpIdsRef = useRef<Set<string> | null>(null);
|
|
const descriptionRef = useRef<HTMLTextAreaElement>(null);
|
|
|
|
useEffect(() => () => {
|
|
cancels.current.forEach((c) => c());
|
|
}, []);
|
|
|
|
const fetchPlaylist = () => {
|
|
if (!playlistId) return;
|
|
setState({ status: "loading" });
|
|
fetch(`${API_URL}/api/playlists/${playlistId}`, {
|
|
headers: token ? { Authorization: `Bearer ${token}` } : {},
|
|
})
|
|
.then((r) => {
|
|
if (!r.ok) {
|
|
throw new Error(
|
|
r.status === 404 ? "Playlist not found" : `HTTP ${r.status}`,
|
|
);
|
|
}
|
|
return r.json();
|
|
})
|
|
.then((body) => {
|
|
if (!body.success) throw new Error("Failed to load playlist");
|
|
const pl = deserializePlaylistWithDumps(
|
|
body.data as RawPlaylistWithDumps,
|
|
);
|
|
setState({ status: "loaded", playlist: pl });
|
|
const ids = new Set(pl.dumps.map((d) => d.id));
|
|
setActiveDumpIds(ids);
|
|
prevActiveDumpIdsRef.current = ids;
|
|
setFading({});
|
|
cancels.current.forEach((c) => c());
|
|
cancels.current.clear();
|
|
})
|
|
.catch((err) => {
|
|
setState({
|
|
status: "error",
|
|
error: friendlyFetchError(err),
|
|
});
|
|
});
|
|
};
|
|
|
|
useEffect(() => {
|
|
fetchPlaylist();
|
|
}, [playlistId]);
|
|
|
|
// Start the cooldown→dismissing→gone sequence for a dump being removed.
|
|
// After the sequence completes, the dump is removed from state.playlist.dumps.
|
|
function startFade(id: string) {
|
|
if (cancels.current.has(id)) return; // already fading
|
|
let dead = false;
|
|
let kill = () => {};
|
|
|
|
kill = () => {
|
|
dead = true;
|
|
setFading((f) => {
|
|
const n = { ...f };
|
|
delete n[id];
|
|
return n;
|
|
});
|
|
cancels.current.delete(id);
|
|
};
|
|
cancels.current.set(id, () => kill());
|
|
setFading((f) => ({ ...f, [id]: "cooldown" }));
|
|
|
|
const t1 = setTimeout(() => {
|
|
if (dead) return;
|
|
setFading((f) => ({ ...f, [id]: "dismissing" }));
|
|
|
|
const t2 = setTimeout(() => {
|
|
if (dead) return;
|
|
// Remove from the playlist.dumps array now that animation is done
|
|
setState((prev) => {
|
|
if (prev.status !== "loaded") return prev;
|
|
return {
|
|
...prev,
|
|
playlist: {
|
|
...prev.playlist,
|
|
dumps: prev.playlist.dumps.filter((d) => d.id !== id),
|
|
},
|
|
};
|
|
});
|
|
kill();
|
|
}, 350);
|
|
|
|
kill = () => {
|
|
dead = true;
|
|
clearTimeout(t2);
|
|
setFading((f) => {
|
|
const n = { ...f };
|
|
delete n[id];
|
|
return n;
|
|
});
|
|
cancels.current.delete(id);
|
|
};
|
|
cancels.current.set(id, () => kill());
|
|
}, 2000);
|
|
|
|
kill = () => {
|
|
dead = true;
|
|
clearTimeout(t1);
|
|
setFading((f) => {
|
|
const n = { ...f };
|
|
delete n[id];
|
|
return n;
|
|
});
|
|
cancels.current.delete(id);
|
|
};
|
|
cancels.current.set(id, () => kill());
|
|
}
|
|
|
|
// WS: playlist metadata updated or deleted
|
|
useEffect(() => {
|
|
if (!lastPlaylistEvent || !playlistId) return;
|
|
const ev = lastPlaylistEvent;
|
|
if (ev.playlistId !== playlistId) return;
|
|
|
|
if (ev.type === "dumps_updated" && ev.dumpIds) {
|
|
const newIds = new Set(ev.dumpIds);
|
|
const prev = prevActiveDumpIdsRef.current ?? new Set<string>();
|
|
|
|
// Removed: were active, not in new set → fade out
|
|
for (const id of prev) {
|
|
if (!newIds.has(id)) {
|
|
setActiveDumpIds((s) => {
|
|
const n = new Set(s);
|
|
n.delete(id);
|
|
return n;
|
|
});
|
|
startFade(id);
|
|
}
|
|
}
|
|
|
|
// Re-added while fading → cancel fade, restore to active
|
|
for (const id of newIds) {
|
|
if (!prev.has(id)) {
|
|
if (cancels.current.has(id)) {
|
|
cancels.current.get(id)!();
|
|
}
|
|
// If this is a brand-new dump we haven't seen, re-fetch
|
|
setState((s) => {
|
|
if (s.status !== "loaded") return s;
|
|
const known = s.playlist.dumps.some((d) => d.id === id);
|
|
if (!known) {
|
|
// Trigger a re-fetch asynchronously
|
|
setTimeout(fetchPlaylist, 0);
|
|
}
|
|
return s;
|
|
});
|
|
setActiveDumpIds((s) => new Set([...s, id]));
|
|
}
|
|
}
|
|
|
|
// Reorder active dumps to match the new server order,
|
|
// keeping fading dumps at their current visual positions.
|
|
setState((prev) => {
|
|
if (prev.status !== "loaded") return prev;
|
|
const dumpMap = new Map(prev.playlist.dumps.map((d) => [d.id, d]));
|
|
const activeQueue = ev.dumpIds!
|
|
.filter((id) => dumpMap.has(id))
|
|
.map((id) => dumpMap.get(id)!);
|
|
let qi = 0;
|
|
const result = prev.playlist.dumps
|
|
.filter((d) => dumpMap.has(d.id))
|
|
.map((d) => newIds.has(d.id) ? activeQueue[qi++] : d);
|
|
while (qi < activeQueue.length) result.push(activeQueue[qi++]);
|
|
return {
|
|
...prev,
|
|
playlist: { ...prev.playlist, dumps: result },
|
|
};
|
|
});
|
|
|
|
prevActiveDumpIdsRef.current = newIds;
|
|
} else if (ev.type === "updated" && ev.playlist) {
|
|
setState((prev) => {
|
|
if (prev.status !== "loaded") return prev;
|
|
return {
|
|
...prev,
|
|
playlist: {
|
|
...prev.playlist,
|
|
title: ev.playlist!.title,
|
|
description: ev.playlist!.description,
|
|
isPublic: ev.playlist!.isPublic,
|
|
imageMime: ev.playlist!.imageMime,
|
|
},
|
|
};
|
|
});
|
|
} else if (ev.type === "deleted") {
|
|
navigate("/");
|
|
}
|
|
}, [lastPlaylistEvent, playlistId]);
|
|
|
|
// Filter out globally deleted dumps (dump was deleted entirely, not just removed from playlist)
|
|
useEffect(() => {
|
|
if (deletedDumpIds.size === 0) return;
|
|
setState((prev) => {
|
|
if (prev.status !== "loaded") return prev;
|
|
const filtered = prev.playlist.dumps.filter((d) =>
|
|
!deletedDumpIds.has(d.id)
|
|
);
|
|
if (filtered.length === prev.playlist.dumps.length) return prev;
|
|
return { ...prev, playlist: { ...prev.playlist, dumps: filtered } };
|
|
});
|
|
setActiveDumpIds((prev) => {
|
|
const n = new Set(prev);
|
|
for (const id of deletedDumpIds) n.delete(id);
|
|
return n;
|
|
});
|
|
}, [deletedDumpIds]);
|
|
|
|
const handleDragStart = (index: number) => setDragSrcIndex(index);
|
|
|
|
const handleDragOver = (e: React.DragEvent, index: number) => {
|
|
e.preventDefault();
|
|
if (dragSrcIndex === null || dragSrcIndex === index) return;
|
|
setState((prev) => {
|
|
if (prev.status !== "loaded") return prev;
|
|
// Only reorder among active dumps
|
|
const activeDumps = prev.playlist.dumps.filter((d) =>
|
|
activeDumpIds.has(d.id)
|
|
);
|
|
const fadingDumps = prev.playlist.dumps.filter((d) =>
|
|
!activeDumpIds.has(d.id)
|
|
);
|
|
const reordered = [...activeDumps];
|
|
const [moved] = reordered.splice(dragSrcIndex, 1);
|
|
reordered.splice(index, 0, moved);
|
|
setDragSrcIndex(index);
|
|
setDragOverIndex(index);
|
|
return {
|
|
...prev,
|
|
playlist: { ...prev.playlist, dumps: [...reordered, ...fadingDumps] },
|
|
};
|
|
});
|
|
};
|
|
|
|
const handleDragEnd = async () => {
|
|
if (state.status !== "loaded" || !playlistId) return;
|
|
setDragSrcIndex(null);
|
|
setDragOverIndex(null);
|
|
const activeDumps = state.playlist.dumps.filter((d) =>
|
|
activeDumpIds.has(d.id)
|
|
);
|
|
try {
|
|
await authFetch(`${API_URL}/api/playlists/${playlistId}/order`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({ dumpIds: activeDumps.map((d) => d.id) }),
|
|
});
|
|
} catch {
|
|
fetchPlaylist();
|
|
}
|
|
};
|
|
|
|
const handleRemoveDump = (dumpId: string) => {
|
|
if (!playlistId) return;
|
|
// Fire-and-forget the API call; animate immediately
|
|
authFetch(`${API_URL}/api/playlists/${playlistId}/dumps/${dumpId}`, {
|
|
method: "DELETE",
|
|
}).catch(() => {
|
|
// On failure, cancel the fade and restore the item
|
|
cancels.current.get(dumpId)?.();
|
|
setActiveDumpIds((prev) => new Set([...prev, dumpId]));
|
|
});
|
|
setActiveDumpIds((prev) => {
|
|
const n = new Set(prev);
|
|
n.delete(dumpId);
|
|
return n;
|
|
});
|
|
startFade(dumpId);
|
|
};
|
|
|
|
const handleCancelRemove = (dumpId: string) => {
|
|
if (!playlistId) return;
|
|
cancels.current.get(dumpId)?.();
|
|
setActiveDumpIds((prev) => new Set([...prev, dumpId]));
|
|
// Re-add server-side since DELETE already fired
|
|
authFetch(`${API_URL}/api/playlists/${playlistId}/dumps/${dumpId}`, {
|
|
method: "POST",
|
|
}).catch(() => {});
|
|
};
|
|
|
|
useEffect(() => {
|
|
const el = descriptionRef.current;
|
|
if (!el) return;
|
|
el.style.height = "auto";
|
|
el.style.height = `${el.scrollHeight}px`;
|
|
}, [editDescription, editOpen]);
|
|
|
|
const openEdit = () => {
|
|
if (state.status !== "loaded") return;
|
|
setEditTitle(state.playlist.title);
|
|
setEditDescription(state.playlist.description ?? "");
|
|
setEditIsPublic(state.playlist.isPublic);
|
|
setImageFile(null);
|
|
setImagePreview(null);
|
|
setEditError(null);
|
|
setEditOpen(true);
|
|
};
|
|
|
|
const handleEditSave = async () => {
|
|
if (!playlistId || state.status !== "loaded") return;
|
|
setEditSaving(true);
|
|
setEditError(null);
|
|
try {
|
|
await authFetch(`${API_URL}/api/playlists/${playlistId}`, {
|
|
method: "PUT",
|
|
headers: { "Content-Type": "application/json" },
|
|
body: JSON.stringify({
|
|
title: editTitle,
|
|
description: editDescription || undefined,
|
|
isPublic: editIsPublic,
|
|
}),
|
|
});
|
|
|
|
if (imageFile) {
|
|
const fd = new FormData();
|
|
fd.append("file", imageFile);
|
|
await authFetch(`${API_URL}/api/playlists/${playlistId}/image`, {
|
|
method: "POST",
|
|
body: fd,
|
|
});
|
|
}
|
|
|
|
setEditOpen(false);
|
|
fetchPlaylist();
|
|
} catch (err) {
|
|
setEditError(friendlyFetchError(err));
|
|
} finally {
|
|
setEditSaving(false);
|
|
}
|
|
};
|
|
|
|
const handleDelete = async () => {
|
|
if (!playlistId) return;
|
|
await authFetch(`${API_URL}/api/playlists/${playlistId}`, {
|
|
method: "DELETE",
|
|
});
|
|
navigate("/");
|
|
};
|
|
|
|
if (state.status === "loading") {
|
|
return (
|
|
<PageShell>
|
|
<p className="page-loading">Loading playlist…</p>
|
|
</PageShell>
|
|
);
|
|
}
|
|
|
|
if (state.status === "error") {
|
|
return (
|
|
<PageError
|
|
message={state.error}
|
|
actions={
|
|
<button
|
|
className="btn-border"
|
|
type="button"
|
|
onClick={() => navigate("/")}
|
|
>
|
|
← Back
|
|
</button>
|
|
}
|
|
/>
|
|
);
|
|
}
|
|
|
|
const { playlist } = state;
|
|
const isOwner = !!user && user.id === playlist.userId;
|
|
|
|
// Active dumps in playlist order; fading dumps appended so they stay visible
|
|
const activeDumps = playlist.dumps.filter((d) => activeDumpIds.has(d.id));
|
|
const visibleDumps = playlist.dumps.filter((d) =>
|
|
activeDumpIds.has(d.id) || d.id in fading
|
|
);
|
|
|
|
return (
|
|
<PageShell>
|
|
<div className="playlist-detail-header">
|
|
<div className="playlist-detail-header-top">
|
|
{editOpen
|
|
? (
|
|
<ImagePicker
|
|
src={imagePreview ??
|
|
(playlist.imageMime
|
|
? `${API_URL}/api/playlists/${playlist.id}/image`
|
|
: null)}
|
|
alt="Cover"
|
|
size={72}
|
|
onChange={(file) => {
|
|
setImageFile(file);
|
|
setImagePreview(URL.createObjectURL(file));
|
|
}}
|
|
/>
|
|
)
|
|
: playlist.imageMime && (
|
|
<img
|
|
src={`${API_URL}/api/playlists/${playlist.id}/image`}
|
|
alt=""
|
|
className="playlist-detail-img"
|
|
/>
|
|
)}
|
|
|
|
<div className="playlist-detail-content">
|
|
{editOpen
|
|
? (
|
|
<div className="playlist-detail-title-row">
|
|
<input
|
|
type="text"
|
|
className="playlist-edit-input"
|
|
value={editTitle}
|
|
onChange={(e) => setEditTitle(e.target.value)}
|
|
autoFocus
|
|
/>
|
|
<button
|
|
type="button"
|
|
className="btn-primary"
|
|
disabled={editSaving}
|
|
onClick={handleEditSave}
|
|
>
|
|
{editSaving ? "Saving…" : "Save"}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="form-cancel"
|
|
onClick={() => setEditOpen(false)}
|
|
>
|
|
Cancel
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className="btn-danger"
|
|
onClick={() => setConfirmDelete(true)}
|
|
>
|
|
Delete
|
|
</button>
|
|
</div>
|
|
)
|
|
: (
|
|
<div className="playlist-detail-title-row">
|
|
<h1 className="playlist-detail-title">{playlist.title}</h1>
|
|
{!isOwner && (
|
|
<FollowPlaylistButton
|
|
targetPlaylistId={playlist.id}
|
|
isPublic={playlist.isPublic}
|
|
/>
|
|
)}
|
|
{isOwner && (
|
|
<button
|
|
type="button"
|
|
className="playlist-edit-btn"
|
|
onClick={openEdit}
|
|
>
|
|
Edit
|
|
</button>
|
|
)}
|
|
</div>
|
|
)}
|
|
|
|
{editOpen
|
|
? (
|
|
<textarea
|
|
ref={descriptionRef}
|
|
className="playlist-edit-textarea"
|
|
value={editDescription}
|
|
onChange={(e) => setEditDescription(e.target.value)}
|
|
placeholder="Description (optional)"
|
|
rows={1}
|
|
/>
|
|
)
|
|
: playlist.description && (
|
|
<Markdown className="playlist-detail-description">
|
|
{playlist.description}
|
|
</Markdown>
|
|
)}
|
|
|
|
<div className="playlist-detail-meta">
|
|
{editOpen
|
|
? (
|
|
<div className="visibility-toggle playlist-edit-toggle">
|
|
<button
|
|
type="button"
|
|
className={editIsPublic ? "active" : ""}
|
|
onClick={() => setEditIsPublic(true)}
|
|
>
|
|
Public
|
|
</button>
|
|
<button
|
|
type="button"
|
|
className={!editIsPublic ? "active" : ""}
|
|
onClick={() => setEditIsPublic(false)}
|
|
>
|
|
Private
|
|
</button>
|
|
</div>
|
|
)
|
|
: (
|
|
<>
|
|
<span
|
|
className={`playlist-badge${
|
|
playlist.isPublic ? "" : " playlist-badge--private"
|
|
}`}
|
|
>
|
|
{playlist.isPublic ? "public" : "private"}
|
|
</span>
|
|
{playlist.ownerUsername && (
|
|
<Link
|
|
to={`/users/${playlist.ownerUsername}`}
|
|
className="playlist-detail-owner"
|
|
>
|
|
@{playlist.ownerUsername}
|
|
</Link>
|
|
)}
|
|
<time
|
|
dateTime={playlist.createdAt.toISOString()}
|
|
title={playlist.createdAt.toLocaleString()}
|
|
>
|
|
{relativeTime(playlist.createdAt)}
|
|
</time>
|
|
</>
|
|
)}
|
|
</div>
|
|
{editError && (
|
|
<ErrorCard title="Failed to save" message={editError} />
|
|
)}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{visibleDumps.length === 0
|
|
? <p className="empty-state">No dumps in this playlist yet.</p>
|
|
: (
|
|
<div className="playlist-dump-list">
|
|
{visibleDumps.map((dump) => {
|
|
const isActive = activeDumpIds.has(dump.id);
|
|
const phase = fading[dump.id];
|
|
// drag index is within the active-only list
|
|
const activeIndex = isActive ? activeDumps.indexOf(dump) : -1;
|
|
const cardCls = phase === "cooldown"
|
|
? "dump-card--fading"
|
|
: phase === "dismissing"
|
|
? "dump-card--dismissing"
|
|
: undefined;
|
|
|
|
return (
|
|
<div
|
|
key={dump.id}
|
|
className={`playlist-dump-item${
|
|
activeIndex === dragOverIndex && isActive
|
|
? " playlist-dump-item--drag-over"
|
|
: ""
|
|
}`}
|
|
draggable={isOwner && isActive}
|
|
onDragStart={isOwner && isActive
|
|
? () => handleDragStart(activeIndex)
|
|
: undefined}
|
|
onDragOver={isOwner && isActive
|
|
? (e) => handleDragOver(e, activeIndex)
|
|
: undefined}
|
|
onDragEnd={isOwner && isActive ? handleDragEnd : undefined}
|
|
>
|
|
{isOwner && isActive && (
|
|
<span className="drag-handle" aria-hidden>⠿</span>
|
|
)}
|
|
<DumpCard
|
|
dump={dump}
|
|
voteCount={voteCounts[dump.id] ?? dump.voteCount}
|
|
voted={myVotes.has(dump.id)}
|
|
canVote={!!user}
|
|
castVote={castVote}
|
|
removeVote={removeVote}
|
|
className={cardCls}
|
|
isOwner={!!user && user.id === dump.userId}
|
|
/>
|
|
{isOwner && (isActive
|
|
? (
|
|
<button
|
|
type="button"
|
|
className="playlist-remove-btn"
|
|
onClick={() => handleRemoveDump(dump.id)}
|
|
aria-label="Remove from playlist"
|
|
>
|
|
✕
|
|
</button>
|
|
)
|
|
: phase === "cooldown" && (
|
|
<button
|
|
type="button"
|
|
className="playlist-cancel-btn"
|
|
onClick={() => handleCancelRemove(dump.id)}
|
|
aria-label="Cancel removal"
|
|
>
|
|
Undo
|
|
</button>
|
|
))}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
{confirmDelete && (
|
|
<ConfirmModal
|
|
message="Delete this playlist? This cannot be undone."
|
|
confirmLabel="Delete playlist"
|
|
onConfirm={handleDelete}
|
|
onCancel={() => setConfirmDelete(false)}
|
|
/>
|
|
)}
|
|
</PageShell>
|
|
);
|
|
}
|