Inline templates inside LV modules
This commit is contained in:
Claudio Ortolina
@@ -82,6 +82,384 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def render(assigns) do
|
||||
~H"""
|
||||
<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>
|
||||
<.button
|
||||
variant="soft"
|
||||
phx-click={MusicLibraryWeb.Components.Chat.open("artist-chat-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Chat about artist")}</span>
|
||||
<.icon
|
||||
name="hero-chat-bubble-left-right"
|
||||
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}
|
||||
/>
|
||||
|
||||
<.live_component
|
||||
id="artist-chat"
|
||||
sheet_id="artist-chat-sheet"
|
||||
module={MusicLibraryWeb.Components.Chat}
|
||||
title={@artist.name}
|
||||
chat_module={MusicLibrary.ArtistChat}
|
||||
chat_context={{@artist, @artist_info}}
|
||||
placeholder={gettext("Ask about this artist...")}
|
||||
empty_prompt={gettext("Ask anything about this artist")}
|
||||
/>
|
||||
|
||||
<.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>
|
||||
"""
|
||||
end
|
||||
|
||||
@impl true
|
||||
def mount(_params, _session, socket) do
|
||||
{:ok, socket}
|
||||
|
||||
@@ -1,372 +0,0 @@
|
||||
<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>
|
||||
<.button
|
||||
variant="soft"
|
||||
phx-click={MusicLibraryWeb.Components.Chat.open("artist-chat-sheet")}
|
||||
>
|
||||
<span class="sr-only">{gettext("Chat about artist")}</span>
|
||||
<.icon
|
||||
name="hero-chat-bubble-left-right"
|
||||
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}
|
||||
/>
|
||||
|
||||
<.live_component
|
||||
id="artist-chat"
|
||||
sheet_id="artist-chat-sheet"
|
||||
module={MusicLibraryWeb.Components.Chat}
|
||||
title={@artist.name}
|
||||
chat_module={MusicLibrary.ArtistChat}
|
||||
chat_context={{@artist, @artist_info}}
|
||||
placeholder={gettext("Ask about this artist...")}
|
||||
empty_prompt={gettext("Ask anything about this artist")}
|
||||
/>
|
||||
|
||||
<.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>
|
||||
Reference in New Issue
Block a user