fspecii
325046eaf2
Phase 4: i18n all 15 components from PR #19. Sidebar gains collapse/expand toggle. Player gets playback speed selector (0.25x-2.0x) fixing bug B1 (hardcoded Chinese '正常'). SongList adds inline title editing and model version badge. Delete actions now use ConfirmDialog instead of window.confirm. Volume persisted to localStorage. Training nav item deferred to Phase 7.
729 lines
47 KiB
TypeScript
729 lines
47 KiB
TypeScript
import React, { useState, useEffect, useRef } from 'react';
|
|
import { Song, Playlist } from '../types';
|
|
import { usersApi, getAudioUrl, UserProfile as UserProfileType, songsApi } from '../services/api';
|
|
import { useAuth } from '../context/AuthContext';
|
|
import { ArrowLeft, Play, Pause, Heart, Eye, Users, Music as MusicIcon, ChevronRight, Share2, MoreHorizontal, Edit3, X, Camera, Image as ImageIcon, Upload, Loader2 } from 'lucide-react';
|
|
import { useI18n } from '../context/I18nContext';
|
|
|
|
interface UserProfileProps {
|
|
username: string;
|
|
onBack: () => void;
|
|
onPlaySong: (song: Song, list?: Song[]) => void;
|
|
onNavigateToProfile: (username: string) => void;
|
|
onNavigateToPlaylist?: (playlistId: string) => void;
|
|
currentSong?: Song | null;
|
|
isPlaying?: boolean;
|
|
likedSongIds?: Set<string>;
|
|
onToggleLike?: (songId: string) => void;
|
|
}
|
|
|
|
export const UserProfile: React.FC<UserProfileProps> = ({ username, onBack, onPlaySong, onNavigateToProfile, onNavigateToPlaylist, currentSong, isPlaying, likedSongIds = new Set(), onToggleLike }) => {
|
|
const { t, language } = useI18n();
|
|
const { user: currentUser, token } = useAuth();
|
|
const [profileUser, setProfileUser] = useState<UserProfileType | null>(null);
|
|
const [publicSongs, setPublicSongs] = useState<Song[]>([]);
|
|
const [publicPlaylists, setPublicPlaylists] = useState<Playlist[]>([]);
|
|
const [songsTab, setSongsTab] = useState<'recent' | 'top'>('recent');
|
|
const [loading, setLoading] = useState(true);
|
|
|
|
// Edit State
|
|
const [isEditModalOpen, setIsEditModalOpen] = useState(false);
|
|
const [editBio, setEditBio] = useState('');
|
|
const [editAvatarUrl, setEditAvatarUrl] = useState('');
|
|
const [editBannerUrl, setEditBannerUrl] = useState('');
|
|
const [isSaving, setIsSaving] = useState(false);
|
|
const [avatarFile, setAvatarFile] = useState<File | null>(null);
|
|
const [bannerFile, setBannerFile] = useState<File | null>(null);
|
|
const [avatarPreview, setAvatarPreview] = useState<string | null>(null);
|
|
const [bannerPreview, setBannerPreview] = useState<string | null>(null);
|
|
const [uploadingAvatar, setUploadingAvatar] = useState(false);
|
|
const [uploadingBanner, setUploadingBanner] = useState(false);
|
|
const [avatarFailed, setAvatarFailed] = useState(false);
|
|
const avatarInputRef = useRef<HTMLInputElement>(null);
|
|
const bannerInputRef = useRef<HTMLInputElement>(null);
|
|
|
|
useEffect(() => {
|
|
loadUserProfile();
|
|
}, [username]);
|
|
|
|
const loadUserProfile = async () => {
|
|
setLoading(true);
|
|
try {
|
|
const [profileRes, songsRes, playlistsRes] = await Promise.all([
|
|
usersApi.getProfile(username, token),
|
|
usersApi.getPublicSongs(username),
|
|
usersApi.getPublicPlaylists(username)
|
|
]);
|
|
|
|
setProfileUser(profileRes.user);
|
|
setEditBio(profileRes.user.bio || '');
|
|
setEditAvatarUrl(profileRes.user.avatar_url || '');
|
|
setEditBannerUrl(profileRes.user.banner_url || '');
|
|
|
|
const transformedSongs: Song[] = songsRes.songs.map(s => ({
|
|
id: s.id,
|
|
title: s.title,
|
|
lyrics: s.lyrics,
|
|
style: s.style,
|
|
coverUrl: `https://picsum.photos/seed/${s.id}/400/400`,
|
|
duration: s.duration ? `${Math.floor(s.duration / 60)}:${String(Math.floor(s.duration % 60)).padStart(2, '0')}` : '0:00',
|
|
createdAt: new Date(s.created_at),
|
|
tags: s.tags || [],
|
|
audioUrl: getAudioUrl(s.audio_url, s.id),
|
|
isPublic: true,
|
|
likeCount: s.like_count || 0,
|
|
viewCount: s.view_count || 0,
|
|
creator: s.creator,
|
|
}));
|
|
setPublicSongs(transformedSongs);
|
|
setPublicPlaylists(playlistsRes.playlists || []);
|
|
} catch (error) {
|
|
console.error('Failed to load user profile:', error);
|
|
} finally {
|
|
setLoading(false);
|
|
}
|
|
};
|
|
|
|
const handleAvatarChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setAvatarFile(file);
|
|
const reader = new FileReader();
|
|
reader.onload = (ev) => setAvatarPreview(ev.target?.result as string);
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const handleBannerChange = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
const file = e.target.files?.[0];
|
|
if (file) {
|
|
setBannerFile(file);
|
|
const reader = new FileReader();
|
|
reader.onload = (ev) => setBannerPreview(ev.target?.result as string);
|
|
reader.readAsDataURL(file);
|
|
}
|
|
};
|
|
|
|
const handleSaveProfile = async () => {
|
|
if (!token) return;
|
|
setIsSaving(true);
|
|
try {
|
|
// Upload avatar if changed
|
|
if (avatarFile) {
|
|
setUploadingAvatar(true);
|
|
const avatarRes = await usersApi.uploadAvatar(avatarFile, token);
|
|
setEditAvatarUrl(avatarRes.url);
|
|
setUploadingAvatar(false);
|
|
}
|
|
|
|
// Upload banner if changed
|
|
if (bannerFile) {
|
|
setUploadingBanner(true);
|
|
const bannerRes = await usersApi.uploadBanner(bannerFile, token);
|
|
setEditBannerUrl(bannerRes.url);
|
|
setUploadingBanner(false);
|
|
}
|
|
|
|
// Update bio (and any URL-based avatar/banner if not using file upload)
|
|
const updates: Record<string, string> = { bio: editBio };
|
|
if (!avatarFile && editAvatarUrl !== profileUser.avatar_url) {
|
|
updates.avatarUrl = editAvatarUrl;
|
|
}
|
|
if (!bannerFile && editBannerUrl !== profileUser.banner_url) {
|
|
updates.bannerUrl = editBannerUrl;
|
|
}
|
|
|
|
if (Object.keys(updates).length > 0) {
|
|
await usersApi.updateProfile(updates, token);
|
|
}
|
|
|
|
setIsEditModalOpen(false);
|
|
setAvatarFile(null);
|
|
setBannerFile(null);
|
|
setAvatarPreview(null);
|
|
setBannerPreview(null);
|
|
|
|
// Reload to get fresh data
|
|
loadUserProfile();
|
|
} catch (error) {
|
|
console.error('Failed to update profile:', error);
|
|
alert(t('profileUpdateFailed'));
|
|
} finally {
|
|
setIsSaving(false);
|
|
setUploadingAvatar(false);
|
|
setUploadingBanner(false);
|
|
}
|
|
};
|
|
|
|
if (loading) {
|
|
return (
|
|
<div className="flex items-center justify-center h-full bg-zinc-50 dark:bg-black">
|
|
<div className="text-zinc-500 dark:text-zinc-400 gap-2 flex items-center">
|
|
<div className="w-4 h-4 border-2 border-zinc-400 border-t-transparent rounded-full animate-spin"></div>
|
|
{t('loadingProfile')}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
if (!profileUser) {
|
|
return (
|
|
<div className="flex flex-col items-center justify-center h-full gap-4 bg-zinc-50 dark:bg-black">
|
|
<div className="text-zinc-500 dark:text-zinc-400">{t('userNotFound')}</div>
|
|
<button onClick={onBack} className="px-4 py-2 bg-zinc-200 dark:bg-zinc-800 hover:bg-zinc-300 dark:hover:bg-zinc-700 rounded-lg text-zinc-900 dark:text-white">
|
|
{t('goBack')}
|
|
</button>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
const totalLikes = publicSongs.reduce((sum, song) => sum + (song.likeCount || 0), 0);
|
|
const totalPlays = publicSongs.reduce((sum, song) => sum + (song.viewCount || 0), 0);
|
|
const isOwner = currentUser?.id === profileUser.id;
|
|
|
|
// Generate random gradient for banner fallback
|
|
const gradients = [
|
|
'from-purple-600 via-pink-600 to-red-600',
|
|
'from-blue-600 via-purple-600 to-pink-600',
|
|
'from-green-600 via-teal-600 to-blue-600',
|
|
'from-orange-600 via-red-600 to-pink-600',
|
|
'from-indigo-600 via-purple-600 to-pink-600',
|
|
];
|
|
const bannerGradient = gradients[username.length % gradients.length];
|
|
const primaryBadge = profileUser.badges?.[0];
|
|
const badgeRing = primaryBadge?.color === 'yellow'
|
|
? 'ring-yellow-400/80 shadow-yellow-500/30'
|
|
: primaryBadge?.color === 'purple'
|
|
? 'ring-purple-400/80 shadow-purple-500/30'
|
|
: primaryBadge?.color === 'blue'
|
|
? 'ring-blue-400/80 shadow-blue-500/30'
|
|
: primaryBadge?.color === 'teal'
|
|
? 'ring-teal-400/80 shadow-teal-500/30'
|
|
: primaryBadge?.color === 'green'
|
|
? 'ring-green-400/80 shadow-green-500/30'
|
|
: primaryBadge?.color === 'orange'
|
|
? 'ring-orange-400/80 shadow-orange-500/30'
|
|
: primaryBadge?.color === 'pink'
|
|
? 'ring-pink-400/80 shadow-pink-500/30'
|
|
: 'ring-zinc-500/50 shadow-zinc-500/20';
|
|
const paidPulse = profileUser.accountTier && profileUser.accountTier !== 'free'
|
|
? 'group-hover/avatar:animate-[wiggle_0.6s_ease-in-out] group-hover/avatar:rotate-1'
|
|
: '';
|
|
const paidNameStyle = primaryBadge?.color === 'yellow'
|
|
? 'bg-gradient-to-r from-yellow-300 via-amber-300 to-orange-400 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(251,191,36,0.45)]'
|
|
: primaryBadge?.color === 'purple'
|
|
? 'bg-gradient-to-r from-fuchsia-400 via-purple-500 to-indigo-400 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(168,85,247,0.45)]'
|
|
: primaryBadge?.color === 'blue'
|
|
? 'bg-gradient-to-r from-sky-400 via-blue-500 to-indigo-400 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(59,130,246,0.45)]'
|
|
: primaryBadge?.color === 'teal'
|
|
? 'bg-gradient-to-r from-teal-300 via-emerald-400 to-cyan-400 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(45,212,191,0.45)]'
|
|
: primaryBadge?.color === 'orange'
|
|
? 'bg-gradient-to-r from-orange-300 via-amber-400 to-yellow-300 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(251,146,60,0.4)]'
|
|
: primaryBadge?.color === 'pink'
|
|
? 'bg-gradient-to-r from-pink-400 via-rose-500 to-fuchsia-500 text-transparent bg-clip-text drop-shadow-[0_2px_12px_rgba(244,114,182,0.45)]'
|
|
: '';
|
|
|
|
// Banner Style
|
|
const bannerStyle = profileUser.banner_url
|
|
? { backgroundImage: `url(${profileUser.banner_url})`, backgroundSize: 'cover', backgroundPosition: 'center' }
|
|
: {};
|
|
const bannerClass = profileUser.banner_url
|
|
? `h-48 md:h-64 relative overflow-hidden bg-zinc-200 dark:bg-zinc-900`
|
|
: `h-48 md:h-64 bg-gradient-to-r ${bannerGradient} relative overflow-hidden`;
|
|
|
|
const featuredSongs = publicSongs.slice(0, 6);
|
|
const displaySongs = songsTab === 'recent' ? publicSongs : [...publicSongs].sort((a, b) => (b.likeCount || 0) - (a.likeCount || 0));
|
|
|
|
return (
|
|
<div className="w-full h-full flex flex-col bg-zinc-50 dark:bg-black overflow-y-auto pb-24 lg:pb-32 relative">
|
|
{/* Hero Banner */}
|
|
<div className="relative group/banner">
|
|
{/* Background Banner */}
|
|
<div className={bannerClass} style={bannerStyle}>
|
|
{!profileUser.banner_url && (
|
|
<div className="absolute inset-0 bg-[url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48ZGVmcz48cGF0dGVybiBpZD0iZ3JpZCIgd2lkdGg9IjQwIiBoZWlnaHQ9IjQwIiBwYXR0ZXJuVW5pdHM9InVzZXJTcGFjZU9uVXNlIj48cGF0aCBkPSJNIDQwIDAgTCAwIDAgMCA0MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSJ3aGl0ZSIgc3Ryb2tlLW9wYWNpdHk9IjAuMSIgc3Ryb2tlLXdpZHRoPSIxIi8+PC9wYXR0ZXJuPjwvZGVmcz48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSJ1cmwoI2dyaWQpIi8+PC9zdmc+')] opacity-30"></div>
|
|
)}
|
|
<div className="absolute inset-0 bg-gradient-to-t from-zinc-50 dark:from-black via-zinc-50/20 dark:via-black/20 to-transparent"></div>
|
|
</div>
|
|
|
|
{/* Back Button */}
|
|
<button
|
|
onClick={onBack}
|
|
className="absolute top-4 left-4 flex items-center gap-2 text-white/80 hover:text-white bg-black/30 hover:bg-black/50 px-4 py-2 rounded-full backdrop-blur-sm transition-all z-20"
|
|
>
|
|
<ArrowLeft size={20} />
|
|
<span>{t('back')}</span>
|
|
</button>
|
|
|
|
{/* Edit Banner Button (Owner Only) - Visual Cue */}
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => setIsEditModalOpen(true)}
|
|
className="absolute top-4 right-4 bg-black/50 hover:bg-black/70 text-white p-2 rounded-full opacity-0 group-hover/banner:opacity-100 transition-opacity"
|
|
title="Edit Banner" // Accessibility
|
|
>
|
|
<ImageIcon size={20} />
|
|
</button>
|
|
)}
|
|
|
|
{/* Profile Info */}
|
|
<div className="max-w-7xl mx-auto px-4 md:px-8 -mt-16 md:-mt-20 relative z-10 w-full">
|
|
<div className="flex flex-col md:flex-row items-start md:items-end gap-4 md:gap-6">
|
|
{/* Avatar */}
|
|
<div className="group/avatar relative">
|
|
<div className={`w-24 h-24 md:w-40 md:h-40 rounded-full border-4 border-zinc-50 dark:border-black bg-zinc-200 dark:bg-zinc-800 flex items-center justify-center overflow-hidden shadow-2xl ring-4 ${badgeRing} transition-transform ${paidPulse}`}>
|
|
{profileUser.avatar_url && !avatarFailed ? (
|
|
<img
|
|
src={profileUser.avatar_url}
|
|
alt={profileUser.username}
|
|
className="w-full h-full object-cover"
|
|
referrerPolicy="no-referrer"
|
|
onError={() => setAvatarFailed(true)}
|
|
/>
|
|
) : (
|
|
<div className={`w-full h-full bg-gradient-to-br ${bannerGradient} flex items-center justify-center text-4xl md:text-6xl font-bold text-white`}>
|
|
{profileUser.username[0].toUpperCase()}
|
|
</div>
|
|
)}
|
|
</div>
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => setIsEditModalOpen(true)}
|
|
className="absolute bottom-1 right-1 md:bottom-2 md:right-2 p-1.5 md:p-2 bg-zinc-200 dark:bg-zinc-800 rounded-full text-zinc-700 dark:text-white hover:bg-zinc-300 dark:hover:bg-zinc-700 border border-zinc-50 dark:border-black shadow-lg"
|
|
>
|
|
<Edit3 size={14} className="md:w-4 md:h-4" />
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* User Info */}
|
|
<div className="flex-1 pb-2 w-full">
|
|
<div className="flex flex-col md:flex-row md:items-center justify-between gap-4">
|
|
<div>
|
|
<h1 className={`text-2xl md:text-5xl font-bold mb-1 ${paidNameStyle || 'text-zinc-900 dark:text-white'}`}>
|
|
{profileUser.username}
|
|
</h1>
|
|
{profileUser.badges && profileUser.badges.length > 0 && (
|
|
<div className="flex flex-wrap gap-2 mb-3">
|
|
{profileUser.badges.map((badge) => {
|
|
const style =
|
|
badge.color === 'yellow'
|
|
? 'from-yellow-300 via-amber-300 to-orange-400 text-amber-950 shadow-[0_0_20px_rgba(251,191,36,0.45)]'
|
|
: badge.color === 'purple'
|
|
? 'from-fuchsia-400 via-purple-500 to-indigo-500 text-white shadow-[0_0_20px_rgba(168,85,247,0.45)]'
|
|
: badge.color === 'blue'
|
|
? 'from-sky-400 via-blue-500 to-indigo-500 text-white shadow-[0_0_18px_rgba(59,130,246,0.45)]'
|
|
: badge.color === 'teal'
|
|
? 'from-teal-300 via-emerald-400 to-cyan-400 text-emerald-950 shadow-[0_0_18px_rgba(45,212,191,0.45)]'
|
|
: badge.color === 'orange'
|
|
? 'from-orange-300 via-amber-400 to-yellow-300 text-amber-950 shadow-[0_0_16px_rgba(251,146,60,0.4)]'
|
|
: badge.color === 'pink'
|
|
? 'from-pink-400 via-rose-500 to-fuchsia-500 text-white shadow-[0_0_18px_rgba(244,114,182,0.45)]'
|
|
: badge.color === 'green'
|
|
? 'from-emerald-300 via-green-400 to-lime-300 text-emerald-950 shadow-[0_0_16px_rgba(34,197,94,0.4)]'
|
|
: 'from-zinc-200 via-zinc-300 to-zinc-200 text-zinc-700 dark:from-zinc-700 dark:via-zinc-600 dark:to-zinc-700 dark:text-zinc-100';
|
|
|
|
const icon =
|
|
badge.id === 'supporter'
|
|
? '🏅'
|
|
: badge.id === 'patron'
|
|
? '🏆'
|
|
: badge.id === 'legendary'
|
|
? '👑'
|
|
: badge.id === 'diamond'
|
|
? '💎'
|
|
: badge.id === 'crown'
|
|
? '👑'
|
|
: badge.id === 'champion'
|
|
? '🥇'
|
|
: badge.id === 'music'
|
|
? '🎵'
|
|
: badge.id === 'coffee'
|
|
? '☕'
|
|
: '⭐';
|
|
|
|
return (
|
|
<span
|
|
key={badge.id}
|
|
title={badge.description}
|
|
className={`inline-flex items-center gap-2 px-3.5 py-1.5 rounded-full text-xs font-semibold border border-white/40 dark:border-white/10 bg-gradient-to-r ${style} transition-all duration-200 hover:-translate-y-0.5 hover:scale-[1.03] hover:brightness-110`}
|
|
>
|
|
<span className="text-sm drop-shadow">{icon}</span>
|
|
{badge.label}
|
|
</span>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
|
|
{profileUser.supporter_since && profileUser.accountTier && profileUser.accountTier !== 'free' && (
|
|
<p className="text-xs text-zinc-500 dark:text-zinc-400 mb-3">
|
|
{t('supportingSince')} {new Date(profileUser.supporter_since).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}
|
|
</p>
|
|
)}
|
|
|
|
{/* Bio */}
|
|
{profileUser.bio && (
|
|
<p className="text-zinc-700 dark:text-zinc-200 max-w-2xl mb-4 text-sm md:text-base leading-relaxed whitespace-pre-line">
|
|
{profileUser.bio}
|
|
</p>
|
|
)}
|
|
|
|
<p className="text-zinc-500 text-xs md:text-sm mb-4">
|
|
{t('joined')} {new Date(profileUser.created_at).toLocaleDateString(language === 'zh' ? 'zh-CN' : 'en-US', { month: 'long', year: 'numeric' })}
|
|
</p>
|
|
</div>
|
|
|
|
{/* Edit Profile Button (Mobile/Desktop) */}
|
|
{isOwner && (
|
|
<button
|
|
onClick={() => setIsEditModalOpen(true)}
|
|
className="px-4 md:px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black hover:bg-zinc-800 dark:hover:bg-zinc-200 rounded-full font-bold transition-colors text-sm flex items-center gap-2"
|
|
>
|
|
<Edit3 size={16} />
|
|
{t('editProfile')}
|
|
</button>
|
|
)}
|
|
</div>
|
|
|
|
{/* Stats */}
|
|
<div className="flex items-center gap-4 md:gap-6 text-sm pt-2 border-t border-zinc-200 dark:border-white/10 mt-2 flex-wrap">
|
|
<div className="flex items-center gap-1.5 md:gap-2">
|
|
<MusicIcon size={16} className="text-zinc-500 dark:text-zinc-400" />
|
|
<span className="font-semibold text-zinc-900 dark:text-white">{publicSongs.length}</span>
|
|
<span className="text-zinc-500 dark:text-zinc-400">{t('songs')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 md:gap-2">
|
|
<Heart size={16} className="text-zinc-500 dark:text-zinc-400" />
|
|
<span className="font-semibold text-zinc-900 dark:text-white">{totalLikes}</span>
|
|
<span className="text-zinc-500 dark:text-zinc-400">{t('likes')}</span>
|
|
</div>
|
|
<div className="flex items-center gap-1.5 md:gap-2">
|
|
<Eye size={16} className="text-zinc-500 dark:text-zinc-400" />
|
|
<span className="font-semibold text-zinc-900 dark:text-white">{totalPlays}</span>
|
|
<span className="text-zinc-500 dark:text-zinc-400">{t('plays')}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Content */}
|
|
<div className="max-w-7xl mx-auto w-full px-4 md:px-8 py-6 md:py-8 space-y-8 md:space-y-12">
|
|
{/* Featured Songs */}
|
|
{featuredSongs.length > 0 && (
|
|
<section>
|
|
<h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white mb-4 md:mb-6">{t('featuredSongs')}</h2>
|
|
<div className="flex gap-3 md:gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent -mx-4 px-4 md:mx-0 md:px-0">
|
|
{featuredSongs.map((song) => {
|
|
const isCurrentSong = currentSong?.id === song.id;
|
|
const isCurrentlyPlaying = isCurrentSong && isPlaying;
|
|
const isLiked = likedSongIds.has(song.id);
|
|
return (
|
|
<div
|
|
key={song.id}
|
|
className="group relative flex-shrink-0 w-36 md:w-48"
|
|
>
|
|
<div
|
|
onClick={() => onPlaySong(song, featuredSongs)}
|
|
className="aspect-square rounded-lg overflow-hidden mb-2 md:mb-3 relative bg-zinc-200 dark:bg-zinc-800 cursor-pointer"
|
|
>
|
|
<img src={song.coverUrl} alt={song.title} className={`w-full h-full object-cover transition-transform duration-500 ${isCurrentlyPlaying ? 'scale-105' : 'group-hover:scale-105'}`} />
|
|
<div className={`absolute inset-0 bg-black/40 transition-opacity flex items-center justify-center ${isCurrentSong ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
|
|
<div className="w-12 h-12 md:w-14 md:h-14 rounded-full bg-white flex items-center justify-center shadow-lg">
|
|
{isCurrentlyPlaying ? (
|
|
<Pause size={20} className="text-black fill-black md:w-6 md:h-6" />
|
|
) : (
|
|
<Play size={20} className="text-black fill-black ml-1 md:w-6 md:h-6" />
|
|
)}
|
|
</div>
|
|
</div>
|
|
{isCurrentlyPlaying && (
|
|
<div className="absolute bottom-2 left-2 flex items-center gap-1">
|
|
<span className="w-1 h-3 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '0ms' }} />
|
|
<span className="w-1 h-4 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
|
|
<span className="w-1 h-2 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
|
|
<span className="w-1 h-5 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '450ms' }} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex items-start justify-between gap-2">
|
|
<div className="flex-1 min-w-0">
|
|
<h3 className={`font-semibold truncate mb-1 text-sm md:text-base ${isCurrentSong ? 'text-pink-500' : 'text-zinc-900 dark:text-white'}`}>{song.title}</h3>
|
|
<p className="text-xs md:text-sm text-zinc-500 dark:text-zinc-400 truncate mb-2">{song.style}</p>
|
|
</div>
|
|
{onToggleLike && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onToggleLike(song.id); }}
|
|
className={`p-1.5 rounded-full transition-colors ${isLiked ? 'text-pink-500' : 'text-zinc-400 hover:text-pink-500'}`}
|
|
>
|
|
<Heart size={16} className={isLiked ? 'fill-current' : ''} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
<div className="flex items-center gap-3 text-xs text-zinc-500">
|
|
<span className="flex items-center gap-1">
|
|
<Heart size={12} className={isLiked ? 'fill-pink-500 text-pink-500' : ''} /> {song.likeCount || 0}
|
|
</span>
|
|
<span className="flex items-center gap-1">
|
|
<Eye size={12} /> {song.viewCount || 0}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
</section>
|
|
)}
|
|
|
|
{/* Songs Section */}
|
|
<section>
|
|
<div className="flex items-center justify-between mb-4 md:mb-6">
|
|
<h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">{t('songs')}</h2>
|
|
<div className="flex items-center gap-4">
|
|
<div className="flex bg-zinc-200 dark:bg-zinc-900 rounded-full p-1">
|
|
<button
|
|
onClick={() => setSongsTab('recent')}
|
|
className={`px-3 md:px-4 py-1.5 md:py-2 rounded-full text-xs md:text-sm font-medium transition-colors ${songsTab === 'recent' ? 'bg-white dark:bg-white text-zinc-900 dark:text-black shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
{t('recent')}
|
|
</button>
|
|
<button
|
|
onClick={() => setSongsTab('top')}
|
|
className={`px-3 md:px-4 py-1.5 md:py-2 rounded-full text-xs md:text-sm font-medium transition-colors ${songsTab === 'top' ? 'bg-white dark:bg-white text-zinc-900 dark:text-black shadow-sm' : 'text-zinc-600 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white'
|
|
}`}
|
|
>
|
|
{t('top')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{displaySongs.length === 0 ? (
|
|
<div className="flex flex-col items-center justify-center py-16 text-zinc-500">
|
|
<MusicIcon size={64} className="mb-4 opacity-50" />
|
|
<p>{t('noPublicSongsYet')}</p>
|
|
</div>
|
|
) : (
|
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2 md:gap-4">
|
|
{displaySongs.map((song) => {
|
|
const isCurrentSong = currentSong?.id === song.id;
|
|
const isCurrentlyPlaying = isCurrentSong && isPlaying;
|
|
const isLiked = likedSongIds.has(song.id);
|
|
return (
|
|
<div
|
|
key={song.id}
|
|
className={`group flex items-center gap-3 md:gap-4 p-2 md:p-3 rounded-lg cursor-pointer transition-colors ${isCurrentSong ? 'bg-pink-50 dark:bg-pink-500/10' : 'hover:bg-zinc-100 dark:hover:bg-zinc-900'}`}
|
|
>
|
|
<div
|
|
onClick={() => onPlaySong(song, displaySongs)}
|
|
className="relative w-14 h-14 md:w-16 md:h-16 flex-shrink-0 rounded-md overflow-hidden bg-zinc-200 dark:bg-zinc-800"
|
|
>
|
|
<img src={song.coverUrl} alt={song.title} className="w-full h-full object-cover" />
|
|
<div className={`absolute inset-0 bg-black/40 transition-opacity flex items-center justify-center ${isCurrentSong ? 'opacity-100' : 'opacity-0 group-hover:opacity-100'}`}>
|
|
{isCurrentlyPlaying ? (
|
|
<Pause size={18} className="text-white fill-white md:w-5 md:h-5" />
|
|
) : (
|
|
<Play size={18} className="text-white fill-white md:w-5 md:h-5" />
|
|
)}
|
|
</div>
|
|
{isCurrentlyPlaying && (
|
|
<div className="absolute bottom-1 left-1 flex items-center gap-0.5">
|
|
<span className="w-0.5 h-2 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '0ms' }} />
|
|
<span className="w-0.5 h-3 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '150ms' }} />
|
|
<span className="w-0.5 h-1.5 bg-pink-500 rounded-full animate-pulse" style={{ animationDelay: '300ms' }} />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 min-w-0" onClick={() => onPlaySong(song, displaySongs)}>
|
|
<h3 className={`font-semibold truncate text-sm md:text-base ${isCurrentSong ? 'text-pink-500' : 'text-zinc-900 dark:text-white'}`}>{song.title}</h3>
|
|
<p className="text-xs md:text-sm text-zinc-500 dark:text-zinc-400 truncate">{song.style}</p>
|
|
<div className="flex items-center gap-3 text-xs text-zinc-500 mt-1">
|
|
<span className="flex items-center gap-1"><Heart size={10} className={isLiked ? 'fill-pink-500 text-pink-500' : ''} /> {song.likeCount || 0}</span>
|
|
<span className="flex items-center gap-1"><Play size={10} /> {song.viewCount || 0}</span>
|
|
<span>{song.duration}</span>
|
|
</div>
|
|
</div>
|
|
{onToggleLike && (
|
|
<button
|
|
onClick={(e) => { e.stopPropagation(); onToggleLike(song.id); }}
|
|
className={`p-2 rounded-full transition-colors flex-shrink-0 ${isLiked ? 'text-pink-500' : 'text-zinc-400 hover:text-pink-500'}`}
|
|
>
|
|
<Heart size={18} className={isLiked ? 'fill-current' : ''} />
|
|
</button>
|
|
)}
|
|
</div>
|
|
);
|
|
})}
|
|
</div>
|
|
)}
|
|
</section>
|
|
|
|
{/* Playlists Section */}
|
|
{publicPlaylists.length > 0 && (
|
|
<section>
|
|
<div className="flex items-center justify-between mb-4 md:mb-6">
|
|
<h2 className="text-xl md:text-2xl font-bold text-zinc-900 dark:text-white">{t('playlists')}</h2>
|
|
<button className="flex items-center gap-2 text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors text-sm">
|
|
{t('seeMore')} <ChevronRight size={18} />
|
|
</button>
|
|
</div>
|
|
<div className="flex gap-3 md:gap-4 overflow-x-auto pb-4 scrollbar-thin scrollbar-thumb-zinc-300 dark:scrollbar-thumb-zinc-700 scrollbar-track-transparent -mx-4 px-4 md:mx-0 md:px-0">
|
|
{publicPlaylists.map((playlist: any) => (
|
|
<div
|
|
key={playlist.id}
|
|
onClick={() => onNavigateToPlaylist?.(playlist.id)}
|
|
className="group relative flex-shrink-0 w-36 md:w-48 cursor-pointer"
|
|
>
|
|
<div className="aspect-square rounded-lg bg-gradient-to-br from-indigo-600 to-purple-700 mb-2 md:mb-3 flex items-center justify-center relative overflow-hidden">
|
|
<MusicIcon size={48} className="text-white/30 md:w-16 md:h-16" />
|
|
<div className="absolute inset-0 bg-black/40 opacity-0 group-hover:opacity-100 transition-opacity flex items-center justify-center">
|
|
<div className="w-12 h-12 md:w-14 md:h-14 rounded-full bg-white flex items-center justify-center">
|
|
<Play size={20} className="text-black fill-black ml-1 md:w-6 md:h-6" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<h3 className="font-semibold text-zinc-900 dark:text-white truncate mb-1 text-sm md:text-base">{playlist.name}</h3>
|
|
<p className="text-xs md:text-sm text-zinc-500 dark:text-zinc-400">{playlist.song_count} {t('songs')}</p>
|
|
</div>
|
|
))}
|
|
</div>
|
|
</section>
|
|
)}
|
|
</div>
|
|
|
|
{/* Edit Profile Modal */}
|
|
{isEditModalOpen && (
|
|
<div className="fixed inset-0 z-[60] flex items-center justify-center bg-black/50 dark:bg-black/80 backdrop-blur-sm p-4">
|
|
<div className="w-full max-w-lg bg-white dark:bg-zinc-900 border border-zinc-200 dark:border-zinc-800 rounded-2xl shadow-2xl overflow-hidden animate-in fade-in zoom-in-95 duration-200 max-h-[90vh] overflow-y-auto">
|
|
<div className="px-4 md:px-6 py-4 border-b border-zinc-200 dark:border-zinc-800 flex items-center justify-between sticky top-0 bg-white dark:bg-zinc-900 z-10">
|
|
<h2 className="text-lg md:text-xl font-bold text-zinc-900 dark:text-white">{t('editProfile')}</h2>
|
|
<button onClick={() => setIsEditModalOpen(false)} className="text-zinc-500 dark:text-zinc-400 hover:text-zinc-900 dark:hover:text-white transition-colors">
|
|
<X size={20} />
|
|
</button>
|
|
</div>
|
|
|
|
<div className="p-4 md:p-6 space-y-6">
|
|
{/* Avatar Upload */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('avatarImage')}</label>
|
|
<div className="flex gap-4 items-center">
|
|
<div className="w-20 h-20 rounded-full bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden flex-shrink-0 relative">
|
|
{(avatarPreview || editAvatarUrl) ? (
|
|
<img
|
|
src={avatarPreview || editAvatarUrl}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => (e.currentTarget.style.display = 'none')}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex items-center justify-center text-zinc-400 dark:text-zinc-500">
|
|
<Camera size={24} />
|
|
</div>
|
|
)}
|
|
{uploadingAvatar && (
|
|
<div className="absolute inset-0 bg-black/60 flex items-center justify-center">
|
|
<Loader2 size={20} className="animate-spin text-white" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="flex-1 space-y-2">
|
|
<input
|
|
ref={avatarInputRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
|
onChange={handleAvatarChange}
|
|
className="hidden"
|
|
/>
|
|
<button
|
|
type="button"
|
|
onClick={() => avatarInputRef.current?.click()}
|
|
className="flex items-center gap-2 px-4 py-2 bg-zinc-100 dark:bg-zinc-800 hover:bg-zinc-200 dark:hover:bg-zinc-700 text-zinc-900 dark:text-white rounded-lg text-sm font-medium transition-colors"
|
|
>
|
|
<Upload size={16} />
|
|
{t('uploadAvatar')}
|
|
</button>
|
|
<p className="text-xs text-zinc-500">{t('avatarFormats')}</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
{/* Banner Upload */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bannerImage')}</label>
|
|
<div
|
|
onClick={() => bannerInputRef.current?.click()}
|
|
className="relative w-full h-32 rounded-lg bg-zinc-100 dark:bg-zinc-800 border-2 border-zinc-300 dark:border-zinc-700 border-dashed overflow-hidden cursor-pointer hover:border-zinc-400 dark:hover:border-zinc-600 transition-colors"
|
|
>
|
|
{(bannerPreview || editBannerUrl) ? (
|
|
<img
|
|
src={bannerPreview || editBannerUrl}
|
|
className="w-full h-full object-cover"
|
|
onError={(e) => (e.currentTarget.style.display = 'none')}
|
|
/>
|
|
) : (
|
|
<div className="w-full h-full flex flex-col items-center justify-center text-zinc-400 dark:text-zinc-500 gap-2">
|
|
<ImageIcon size={32} />
|
|
<span className="text-sm">{t('clickToUploadBanner')}</span>
|
|
</div>
|
|
)}
|
|
{uploadingBanner && (
|
|
<div className="absolute inset-0 bg-black/60 flex items-center justify-center">
|
|
<Loader2 size={24} className="animate-spin text-white" />
|
|
</div>
|
|
)}
|
|
</div>
|
|
<input
|
|
ref={bannerInputRef}
|
|
type="file"
|
|
accept="image/jpeg,image/png,image/webp,image/gif"
|
|
onChange={handleBannerChange}
|
|
className="hidden"
|
|
/>
|
|
<p className="text-xs text-zinc-500">{t('bannerFormats')}</p>
|
|
</div>
|
|
|
|
{/* Bio Input */}
|
|
<div className="space-y-2">
|
|
<label className="text-sm font-medium text-zinc-700 dark:text-zinc-300">{t('bio')}</label>
|
|
<textarea
|
|
value={editBio}
|
|
onChange={(e) => setEditBio(e.target.value)}
|
|
placeholder={t('bioPlaceholder')}
|
|
rows={4}
|
|
className="w-full bg-zinc-50 dark:bg-black border border-zinc-300 dark:border-zinc-800 rounded-lg px-3 py-2 text-zinc-900 dark:text-white placeholder-zinc-400 dark:placeholder-zinc-600 focus:outline-none focus:border-pink-500 dark:focus:border-indigo-500 transition-colors resize-none"
|
|
/>
|
|
</div>
|
|
</div>
|
|
|
|
<div className="px-4 md:px-6 py-4 bg-zinc-50 dark:bg-black/20 border-t border-zinc-200 dark:border-zinc-800 flex justify-end gap-3 sticky bottom-0">
|
|
<button
|
|
onClick={() => {
|
|
setIsEditModalOpen(false);
|
|
setAvatarFile(null);
|
|
setBannerFile(null);
|
|
setAvatarPreview(null);
|
|
setBannerPreview(null);
|
|
}}
|
|
className="px-4 py-2 text-sm font-medium text-zinc-600 dark:text-zinc-300 hover:text-zinc-900 dark:hover:text-white transition-colors"
|
|
disabled={isSaving}
|
|
>
|
|
{t('cancel')}
|
|
</button>
|
|
<button
|
|
onClick={handleSaveProfile}
|
|
disabled={isSaving || uploadingAvatar || uploadingBanner}
|
|
className="px-6 py-2 bg-zinc-900 dark:bg-white text-white dark:text-black hover:bg-zinc-800 dark:hover:bg-zinc-200 rounded-full text-sm font-bold transition-colors disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2"
|
|
>
|
|
{isSaving && <Loader2 size={16} className="animate-spin" />}
|
|
{uploadingAvatar ? t('uploadingAvatar') : uploadingBanner ? t('uploadingBanner') : isSaving ? t('saving') : t('saveChanges')}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
};
|