Index: frontend/src/components/Sidebar.tsx =================================================================== --- frontend/src/components/Sidebar.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/components/Sidebar.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -5,23 +5,5 @@ import { usePlayer } from "../context/playerContext"; import type { BasicPlaylist, BasicSong, SidebarProps } from "../utils/types"; - -const toEmbedUrl = (url: string): string => { - try { - const parsed = new URL(url); - if ( - (parsed.hostname === "www.youtube.com" || - parsed.hostname === "youtube.com") && - parsed.searchParams.has("v") - ) { - return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`; - } - if (parsed.hostname === "youtu.be") { - return `https://www.youtube.com/embed${parsed.pathname}`; - } - return url; - } catch { - return url; - } -}; +import { toEmbedUrl } from "../utils/utils"; const Sidebar = ({ isOpen, onClose }: SidebarProps) => { Index: frontend/src/components/SongItem.tsx =================================================================== --- frontend/src/components/SongItem.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) +++ frontend/src/components/SongItem.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -0,0 +1,259 @@ +import { useEffect, useRef, useState } from "react"; +import { useNavigate } from "react-router-dom"; +import { usePlayer } from "../context/playerContext"; +import { toEmbedUrl } from "../utils/utils"; + +export interface SongItemData { + id: number; + title: string; + cover?: string | null; + genre?: string; + link?: string | null; + releasedBy?: string; + isLikedByCurrentUser?: boolean; +} + +interface SongItemProps { + song: SongItemData; + /** Optional label shown before the artist, e.g. "Song" for search results */ + label?: string; + /** Optional role badge for artist contributions, e.g. "PERFORMER" */ + role?: string; + /** Optional index number for playlist/collection views */ + index?: number; + /** Callback when the like button is clicked */ + onLikeToggle?: (songId: number) => void; +} + +const ROLE_COLORS: { [key: string]: string } = { + COMPOSER: "bg-purple-500/20 text-purple-300", + PERFORMER: "bg-blue-500/20 text-blue-300", + PRODUCER: "bg-green-500/20 text-green-300", + MAIN_VOCAL: "bg-pink-500/20 text-pink-300", +}; + +const SongItem = ({ + song, + label, + role, + index, + onLikeToggle, +}: SongItemProps) => { + const navigate = useNavigate(); + const { play, currentSong } = usePlayer(); + const [playlistOpen, setPlaylistOpen] = useState(false); + const dropdownRef = useRef(null); + + const isPlaying = currentSong?.id === song.id; + + useEffect(() => { + const handleClickOutside = (event: MouseEvent) => { + if ( + dropdownRef.current && + !dropdownRef.current.contains(event.target as Node) + ) { + setPlaylistOpen(false); + } + }; + if (playlistOpen) { + document.addEventListener("mousedown", handleClickOutside); + } + return () => document.removeEventListener("mousedown", handleClickOutside); + }, [playlistOpen]); + + const handleAddToPlaylist = (playlistName: string) => { + console.log(`Adding song ${song.id} to ${playlistName}`); + // TODO: Implement actual API call + setPlaylistOpen(false); + }; + + const handleCreateNewPlaylist = () => { + console.log(`Creating new playlist for song ${song.id}`); + // TODO: Implement actual playlist creation + setPlaylistOpen(false); + }; + + // Build subtitle + const subtitleParts: string[] = []; + if (label) subtitleParts.push(label); + if (song.releasedBy) subtitleParts.push(song.releasedBy); + const subtitle = subtitleParts.join(" • "); + + return ( +
navigate(`/songs/${song.id}`)} + className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group" + > + {/* Optional index */} + {index != null && ( + + {index} + + )} + + {/* Cover */} + {song.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + {/* Title & subtitle */} +
+

+ {song.title} +

+ {subtitle && ( +

{subtitle}

+ )} +
+ + {/* Role badge (artist contributions) */} + {role && ( + + )} + + {/* Genre */} + {song.genre && ( + + {song.genre} + + )} + + {/* Play button */} + {song.link && ( + + )} + + {/* Like button */} + {onLikeToggle && ( + + )} + + {/* Three-dot menu */} +
+ + + {playlistOpen && ( +
+
+ Add to playlist +
+ + + +
+ )} +
+
+ ); +}; + +export default SongItem; Index: frontend/src/components/search/SongResult.tsx =================================================================== --- frontend/src/components/search/SongResult.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/components/search/SongResult.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,87 +1,25 @@ -import { useNavigate } from "react-router-dom"; -import { usePlayer } from "../../context/playerContext"; +import axiosInstance from "../../api/axiosInstance"; import type { Song } from "../../utils/types"; +import SongItem from "../SongItem"; interface SongResultProps { song: Song; + /** Propagate like state change upward if needed */ + onLikeToggled?: (songId: number, isLiked: boolean) => void; } -const toEmbedUrl = (url: string): string => { - try { - const parsed = new URL(url); - if ( - (parsed.hostname === "www.youtube.com" || - parsed.hostname === "youtube.com") && - parsed.searchParams.has("v") - ) { - return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`; +const SongResult = ({ song, onLikeToggled }: SongResultProps) => { + const handleLike = async (songId: number) => { + try { + const response = await axiosInstance.post( + `/musical-entity/${songId}/like`, + ); + onLikeToggled?.(songId, response.data.isLiked); + } catch (err) { + console.error("Error toggling like:", err); } - if (parsed.hostname === "youtu.be") { - return `https://www.youtube.com/embed${parsed.pathname}`; - } - return url; - } catch { - return url; - } -}; + }; -const SongResult = ({ song }: SongResultProps) => { - const navigate = useNavigate(); - const { play, currentSong } = usePlayer(); - - return ( -
navigate(`/songs/${song.id}`)} - className="flex items-center gap-4 p-3 rounded-lg hover:bg-white/5 cursor-pointer transition-colors group" - > - {song.title} { - (e.target as HTMLImageElement).src = "/favicon.png"; - }} - /> -
-

{song.title}

-

- Song • {song.releasedBy} -

-
- - {song.genre} - - {song.link && ( - - )} -
- ); + return ; }; Index: frontend/src/components/userProfile/ArtistView.tsx =================================================================== --- frontend/src/components/userProfile/ArtistView.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/components/userProfile/ArtistView.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,209 +1,149 @@ +import { Disc3, Music } from "lucide-react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { useState } from "react"; -import { Music, Disc3, Play, Plus } from "lucide-react"; +import { toast } from "react-toastify"; +import axiosInstance from "../../api/axiosInstance"; import type { ArtistContribution } from "../../utils/types"; -import axiosInstance from "../../api/axiosInstance"; +import SongItem from "../SongItem"; interface ArtistViewProps { - contributions: ArtistContribution[]; + contributions: ArtistContribution[]; } const ArtistView = ({ contributions }: ArtistViewProps) => { - const navigate = useNavigate(); - const [items, setItems] = useState(contributions); - const [toast, setToast] = useState<{ message: string; show: boolean }>({ - message: "", - show: false, - }); + const navigate = useNavigate(); + const [items, setItems] = useState(contributions); - const albums = items.filter((c) => c.entityType === "ALBUM"); - const songs = items.filter((c) => c.entityType === "SONG"); + const albums = items.filter((c) => c.entityType === "ALBUM"); + const songs = items.filter((c) => c.entityType === "SONG"); - const getRoleColor = (role: string) => { - const colors: { [key: string]: string } = { - COMPOSER: "bg-purple-100 text-purple-700", - PERFORMER: "bg-blue-100 text-blue-700", - PRODUCER: "bg-green-100 text-green-700", - MAIN_VOCAL: "bg-pink-100 text-pink-700", - }; - return colors[role] || "bg-gray-100 text-gray-700"; - }; + const getRoleColor = (role: string) => { + const colors: { [key: string]: string } = { + COMPOSER: "bg-purple-500/20 text-purple-300", + PERFORMER: "bg-blue-500/20 text-blue-300", + PRODUCER: "bg-green-500/20 text-green-300", + MAIN_VOCAL: "bg-pink-500/20 text-pink-300", + }; + return colors[role] || "bg-white/10 text-gray-300"; + }; - const showToast = (message: string) => { - setToast({ message, show: true }); - setTimeout(() => { - setToast({ message: "", show: false }); - }, 2000); - }; + const handleLike = async (id: number, title: string) => { + try { + const response = await axiosInstance.post(`/musical-entity/${id}/like`); + const data = response.data; - const handleLike = async (id: number, title: string) => { - try { - const response = await axiosInstance.post(`/musical-entity/${id}/like`); - const data = response.data; + setItems((prevItems) => + prevItems.map((item) => + item.id === data.entityId + ? { ...item, isLikedByCurrentUser: data.isLiked } + : item, + ), + ); + toast.success( + data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to like the item"); + } + }; - setItems((prevItems) => - prevItems.map((item) => - item.id === data.entityId - ? { ...item, isLikedByCurrentUser: data.isLiked } - : item, - ), - ); + return ( +
+ {albums.length > 0 && ( +
+
+ +

Albums

+
+
+ {albums.map((album) => ( +
navigate(`/collection/album/${album.id}`)} + > +
+ {album.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> - showToast( - data.isLiked ? `Liked "${title}"` : `Removed ${title} from likes`, - ); - } catch (err: any) { - showToast(err.response?.data?.error); - } - }; + - return ( -
- {toast.show && ( -
-
- {toast.message} -
-
- )} +
+ + {album.role.replace("_", " ")} + +
+
+

+ {album.title} +

+
+ ))} +
+
+ )} - {albums.length > 0 && ( -
-
- -

Albums

-
-
- {albums.map((album) => ( -
navigate(`/collection/album/${album.id}`)} - > -
-
- -
+ {songs.length > 0 && ( +
+
+ +

Songs

+
+
+ {songs.map((song) => ( + handleLike(song.id, song.title)} + /> + ))} +
+
+ )} - - -
- - {album.role.replace("_", " ")} - -
-
-

- {album.title} -

-
- ))} -
-
- )} - - {songs.length > 0 && ( -
-
- -

Songs

-
-
- {songs.map((song) => ( -
navigate(`/musical-entity/${song.id}`)} - > -
-
- -
- -
- -
-

- {song.title} -

-
- {song.genre} -
-
- - - {song.role.replace("_", " ")} - - -
- - - -
-
- ))} -
-
- )} - - {contributions.length === 0 && ( -
- -

No contributions yet

-

Start creating music to see it here

-
- )} -
- ); + {contributions.length === 0 && ( +
+ +

No contributions yet

+

Start creating music to see it here

+
+ )} +
+ ); }; Index: frontend/src/components/userProfile/ListenerView.tsx =================================================================== --- frontend/src/components/userProfile/ListenerView.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/components/userProfile/ListenerView.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,333 +1,285 @@ +import { Album, Bookmark, Heart, ListMusic, Music } from "lucide-react"; +import { useState } from "react"; import { useNavigate } from "react-router-dom"; -import { Heart, ListMusic, Music, Album, Bookmark } from "lucide-react"; -import type { Playlist, MusicalEntity } from "../../utils/types"; +import { toast } from "react-toastify"; import axiosInstance from "../../api/axiosInstance"; -import { useState } from "react"; +import type { MusicalEntity, Playlist } from "../../utils/types"; +import SongItem from "../SongItem"; interface ListenerViewProps { - likedEntities: MusicalEntity[] | []; - createdPlaylists: Playlist[] | []; - savedPlaylists: Playlist[] | []; + likedEntities: MusicalEntity[] | []; + createdPlaylists: Playlist[] | []; + savedPlaylists: Playlist[] | []; } const ListenerView = ({ - likedEntities, - createdPlaylists, - savedPlaylists, + likedEntities, + createdPlaylists, + savedPlaylists, }: ListenerViewProps) => { - const navigate = useNavigate(); - const [items, setItems] = useState(likedEntities); - const [savedItems, setSavedItems] = useState(savedPlaylists); - const [toast, setToast] = useState<{ message: string; show: boolean }>({ - message: "", - show: false, - }); - - const showToast = (message: string) => { - setToast({ message, show: true }); - setTimeout(() => { - setToast({ message: "", show: false }); - }, 2000); - }; - - const likedSongs = items.filter((e) => e.type === "SONG"); - const likedAlbums = items.filter((e) => e.type === "ALBUM"); - - const handleSavePlaylist = async ( - e: React.MouseEvent, - playlistId: number, - playlistName: string, - ) => { - e.stopPropagation(); - - try { - const response = await axiosInstance.post(`/playlist/${playlistId}/save`); - const data = response.data; - - setSavedItems((prevItems) => - data.isSaved - ? [...prevItems, prevItems.find((p) => p.id === playlistId)!] - : prevItems.filter((p) => p.id !== playlistId), - ); - - showToast( - data.isSaved - ? `Saved "${playlistName}"` - : `Removed "${playlistName}" from saved playlists`, - ); - } catch (err: any) { - showToast(err.response?.data?.error || "Failed to save playlist"); - } - }; - - const handleLike = async (id: number, title: string) => { - try { - const response = await axiosInstance.post(`/musical-entity/${id}/like`); - const data = response.data; - - setItems((prevItems) => - prevItems.map((item) => - item.id === data.entityId - ? { ...item, isLikedByCurrentUser: data.isLiked } - : item, - ), - ); - - showToast( - data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, - ); - } catch (err: any) { - showToast(err.response?.data?.error); - } - }; - - return ( -
- {toast.show && ( -
-
- {toast.message} -
-
- )} - - {createdPlaylists && createdPlaylists.length > 0 && ( -
-
- -

- Created Playlists -

- - ({createdPlaylists.length}) - -
- -
- {createdPlaylists.map((playlist) => ( -
navigate(`/collection/playlist/${playlist.id}`)} - > -
- {playlist.cover ? ( - {playlist.name} - ) : ( -
- -
- )} - - -
-

- {playlist.name} -

-

- {playlist.creatorName} -

-
- ))} -
-
- )} - - {savedItems && savedItems.length > 0 && ( -
-
- -

- Saved Playlists -

- ({savedItems.length}) -
- -
- {savedItems.map((playlist) => ( -
navigate(`/collection/playlist/${playlist.id}`)} - > -
- {playlist.cover ? ( - {playlist.name} - ) : ( -
- -
- )} - - -
-

- {playlist.name} -

-

- {playlist.creatorName} -

-
- ))} -
-
- )} - - {likedSongs && likedSongs.length > 0 && ( -
-
- -

Liked Songs

- - ({likedSongs?.length}) - -
- -
- {likedSongs.map((song, index) => ( -
navigate(`/musical-entity/${song.id}`)} - > - - {index + 1} - -
- -
-
-

- {song.title} -

-

- {song.releasedBy} -

-
- - {song.genre} - - - -
- ))} -
-
- )} - - {likedAlbums && likedAlbums.length > 0 && ( -
-
- -

Liked Albums

- - ({likedAlbums.length}) - -
- -
- {likedAlbums.map((album) => ( -
navigate(`/collection/album/${album.id}`)} - > -
- - - -
-

- {album.title} -

-

- {album.releasedBy} -

-
- ))} -
-
- )} - - {likedEntities && - likedEntities.length === 0 && - (!createdPlaylists || createdPlaylists.length === 0) && - (!savedItems || savedItems.length === 0) && ( -
- -

Nothing here yet

-

- Start exploring music to build your collection -

-
- )} -
- ); + const navigate = useNavigate(); + const [items, setItems] = useState(likedEntities); + const [savedItems, setSavedItems] = useState(savedPlaylists); + + const likedSongs = items.filter((e) => e.type === "SONG"); + const likedAlbums = items.filter((e) => e.type === "ALBUM"); + + const handleSavePlaylist = async ( + e: React.MouseEvent, + playlistId: number, + playlistName: string, + ) => { + e.stopPropagation(); + + try { + const response = await axiosInstance.post(`/playlist/${playlistId}/save`); + const data = response.data; + + setSavedItems((prevItems) => + data.isSaved + ? [...prevItems, prevItems.find((p) => p.id === playlistId)!] + : prevItems.filter((p) => p.id !== playlistId), + ); + + toast.success( + data.isSaved + ? `Saved "${playlistName}" to your library` + : `Removed "${playlistName}" from your library`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to save the playlist"); + } + }; + + const handleLike = async (id: number, title: string) => { + try { + const response = await axiosInstance.post(`/musical-entity/${id}/like`); + const data = response.data; + + setItems((prevItems) => + prevItems.map((item) => + item.id === data.entityId + ? { ...item, isLikedByCurrentUser: data.isLiked } + : item, + ), + ); + + toast.success( + data.isLiked ? `Liked "${title}"` : `Removed "${title}" from likes`, + ); + } catch (err: any) { + toast.error(err.response?.data?.error || "Failed to like the item"); + } + }; + + return ( +
+ {createdPlaylists && createdPlaylists.length > 0 && ( +
+
+ +

Created Playlists

+ + ({createdPlaylists.length}) + +
+ +
+ {createdPlaylists.map((playlist) => ( +
navigate(`/collection/playlist/${playlist.id}`)} + > +
+ {playlist.name} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + +
+

+ {playlist.name} +

+

+ {playlist.creatorName} +

+
+ ))} +
+
+ )} + + {savedItems && savedItems.length > 0 && ( +
+
+ +

Saved Playlists

+ ({savedItems.length}) +
+ +
+ {savedItems.map((playlist) => ( +
navigate(`/collection/playlist/${playlist.id}`)} + > +
+ {playlist.name} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + +
+

+ {playlist.name} +

+

+ {playlist.creatorName} +

+
+ ))} +
+
+ )} + + {likedSongs && likedSongs.length > 0 && ( +
+
+ +

Liked Songs

+ + ({likedSongs?.length}) + +
+ +
+ {likedSongs.map((song, index) => ( + handleLike(song.id, song.title)} + /> + ))} +
+
+ )} + + {likedAlbums && likedAlbums.length > 0 && ( +
+
+ +

Liked Albums

+ + ({likedAlbums.length}) + +
+ +
+ {likedAlbums.map((album) => ( +
navigate(`/collection/album/${album.id}`)} + > +
+ {album.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> + + +
+

+ {album.title} +

+

+ {album.releasedBy} +

+
+ ))} +
+
+ )} + + {likedEntities && + likedEntities.length === 0 && + (!createdPlaylists || createdPlaylists.length === 0) && + (!savedItems || savedItems.length === 0) && ( +
+ +

Nothing here yet

+

+ Start exploring music to build your collection +

+
+ )} +
+ ); }; Index: frontend/src/components/userProfile/UserListModal.tsx =================================================================== --- frontend/src/components/userProfile/UserListModal.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/components/userProfile/UserListModal.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,3 +1,4 @@ import { useNavigate } from "react-router-dom"; +import { baseURL } from "../../api/axiosInstance"; import type { BaseNonAdminUser } from "../../utils/types"; @@ -16,14 +17,13 @@ }: ModalProps) => { const navigate = useNavigate(); - const baseURL = import.meta.env.VITE_API_BASE_URL; return ( -
-
-
-

{title}

+
+
+
+

{title}

Index: frontend/src/pages/LandingPage.tsx =================================================================== --- frontend/src/pages/LandingPage.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/pages/LandingPage.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -12,24 +12,5 @@ Song, } from "../utils/types"; - -// Convert a regular YouTube URL to an embeddable URL -const toEmbedUrl = (url: string): string => { - try { - const parsed = new URL(url); - if ( - (parsed.hostname === "www.youtube.com" || - parsed.hostname === "youtube.com") && - parsed.searchParams.has("v") - ) { - return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`; - } - if (parsed.hostname === "youtu.be") { - return `https://www.youtube.com/embed${parsed.pathname}`; - } - return url; - } catch { - return url; - } -}; +import { toEmbedUrl } from "../utils/utils"; const CATEGORIES: { value: SearchCategory; label: string }[] = [ Index: frontend/src/pages/MusicalCollection.tsx =================================================================== --- frontend/src/pages/MusicalCollection.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/pages/MusicalCollection.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,206 +1,247 @@ import { useEffect, useState } from "react"; -import { useNavigate, useParams } from "react-router-dom"; +import { Link, useParams } from "react-router-dom"; import axiosInstance from "../api/axiosInstance"; -import LoadingSpinner from "../components/LoadingSpinner"; -import type { Song, Album, Playlist } from "../utils/types"; +import SongItem from "../components/SongItem"; import { handleError } from "../utils/error"; +import type { Album, Playlist, Song } from "../utils/types"; interface CollectionView { - id: number; - title: string; - genre?: string; - type: string; - releasedBy: string; - isLikedByCurrentUser?: boolean; - songs: Song[]; + id: number; + title: string; + cover?: string | null; + genre?: string; + type: string; + releasedBy: string; + isLikedByCurrentUser?: boolean; + songs: Song[]; } const MusicalCollection = () => { - const { type, id } = useParams(); - const navigate = useNavigate(); - const [collection, setCollection] = useState(null); - const [isLoading, setIsLoading] = useState(true); - const [error, setError] = useState(null); - - const normalizeCollection = ( - data: Album | Playlist, - type: string, - ): CollectionView => { - if (type === "album") { - const album = data as Album; - return { - id: album.id, - title: album.title, - genre: album.genre, - type: album.type, - releasedBy: album.releasedBy, - isLikedByCurrentUser: album.isLikedByCurrentUser, - songs: album.songs, - }; - } else { - const playlist = data as Playlist; - return { - id: playlist.id, - title: playlist.name, - genre: undefined, - type: "PLAYLIST", - releasedBy: playlist.creatorName, - isLikedByCurrentUser: undefined, - songs: playlist.songsInPlaylist, - }; - } - }; - - useEffect(() => { - const fetchData = async () => { - setIsLoading(true); - setError(null); - try { - const endpoint = - type === "album" ? `/albums/${id}` : `/playlists/${id}`; - const response = await axiosInstance.get(endpoint); - - const normalized = normalizeCollection(response.data, type!); - setCollection(normalized); - } catch (err: any) { - setError(handleError(err)); - } finally { - setIsLoading(false); - } - }; - fetchData(); - }, [id, type]); - - if (isLoading) { - return ; - } - - if (error) { - return ( -
-

Error

-

{error}

-
- ); - } - - if (!collection) return null; - - return ( -
- - -
-
-
-
- {collection.title.charAt(0).toUpperCase()} -
-
- -
- - {collection.type} - -

{collection.title}

- -
- {collection.releasedBy} - {collection.genre && ( - <> - • - {collection.genre} - - )} - {collection.songs && ( - <> - • - - {collection.songs.length} song - {collection.songs.length !== 1 ? "s" : ""} - - - )} -
- - {type === "album" && ( - - )} -
-
- -
-

Songs

- - {collection.songs && collection.songs.length > 0 ? ( -
- {collection.songs.map((song, index) => ( -
- - {index + 1} - - -
-

- {song.title} -

-

- {song.releasedBy} -

-
- - - {song.genre} - - - -
- ))} -
- ) : ( -

No songs available

- )} -
-
-
- ); + const { type, id } = useParams(); + const [collection, setCollection] = useState(null); + const [isLoading, setIsLoading] = useState(true); + const [error, setError] = useState(null); + + const normalizeCollection = ( + data: Album | Playlist, + type: string, + ): CollectionView => { + if (type === "album") { + const album = data as Album; + return { + id: album.id, + title: album.title, + cover: album.cover, + genre: album.genre, + type: album.type, + releasedBy: album.releasedBy, + isLikedByCurrentUser: album.isLikedByCurrentUser, + songs: album.songs, + }; + } else { + const playlist = data as Playlist; + return { + id: playlist.id, + title: playlist.name, + cover: playlist.cover, + genre: undefined, + type: "PLAYLIST", + releasedBy: playlist.creatorName, + isLikedByCurrentUser: undefined, + songs: playlist.songsInPlaylist, + }; + } + }; + + const toggleLike = async (songId: number) => { + try { + await axiosInstance.post(`/musical-entity/${songId}/like`); + setCollection((prev) => { + if (!prev) return null; + return { + ...prev, + songs: prev.songs.map((s) => + s.id === songId + ? { ...s, isLikedByCurrentUser: !s.isLikedByCurrentUser } + : s, + ), + }; + }); + } catch (err) { + console.error("Error toggling like:", err); + } + }; + + const toggleCollectionLike = async () => { + if (!collection) return; + try { + await axiosInstance.post(`/musical-entity/${collection.id}/like`); + setCollection((prev) => { + if (!prev) return null; + return { ...prev, isLikedByCurrentUser: !prev.isLikedByCurrentUser }; + }); + } catch (err) { + console.error("Error toggling collection like:", err); + } + }; + + useEffect(() => { + const fetchData = async () => { + setIsLoading(true); + setError(null); + try { + const endpoint = + type === "album" ? `/albums/${id}` : `/playlists/${id}`; + const response = await axiosInstance.get(endpoint); + + const normalized = normalizeCollection(response.data, type!); + setCollection(normalized); + } catch (err: any) { + setError(handleError(err)); + } finally { + setIsLoading(false); + } + }; + fetchData(); + }, [id, type]); + + if (isLoading) { + return ( +
+
+
+

Loading collection…

+
+
+ ); + } + + if (error) { + return ( +
+
+

{error}

+ + ← Back to Home + +
+
+ ); + } + + if (!collection) return null; + + return ( +
+
+ {/* Back link */} + + + + + Back to Home + + + {/* Hero section */} +
+ {/* Cover art */} +
+
+ {collection.title} { + (e.target as HTMLImageElement).src = "/favicon.png"; + }} + /> +
+
+ + {/* Collection info */} +
+ + {collection.genre ? `${collection.genre} • ` : ""} + {collection.type === "PLAYLIST" ? "Playlist" : "Album"} + +

