Skip to content
This repository was archived by the owner on Feb 28, 2026. It is now read-only.

Commit ff15a35

Browse files
nukeopnukeop
committed
Old artist page header refactor
1 parent 7d5be1c commit ff15a35

File tree

5 files changed

+172
-76
lines changed

5 files changed

+172
-76
lines changed

‎packages/player/src/test/fixtures/artists.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export const SEARCH_RESULT: SearchResults = {
3838

3939
export const BIO_BEATLES: ArtistBio = {
4040
name: 'The Beatles',
41+
bio: 'The Beatles were an English rock band formed in Liverpool in 1960. The group, whose best-known line-up comprised John Lennon, Paul McCartney, George Harrison and Ringo Starr, are regarded as the most influential band of all time.',
4142
onTour: true,
4243
tags: ['rock', 'indie', 'brit-pop'],
4344
artwork: {

‎packages/player/src/views/Artist/__snapshots__/Artist.test.tsx.snap‎

Lines changed: 71 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -372,14 +372,11 @@ exports[`Artist view > with bio provider > (Snapshot) renders the artist view 1`
372372
style="scrollbar-width: none;"
373373
>
374374
<div
375-
class="relative"
375+
class="border-border bg-primary shadow-shadow relative mx-6 mt-6 rounded-md border-2 p-6"
376376
>
377-
<div
378-
class="absolute h-100 w-full bg-gradient-to-b from-transparent to-black"
379-
/>
380377
<button
381378
aria-label="Add to favorites"
382-
class="inline-flex cursor-pointer items-center rounded-md transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground bg-transparent size-10 justify-center absolute top-4 right-4 z-10"
379+
class="inline-flex cursor-pointer items-center transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground size-10 justify-center bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
383380
data-headlessui-state=""
384381
data-testid="artist-favorite-button"
385382
type="button"
@@ -403,43 +400,67 @@ exports[`Artist view > with bio provider > (Snapshot) renders the artist view 1`
403400
</svg>
404401
</button>
405402
<div
406-
class="h-100 w-full bg-cover bg-center"
407-
style="background-image: url("https://img/cover.jpg");"
408-
/>
409-
<div
410-
class="absolute bottom-0 left-0 flex flex-row items-center gap-8 p-8"
403+
class="flex gap-6"
411404
>
412-
<img
413-
alt="The Beatles avatar"
414-
class="border-border bottom-0 h-30 w-30 rounded-full border-2 select-none"
415-
src="https://img/avatar.jpg"
416-
/>
417-
<h1
418-
class="flex cursor-default flex-col gap-2 text-6xl text-white select-none"
405+
<div
406+
class="flex flex-1 flex-col gap-4"
419407
>
420-
The Beatles
408+
<div
409+
class="flex items-center gap-5"
410+
>
411+
<img
412+
alt="The Beatles avatar"
413+
class="border-border shadow-shadow h-24 w-24 rounded-full border-2 object-cover"
414+
src="https://img/avatar.jpg"
415+
/>
416+
<div
417+
class="flex flex-col gap-1"
418+
>
419+
<h1
420+
class="font-heading text-5xl font-extrabold tracking-tight"
421+
>
422+
The Beatles
423+
</h1>
424+
</div>
425+
</div>
421426
<div
422427
class="flex flex-wrap gap-2"
423428
>
424429
<span
425-
class="bg-primary rounded-md px-2 py-1 font-sans text-sm"
430+
class="border-border bg-background rounded-md border px-2 py-0.5 text-sm font-bold"
426431
>
427432
rock
428433
</span>
429434
<span
430-
class="bg-primary rounded-md px-2 py-1 font-sans text-sm"
435+
class="border-border bg-background rounded-md border px-2 py-0.5 text-sm font-bold"
431436
>
432437
indie
433438
</span>
434439
<span
435-
class="bg-primary rounded-md px-2 py-1 font-sans text-sm"
440+
class="border-border bg-background rounded-md border px-2 py-0.5 text-sm font-bold"
436441
>
437442
brit-pop
438443
</span>
439444
</div>
440-
</h1>
441-
<div>
442-
On Tour
445+
<span
446+
class="bg-accent-green border-border inline-flex w-fit rounded-md border px-2 py-0.5 text-sm font-bold"
447+
>
448+
On Tour
449+
</span>
450+
<p
451+
class="text-foreground-secondary line-clamp-3 text-sm leading-relaxed"
452+
>
453+
The Beatles were an English rock band formed in Liverpool in 1960. The group, whose best-known line-up comprised John Lennon, Paul McCartney, George Harrison and Ringo Starr, are regarded as the most influential band of all time.
454+
</p>
455+
</div>
456+
<div
457+
class="w-72 shrink-0 self-stretch"
458+
>
459+
<img
460+
alt="The Beatles cover"
461+
class="border-border shadow-shadow h-full w-full rounded-md border-2 object-cover"
462+
src="https://img/cover.jpg"
463+
/>
443464
</div>
444465
</div>
445466
</div>
@@ -1674,9 +1695,34 @@ exports[`Artist view > with social stats provider > (Snapshot) renders the artis
16741695
style="scrollbar-width: none;"
16751696
>
16761697
<div
1677-
class="border-border bg-primary shadow-shadow mx-6 mt-6 rounded-md border-2 p-6"
1698+
class="border-border bg-primary shadow-shadow relative mx-6 mt-6 rounded-md border-2 p-6"
16781699
data-testid="artist-social-header"
16791700
>
1701+
<button
1702+
aria-label="Add to favorites"
1703+
class="inline-flex cursor-pointer items-center transition-all disabled:cursor-not-allowed disabled:opacity-50 text-foreground size-10 justify-center bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
1704+
data-headlessui-state=""
1705+
data-testid="artist-favorite-button"
1706+
type="button"
1707+
>
1708+
<svg
1709+
aria-hidden="true"
1710+
class="lucide lucide-heart transition-colors text-foreground-secondary hover:text-foreground"
1711+
fill="none"
1712+
height="24"
1713+
stroke="currentColor"
1714+
stroke-linecap="round"
1715+
stroke-linejoin="round"
1716+
stroke-width="2"
1717+
viewBox="0 0 24 24"
1718+
width="24"
1719+
xmlns="http://www.w3.org/2000/svg"
1720+
>
1721+
<path
1722+
d="M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"
1723+
/>
1724+
</svg>
1725+
</button>
16801726
<div
16811727
class="flex items-center gap-5"
16821728
>

‎packages/player/src/views/Artist/components/ArtistBioHeader.tsx‎

Lines changed: 56 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -28,24 +28,16 @@ export const ArtistBioHeader: FC<ArtistBioHeaderProps> = ({
2828

2929
if (isLoading) {
3030
return (
31-
<div className="relative">
32-
<div className="absolute h-100 w-full bg-gradient-to-b from-transparent to-black"></div>
33-
<div className="flex h-100 w-full items-center justify-center">
34-
<Loader size="xl" data-testid="artist-header-loader" />
35-
</div>
31+
<div className="border-border bg-primary shadow-shadow mx-6 mt-6 flex items-center justify-center rounded-md border-2 p-6">
32+
<Loader size="xl" data-testid="artist-header-loader" />
3633
</div>
3734
);
3835
}
3936

4037
if (isError) {
4138
return (
42-
<div className="relative">
43-
<div className="absolute h-100 w-full bg-gradient-to-b from-transparent to-black"></div>
44-
<div className="flex h-100 w-full flex-col items-center justify-center gap-3 p-6">
45-
<div className="text-accent-red">
46-
{t('errors.failedToLoadDetails')}
47-
</div>
48-
</div>
39+
<div className="border-border bg-primary shadow-shadow mx-6 mt-6 rounded-md border-2 p-6">
40+
<div className="text-accent-red">{t('errors.failedToLoadDetails')}</div>
4941
</div>
5042
);
5143
}
@@ -58,54 +50,68 @@ export const ArtistBioHeader: FC<ArtistBioHeaderProps> = ({
5850
const avatar = pickArtwork(artist.artwork, 'avatar', AVATAR_SIZE_PX);
5951

6052
return (
61-
<div className="relative">
62-
<div className="absolute h-100 w-full bg-gradient-to-b from-transparent to-black"></div>
53+
<div className="border-border bg-primary shadow-shadow relative mx-6 mt-6 rounded-md border-2 p-6">
6354
<ConnectedFavoriteButton
6455
type="artist"
6556
source={{ provider: providerId, id: artistId }}
6657
data={{ name: artist.name, artwork: artist.artwork }}
67-
className="absolute top-4 right-4 z-10"
58+
className="bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
6859
data-testid="artist-favorite-button"
6960
/>
70-
<>
71-
{cover && (
72-
<div
73-
style={{ backgroundImage: `url(${cover.url})` }}
74-
className="h-100 w-full bg-cover bg-center"
75-
></div>
76-
)}
77-
<div className="absolute bottom-0 left-0 flex flex-row items-center gap-8 p-8">
78-
{avatar && (
79-
<img
80-
className="border-border bottom-0 h-30 w-30 rounded-full border-2 select-none"
81-
src={avatar.url}
82-
alt={`${artist.name} avatar`}
83-
/>
84-
)}
85-
<h1 className="flex cursor-default flex-col gap-2 text-6xl text-white select-none">
86-
{artist.name}
87-
{!isEmpty(artist.tags) && (
88-
<div className="flex flex-wrap gap-2">
89-
{artist.tags?.map((tag) => (
90-
<span
91-
key={tag}
92-
className="bg-primary rounded-md px-2 py-1 font-sans text-sm"
93-
>
94-
{tag}
95-
</span>
96-
))}
97-
</div>
61+
<div className="flex gap-6">
62+
<div className="flex flex-1 flex-col gap-4">
63+
<div className="flex items-center gap-5">
64+
{avatar && (
65+
<img
66+
className="border-border shadow-shadow h-24 w-24 rounded-full border-2 object-cover"
67+
src={avatar.url}
68+
alt={`${artist.name} avatar`}
69+
/>
9870
)}
99-
</h1>
100-
{artist.onTour ? (
101-
<div>{t('onTour')}</div>
102-
) : (
103-
<div className="bg-primary py-1d absolute top-0 right-0 flex items-center justify-center rounded-md px-2 text-white">
104-
{t('notOnTour')}
71+
<div className="flex flex-col gap-1">
72+
<h1 className="font-heading text-5xl font-extrabold tracking-tight">
73+
{artist.name}
74+
</h1>
75+
{artist.disambiguation && (
76+
<span className="text-foreground-secondary text-sm">
77+
{artist.disambiguation}
78+
</span>
79+
)}
80+
</div>
81+
</div>
82+
{!isEmpty(artist.tags) && (
83+
<div className="flex flex-wrap gap-2">
84+
{artist.tags?.map((tag) => (
85+
<span
86+
key={tag}
87+
className="border-border bg-background rounded-md border px-2 py-0.5 text-sm font-bold"
88+
>
89+
{tag}
90+
</span>
91+
))}
10592
</div>
10693
)}
94+
{artist.onTour && (
95+
<span className="bg-accent-green border-border inline-flex w-fit rounded-md border px-2 py-0.5 text-sm font-bold">
96+
{t('onTour')}
97+
</span>
98+
)}
99+
{artist.bio && (
100+
<p className="text-foreground-secondary line-clamp-3 text-sm leading-relaxed">
101+
{artist.bio}
102+
</p>
103+
)}
107104
</div>
108-
</>
105+
{cover && (
106+
<div className="w-72 shrink-0 self-stretch">
107+
<img
108+
className="border-border shadow-shadow h-full w-full rounded-md border-2 object-cover"
109+
src={cover.url}
110+
alt={`${artist.name} cover`}
111+
/>
112+
</div>
113+
)}
114+
</div>
109115
</div>
110116
);
111117
};

‎packages/player/src/views/Artist/components/ArtistSocialHeader.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,7 @@ import { useTranslation } from '@nuclearplayer/i18n';
1212
import { pickArtwork } from '@nuclearplayer/model';
1313
import { Loader } from '@nuclearplayer/ui';
1414

15+
import { ConnectedFavoriteButton } from '../../../components/ConnectedFavoriteButton';
1516
import { useArtistSocialStats } from '../hooks/useArtistSocialStats';
1617

1718
const AVATAR_SIZE_PX = 300;
@@ -108,9 +109,16 @@ export const ArtistSocialHeader: FC<ArtistSocialHeaderProps> = ({
108109

109110
return (
110111
<div
111-
className="border-border bg-primary shadow-shadow mx-6 mt-6 rounded-md border-2 p-6"
112+
className="border-border bg-primary shadow-shadow relative mx-6 mt-6 rounded-md border-2 p-6"
112113
data-testid="artist-social-header"
113114
>
115+
<ConnectedFavoriteButton
116+
type="artist"
117+
source={{ provider: providerId, id: artistId }}
118+
data={{ name: stats.name, artwork: stats.artwork }}
119+
className="bg-background border-border absolute top-4 right-4 z-10 rounded-md border-2"
120+
data-testid="artist-favorite-button"
121+
/>
114122
<div className="flex items-center gap-5">
115123
{avatar && (
116124
<img

‎packages/player/src/views/Themes/__snapshots__/Themes.test.tsx.snap‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -706,6 +706,41 @@ exports[`Themes view > (Snapshot) renders the themes view 1`] = `
706706
/>
707707
</div>
708708
</button>
709+
<button
710+
class="cursor-pointer items-center disabled:cursor-not-allowed disabled:opacity-50 text-foreground h-auto bg-background-secondary border-border shadow-shadow hover:translate-x-shadow-x hover:translate-y-shadow-y flex flex-col justify-between gap-2 rounded-md border-2 px-4 py-2 transition hover:shadow-none"
711+
data-headlessui-state=""
712+
type="button"
713+
>
714+
<span
715+
class="text-foreground text-left text-base font-bold"
716+
>
717+
Arctic Moss
718+
</span>
719+
<div
720+
class="block"
721+
>
722+
<span
723+
aria-hidden="true"
724+
class="ring-border inline-block size-5 rounded-full ring-2"
725+
style="background-color: oklch(0.7 0.12 175);"
726+
/>
727+
<span
728+
aria-hidden="true"
729+
class="ring-border inline-block size-5 rounded-full ring-2"
730+
style="background-color: oklch(0.97 0.008 200);"
731+
/>
732+
<span
733+
aria-hidden="true"
734+
class="ring-border inline-block size-5 rounded-full ring-2"
735+
style="background-color: oklch(0.7 0.12 175);"
736+
/>
737+
<span
738+
aria-hidden="true"
739+
class="ring-border inline-block size-5 rounded-full ring-2"
740+
style="background-color: oklch(0.22 0.015 200);"
741+
/>
742+
</div>
743+
</button>
709744
</div>
710745
</div>
711746
</section>

0 commit comments

Comments
 (0)