/* ============================================ TRACK DETAIL — waveform, rating, comments ============================================ */ function TrackDetailScreen({ track, onPlay, onShare, currentTrack, isPlaying, likedTrackIds, onToggleLike }) { const toast = useToast(); const [myRating, setMyRating] = React.useState(() => { try { return JSON.parse(localStorage.getItem('ams-ratings') || '{}')[track.id] || 0; } catch { return 0; } }); const [liked, setLiked] = React.useState(() => likedTrackIds?.has(track.id) || false); const [commentText, setCommentText] = React.useState(''); const [commentTime, setCommentTime] = React.useState(null); // sec into track const [comments, setComments] = React.useState(() => (window.COMMENTS || COMMENTS).filter(c => c.trackId === track.id && !c.flagged)); const [progress, setProgress] = React.useState(0.35); const [showPlaylists, setShowPlaylists] = React.useState(false); const [playlists, setPlaylists] = React.useState(() => (window.PLAYLISTS || []).slice()); // Sync liked when likedTrackIds prop changes (navigating between tracks) React.useEffect(() => { setLiked(likedTrackIds?.has(track.id) || false); }, [likedTrackIds, track.id]); React.useEffect(() => { const h = () => setPlaylists((window.PLAYLISTS || []).slice()); window.addEventListener('dataLoaded', h); return () => window.removeEventListener('dataLoaded', h); }, []); const addToPlaylist = async (playlist) => { setShowPlaylists(false); if (playlist.tracks && playlist.tracks.includes(track.id)) { toast(`Already in "${playlist.name}"`, 'info'); return; } const updatedTracks = [...(playlist.tracks || []), track.id]; window.PLAYLISTS = (window.PLAYLISTS || []).map(p => p.id === playlist.id ? { ...p, tracks: updatedTracks } : p ); window.dispatchEvent(new CustomEvent('dataLoaded')); toast(`Added to "${playlist.name}"`, 'success'); try { await window.dbHelpers?.updatePlaylist(playlist.id, { tracks: updatedTracks }); } catch(e) { console.error(e); } }; const handleRating = async (v) => { setMyRating(v); toast(`You rated this ${v} ★`, 'success'); // Persist to localStorage try { const saved = JSON.parse(localStorage.getItem('ams-ratings') || '{}'); saved[track.id] = v; localStorage.setItem('ams-ratings', JSON.stringify(saved)); } catch {} // Update track's aggregate rating (best-effort) try { const tr = (window.TRACKS || []).find(t => t.id === track.id); if (tr) { const prevRatings = tr.ratings || 1; const newRatings = prevRatings + 1; const newRating = Math.round(((tr.rating || 0) * prevRatings + v) / newRatings * 10) / 10; window.TRACKS = (window.TRACKS || []).map(t => t.id === track.id ? { ...t, rating: newRating, ratings: newRatings } : t ); window.dispatchEvent(new CustomEvent('dataLoaded')); await window.dbHelpers?.updateTrack(track.id, { rating: newRating, ratings: newRatings }); } } catch(e) { /* ignore */ } }; const reportComment = async (commentId) => { const match = (window.COMMENTS || []).find(c => c.id === commentId); setComments(cs => cs.filter(c => c.id !== commentId)); window.COMMENTS = (window.COMMENTS || []).map(c => c.id === commentId ? { ...c, flagged: true } : c); window.dispatchEvent(new CustomEvent('dataLoaded')); toast('Comment reported', 'info'); if (match?.docId) { try { await window.dbHelpers?.updateComment?.(match.docId, { flagged: true }); } catch(e) { console.error(e); } } }; const markers = comments.map(c => ({ id: c.id, t: c.t, name: c.user, text: c.text })); const addComment = async () => { if (!commentText.trim()) return; const t = commentTime !== null ? commentTime : progress; const timestamp = new Date().toISOString(); const newC = { id: 'c' + Date.now(), trackId: track.id, user: 'You', hue: 200, text: commentText, t, time: formatTime(t * track.durationSec), when: 'just now', likes: 0, flagged: false, timestamp, }; setComments([newC, ...comments]); window.COMMENTS = [newC, ...(window.COMMENTS || [])]; window.dispatchEvent(new CustomEvent('dataLoaded')); setCommentText(''); setCommentTime(null); toast('Comment posted', 'success'); try { await window.dbHelpers?.addComment(newC); } catch(e) { console.error(e); } }; return (
{/* TRACK HEADER */}
{track.releasedDays < 7 ? 'NEW · ' : ''}TRACK
{track.tag}

{track.title}

{track.artist}
{track.author}
{(track.plays / 1000).toFixed(1)}k plays {(track.likes / 1000).toFixed(1)}k likes {track.comments} comments {track.duration}
{showPlaylists && (
setShowPlaylists(false)} />
{playlists.length === 0 ?
No playlists yet — create one first
: playlists.map(p => ( )) }
)}
{/* WAVEFORM with comment markers */}
Waveform · click anywhere to seek
Pins are comments posted at that moment. Hover to preview.
{formatTime(progress * track.durationSec)} / {track.duration}
{/* RATING + COMMENT COMPOSER */}
{/* Rating panel */}
Community rating
{track.rating} / 5.0
({track.ratings} ratings)
{/* Histogram */}
{[5,4,3,2,1].map(stars => { const pct = stars === 5 ? 72 : stars === 4 ? 18 : stars === 3 ? 6 : stars === 2 ? 3 : 1; return (
{stars}★
{pct}%
); })}
Your rating
{myRating > 0 && {myRating}/5}
{myRating === 0 &&
Tap a star to rate this track.
}
{/* Comments */}
Discussion

Comments · {comments.length}

{/* Composer */}