diff --git a/src/components/playlist/PlaylistHero.tsx b/src/components/playlist/PlaylistHero.tsx index e28fd353..1ea0b024 100644 --- a/src/components/playlist/PlaylistHero.tsx +++ b/src/components/playlist/PlaylistHero.tsx @@ -1,4 +1,5 @@ import { useEffect, useState } from "react"; +import { Link } from "react-router-dom"; import { FaPlay, FaPause, FaLock } from "react-icons/fa"; import { type PlaylistDetails } from "@/services/api/playlist/playlist.service"; import { useAuthStore } from "@/stores/auth.store"; @@ -128,6 +129,11 @@ export default function PlaylistHero({ ? user?.displayName : ownerUsername || playlist.owner_user_id; + const ownerProfileHref = moreOfLike + ? `/${user?.username}` + : `/${ownerUsername}` + + return (
-

- {ownerLabel} -

+ {ownerProfileHref ? ( + + {ownerLabel} + + ) : ( +

+ {ownerLabel} +

+ )}
diff --git a/src/components/playlist/test/PlaylistHero.test.tsx b/src/components/playlist/test/PlaylistHero.test.tsx index 7706d111..8e516b7b 100644 --- a/src/components/playlist/test/PlaylistHero.test.tsx +++ b/src/components/playlist/test/PlaylistHero.test.tsx @@ -86,7 +86,10 @@ describe("PlaylistHero", () => { , ); expect(screen.getByText("Related Tracks: Seed Title")).toBeInTheDocument(); - expect(screen.getByText("Made for Mariam")).toBeInTheDocument(); + expect(screen.getByRole("link", { name: "Made for Mariam" })).toHaveAttribute( + "href", + "/artist-x", + ); render( @@ -99,7 +102,10 @@ describe("PlaylistHero", () => { , ); expect(screen.getByText("artist-x's Station")).toBeInTheDocument(); - expect(screen.getByText("Artist Station")).toBeInTheDocument(); + expect(screen.getByRole("link", { name: "Artist Station" })).toHaveAttribute( + "href", + "/artist-x", + ); }); it("uses the explicit genre label and hides the upload button prop", async () => { diff --git a/src/pages/you/sets/SetsPage.tsx b/src/pages/you/sets/SetsPage.tsx index 63f4feae..bf45b1a8 100644 --- a/src/pages/you/sets/SetsPage.tsx +++ b/src/pages/you/sets/SetsPage.tsx @@ -45,6 +45,14 @@ type SetsMixCardItem = { type SetsCarouselItem = MadeForYouItem | SetsMixCardItem; +function getPersonalMixCoverUrl(mix: PersonalMix) { + return mix.cover_image ?? mix.preview_track.cover_image ?? null; +} + +function getMadeForYouCoverUrl(mix: HomeData["made_for_you"] extends infer T ? NonNullable extends { daily_mix: infer D } ? D : never : never) { + return mix.cover_url ?? mix.preview_track.cover_image ?? ""; +} + const SkeletonCard = () => (
@@ -152,7 +160,7 @@ export default function SetsPage() { id: homeData.made_for_you.daily_mix.id, title: homeData.made_for_you.daily_mix.label, subtitle: homeData.made_for_you.daily_mix.description, - coverUrl: homeData.made_for_you.daily_mix.cover_url ?? "", + coverUrl: getMadeForYouCoverUrl(homeData.made_for_you.daily_mix), madeKind: "daily", badgeWords: ["DAILY", "DROPS"], badgeBg: "#1a237e", @@ -165,7 +173,7 @@ export default function SetsPage() { id: homeData.made_for_you.weekly_mix.id, title: homeData.made_for_you.weekly_mix.label, subtitle: homeData.made_for_you.weekly_mix.description, - coverUrl: homeData.made_for_you.weekly_mix.cover_url ?? "", + coverUrl: getMadeForYouCoverUrl(homeData.made_for_you.weekly_mix), madeKind: "weekly", badgeWords: ["WEEKLY", "WAVE"], badgeBg: "#1b5e20", @@ -188,7 +196,7 @@ export default function SetsPage() { mix.flavor === "listening_history" ? "Based on listening history" : "Based on your taste", - cover_image: mix.cover_image ?? mix.preview_track.cover_image ?? null, + cover_image: getPersonalMixCoverUrl(mix), badgeWords: ["MIX", ""], badgeBg: mix.flavor === "listening_history" ? "#1a237e" : "#1b5e20", previewTrack: mapDiscoveryTrack(mix.preview_track), @@ -299,7 +307,7 @@ export default function SetsPage() { label: mix.title, flavor: "listening_history", genre_name: null, - cover_image: mix.cover_image, + cover_image: mix.cover_image ?? mix.previewTrack?.coverUrl ?? null, track_count: 0, generated_at: new Date().toISOString(), preview_track: { diff --git a/src/pages/you/sets/moreOfLike.helpers.ts b/src/pages/you/sets/moreOfLike.helpers.ts index b310520a..e458e50f 100644 --- a/src/pages/you/sets/moreOfLike.helpers.ts +++ b/src/pages/you/sets/moreOfLike.helpers.ts @@ -57,6 +57,7 @@ export function toPlaylistTrackItem( is_public: !track.isPrivate, deleted_at: null, artist_name: track.artistName || null, + artist_id: track.artistId || track.artistUsername || undefined, artist_username: track.artistUsername || null, audio_url: track.audioUrl || null, play_count: track.playCount ?? 0,