Claudio Ortolina
300 lines
11 KiB
Plaintext
300 lines
11 KiB
Plaintext
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
<div class="mt-4 px-4 sm:px-6 lg:px-8">
|
|
<header class="mt-1 gap-1">
|
|
<div class="flex items-center justify-between">
|
|
<h1 class="font-semibold text-2xl leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
{@artist.name}
|
|
<.country_flag country={@country} />
|
|
</h1>
|
|
|
|
<div class="flex items-center">
|
|
<button
|
|
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
|
phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
|
|
>
|
|
<span class="sr-only">{gettext("Open Notes")}</span>
|
|
<.icon
|
|
name="hero-pencil-square"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
|
|
<:toggle>
|
|
<span class="sr-only">{gettext("Actions")}</span>
|
|
<.icon
|
|
name="hero-ellipsis-vertical"
|
|
class="-mt-1 h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</:toggle>
|
|
<.focus_wrap id={"actions-#{@artist.musicbrainz_id}-focus-wrap"}>
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-edit"}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}/edit"}
|
|
>
|
|
<.icon
|
|
name="hero-pencil-square"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Edit")}
|
|
</.dropdown_link>
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-refresh-image"}
|
|
phx-click={JS.push("refresh_artist_image", value: %{id: @artist.musicbrainz_id})}
|
|
>
|
|
<.icon
|
|
name="hero-photo"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-bounce"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Refresh image")}
|
|
</.dropdown_link>
|
|
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-refresh-artist-info"}
|
|
phx-click={JS.push("refresh_artist_info", value: %{id: @artist.musicbrainz_id})}
|
|
>
|
|
<.icon
|
|
name="hero-arrow-path"
|
|
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Refresh info")}
|
|
</.dropdown_link>
|
|
</.focus_wrap>
|
|
</.dropdown>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="mt-4 flex items-center justify-between">
|
|
<.async_result :let={lastfm_artist_info} assign={@lastfm_artist_info}>
|
|
<:loading>
|
|
<span class="sr-only">{gettext("Loading play count")}</span>
|
|
<.loading />
|
|
</: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>
|
|
<.on_tour_link lastfm_artist_info={lastfm_artist_info} />
|
|
<.play_count play_count={lastfm_artist_info.play_count} />
|
|
</.async_result>
|
|
<.button variant="solid" patch={~p"/artists/#{@artist.musicbrainz_id}/import"}>
|
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
{gettext("Add more")}
|
|
</.button>
|
|
</div>
|
|
</header>
|
|
|
|
<div class="mt-4 grid md:grid-cols-10 md:gap-4">
|
|
<div class="md:col-span-3 mt-4 order-2 md:order-1">
|
|
<h2 class="font-semibold text-base sm:text-lg leading-5 text-zinc-700 dark:text-zinc-300">
|
|
{gettext("Meta")}
|
|
</h2>
|
|
<.artist_image
|
|
class="w-full rounded-md shadow-sm mt-4"
|
|
artist={@artist}
|
|
image_hash={@artist_info.image_data_hash}
|
|
/>
|
|
<dl>
|
|
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
|
|
{gettext("MusicBrainz ID")}
|
|
</dt>
|
|
<dd class="mt-1 text-xs md:text-sm flex justify-between leading-6 text-zinc-700 dark:text-zinc-300">
|
|
<a href={MusicBrainz.Artist.url(@artist.musicbrainz_id)}>
|
|
<code class="overflow-hidden text-clip" id={"mb-#{@artist.musicbrainz_id}"}>
|
|
{@artist.musicbrainz_id}
|
|
</code>
|
|
</a>
|
|
<button phx-click={
|
|
JS.dispatch("music_library:clipcopy", to: "#mb-" <> @artist.musicbrainz_id)
|
|
|> JS.transition("animate-shake")
|
|
}>
|
|
<span class="sr-only">{gettext("Copy MusicBrainz ID to clipboard")}</span>
|
|
<.icon
|
|
name="hero-clipboard-document"
|
|
class="-mt-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</button>
|
|
</dd>
|
|
</dl>
|
|
<.async_result :let={lastfm_artist_info} assign={@lastfm_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>
|
|
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
|
|
{gettext("Biography")}
|
|
</dt>
|
|
<dd class="text-zinc-700 dark:text-zinc-300">
|
|
{remove_read_more_link(lastfm_artist_info.summary)}
|
|
<.link
|
|
class="block mt-2 text-sm font-medium text-zinc-900 dark:text-zinc-400"
|
|
phx-click={Fluxon.open_dialog("bio")}
|
|
>
|
|
<.icon
|
|
name="hero-arrow-right-end-on-rectangle"
|
|
class="-mt-1 mr-1 h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
{gettext("Read more")}
|
|
</.link>
|
|
</dd>
|
|
<.sheet id="bio" class="max-w-2xl text-zinc-700 dark:text-zinc-300" placement="left">
|
|
{render_bio(lastfm_artist_info.bio)}
|
|
</.sheet>
|
|
</.async_result>
|
|
<dt
|
|
:if={@external_links != []}
|
|
class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
|
|
>
|
|
{gettext("External links")}
|
|
</dt>
|
|
<dd class="mt-4 space-y-2">
|
|
<.button
|
|
:for={external_link <- @external_links}
|
|
href={external_link.url}
|
|
target="_blank"
|
|
rel="noopener noreferrer"
|
|
variant="ghost"
|
|
size="sm"
|
|
class="ml-2 first:ml-0"
|
|
>
|
|
<img
|
|
class="mr-2"
|
|
src={MusicLibrary.Artists.favicon_url(external_link)}
|
|
alt={external_link.name}
|
|
loading="lazy"
|
|
/>
|
|
<span class="text-sm font-medium text-zinc-900 dark:text-white">
|
|
{external_link.name}
|
|
</span>
|
|
</.button>
|
|
</dd>
|
|
</div>
|
|
<div class="md:col-span-7 md:order-1">
|
|
<.record_grid
|
|
:if={@collection_records_count > 0}
|
|
title={gettext("Collection")}
|
|
id="collection"
|
|
records={@streams.collection_records}
|
|
records_count={@collection_records_count}
|
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
record_edit_path={fn record -> ~p"/collection/#{record}/show/edit" end}
|
|
/>
|
|
<.separator :if={@wishlist_records_count > 0} class="mt-8 mb-8" />
|
|
<.record_grid
|
|
:if={@wishlist_records_count > 0}
|
|
title={gettext("Wishlist")}
|
|
id="wishlist"
|
|
records={@streams.wishlist_records}
|
|
records_count={@wishlist_records_count}
|
|
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
|
record_edit_path={fn record -> ~p"/wishlist/#{record}/show/edit" end}
|
|
/>
|
|
|
|
<.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>
|
|
<.separator class="mt-8 mb-8" />
|
|
<.artist_grid title={gettext("Similar artists")} artists={similar_artists} />
|
|
</.async_result>
|
|
</div>
|
|
</div>
|
|
|
|
<.json_viewer
|
|
:if={@artist_info.musicbrainz_data}
|
|
title={gettext("MusicBrainz data")}
|
|
data={@artist_info.musicbrainz_data}
|
|
/>
|
|
|
|
<.json_viewer
|
|
:if={@artist_info.discogs_data}
|
|
title={gettext("Discogs data")}
|
|
data={@artist_info.discogs_data}
|
|
/>
|
|
</div>
|
|
|
|
<.structured_modal
|
|
:if={@live_action == :import}
|
|
id="record-modal"
|
|
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
|
>
|
|
<.live_component
|
|
module={MusicLibraryWeb.Components.AddRecord}
|
|
id={:search}
|
|
title={@page_title}
|
|
action={@live_action}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
|
initial_query={"arid:#{@artist.musicbrainz_id}"}
|
|
icon_name="hero-plus"
|
|
/>
|
|
</.structured_modal>
|
|
|
|
<.live_component
|
|
id="artist-notes"
|
|
sheet_id="artist-notes-sheet"
|
|
module={MusicLibraryWeb.Components.Notes}
|
|
entity={:artist}
|
|
musicbrainz_id={@artist.musicbrainz_id}
|
|
/>
|
|
|
|
<.structured_modal
|
|
:if={@live_action == :edit}
|
|
id="artist-info-modal"
|
|
on_close={JS.patch(~p"/artists/#{@artist.musicbrainz_id}")}
|
|
>
|
|
<.live_component
|
|
module={MusicLibraryWeb.ArtistLive.Form}
|
|
id={@artist_info.id}
|
|
action={@live_action}
|
|
artist_info={@artist_info}
|
|
artist={@artist}
|
|
patch={~p"/artists/#{@artist.musicbrainz_id}"}
|
|
/>
|
|
</.structured_modal>
|
|
</Layouts.app>
|