Index: frontend/src/pages/SongDetail.tsx =================================================================== --- frontend/src/pages/SongDetail.tsx (revision 615dceec5ce09f962e30b3bc96b8c511eea814eb) +++ frontend/src/pages/SongDetail.tsx (revision 947fcaadc3ddb75ae7bee1ae398ae0f43c988c1e) @@ -10,585 +10,585 @@ const ROLE_LABELS: Record = { - MAIN_VOCAL: "Main Vocal", - FEATURED: "Featured", - PRODUCER: "Producer", - SONGWRITER: "Songwriter", - COMPOSER: "Composer", - MIXER: "Mixer", - ENGINEER: "Engineer", + MAIN_VOCAL: "Main Vocal", + FEATURED: "Featured", + PRODUCER: "Producer", + SONGWRITER: "Songwriter", + COMPOSER: "Composer", + MIXER: "Mixer", + ENGINEER: "Engineer", }; const formatRole = (role: string): string => { - return ROLE_LABELS[role] || role.replace(/_/g, " "); + return ROLE_LABELS[role] || role.replace(/_/g, " "); }; const renderStars = (grade: number) => { - return ( -
- {[1, 2, 3, 4, 5].map((star) => ( - - - - ))} -
- ); + return ( +
+ {[1, 2, 3, 4, 5].map((star) => ( + + + + ))} +
+ ); }; const SongDetail = () => { - const { id } = useParams<{ id: string }>(); - const { user } = useAuth(); - const { play, currentSong } = usePlayer(); - const [song, setSong] = useState(null); - const [loading, setLoading] = useState(true); - const [error, setError] = useState(null); - const [showReviewModal, setShowReviewModal] = useState(false); - const [reviewRating, setReviewRating] = useState(0); - const [reviewComment, setReviewComment] = useState(""); - const [hoverRating, setHoverRating] = useState(0); - const [showPlaylistDropdown, setShowPlaylistDropdown] = useState(false); - console.log(user); - useEffect(() => { - const fetchSong = async () => { - try { - setLoading(true); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - console.error("Error fetching song details:", err); - setError("Failed to load song details."); - } finally { - setLoading(false); - } - }; - if (id) fetchSong(); - }, [id]); - - const handleSubmitReview = async () => { - if (reviewRating === 0) { - // todo: replace with toast - alert("Please select a rating"); - return; - } - try { - await axiosInstance.post(`reviews/${song?.id}`, { - grade: reviewRating, - comment: reviewComment, - }); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - // todo: replace with toast - console.error("Error submitting review:", err); - } finally { - setShowReviewModal(false); - setReviewRating(0); - setReviewComment(""); - setHoverRating(0); - } - }; - - const deleteReview = async () => { - try { - await axiosInstance.delete(`reviews/${song?.id}`); - const response = await axiosInstance.get(`/songs/${id}/details`); - setSong(response.data); - } catch (err) { - toast.error("Failed to delete review"); - console.error("Error deleting review:", err); - } - }; - - const toggleLike = async () => { - if (!song) return; - try { - await axiosInstance.post(`/musical-entity/${song.id}/like`); - setSong((prev) => - prev - ? { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser } - : prev, - ); - } catch (err) { - toast.error("Failed to toggle like"); - console.error("Error toggling like:", err); - } - }; - - if (loading) { - return ( -
-
-
-

Loading song…

-
-
- ); - } - - if (error || !song) { - return ( -
-
-

- {error ?? "Song not found"} -

- - ← Back to Home - -
-
- ); - } - - const otherContributors = song.contributions.filter( - (c) => c.artistName !== song.releasedBy, - ); - - const avgRating = - song.reviews.length > 0 - ? ( - song.reviews.reduce((sum, r) => sum + r.grade, 0) / - song.reviews.length - ).toFixed(1) - : null; - - return ( -
-
- {/* Back link */} - - - - - Back to Home - - - {/* Hero section */} -
- {/* Cover art */} -
-
- {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-
- - {/* Song info */} -
- - {song.genre} • Song - -

- {song.title} -

- - {/* Main artist */} -

- {song.releasedBy} -

- - {/* Album */} - {song.album && ( -

- Album: {song.album} -

- )} - - {/* Rating summary */} - {avgRating && ( -
- {renderStars(Math.round(Number(avgRating)))} - - {avgRating} · {song.reviews.length}{" "} - {song.reviews.length === 1 ? "review" : "reviews"} - -
- )} - - {/* Action buttons */} -
- {/* Play button */} - {song.link && ( - - )} - - {user && ( - <> - - - {/* Add to Playlist button */} -
- - - setShowPlaylistDropdown(false)} - direction="below" - /> -
- - )} -
-
-
- - {/* Credits / Contributions */} - {song.contributions.length > 0 && ( -
-

Credits

-
- {/* Main artist first */} - {song.contributions - .filter((c) => c.artistName === song.releasedBy) - .map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-
-

- {c.artistName} -

-
-
- - {formatRole(c.role)} - -
- ))} - - {/* Other contributors */} - {otherContributors.map((c, i) => ( -
-
-
- {c.artistName.charAt(0).toUpperCase()} -
-

{c.artistName}

-
- - {formatRole(c.role)} - -
- ))} -
-
- )} - - {/* Reviews */} -
-
-

- Reviews - {song.reviews.length > 0 && ( - - ({song.reviews.length}) - - )} -

- {user != null && ( - - )} -
- - {song.reviews.length === 0 ? ( -
-

No reviews yet.

-

- Be the first to share your thoughts! -

-
- ) : ( -
- {song.reviews.map((review) => ( -
-
-
-
- - {review.author.charAt(0).toUpperCase()} - -
-
-

- {review.author} -

- {renderStars(review.grade)} -
-
- {user?.username === review.authorUsername && ( - - )} -
-

- {review.comment} -

-
- ))} -
- )} -
-
- - {/* Review Modal */} - {showReviewModal && ( -
-
-
-

Add Review

- -
- - {/* Star Rating */} -
- -
- {[1, 2, 3, 4, 5].map((star) => ( - - ))} -
-
- - {/* Comment */} -
- -