+ {collection.title} +

+ +

+ {collection.releasedBy} +

+ + {collection.songs && ( +

+ {collection.songs.length} song + {collection.songs.length !== 1 ? "s" : ""} +

+ )} + + {/* Action buttons */} +
+ {type === "album" && ( + + )} +
+
+
+ + {/* Songs list */} +
+

Songs

+ + {collection.songs && collection.songs.length > 0 ? ( +
+ {collection.songs.map((song, index) => ( + toggleLike(song.id)} + /> + ))} +
+ ) : ( +
+

No songs available

+
+ )} +
+
+
+ ); }; Index: frontend/src/pages/SongDetail.tsx =================================================================== --- frontend/src/pages/SongDetail.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/pages/SongDetail.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,8 +1,10 @@ import { useEffect, useRef, useState } from "react"; import { Link, useParams } from "react-router-dom"; +import { toast } from "react-toastify"; import axiosInstance from "../api/axiosInstance"; import { useAuth } from "../context/authContext"; import { usePlayer } from "../context/playerContext"; import type { SongDetail as SongDetailType } from "../utils/types"; +import { toEmbedUrl } from "../utils/utils"; const ROLE_LABELS: Record = { @@ -18,27 +20,4 @@ const formatRole = (role: string): string => { return ROLE_LABELS[role] || role.replace(/_/g, " "); -}; - -// convert a regular youtube URL to an embeddable URL -const toEmbedUrl = (url: string): string => { - try { - const parsed = new URL(url); - // youtube.com/watch?v=ID - if ( - (parsed.hostname === "www.youtube.com" || - parsed.hostname === "youtube.com") && - parsed.searchParams.has("v") - ) { - return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`; - } - // youtu.be/ID - if (parsed.hostname === "youtu.be") { - return `https://www.youtube.com/embed${parsed.pathname}`; - } - // already an embed URL or other provider – return as-is - return url; - } catch { - return url; - } }; @@ -137,5 +116,5 @@ setSong(response.data); } catch (err) { - // todo :add toast + toast.error("Failed to delete review"); console.error("Error deleting review:", err); } @@ -152,4 +131,5 @@ ); } catch (err) { + toast.error("Failed to toggle like"); console.error("Error toggling like:", err); } Index: frontend/src/pages/UserDetail.tsx =================================================================== --- frontend/src/pages/UserDetail.tsx (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/pages/UserDetail.tsx (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -1,5 +1,5 @@ import { useEffect, useState } from "react"; -import { useNavigate, useParams } from "react-router-dom"; -import axiosInstance from "../api/axiosInstance"; +import { Link, useNavigate, useParams } from "react-router-dom"; +import axiosInstance, { baseURL } from "../api/axiosInstance"; import LoadingSpinner from "../components/LoadingSpinner"; import ArtistView from "../components/userProfile/ArtistView"; @@ -35,8 +35,5 @@ const UserDetail = () => { - // user refers to the selected user NOT to the user from context - const baseURL = import.meta.env.VITE_API_BASE_URL; const { username: usernameParam } = useParams(); - // sintaksava dole znaci zemi go user od auth context i preimenuvaj go vo currentUser, za da ne se izmesa so user-ot dole const { user: currentUser } = useAuth(); const navigate = useNavigate(); @@ -49,19 +46,21 @@ const [isFollowing, setIsFollowing] = useState(false); - // determine which username to use: URL param or current user's username const username = usernameParam || currentUser?.username; - - // if we're on /me route and no user is logged in, show error + const isOwnProfile = currentUser?.username === username; + if (!usernameParam && !currentUser) { return ( -
-

Authentication Required

-

You must be logged in to view your profile.

- +
+
+

+ You must be logged in to view your profile. +

+ +
); @@ -95,5 +94,5 @@ try { const response = await axiosInstance.post( - `/users/na/${username}/follow`, + `/users/na/${targetUsername}/follow`, ); @@ -105,15 +104,4 @@ ), ); - - // if (user && user.id === targetId) { - // setUser((prev) => { - // if (!prev) return null; - // return { - // ...prev, - // isFollowedByCurrentUser: response.data.isFollowing, - // followers: response.data.followerCount, - // }; - // }); - // } } catch (err: any) { setError(handleError(err)); @@ -157,5 +145,4 @@ try { const response = await axiosInstance.get(`/users/na/${username}`); - console.log(response.data); setUser(response.data); } catch (err: any) { @@ -168,7 +155,11 @@ if (error) { return ( -
-

