Claudio Ortolina
350 lines
13 KiB
Plaintext
350 lines
13 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_group>
|
|
<.button
|
|
variant="soft"
|
|
phx-click={MusicLibraryWeb.Components.Notes.open("artist-notes-sheet")}
|
|
>
|
|
<span class="sr-only">{gettext("Open Notes")}</span>
|
|
<.icon
|
|
name="hero-pencil"
|
|
class="h-5 w-5"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</.button>
|
|
<.dropdown id={"actions-#{@artist.musicbrainz_id}"} placement="bottom-end">
|
|
<:toggle>
|
|
<.button variant="soft">
|
|
<span class="sr-only">{gettext("Actions")}</span>
|
|
<.icon
|
|
name="hero-ellipsis-vertical"
|
|
class="h-5 w-5 text-zinc-500 dark:text-zinc-400 cursor-pointer"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</.button>
|
|
</: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>
|
|
<.dropdown_link
|
|
id={"actions-#{@artist.musicbrainz_id}-refresh-wikipedia"}
|
|
phx-click={
|
|
JS.push("refresh_wikipedia_data", 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 Wikipedia")}
|
|
</.dropdown_link>
|
|
</.focus_wrap>
|
|
</.dropdown>
|
|
</.button_group>
|
|
</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>
|
|
</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 cursor-pointer"
|
|
artist={@artist}
|
|
image_hash={@artist_info.image_data_hash}
|
|
phx-click={Fluxon.open_dialog("artist-image-modal")}
|
|
/>
|
|
<.modal
|
|
id="artist-image-modal"
|
|
class="mx-auto sm:min-w-2xl max-w-sm md:max-w-3xl lg:max-w-5xl mt-8"
|
|
placement="center"
|
|
open={false}
|
|
>
|
|
<.artist_image
|
|
class="w-full rounded-md shadow-sm mt-8"
|
|
artist={@artist}
|
|
image_hash={@artist_info.image_data_hash}
|
|
/>
|
|
</.modal>
|
|
<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>
|
|
<.copy_to_clipboard
|
|
target_id={"mb-#{@artist.musicbrainz_id}"}
|
|
label={gettext("Copy MusicBrainz ID to clipboard")}
|
|
/>
|
|
</dd>
|
|
</dl>
|
|
<%= if @biography do %>
|
|
<dt class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400">
|
|
{gettext("Biography")}
|
|
<.badge variant="soft" class="ml-1">{@biography.source}</.badge>
|
|
</dt>
|
|
<dd class="text-zinc-700 dark:text-zinc-300">
|
|
<p
|
|
:if={@biography.description}
|
|
class="mt-2 text-sm italic text-zinc-500 dark:text-zinc-400"
|
|
>
|
|
{@biography.description}
|
|
</p>
|
|
<p class="mt-2 text-sm/7">{@biography.summary_html}</p>
|
|
<.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"
|
|
>
|
|
<div class="prose prose-sm dark:prose-invert">
|
|
{Phoenix.HTML.raw(@biography.bio_html)}
|
|
</div>
|
|
<a
|
|
:if={@biography.url}
|
|
href={@biography.url}
|
|
target="_blank"
|
|
class="mt-4 block text-sm font-medium text-zinc-900 dark:text-zinc-400 hover:text-zinc-500"
|
|
>
|
|
{gettext("Read full article on Wikipedia")}
|
|
<.icon
|
|
name="hero-arrow-top-right-on-square"
|
|
class="-mt-1 ml-1 h-4 w-4"
|
|
aria-hidden="true"
|
|
data-slot="icon"
|
|
/>
|
|
</a>
|
|
</.sheet>
|
|
<% else %>
|
|
<.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
|
|
:if={lastfm_artist_info.bio not in [nil, ""]}
|
|
class="mt-4 text-sm font-medium leading-6 text-zinc-900 dark:text-zinc-400"
|
|
>
|
|
{gettext("Biography")}
|
|
</dt>
|
|
<dd
|
|
:if={lastfm_artist_info.bio not in [nil, ""]}
|
|
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("lastfm-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
|
|
:if={lastfm_artist_info.bio not in [nil, ""]}
|
|
id="lastfm-bio"
|
|
class="max-w-2xl text-zinc-700 dark:text-zinc-300"
|
|
placement="left"
|
|
>
|
|
{render_bio(lastfm_artist_info.bio)}
|
|
</.sheet>
|
|
</.async_result>
|
|
<% end %>
|
|
<.external_links external_links={@external_links} />
|
|
</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={@collection_records_count > 0 && @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}
|
|
/>
|
|
|
|
<.json_viewer
|
|
:if={@artist_info.wikipedia_data != %{}}
|
|
title={gettext("Wikipedia data")}
|
|
data={@artist_info.wikipedia_data}
|
|
/>
|
|
</div>
|
|
|
|
<.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>
|