281 lines
9.9 KiB
TypeScript
281 lines
9.9 KiB
TypeScript
|
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|||
|
|
'use client';
|
|||
|
|
|
|||
|
|
import { useEffect, useState } from 'react';
|
|||
|
|
|
|||
|
|
interface Song {
|
|||
|
|
id: string;
|
|||
|
|
name: string;
|
|||
|
|
artist: string;
|
|||
|
|
album?: string;
|
|||
|
|
pic?: string;
|
|||
|
|
platform: 'netease' | 'qq' | 'kuwo';
|
|||
|
|
duration?: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface MusicPlaylist {
|
|||
|
|
id: string;
|
|||
|
|
username: string;
|
|||
|
|
name: string;
|
|||
|
|
description?: string;
|
|||
|
|
cover?: string;
|
|||
|
|
created_at: number;
|
|||
|
|
updated_at: number;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
interface AddToPlaylistModalProps {
|
|||
|
|
song: Song | null;
|
|||
|
|
isOpen: boolean;
|
|||
|
|
onClose: () => void;
|
|||
|
|
onSuccess?: () => void;
|
|||
|
|
onError?: (message: string) => void;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
export default function AddToPlaylistModal({
|
|||
|
|
song,
|
|||
|
|
isOpen,
|
|||
|
|
onClose,
|
|||
|
|
onSuccess,
|
|||
|
|
onError,
|
|||
|
|
}: AddToPlaylistModalProps) {
|
|||
|
|
const [playlists, setPlaylists] = useState<MusicPlaylist[]>([]);
|
|||
|
|
const [loading, setLoading] = useState(false);
|
|||
|
|
const [showCreateForm, setShowCreateForm] = useState(false);
|
|||
|
|
const [newPlaylistName, setNewPlaylistName] = useState('');
|
|||
|
|
const [newPlaylistDescription, setNewPlaylistDescription] = useState('');
|
|||
|
|
const [creating, setCreating] = useState(false);
|
|||
|
|
const [addingToPlaylistId, setAddingToPlaylistId] = useState<string | null>(null); // 正在添加的歌单ID
|
|||
|
|
|
|||
|
|
// 加载用户的歌单列表
|
|||
|
|
useEffect(() => {
|
|||
|
|
if (isOpen) {
|
|||
|
|
loadPlaylists();
|
|||
|
|
}
|
|||
|
|
}, [isOpen]);
|
|||
|
|
|
|||
|
|
const loadPlaylists = async () => {
|
|||
|
|
try {
|
|||
|
|
setLoading(true);
|
|||
|
|
const response = await fetch('/api/music/playlists');
|
|||
|
|
if (response.ok) {
|
|||
|
|
const data = await response.json();
|
|||
|
|
setPlaylists(data.playlists || []);
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('加载歌单失败:', error);
|
|||
|
|
} finally {
|
|||
|
|
setLoading(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleCreatePlaylist = async () => {
|
|||
|
|
if (!newPlaylistName.trim()) {
|
|||
|
|
onError?.('请输入歌单名称');
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setCreating(true);
|
|||
|
|
const response = await fetch('/api/music/playlists', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
name: newPlaylistName.trim(),
|
|||
|
|
description: newPlaylistDescription.trim(),
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
setNewPlaylistName('');
|
|||
|
|
setNewPlaylistDescription('');
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
await loadPlaylists();
|
|||
|
|
} else {
|
|||
|
|
const data = await response.json();
|
|||
|
|
onError?.(data.error || '创建歌单失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('创建歌单失败:', error);
|
|||
|
|
onError?.('创建歌单失败');
|
|||
|
|
} finally {
|
|||
|
|
setCreating(false);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
const handleAddToPlaylist = async (playlistId: string) => {
|
|||
|
|
if (!song) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
setAddingToPlaylistId(playlistId);
|
|||
|
|
const response = await fetch('/api/music/playlists/songs', {
|
|||
|
|
method: 'POST',
|
|||
|
|
headers: { 'Content-Type': 'application/json' },
|
|||
|
|
body: JSON.stringify({
|
|||
|
|
playlistId,
|
|||
|
|
song: {
|
|||
|
|
platform: song.platform,
|
|||
|
|
id: song.id,
|
|||
|
|
name: song.name,
|
|||
|
|
artist: song.artist,
|
|||
|
|
album: song.album,
|
|||
|
|
pic: song.pic,
|
|||
|
|
duration: song.duration || 0,
|
|||
|
|
},
|
|||
|
|
}),
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (response.ok) {
|
|||
|
|
onSuccess?.();
|
|||
|
|
onClose();
|
|||
|
|
} else {
|
|||
|
|
const data = await response.json();
|
|||
|
|
onError?.(data.error || '添加失败');
|
|||
|
|
}
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('添加到歌单失败:', error);
|
|||
|
|
onError?.('添加到歌单失败');
|
|||
|
|
} finally {
|
|||
|
|
setAddingToPlaylistId(null);
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
if (!isOpen) return null;
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
<div
|
|||
|
|
className="fixed inset-0 bg-black/50 backdrop-blur-sm z-[110] flex items-center justify-center p-4"
|
|||
|
|
onClick={onClose}
|
|||
|
|
>
|
|||
|
|
<div
|
|||
|
|
className="bg-zinc-900 rounded-xl max-w-md w-full max-h-[80vh] overflow-hidden border border-white/10"
|
|||
|
|
onClick={(e) => e.stopPropagation()}
|
|||
|
|
>
|
|||
|
|
{/* Header */}
|
|||
|
|
<div className="p-4 border-b border-white/10">
|
|||
|
|
<div className="flex items-center justify-between">
|
|||
|
|
<h3 className="text-lg font-bold text-white">添加到歌单</h3>
|
|||
|
|
<button
|
|||
|
|
onClick={onClose}
|
|||
|
|
className="text-zinc-400 hover:text-white transition-colors"
|
|||
|
|
>
|
|||
|
|
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
|||
|
|
</svg>
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
{song && (
|
|||
|
|
<div className="mt-2 text-sm text-zinc-400">
|
|||
|
|
{song.name} - {song.artist}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
{/* Content */}
|
|||
|
|
<div className="p-4 overflow-y-auto max-h-[calc(80vh-120px)]">
|
|||
|
|
{/* Create New Playlist Button */}
|
|||
|
|
{!showCreateForm && (
|
|||
|
|
<button
|
|||
|
|
onClick={() => setShowCreateForm(true)}
|
|||
|
|
className="w-full mb-4 px-4 py-3 bg-green-600 hover:bg-green-700 text-white rounded-lg transition-colors flex items-center justify-center gap-2"
|
|||
|
|
>
|
|||
|
|
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
|||
|
|
</svg>
|
|||
|
|
创建新歌单
|
|||
|
|
</button>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Create Form */}
|
|||
|
|
{showCreateForm && (
|
|||
|
|
<div className="mb-4 p-4 bg-white/5 rounded-lg border border-white/10">
|
|||
|
|
<input
|
|||
|
|
type="text"
|
|||
|
|
placeholder="歌单名称"
|
|||
|
|
value={newPlaylistName}
|
|||
|
|
onChange={(e) => setNewPlaylistName(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 bg-zinc-800 text-white rounded-lg border border-white/10 focus:border-green-500 focus:outline-none mb-2"
|
|||
|
|
/>
|
|||
|
|
<textarea
|
|||
|
|
placeholder="歌单描述（可选）"
|
|||
|
|
value={newPlaylistDescription}
|
|||
|
|
onChange={(e) => setNewPlaylistDescription(e.target.value)}
|
|||
|
|
className="w-full px-3 py-2 bg-zinc-800 text-white rounded-lg border border-white/10 focus:border-green-500 focus:outline-none resize-none"
|
|||
|
|
rows={2}
|
|||
|
|
/>
|
|||
|
|
<div className="flex gap-2 mt-2">
|
|||
|
|
<button
|
|||
|
|
onClick={handleCreatePlaylist}
|
|||
|
|
disabled={creating}
|
|||
|
|
className="flex-1 px-4 py-2 bg-green-600 hover:bg-green-700 disabled:bg-zinc-700 text-white rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
{creating ? '创建中...' : '确定'}
|
|||
|
|
</button>
|
|||
|
|
<button
|
|||
|
|
onClick={() => {
|
|||
|
|
setShowCreateForm(false);
|
|||
|
|
setNewPlaylistName('');
|
|||
|
|
setNewPlaylistDescription('');
|
|||
|
|
}}
|
|||
|
|
className="flex-1 px-4 py-2 bg-zinc-700 hover:bg-zinc-600 text-white rounded-lg transition-colors"
|
|||
|
|
>
|
|||
|
|
取消
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
|
|||
|
|
{/* Playlists List */}
|
|||
|
|
{loading ? (
|
|||
|
|
<div className="text-center py-8 text-zinc-400">加载中...</div>
|
|||
|
|
) : playlists.length === 0 ? (
|
|||
|
|
<div className="text-center py-8 text-zinc-400">
|
|||
|
|
还没有歌单，创建一个吧
|
|||
|
|
</div>
|
|||
|
|
) : (
|
|||
|
|
<div className="space-y-2">
|
|||
|
|
{playlists.map((playlist) => (
|
|||
|
|
<button
|
|||
|
|
key={playlist.id}
|
|||
|
|
onClick={() => handleAddToPlaylist(playlist.id)}
|
|||
|
|
disabled={addingToPlaylistId !== null}
|
|||
|
|
className="w-full px-4 py-3 bg-white/5 hover:bg-white/10 disabled:bg-white/5 disabled:cursor-not-allowed rounded-lg transition-colors text-left flex items-center gap-3"
|
|||
|
|
>
|
|||
|
|
{playlist.cover ? (
|
|||
|
|
<img
|
|||
|
|
src={playlist.cover}
|
|||
|
|
alt={playlist.name}
|
|||
|
|
className="w-12 h-12 rounded object-cover"
|
|||
|
|
/>
|
|||
|
|
) : (
|
|||
|
|
<div className="w-12 h-12 rounded bg-zinc-800 flex items-center justify-center">
|
|||
|
|
<svg className="w-6 h-6 text-zinc-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19V6l12-3v13M9 19c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zm12-3c0 1.105-1.343 2-3 2s-3-.895-3-2 1.343-2 3-2 3 .895 3 2zM9 10l12-3" />
|
|||
|
|
</svg>
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
<div className="flex-1 min-w-0">
|
|||
|
|
<div className="text-white font-medium truncate">{playlist.name}</div>
|
|||
|
|
{playlist.description && (
|
|||
|
|
<div className="text-xs text-zinc-500 truncate">{playlist.description}</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
{addingToPlaylistId === playlist.id ? (
|
|||
|
|
<svg className="w-5 h-5 text-green-500 animate-spin" fill="none" viewBox="0 0 24 24">
|
|||
|
|
<circle className="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" strokeWidth="4"></circle>
|
|||
|
|
<path className="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
|
|||
|
|
</svg>
|
|||
|
|
) : (
|
|||
|
|
<svg className="w-5 h-5 text-zinc-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|||
|
|
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
|||
|
|
</svg>
|
|||
|
|
)}
|
|||
|
|
</button>
|
|||
|
|
))}
|
|||
|
|
</div>
|
|||
|
|
)}
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
);
|
|||
|
|
}
|