Claudio Ortolina
123 lines
4.2 KiB
Plaintext
123 lines
4.2 KiB
Plaintext
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
|
<header class="flex items-center mt-1 gap-1">
|
|
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
{@artist.name}
|
|
</h1>
|
|
<.async_result :let={artist_info} assign={@artist_info}>
|
|
<:loading>
|
|
<div class="ml-2 text-zinc-700 dark:text-zinc-300">
|
|
<span class="sr-only">{gettext("Loading play count")}</span>
|
|
<.icon
|
|
name="hero-arrow-path"
|
|
class="-mt-1 h-5 w-5 animate-spin"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</div>
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 ml-2 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading play count")}
|
|
</div>
|
|
</:failed>
|
|
<.round_badge :if={artist_info.on_tour} text={gettext("On Tour")} />
|
|
<span
|
|
:if={artist_info.play_count > 0}
|
|
class="ml-2 text-sm font-normal text-zinc-700 dark:text-zinc-300 grow text-right"
|
|
>
|
|
{ngettext("1 scrobble", "%{count} scrobbles", artist_info.play_count)}
|
|
</span>
|
|
</.async_result>
|
|
</header>
|
|
|
|
<div class="mt-4 md:grid md:grid-cols-5 md:gap-2">
|
|
<div class="col-span-1 mt-4">
|
|
<.async_result :let={artist_info} assign={@artist_info}>
|
|
<:loading>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
{gettext("Loading biography")}
|
|
</div>
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading biography")}
|
|
</div>
|
|
</:failed>
|
|
<details
|
|
:if={artist_info.bio !== ""}
|
|
class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
<summary class="text-sm mb-4">{gettext("Biography")}</summary>
|
|
{render_bio(@artist_info.result.summary)}
|
|
</details>
|
|
</.async_result>
|
|
|
|
<.async_result :let={similar_artists} assign={@similar_artists}>
|
|
<:loading>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
{gettext("Loading similar artists")}
|
|
</div>
|
|
</:loading>
|
|
<:failed :let={_failure}>
|
|
<div class="mt-4 text-sm leading-5 text-zinc-500 dark:text-zinc-400">
|
|
<.icon
|
|
name="hero-exclamation-triangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Error loading similar artists")}
|
|
</div>
|
|
</:failed>
|
|
<details
|
|
:if={similar_artists !== []}
|
|
class="text-sm leading-5 text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
<summary class="text-sm mb-4">{gettext("Similar artists")}</summary>
|
|
<ul>
|
|
<li :for={artist <- similar_artists}>
|
|
<.link
|
|
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
patch={~p"/artists/#{artist.musicbrainz_id}"}
|
|
>
|
|
{artist.name}
|
|
</.link>
|
|
</li>
|
|
</ul>
|
|
</details>
|
|
</.async_result>
|
|
</div>
|
|
<div class="col-span-4">
|
|
<.record_grid
|
|
:if={@collection_records_count > 0}
|
|
title={gettext("Collection")}
|
|
id="collection"
|
|
records={@streams.collection_records}
|
|
records_count={@collection_records_count}
|
|
record_path={fn record -> ~p"/collection/#{record}" end}
|
|
/>
|
|
|
|
<.record_grid
|
|
:if={@wishlist_records_count > 0}
|
|
title={gettext("Wishlist")}
|
|
id="wishlist"
|
|
records={@streams.wishlist_records}
|
|
records_count={@wishlist_records_count}
|
|
record_path={fn record -> ~p"/wishlist/#{record}" end}
|
|
/>
|
|
</div>
|
|
</div>
|
|
</div>
|