Tetardtek
2c3d9d95c6
All checks were successful
CI/CD — Build & Deploy / Build & Deploy (push) Successful in 36s
- PlaylistPage: bouton Éditer (formulaire inline titre/visibilité), Supprimer (confirm → DELETE → redirect), Partager (modal userId/permission → POST share), Retirer vidéo (✕ → DELETE) - PlaylistsPage: section invitations reçues avec Accept / Refuser (PATCH share/:shareId) - tsc --noEmit : 0 erreur, 0 console.log
330 lines
12 KiB
TypeScript
330 lines
12 KiB
TypeScript
import { useState, useEffect } from 'react';
|
|
import { useParams, Link, useNavigate } from 'react-router-dom';
|
|
import { apiFetch, ApiError } from '../lib/api';
|
|
|
|
interface Video {
|
|
id: string;
|
|
title: string;
|
|
thumbnailUrl: string | null;
|
|
duration: number | null;
|
|
}
|
|
|
|
interface Playlist {
|
|
id: string;
|
|
title: string;
|
|
description: string | null;
|
|
visibility: 'private' | 'shared' | 'public';
|
|
}
|
|
|
|
interface PlaylistResponse {
|
|
success: boolean;
|
|
data: {
|
|
playlist: Playlist;
|
|
videos: Video[];
|
|
permission: 'owner' | 'view' | 'edit';
|
|
};
|
|
}
|
|
|
|
export default function PlaylistPage() {
|
|
const { id } = useParams<{ id: string }>();
|
|
const navigate = useNavigate();
|
|
const [data, setData] = useState<PlaylistResponse['data'] | null>(null);
|
|
const [error, setError] = useState<'forbidden' | 'not_found' | null>(null);
|
|
const [loading, setLoading] = useState(true);
|
|
const [actionError, setActionError] = useState<string | null>(null);
|
|
|
|
// Edit inline form
|
|
const [editOpen, setEditOpen] = useState(false);
|
|
const [editTitle, setEditTitle] = useState('');
|
|
const [editVisibility, setEditVisibility] = useState<'private' | 'shared' | 'public'>('private');
|
|
const [saving, setSaving] = useState(false);
|
|
|
|
// Share modal
|
|
const [shareOpen, setShareOpen] = useState(false);
|
|
const [shareUserId, setShareUserId] = useState('');
|
|
const [sharePermission, setSharePermission] = useState<'view' | 'edit'>('view');
|
|
const [sharing, setSharing] = useState(false);
|
|
const [shareError, setShareError] = useState<string | null>(null);
|
|
const [shareOk, setShareOk] = useState(false);
|
|
|
|
useEffect(() => {
|
|
if (!id) return;
|
|
apiFetch<PlaylistResponse>(`/playlists/${id}`)
|
|
.then((res) => setData(res.data))
|
|
.catch((err: unknown) => {
|
|
if (err instanceof ApiError && err.status === 403) setError('forbidden');
|
|
else setError('not_found');
|
|
})
|
|
.finally(() => setLoading(false));
|
|
}, [id]);
|
|
|
|
function openEdit() {
|
|
if (!data) return;
|
|
setEditTitle(data.playlist.title);
|
|
setEditVisibility(data.playlist.visibility);
|
|
setEditOpen(true);
|
|
setActionError(null);
|
|
}
|
|
|
|
async function handleEdit(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!id || saving) return;
|
|
setSaving(true);
|
|
setActionError(null);
|
|
try {
|
|
const res = await apiFetch<{ success: boolean; data: { playlist: Playlist } }>(
|
|
`/playlists/${id}`,
|
|
{ method: 'PATCH', body: JSON.stringify({ title: editTitle.trim(), visibility: editVisibility }) }
|
|
);
|
|
setData((prev) => prev ? { ...prev, playlist: res.data.playlist } : prev);
|
|
setEditOpen(false);
|
|
} catch {
|
|
setActionError('Impossible de modifier la playlist.');
|
|
}
|
|
setSaving(false);
|
|
}
|
|
|
|
async function handleDelete() {
|
|
if (!id || !confirm('Supprimer cette playlist ?')) return;
|
|
setActionError(null);
|
|
try {
|
|
await apiFetch(`/playlists/${id}`, { method: 'DELETE' });
|
|
navigate('/playlists');
|
|
} catch {
|
|
setActionError('Impossible de supprimer la playlist.');
|
|
}
|
|
}
|
|
|
|
async function handleRemoveVideo(videoId: string) {
|
|
if (!id || !confirm('Retirer cette vidéo de la playlist ?')) return;
|
|
setActionError(null);
|
|
try {
|
|
await apiFetch(`/playlists/${id}/videos/${videoId}`, { method: 'DELETE' });
|
|
setData((prev) => prev ? { ...prev, videos: prev.videos.filter((v) => v.id !== videoId) } : prev);
|
|
} catch {
|
|
setActionError('Impossible de retirer la vidéo.');
|
|
}
|
|
}
|
|
|
|
async function handleShare(e: React.FormEvent) {
|
|
e.preventDefault();
|
|
if (!id || !shareUserId.trim() || sharing) return;
|
|
setSharing(true);
|
|
setShareError(null);
|
|
setShareOk(false);
|
|
try {
|
|
await apiFetch(`/playlists/${id}/share`, {
|
|
method: 'POST',
|
|
body: JSON.stringify({ userId: shareUserId.trim(), permission: sharePermission }),
|
|
});
|
|
setShareOk(true);
|
|
setShareUserId('');
|
|
} catch {
|
|
setShareError("Impossible d'envoyer l'invitation.");
|
|
}
|
|
setSharing(false);
|
|
}
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex flex-col gap-3">
|
|
<div className="h-6 w-1/3 rounded bg-od-surface-hi animate-pulse" />
|
|
{[...Array(4)].map((_, i) => (
|
|
<div key={i} className="h-14 rounded border border-od-border bg-od-surface animate-pulse" />
|
|
))}
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (error === 'forbidden') {
|
|
return (
|
|
<div className="flex flex-col items-center gap-4 pt-16 text-center">
|
|
<span className="font-mono text-3xl text-od-accent">⊘</span>
|
|
<p className="text-sm text-od-muted">Accès refusé à cette playlist.</p>
|
|
<Link to="/playlists" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
|
|
← Playlists
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!data) {
|
|
return (
|
|
<div className="flex flex-col items-center gap-4 pt-16">
|
|
<p className="text-sm text-od-muted">Playlist introuvable.</p>
|
|
<Link to="/playlists" className="font-mono text-xs text-od-muted hover:text-od-text transition-colors">
|
|
← Playlists
|
|
</Link>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const { playlist, videos, permission } = data;
|
|
const isOwner = permission === 'owner';
|
|
|
|
return (
|
|
<div className="flex flex-col gap-6">
|
|
|
|
{/* Header */}
|
|
<div className="flex flex-col gap-3 border-b border-od-border pb-6">
|
|
{editOpen ? (
|
|
<form onSubmit={handleEdit} className="flex flex-col gap-3 rounded border border-od-border bg-od-surface p-4">
|
|
<p className="font-mono text-xs text-od-muted uppercase tracking-widest">Modifier</p>
|
|
<input
|
|
value={editTitle}
|
|
onChange={(e) => setEditTitle(e.target.value)}
|
|
required
|
|
className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
|
|
/>
|
|
<select
|
|
value={editVisibility}
|
|
onChange={(e) => setEditVisibility(e.target.value as 'private' | 'shared' | 'public')}
|
|
className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
|
|
>
|
|
<option value="private">Privée</option>
|
|
<option value="shared">Partagée</option>
|
|
<option value="public">Publique</option>
|
|
</select>
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="submit"
|
|
disabled={saving}
|
|
className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
|
|
>
|
|
{saving ? '…' : 'Enregistrer'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setEditOpen(false)}
|
|
className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
|
|
>
|
|
Annuler
|
|
</button>
|
|
</div>
|
|
</form>
|
|
) : (
|
|
<>
|
|
<div className="flex items-center gap-3">
|
|
<h1 className="text-xl font-semibold text-od-text">{playlist.title}</h1>
|
|
<span className="font-mono text-xs text-od-muted">{permission}</span>
|
|
</div>
|
|
{playlist.description && (
|
|
<p className="text-sm text-od-muted">{playlist.description}</p>
|
|
)}
|
|
{isOwner && (
|
|
<div className="flex gap-2">
|
|
<button
|
|
onClick={openEdit}
|
|
className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
|
|
>
|
|
Éditer
|
|
</button>
|
|
<button
|
|
onClick={() => { setShareOpen(true); setShareError(null); setShareOk(false); }}
|
|
className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-accent hover:text-od-accent transition-colors"
|
|
>
|
|
Partager
|
|
</button>
|
|
<button
|
|
onClick={handleDelete}
|
|
className="rounded border border-od-border px-3 py-1 font-mono text-xs text-od-muted hover:border-od-crit hover:text-od-crit transition-colors"
|
|
>
|
|
Supprimer
|
|
</button>
|
|
</div>
|
|
)}
|
|
</>
|
|
)}
|
|
{actionError && <p className="font-mono text-xs text-od-crit">{actionError}</p>}
|
|
</div>
|
|
|
|
{/* Share modal */}
|
|
{shareOpen && (
|
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-od-bg/80">
|
|
<div className="w-full max-w-sm rounded border border-od-border bg-od-surface p-6 flex flex-col gap-4">
|
|
<p className="font-mono text-xs text-od-muted uppercase tracking-widest">Partager</p>
|
|
<form onSubmit={handleShare} className="flex flex-col gap-3">
|
|
<input
|
|
value={shareUserId}
|
|
onChange={(e) => setShareUserId(e.target.value)}
|
|
placeholder="ID utilisateur"
|
|
required
|
|
className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text placeholder-od-muted outline-none focus:border-od-accent"
|
|
/>
|
|
<select
|
|
value={sharePermission}
|
|
onChange={(e) => setSharePermission(e.target.value as 'view' | 'edit')}
|
|
className="rounded border border-od-border bg-od-bg px-3 py-2 text-sm text-od-text outline-none focus:border-od-accent"
|
|
>
|
|
<option value="view">Lecture seule</option>
|
|
<option value="edit">Édition</option>
|
|
</select>
|
|
{shareError && <p className="font-mono text-xs text-od-crit">{shareError}</p>}
|
|
{shareOk && <p className="font-mono text-xs text-od-ok">Invitation envoyée.</p>}
|
|
<div className="flex gap-2">
|
|
<button
|
|
type="submit"
|
|
disabled={sharing || !shareUserId.trim()}
|
|
className="rounded border border-od-accent px-4 py-1.5 font-mono text-xs text-od-accent hover:bg-od-accent hover:text-od-bg transition-colors disabled:opacity-40"
|
|
>
|
|
{sharing ? '…' : 'Inviter'}
|
|
</button>
|
|
<button
|
|
type="button"
|
|
onClick={() => setShareOpen(false)}
|
|
className="rounded border border-od-border px-4 py-1.5 font-mono text-xs text-od-muted hover:text-od-text transition-colors"
|
|
>
|
|
Fermer
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
)}
|
|
|
|
{/* Videos */}
|
|
{videos.length === 0 ? (
|
|
<p className="text-sm text-od-muted">Aucune vidéo dans cette playlist.</p>
|
|
) : (
|
|
<div className="flex flex-col gap-2">
|
|
{videos.map((v, i) => (
|
|
<div
|
|
key={v.id}
|
|
className="flex items-center gap-4 rounded border border-od-border bg-od-surface px-4 py-3"
|
|
>
|
|
<span className="font-mono text-xs text-od-muted w-5 shrink-0">{i + 1}</span>
|
|
<Link
|
|
to={`/video/${v.id}`}
|
|
className="flex flex-1 items-center gap-4 hover:opacity-80 transition-opacity min-w-0"
|
|
>
|
|
{v.thumbnailUrl && (
|
|
<img src={v.thumbnailUrl} alt="" className="h-10 w-16 rounded object-cover shrink-0" />
|
|
)}
|
|
<span className="flex-1 text-sm text-od-text truncate">{v.title}</span>
|
|
{v.duration && (
|
|
<span className="font-mono text-xs text-od-muted shrink-0">
|
|
{Math.floor(v.duration / 60)}:{String(v.duration % 60).padStart(2, '0')}
|
|
</span>
|
|
)}
|
|
</Link>
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => handleRemoveVideo(v.id)}
|
|
className="font-mono text-xs text-od-muted hover:text-od-crit transition-colors shrink-0"
|
|
>
|
|
✕
|
|
</button>
|
|
)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
)}
|
|
|
|
<Link to="/playlists" className="self-start font-mono text-xs text-od-muted hover:text-od-text transition-colors">
|
|
← Playlists
|
|
</Link>
|
|
|
|
</div>
|
|
);
|
|
}
|