v1 feature: added playlists
This commit is contained in:
khannurien
237
src/components/AddToPlaylistModal.tsx
Normal file
237
src/components/AddToPlaylistModal.tsx
Normal file
@@ -0,0 +1,237 @@
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
import { createPortal } from "react-dom";
|
||||
import { API_URL } from "../config/api.ts";
|
||||
import { useAuth } from "../hooks/useAuth.ts";
|
||||
import type {
|
||||
CreatePlaylistRequest,
|
||||
PlaylistMembership,
|
||||
RawPlaylist,
|
||||
RawPlaylistMembership,
|
||||
} from "../model.ts";
|
||||
import {
|
||||
deserializePlaylist,
|
||||
deserializePlaylistMembership,
|
||||
} from "../model.ts";
|
||||
|
||||
interface AddToPlaylistModalProps {
|
||||
dumpId: string;
|
||||
onClose: () => void;
|
||||
}
|
||||
|
||||
export function AddToPlaylistModal(
|
||||
{ dumpId, onClose }: AddToPlaylistModalProps,
|
||||
) {
|
||||
const { authFetch } = useAuth();
|
||||
const [memberships, setMemberships] = useState<PlaylistMembership[]>([]);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [showNewForm, setShowNewForm] = useState(false);
|
||||
const [newTitle, setNewTitle] = useState("");
|
||||
const [newDescription, setNewDescription] = useState("");
|
||||
const [newIsPublic, setNewIsPublic] = useState(true);
|
||||
const [creating, setCreating] = useState(false);
|
||||
const backdropRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
useEffect(() => {
|
||||
document.body.style.overflow = "hidden";
|
||||
return () => {
|
||||
document.body.style.overflow = "";
|
||||
};
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handler = (e: KeyboardEvent) => {
|
||||
if (e.key === "Escape") onClose();
|
||||
};
|
||||
document.addEventListener("keydown", handler);
|
||||
return () => document.removeEventListener("keydown", handler);
|
||||
}, [onClose]);
|
||||
|
||||
useEffect(() => {
|
||||
authFetch(`${API_URL}/api/playlists/by-dump/${dumpId}/memberships`)
|
||||
.then((r) => r.json())
|
||||
.then((body) => {
|
||||
if (body.success) {
|
||||
setMemberships(
|
||||
(body.data as RawPlaylistMembership[]).map(
|
||||
deserializePlaylistMembership,
|
||||
),
|
||||
);
|
||||
}
|
||||
})
|
||||
.catch(() => {})
|
||||
.finally(() => setLoading(false));
|
||||
}, [dumpId]);
|
||||
|
||||
const toggleMembership = async (membership: PlaylistMembership) => {
|
||||
const { playlist, hasDump } = membership;
|
||||
if (hasDump) {
|
||||
await authFetch(
|
||||
`${API_URL}/api/playlists/${playlist.id}/dumps/${dumpId}`,
|
||||
{ method: "DELETE" },
|
||||
);
|
||||
setMemberships((prev) =>
|
||||
prev.map((m) =>
|
||||
m.playlist.id === playlist.id ? { ...m, hasDump: false } : m
|
||||
)
|
||||
);
|
||||
} else {
|
||||
await authFetch(
|
||||
`${API_URL}/api/playlists/${playlist.id}/dumps/${dumpId}`,
|
||||
{ method: "POST" },
|
||||
);
|
||||
setMemberships((prev) =>
|
||||
prev.map((m) =>
|
||||
m.playlist.id === playlist.id ? { ...m, hasDump: true } : m
|
||||
)
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const handleCreate = async (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
if (!newTitle.trim()) return;
|
||||
setCreating(true);
|
||||
try {
|
||||
const req: CreatePlaylistRequest = {
|
||||
title: newTitle.trim(),
|
||||
description: newDescription.trim() || undefined,
|
||||
isPublic: newIsPublic,
|
||||
};
|
||||
const res = await authFetch(`${API_URL}/api/playlists`, {
|
||||
method: "POST",
|
||||
headers: { "Content-Type": "application/json" },
|
||||
body: JSON.stringify(req),
|
||||
});
|
||||
const body = await res.json();
|
||||
if (!body.success) return;
|
||||
const playlist = deserializePlaylist(body.data as RawPlaylist);
|
||||
|
||||
await authFetch(
|
||||
`${API_URL}/api/playlists/${playlist.id}/dumps/${dumpId}`,
|
||||
{
|
||||
method: "POST",
|
||||
},
|
||||
);
|
||||
|
||||
setMemberships((prev) => [{ playlist, hasDump: true }, ...prev]);
|
||||
setNewTitle("");
|
||||
setNewDescription("");
|
||||
setShowNewForm(false);
|
||||
} finally {
|
||||
setCreating(false);
|
||||
}
|
||||
};
|
||||
|
||||
return createPortal(
|
||||
<div
|
||||
className="modal-backdrop"
|
||||
ref={backdropRef}
|
||||
onClick={(e) => {
|
||||
if (e.target === backdropRef.current) onClose();
|
||||
}}
|
||||
>
|
||||
<div className="modal-card">
|
||||
<div className="modal-header">
|
||||
<span className="modal-title">Add to playlist</span>
|
||||
<button
|
||||
type="button"
|
||||
className="modal-close-btn"
|
||||
onClick={onClose}
|
||||
aria-label="Close"
|
||||
>
|
||||
✕
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="modal-body">
|
||||
{loading
|
||||
? <p className="page-loading">Loading…</p>
|
||||
: memberships.length === 0 && !showNewForm
|
||||
? <p className="empty-state">No playlists yet.</p>
|
||||
: (
|
||||
<ul className="playlist-membership-list">
|
||||
{memberships.map((m) => (
|
||||
<li
|
||||
key={m.playlist.id}
|
||||
className={`playlist-membership-row${
|
||||
m.hasDump ? " playlist-membership-row--active" : ""
|
||||
}`}
|
||||
onClick={() => toggleMembership(m)}
|
||||
>
|
||||
<span className="playlist-membership-check">
|
||||
{m.hasDump ? "✓" : "○"}
|
||||
</span>
|
||||
<span className="playlist-membership-name">
|
||||
{m.playlist.title}
|
||||
</span>
|
||||
{!m.playlist.isPublic && (
|
||||
<span className="playlist-badge playlist-badge--private">
|
||||
private
|
||||
</span>
|
||||
)}
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)}
|
||||
|
||||
{showNewForm
|
||||
? (
|
||||
<form className="modal-new-playlist-form" onSubmit={handleCreate}>
|
||||
<input
|
||||
type="text"
|
||||
placeholder="Title"
|
||||
value={newTitle}
|
||||
onChange={(e) => setNewTitle(e.target.value)}
|
||||
autoFocus
|
||||
required
|
||||
/>
|
||||
<textarea
|
||||
placeholder="Description (optional)"
|
||||
value={newDescription}
|
||||
onChange={(e) => setNewDescription(e.target.value)}
|
||||
rows={2}
|
||||
/>
|
||||
<div className="dump-mode-toggle">
|
||||
<button
|
||||
type="button"
|
||||
className={newIsPublic ? "active" : ""}
|
||||
onClick={() => setNewIsPublic(true)}
|
||||
>
|
||||
Public
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
className={!newIsPublic ? "active" : ""}
|
||||
onClick={() => setNewIsPublic(false)}
|
||||
>
|
||||
Private
|
||||
</button>
|
||||
</div>
|
||||
<div style={{ display: "flex", gap: "0.5rem" }}>
|
||||
<button type="submit" disabled={creating}>
|
||||
{creating ? "Creating…" : "Create & Add"}
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setShowNewForm(false)}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
)
|
||||
: (
|
||||
<button
|
||||
type="button"
|
||||
className="modal-new-playlist-toggle"
|
||||
onClick={() => setShowNewForm(true)}
|
||||
>
|
||||
+ New playlist
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>,
|
||||
document.body,
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user