Error

-

{error}

+
+
+

{error}

+ + ← Back to Home + +
); @@ -180,23 +171,38 @@ return ( -
+
{isLoadingModal && ( -
-
-
-
+
+
)} - - -
-
-
-
+ +
+ {/* Back link */} + + + + + Back to Home + + + {/* Hero section */} +
+ {/* Profile photo */} +
+
{user.profilePhoto ? ( ) : ( - user.fullName.charAt(0).toUpperCase() +
+ {user.fullName.charAt(0).toUpperCase()} +
)}
-
-

{user.fullName}

- - {user.userType} + {/* User info */} +
+ + {user.userType === "ARTIST" ? "Artist" : "Listener"} • Profile - -
+

+ {user.fullName} +

+

@{user.username}

+ + {/* Stats */} +
- {user.followers} - Followers + + {user.followers} + + Followers
- {user.following} - Following + + {user.following} + + Following
- + {/* Follow button - hidden on own profile */} + {!isOwnProfile && ( +
+ +
+ )}
+ {/* Content */} {user.userType === "ARTIST" ? ( Index: frontend/src/utils/types.ts =================================================================== --- frontend/src/utils/types.ts (revision 27660af8b50619221470b2bbb054bcc3db8ed385) +++ frontend/src/utils/types.ts (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -15,4 +15,6 @@ entityType: string; isLikedByCurrentUser: boolean; + cover?: string | null; + link?: string | null; } Index: frontend/src/utils/utils.ts =================================================================== --- frontend/src/utils/utils.ts (revision 1579b4f9eaf503a14012d471db11e16e645306e3) +++ frontend/src/utils/utils.ts (revision 1579b4f9eaf503a14012d471db11e16e645306e3) @@ -0,0 +1,21 @@ +export const toEmbedUrl = (url: string): string => { + try { + const parsed = new URL(url); + // youtube.com/watch?v=ID + if ( + (parsed.hostname === "www.youtube.com" || + parsed.hostname === "youtube.com") && + parsed.searchParams.has("v") + ) { + return `https://www.youtube.com/embed/${parsed.searchParams.get("v")}`; + } + // youtu.be/ID + if (parsed.hostname === "youtu.be") { + return `https://www.youtube.com/embed${parsed.pathname}`; + } + // already an embed URL or other provider – return as-is + return url; + } catch { + return url; + } +};