Inline templates inside LV modules
This commit is contained in:
Claudio Ortolina
@@ -82,6 +82,384 @@ defmodule MusicLibraryWeb.ArtistLive.Show do
|
|||||||
"""
|
"""
|
||||||
end
|
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
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok, socket}
|
{: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>
|
|
||||||
@@ -17,6 +17,176 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
|
|||||||
order: :purchase
|
order: :purchase
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<header class="gap-6 mb-2">
|
||||||
|
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||||
|
<.search_form query={@record_list_params.query} />
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
patch={~p"/collection/import"}
|
||||||
|
>
|
||||||
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Add")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
patch={~p"/collection/scan"}
|
||||||
|
>
|
||||||
|
<.barcode_icon class="icon fill-current" />
|
||||||
|
{gettext("Scan")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex items-end justify-between gap-6 mt-8">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :purchase)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-banknotes-solid"
|
||||||
|
class="icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :alphabetical)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :release)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
phx-click="set_display"
|
||||||
|
phx-value-mode="grid"
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-squares-2x2"
|
||||||
|
class="icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
<span class="sr-only sm:not-sr-only">
|
||||||
|
{gettext("Grid")}
|
||||||
|
</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
phx-click="set_display"
|
||||||
|
phx-value-mode="list"
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">
|
||||||
|
{gettext("List")}
|
||||||
|
</span>
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_grid
|
||||||
|
:if={@display == :grid}
|
||||||
|
id="collection"
|
||||||
|
records={@streams.records}
|
||||||
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||||
|
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
||||||
|
display_artist_names
|
||||||
|
density={:high}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.record_list
|
||||||
|
:if={@display == :list}
|
||||||
|
records={@streams.records}
|
||||||
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||||
|
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(back_path(@record_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.RecordForm}
|
||||||
|
id={@record.id}
|
||||||
|
action={@live_action}
|
||||||
|
show_purchased_at={true}
|
||||||
|
record={@record}
|
||||||
|
patch={back_path(@record_list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :import}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(back_path(@record_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.AddRecord}
|
||||||
|
id={:search}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
record={@record}
|
||||||
|
patch={back_path(@record_list_params)}
|
||||||
|
initial_query=""
|
||||||
|
icon_name="hero-plus"
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :barcode_scan}
|
||||||
|
id="barcode-scanner-modal"
|
||||||
|
on_close={JS.patch(back_path(@record_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.BarcodeScanner}
|
||||||
|
id={:barcode_scanner}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
patch={back_path(@record_list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok,
|
{:ok,
|
||||||
|
|||||||
@@ -1,164 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<header class="gap-6 mb-2">
|
|
||||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
|
||||||
<.search_form query={@record_list_params.query} />
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
patch={~p"/collection/import"}
|
|
||||||
>
|
|
||||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Add")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
patch={~p"/collection/scan"}
|
|
||||||
>
|
|
||||||
<.barcode_icon class="icon fill-current" />
|
|
||||||
{gettext("Scan")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="flex items-end justify-between gap-6 mt-8">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :purchase)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :purchase && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-banknotes-solid"
|
|
||||||
class="icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("Purchase")}</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :alphabetical)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :release)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
phx-click="set_display"
|
|
||||||
phx-value-mode="grid"
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-squares-2x2"
|
|
||||||
class="icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
<span class="sr-only sm:not-sr-only">
|
|
||||||
{gettext("Grid")}
|
|
||||||
</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
phx-click="set_display"
|
|
||||||
phx-value-mode="list"
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">
|
|
||||||
{gettext("List")}
|
|
||||||
</span>
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_grid
|
|
||||||
:if={@display == :grid}
|
|
||||||
id="collection"
|
|
||||||
records={@streams.records}
|
|
||||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
||||||
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
|
||||||
display_artist_names
|
|
||||||
density={:high}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.record_list
|
|
||||||
:if={@display == :list}
|
|
||||||
records={@streams.records}
|
|
||||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
||||||
record_edit_path={fn record -> ~p"/collection/#{record}/edit" end}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(back_path(@record_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.RecordForm}
|
|
||||||
id={@record.id}
|
|
||||||
action={@live_action}
|
|
||||||
show_purchased_at={true}
|
|
||||||
record={@record}
|
|
||||||
patch={back_path(@record_list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :import}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(back_path(@record_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.AddRecord}
|
|
||||||
id={:search}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
record={@record}
|
|
||||||
patch={back_path(@record_list_params)}
|
|
||||||
initial_query=""
|
|
||||||
icon_name="hero-plus"
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :barcode_scan}
|
|
||||||
id="barcode-scanner-modal"
|
|
||||||
on_close={JS.patch(back_path(@record_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.BarcodeScanner}
|
|
||||||
id={:barcode_scanner}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
patch={back_path(@record_list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -20,6 +20,379 @@ defmodule MusicLibraryWeb.CollectionLive.Show do
|
|||||||
alias MusicLibrary.RecordSets.RecordSet
|
alias MusicLibrary.RecordSets.RecordSet
|
||||||
alias Phoenix.LiveView.JS
|
alias Phoenix.LiveView.JS
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||||
|
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
||||||
|
<.record_cover
|
||||||
|
record={@record}
|
||||||
|
class="w-full rounded-lg drop-shadow-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grow">
|
||||||
|
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
||||||
|
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
||||||
|
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
|
||||||
|
</h1>
|
||||||
|
<div class="min-w-12">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
variant="soft"
|
||||||
|
phx-click={MusicLibraryWeb.Components.Notes.open("record-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("record-chat-sheet")}
|
||||||
|
>
|
||||||
|
<span class="sr-only">{gettext("Chat about album")}</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-chat-bubble-left-right"
|
||||||
|
class="h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
:if={@record.selected_release_id}
|
||||||
|
variant="soft"
|
||||||
|
phx-click={MusicLibraryWeb.Components.Release.open("release-with-tracks-sheet")}
|
||||||
|
>
|
||||||
|
<span class="sr-only">{gettext("Show Tracks")}</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-numbered-list"
|
||||||
|
class="h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</.button>
|
||||||
|
<.dropdown id={"actions-#{@record.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-#{@record.id}-focus-wrap"}>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-edit"}
|
||||||
|
patch={~p"/collection/#{@record}/show/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-#{@record.id}-refresh-cover"}
|
||||||
|
phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||||
|
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-populate-genres"}
|
||||||
|
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-sparkles"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Populate genres")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-regenerate-embeddings"}
|
||||||
|
phx-click={JS.push("regenerate_embeddings", value: %{id: @record.id})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-sparkles"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Regenerate embeddings")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-extract-colors-fast"}
|
||||||
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-paint-brush"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Extract colors (fast)")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-extract-colors-slow"}
|
||||||
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-paint-brush"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Extract colors (slow)")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_separator />
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-delete"}
|
||||||
|
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-trash"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_link>
|
||||||
|
</.focus_wrap>
|
||||||
|
</.dropdown>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{@record.title}
|
||||||
|
</h2>
|
||||||
|
<p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
<.record_colors record={@record} />
|
||||||
|
<span class="ml-1">
|
||||||
|
{Records.Record.format_release_date(@record.release_date)} · {format_label(
|
||||||
|
@record.format
|
||||||
|
)} · {type_label(@record.type)}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="mt-4 md:mt-8">
|
||||||
|
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||||
|
<.dl_row label={gettext("ID")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<code id={"record-#{@record.id}"}>{@record.id}</code>
|
||||||
|
<.copy_to_clipboard
|
||||||
|
target_id={"record-#{@record.id}"}
|
||||||
|
label={gettext("Copy record ID to clipboard")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Genres")}>
|
||||||
|
<.link
|
||||||
|
:for={genre <- @record.genres}
|
||||||
|
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
|
||||||
|
>
|
||||||
|
{genre}
|
||||||
|
</.link>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("MusicBrainz ID")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
||||||
|
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
||||||
|
</a>
|
||||||
|
<.copy_to_clipboard
|
||||||
|
target_id={"mb-#{@record.musicbrainz_id}"}
|
||||||
|
label={gettext("Copy MusicBrainz ID to clipboard")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Purchased on")}>
|
||||||
|
{Records.Record.format_as_date(@record.purchased_at)}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Published releases")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
{Records.Record.release_count(@record)}
|
||||||
|
<.release_list record={@record} />
|
||||||
|
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
||||||
|
<span class="sr-only">
|
||||||
|
{gettext("Show releases included in the record")}
|
||||||
|
</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-magnifying-glass-plus"
|
||||||
|
class="-mt-1 h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Collected release")}>
|
||||||
|
<div class="flex justify-between space-x-2">
|
||||||
|
<span
|
||||||
|
:if={!@record.selected_release_id}
|
||||||
|
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||||
|
>
|
||||||
|
{gettext("No release selected")}
|
||||||
|
</span>
|
||||||
|
<.release_summary
|
||||||
|
:if={@record.selected_release_id}
|
||||||
|
release={Records.Record.selected_release(@record)}
|
||||||
|
/>
|
||||||
|
<span
|
||||||
|
:if={@record.selected_release_id}
|
||||||
|
id={"record-selected-release-" <> @record.id}
|
||||||
|
class="hidden"
|
||||||
|
>
|
||||||
|
{@record.selected_release_id}
|
||||||
|
</span>
|
||||||
|
<.copy_to_clipboard
|
||||||
|
:if={@record.selected_release_id}
|
||||||
|
target_id={"record-selected-release-" <> @record.id}
|
||||||
|
label={gettext("Copy record selected release ID to clipboard")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row
|
||||||
|
:if={Records.Record.included_release_groups_count(@record) > 0}
|
||||||
|
label={gettext("Includes")}
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
||||||
|
{included_release_group.artists} - {included_release_group.title}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@record_sets != []} label={gettext("Record sets")}>
|
||||||
|
<ul>
|
||||||
|
<li :for={record_set <- @record_sets} class="flex items-baseline gap-2">
|
||||||
|
<.link
|
||||||
|
navigate={~p"/record-sets/#{record_set}"}
|
||||||
|
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 hover:underline"
|
||||||
|
>
|
||||||
|
{record_set.name}
|
||||||
|
</.link>
|
||||||
|
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext(
|
||||||
|
"%{collected}/%{total} collected",
|
||||||
|
RecordSet.count_by_status(record_set)
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Inserted at")}>
|
||||||
|
{Records.Record.format_as_date(@record.inserted_at)}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Updated at")}>
|
||||||
|
{Records.Record.format_as_date(@record.updated_at)}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Last listened at")}>
|
||||||
|
<span :if={@last_listened_track}>
|
||||||
|
{localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
|
||||||
|
</span>
|
||||||
|
<span :if={@play_count == 0}>
|
||||||
|
{gettext("Never")}
|
||||||
|
</span>
|
||||||
|
<span :if={@play_count > 0}>
|
||||||
|
{ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
|
||||||
|
</span>
|
||||||
|
</.dl_row>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.similar_records
|
||||||
|
similar_records={@similar_records}
|
||||||
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||||
|
section={:collection}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
||||||
|
<.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
|
||||||
|
|
||||||
|
<.live_component
|
||||||
|
id="release-with-tracks"
|
||||||
|
sheet_id="release-with-tracks-sheet"
|
||||||
|
module={MusicLibraryWeb.Components.Release}
|
||||||
|
record={@record}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.live_component
|
||||||
|
id="record-notes"
|
||||||
|
sheet_id="record-notes-sheet"
|
||||||
|
module={MusicLibraryWeb.Components.Notes}
|
||||||
|
entity={:record}
|
||||||
|
musicbrainz_id={@record.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.live_component
|
||||||
|
id="record-chat"
|
||||||
|
sheet_id="record-chat-sheet"
|
||||||
|
module={MusicLibraryWeb.Components.Chat}
|
||||||
|
title={@record.title}
|
||||||
|
chat_module={MusicLibrary.RecordChat}
|
||||||
|
chat_context={{@record, @embedding_text}}
|
||||||
|
placeholder={gettext("Ask about this album...")}
|
||||||
|
empty_prompt={gettext("Ask anything about this album")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(~p"/collection/#{@record}")}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.RecordForm}
|
||||||
|
id={@record.id}
|
||||||
|
action={@live_action}
|
||||||
|
show_purchased_at={true}
|
||||||
|
record={@record}
|
||||||
|
patch={~p"/collection/#{@record}"}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(%{"id" => record_id}, _session, socket) do
|
def mount(%{"id" => record_id}, _session, socket) do
|
||||||
if connected?(socket) do
|
if connected?(socket) do
|
||||||
|
|||||||
@@ -1,367 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
|
||||||
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
|
||||||
<.record_cover
|
|
||||||
record={@record}
|
|
||||||
class="w-full rounded-lg drop-shadow-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grow">
|
|
||||||
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
|
||||||
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
|
||||||
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
|
|
||||||
</h1>
|
|
||||||
<div class="min-w-12">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
variant="soft"
|
|
||||||
phx-click={MusicLibraryWeb.Components.Notes.open("record-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("record-chat-sheet")}
|
|
||||||
>
|
|
||||||
<span class="sr-only">{gettext("Chat about album")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-chat-bubble-left-right"
|
|
||||||
class="h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
variant="soft"
|
|
||||||
phx-click={MusicLibraryWeb.Components.Release.open("release-with-tracks-sheet")}
|
|
||||||
>
|
|
||||||
<span class="sr-only">{gettext("Show Tracks")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-numbered-list"
|
|
||||||
class="h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</.button>
|
|
||||||
<.dropdown id={"actions-#{@record.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-#{@record.id}-focus-wrap"}>
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-edit"}
|
|
||||||
patch={~p"/collection/#{@record}/show/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-#{@record.id}-refresh-cover"}
|
|
||||||
phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
|
||||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-populate-genres"}
|
|
||||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-sparkles"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Populate genres")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-regenerate-embeddings"}
|
|
||||||
phx-click={JS.push("regenerate_embeddings", value: %{id: @record.id})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-sparkles"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Regenerate embeddings")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-extract-colors-fast"}
|
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-paint-brush"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Extract colors (fast)")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-extract-colors-slow"}
|
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-paint-brush"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Extract colors (slow)")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_separator />
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-delete"}
|
|
||||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-trash"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_link>
|
|
||||||
</.focus_wrap>
|
|
||||||
</.dropdown>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{@record.title}
|
|
||||||
</h2>
|
|
||||||
<p class="mt-2 flex items-center text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
<.record_colors record={@record} />
|
|
||||||
<span class="ml-1">
|
|
||||||
{Records.Record.format_release_date(@record.release_date)} · {format_label(
|
|
||||||
@record.format
|
|
||||||
)} · {type_label(@record.type)}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="mt-4 md:mt-8">
|
|
||||||
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
|
||||||
<.dl_row label={gettext("ID")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<code id={"record-#{@record.id}"}>{@record.id}</code>
|
|
||||||
<.copy_to_clipboard
|
|
||||||
target_id={"record-#{@record.id}"}
|
|
||||||
label={gettext("Copy record ID to clipboard")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Genres")}>
|
|
||||||
<.link
|
|
||||||
:for={genre <- @record.genres}
|
|
||||||
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
patch={~p"/collection?#{%{query: ~s(genre:"#{genre}")}}"}
|
|
||||||
>
|
|
||||||
{genre}
|
|
||||||
</.link>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("MusicBrainz ID")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
|
||||||
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
|
||||||
</a>
|
|
||||||
<.copy_to_clipboard
|
|
||||||
target_id={"mb-#{@record.musicbrainz_id}"}
|
|
||||||
label={gettext("Copy MusicBrainz ID to clipboard")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Purchased on")}>
|
|
||||||
{Records.Record.format_as_date(@record.purchased_at)}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Published releases")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
{Records.Record.release_count(@record)}
|
|
||||||
<.release_list record={@record} />
|
|
||||||
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
|
||||||
<span class="sr-only">
|
|
||||||
{gettext("Show releases included in the record")}
|
|
||||||
</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-magnifying-glass-plus"
|
|
||||||
class="-mt-1 h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Collected release")}>
|
|
||||||
<div class="flex justify-between space-x-2">
|
|
||||||
<span
|
|
||||||
:if={!@record.selected_release_id}
|
|
||||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
|
||||||
>
|
|
||||||
{gettext("No release selected")}
|
|
||||||
</span>
|
|
||||||
<.release_summary
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
release={Records.Record.selected_release(@record)}
|
|
||||||
/>
|
|
||||||
<span
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
id={"record-selected-release-" <> @record.id}
|
|
||||||
class="hidden"
|
|
||||||
>
|
|
||||||
{@record.selected_release_id}
|
|
||||||
</span>
|
|
||||||
<.copy_to_clipboard
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
target_id={"record-selected-release-" <> @record.id}
|
|
||||||
label={gettext("Copy record selected release ID to clipboard")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row
|
|
||||||
:if={Records.Record.included_release_groups_count(@record) > 0}
|
|
||||||
label={gettext("Includes")}
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
|
||||||
{included_release_group.artists} - {included_release_group.title}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@record_sets != []} label={gettext("Record sets")}>
|
|
||||||
<ul>
|
|
||||||
<li :for={record_set <- @record_sets} class="flex items-baseline gap-2">
|
|
||||||
<.link
|
|
||||||
navigate={~p"/record-sets/#{record_set}"}
|
|
||||||
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 hover:underline"
|
|
||||||
>
|
|
||||||
{record_set.name}
|
|
||||||
</.link>
|
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext(
|
|
||||||
"%{collected}/%{total} collected",
|
|
||||||
RecordSet.count_by_status(record_set)
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Inserted at")}>
|
|
||||||
{Records.Record.format_as_date(@record.inserted_at)}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Updated at")}>
|
|
||||||
{Records.Record.format_as_date(@record.updated_at)}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Last listened at")}>
|
|
||||||
<span :if={@last_listened_track}>
|
|
||||||
{localize_scrobbled_at(@last_listened_track.scrobbled_at_uts, @timezone)}
|
|
||||||
</span>
|
|
||||||
<span :if={@play_count == 0}>
|
|
||||||
{gettext("Never")}
|
|
||||||
</span>
|
|
||||||
<span :if={@play_count > 0}>
|
|
||||||
{ngettext("(1 scrobble)", "(%{count} scrobbles)", @play_count)}
|
|
||||||
</span>
|
|
||||||
</.dl_row>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.similar_records
|
|
||||||
similar_records={@similar_records}
|
|
||||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
||||||
section={:collection}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
|
||||||
<.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
|
|
||||||
|
|
||||||
<.live_component
|
|
||||||
id="release-with-tracks"
|
|
||||||
sheet_id="release-with-tracks-sheet"
|
|
||||||
module={MusicLibraryWeb.Components.Release}
|
|
||||||
record={@record}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.live_component
|
|
||||||
id="record-notes"
|
|
||||||
sheet_id="record-notes-sheet"
|
|
||||||
module={MusicLibraryWeb.Components.Notes}
|
|
||||||
entity={:record}
|
|
||||||
musicbrainz_id={@record.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.live_component
|
|
||||||
id="record-chat"
|
|
||||||
sheet_id="record-chat-sheet"
|
|
||||||
module={MusicLibraryWeb.Components.Chat}
|
|
||||||
title={@record.title}
|
|
||||||
chat_module={MusicLibrary.RecordChat}
|
|
||||||
chat_context={{@record, @embedding_text}}
|
|
||||||
placeholder={gettext("Ask about this album...")}
|
|
||||||
empty_prompt={gettext("Ask anything about this album")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(~p"/collection/#{@record}")}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.RecordForm}
|
|
||||||
id={@record.id}
|
|
||||||
action={@live_action}
|
|
||||||
show_purchased_at={true}
|
|
||||||
record={@record}
|
|
||||||
patch={~p"/collection/#{@record}"}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -12,6 +12,142 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
|
|||||||
|
|
||||||
@poll_interval 2_000
|
@poll_interval 2_000
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-2 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Maintenance")}
|
||||||
|
</h1>
|
||||||
|
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
||||||
|
{gettext("Records")}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext(
|
||||||
|
"Run operations on the entire record database. Monitor execution via the Oban dashboard."
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<ul class="mt-4">
|
||||||
|
<li class="space-y-4">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="refresh_records_musicbrainz_data"
|
||||||
|
disabled={@refresh_records_musicbrainz_jobs > 0}
|
||||||
|
data-confirm={
|
||||||
|
gettext(
|
||||||
|
"Are you sure you want to refresh MusicBrainz data for all records? This operation can take a long time to complete."
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.loading :if={@refresh_records_musicbrainz_jobs > 0} class="size-4" />
|
||||||
|
{gettext("Refresh MusicBrainz data")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="generate_record_embeddings"
|
||||||
|
disabled={@generate_record_embeddings_jobs > 0}
|
||||||
|
data-confirm={
|
||||||
|
gettext(
|
||||||
|
"Are you sure you want to regenerate embeddings for all records? This operation can take a long time to complete."
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.loading :if={@generate_record_embeddings_jobs > 0} class="size-4" />
|
||||||
|
{gettext("Regenerate record embeddings")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
||||||
|
{gettext("Artists")}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext(
|
||||||
|
"Run operations on the entire artist database. Monitor execution via the Oban dashboard."
|
||||||
|
)}
|
||||||
|
</p>
|
||||||
|
<ul class="mt-4">
|
||||||
|
<li class="space-y-4">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="refresh_artists_musicbrainz_data"
|
||||||
|
disabled={@refresh_artists_musicbrainz_jobs > 0}
|
||||||
|
data-confirm={
|
||||||
|
gettext(
|
||||||
|
"Are you sure you want to refresh MusicBrainz data for all artists? This operation can take a long time to complete."
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.loading :if={@refresh_artists_musicbrainz_jobs > 0} class="size-4" />
|
||||||
|
{gettext("Refresh MusicBrainz data")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="refresh_artists_discogs_data"
|
||||||
|
disabled={@refresh_artists_discogs_jobs > 0}
|
||||||
|
data-confirm={
|
||||||
|
gettext(
|
||||||
|
"Are you sure you want to refresh Discogs data for all artists? This operation can take a long time to complete."
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.loading :if={@refresh_artists_discogs_jobs > 0} class="size-4" />
|
||||||
|
{gettext("Refresh Discogs data")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="refresh_artists_wikipedia_data"
|
||||||
|
disabled={@refresh_artists_wikipedia_jobs > 0}
|
||||||
|
data-confirm={
|
||||||
|
gettext(
|
||||||
|
"Are you sure you want to refresh Wikipedia data for all artists? This operation can take a long time to complete."
|
||||||
|
)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.loading :if={@refresh_artists_wikipedia_jobs > 0} class="size-4" />
|
||||||
|
{gettext("Refresh Wikipedia data")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
||||||
|
{gettext("Database")}
|
||||||
|
</h3>
|
||||||
|
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext("Run lower-level operations on the database")}
|
||||||
|
</p>
|
||||||
|
<ul class="mt-4">
|
||||||
|
<li class="space-y-4">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="db_vacuum"
|
||||||
|
phx-disable-with={gettext("Running vacuum...")}
|
||||||
|
>
|
||||||
|
{gettext("Vacuum")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
type="button"
|
||||||
|
phx-click="db_optimize"
|
||||||
|
phx-disable-with={gettext("Running optimize...")}
|
||||||
|
>
|
||||||
|
{gettext("Optimize")}
|
||||||
|
</.button>
|
||||||
|
<.button href={~p"/backup"}>
|
||||||
|
{gettext("Backup")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
if connected?(socket) do
|
if connected?(socket) do
|
||||||
Process.send_after(self(), :update_job_counts, @poll_interval)
|
Process.send_after(self(), :update_job_counts, @poll_interval)
|
||||||
@@ -26,6 +162,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
|
|||||||
|> assign_job_counts()}
|
|> assign_job_counts()}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def handle_info(:update_job_counts, socket) do
|
def handle_info(:update_job_counts, socket) do
|
||||||
Process.send_after(self(), :update_job_counts, @poll_interval)
|
Process.send_after(self(), :update_job_counts, @poll_interval)
|
||||||
|
|
||||||
@@ -66,6 +203,7 @@ defmodule MusicLibraryWeb.MaintenanceLive.Index do
|
|||||||
BackgroundRepo.one(query)
|
BackgroundRepo.one(query)
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def handle_event("refresh_records_musicbrainz_data", _params, socket) do
|
def handle_event("refresh_records_musicbrainz_data", _params, socket) do
|
||||||
Records.Batch.refresh_musicbrainz_data()
|
Records.Batch.refresh_musicbrainz_data()
|
||||||
|
|
||||||
|
|||||||
@@ -1,129 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div>
|
|
||||||
<h1 class="mt-2 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Maintenance")}
|
|
||||||
</h1>
|
|
||||||
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
|
||||||
{gettext("Records")}
|
|
||||||
</h3>
|
|
||||||
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext(
|
|
||||||
"Run operations on the entire record database. Monitor execution via the Oban dashboard."
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<ul class="mt-4">
|
|
||||||
<li class="space-y-4">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="refresh_records_musicbrainz_data"
|
|
||||||
disabled={@refresh_records_musicbrainz_jobs > 0}
|
|
||||||
data-confirm={
|
|
||||||
gettext(
|
|
||||||
"Are you sure you want to refresh MusicBrainz data for all records? This operation can take a long time to complete."
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.loading :if={@refresh_records_musicbrainz_jobs > 0} class="size-4" />
|
|
||||||
{gettext("Refresh MusicBrainz data")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="generate_record_embeddings"
|
|
||||||
disabled={@generate_record_embeddings_jobs > 0}
|
|
||||||
data-confirm={
|
|
||||||
gettext(
|
|
||||||
"Are you sure you want to regenerate embeddings for all records? This operation can take a long time to complete."
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.loading :if={@generate_record_embeddings_jobs > 0} class="size-4" />
|
|
||||||
{gettext("Regenerate record embeddings")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
|
||||||
{gettext("Artists")}
|
|
||||||
</h3>
|
|
||||||
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext(
|
|
||||||
"Run operations on the entire artist database. Monitor execution via the Oban dashboard."
|
|
||||||
)}
|
|
||||||
</p>
|
|
||||||
<ul class="mt-4">
|
|
||||||
<li class="space-y-4">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="refresh_artists_musicbrainz_data"
|
|
||||||
disabled={@refresh_artists_musicbrainz_jobs > 0}
|
|
||||||
data-confirm={
|
|
||||||
gettext(
|
|
||||||
"Are you sure you want to refresh MusicBrainz data for all artists? This operation can take a long time to complete."
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.loading :if={@refresh_artists_musicbrainz_jobs > 0} class="size-4" />
|
|
||||||
{gettext("Refresh MusicBrainz data")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="refresh_artists_discogs_data"
|
|
||||||
disabled={@refresh_artists_discogs_jobs > 0}
|
|
||||||
data-confirm={
|
|
||||||
gettext(
|
|
||||||
"Are you sure you want to refresh Discogs data for all artists? This operation can take a long time to complete."
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.loading :if={@refresh_artists_discogs_jobs > 0} class="size-4" />
|
|
||||||
{gettext("Refresh Discogs data")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="refresh_artists_wikipedia_data"
|
|
||||||
disabled={@refresh_artists_wikipedia_jobs > 0}
|
|
||||||
data-confirm={
|
|
||||||
gettext(
|
|
||||||
"Are you sure you want to refresh Wikipedia data for all artists? This operation can take a long time to complete."
|
|
||||||
)
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.loading :if={@refresh_artists_wikipedia_jobs > 0} class="size-4" />
|
|
||||||
{gettext("Refresh Wikipedia data")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
<h3 class="mt-4 text-base font-semibold text-zinc-900 dark:text-white">
|
|
||||||
{gettext("Database")}
|
|
||||||
</h3>
|
|
||||||
<p class="mt-2 max-w-4xl text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext("Run lower-level operations on the database")}
|
|
||||||
</p>
|
|
||||||
<ul class="mt-4">
|
|
||||||
<li class="space-y-4">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="db_vacuum"
|
|
||||||
phx-disable-with={gettext("Running vacuum...")}
|
|
||||||
>
|
|
||||||
{gettext("Vacuum")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
type="button"
|
|
||||||
phx-click="db_optimize"
|
|
||||||
phx-disable-with={gettext("Running optimize...")}
|
|
||||||
>
|
|
||||||
{gettext("Optimize")}
|
|
||||||
</.button>
|
|
||||||
<.button href={~p"/backup"}>
|
|
||||||
{gettext("Backup")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -4,6 +4,120 @@ defmodule MusicLibraryWeb.OnlineStoreTemplateLive.Index do
|
|||||||
alias MusicLibrary.OnlineStoreTemplates
|
alias MusicLibrary.OnlineStoreTemplates
|
||||||
alias MusicLibrary.OnlineStoreTemplates.OnlineStoreTemplate
|
alias MusicLibrary.OnlineStoreTemplates.OnlineStoreTemplate
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<header class="mb-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||||
|
{gettext("Online Store Templates")}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
|
||||||
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Add")}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="mt-6 space-y-4">
|
||||||
|
<ul
|
||||||
|
role="list"
|
||||||
|
class="divide-y divide-gray-200 dark:divide-gray-800"
|
||||||
|
phx-update="stream"
|
||||||
|
id="templates"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
:for={{id, template} <- @streams.templates}
|
||||||
|
id={id}
|
||||||
|
class="flex items-center justify-between py-5"
|
||||||
|
>
|
||||||
|
<div class="min-w-0">
|
||||||
|
<div class="flex items-center gap-x-2">
|
||||||
|
<img
|
||||||
|
src={favicon_url(template.url_template)}
|
||||||
|
alt={template.name}
|
||||||
|
/>
|
||||||
|
<p class="text-sm font-semibold text-gray-900 dark:text-white">
|
||||||
|
{template.name}
|
||||||
|
</p>
|
||||||
|
<.badge :if={template.enabled} color="success">
|
||||||
|
{gettext("Enabled")}
|
||||||
|
</.badge>
|
||||||
|
<.badge :if={!template.enabled} color="warning">
|
||||||
|
{gettext("Disabled")}
|
||||||
|
</.badge>
|
||||||
|
</div>
|
||||||
|
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
<p class="truncate font-mono">{template.url_template}</p>
|
||||||
|
</div>
|
||||||
|
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
||||||
|
{template.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<.dropdown id={"actions-#{template.id}"} placement="bottom-end">
|
||||||
|
<:toggle>
|
||||||
|
<.button variant="ghost">
|
||||||
|
<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>
|
||||||
|
<.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}>
|
||||||
|
{if template.enabled,
|
||||||
|
do: gettext("Disable template"),
|
||||||
|
else: gettext("Enable template")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{template.id}-edit"}
|
||||||
|
patch={~p"/online-store-templates/#{template}/edit"}
|
||||||
|
>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="delete"
|
||||||
|
phx-value-id={template.id}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action in [:new, :edit]}
|
||||||
|
id="template-modal"
|
||||||
|
on_close={JS.patch(~p"/online-store-templates")}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.OnlineStoreTemplateLive.Form}
|
||||||
|
id={@template.id || :new}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
template={@template}
|
||||||
|
patch={~p"/online-store-templates"}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok,
|
{:ok,
|
||||||
|
|||||||
@@ -1,108 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<header class="mb-6">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
|
||||||
{gettext("Online Store Templates")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<.button variant="solid" size="sm" patch={~p"/online-store-templates/new"}>
|
|
||||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Add")}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="mt-6 space-y-4">
|
|
||||||
<ul
|
|
||||||
role="list"
|
|
||||||
class="divide-y divide-gray-200 dark:divide-gray-800"
|
|
||||||
phx-update="stream"
|
|
||||||
id="templates"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
:for={{id, template} <- @streams.templates}
|
|
||||||
id={id}
|
|
||||||
class="flex items-center justify-between py-5"
|
|
||||||
>
|
|
||||||
<div class="min-w-0">
|
|
||||||
<div class="flex items-center gap-x-2">
|
|
||||||
<img
|
|
||||||
src={favicon_url(template.url_template)}
|
|
||||||
alt={template.name}
|
|
||||||
/>
|
|
||||||
<p class="text-sm font-semibold text-gray-900 dark:text-white">
|
|
||||||
{template.name}
|
|
||||||
</p>
|
|
||||||
<.badge :if={template.enabled} color="success">
|
|
||||||
{gettext("Enabled")}
|
|
||||||
</.badge>
|
|
||||||
<.badge :if={!template.enabled} color="warning">
|
|
||||||
{gettext("Disabled")}
|
|
||||||
</.badge>
|
|
||||||
</div>
|
|
||||||
<div class="mt-1 flex items-center gap-x-2 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
<p class="truncate font-mono">{template.url_template}</p>
|
|
||||||
</div>
|
|
||||||
<p :if={template.description} class="mt-1 text-xs text-gray-500 dark:text-gray-400">
|
|
||||||
{template.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<.dropdown id={"actions-#{template.id}"} placement="bottom-end">
|
|
||||||
<:toggle>
|
|
||||||
<.button variant="ghost">
|
|
||||||
<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>
|
|
||||||
<.dropdown_button phx-click="toggle-enabled" phx-value-id={template.id}>
|
|
||||||
{if template.enabled,
|
|
||||||
do: gettext("Disable template"),
|
|
||||||
else: gettext("Enable template")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{template.id}-edit"}
|
|
||||||
patch={~p"/online-store-templates/#{template}/edit"}
|
|
||||||
>
|
|
||||||
{gettext("Edit")}
|
|
||||||
</.dropdown_link>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="delete"
|
|
||||||
phx-value-id={template.id}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action in [:new, :edit]}
|
|
||||||
id="template-modal"
|
|
||||||
on_close={JS.patch(~p"/online-store-templates")}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.OnlineStoreTemplateLive.Form}
|
|
||||||
id={@template.id || :new}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
template={@template}
|
|
||||||
patch={~p"/online-store-templates"}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -16,6 +16,285 @@ defmodule MusicLibraryWeb.RecordSetLive.Index do
|
|||||||
order: :updated_at
|
order: :updated_at
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<header class="mb-6">
|
||||||
|
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||||
|
<.search_form query={@list_params.query} />
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
patch={~p"/record-sets/new"}
|
||||||
|
>
|
||||||
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("New Set")}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex items-end justify-between gap-6 mt-4">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@list_params, :updated_at)}
|
||||||
|
size="sm"
|
||||||
|
class={[@list_params.order == :updated_at && "bg-zinc-100! dark:bg-zinc-700!"]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-clock" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("Updated")}</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@list_params, :alphabetical)}
|
||||||
|
size="sm"
|
||||||
|
class={[@list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6 space-y-6">
|
||||||
|
<ul id="record-sets-list" class="space-y-6">
|
||||||
|
<li
|
||||||
|
:if={@record_sets == []}
|
||||||
|
id="no-record-sets"
|
||||||
|
class="p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<.icon name="hero-rectangle-stack" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
||||||
|
<p class="text-zinc-600 dark:text-zinc-400">
|
||||||
|
{gettext("No record sets yet")}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:for={record_set <- @record_sets}
|
||||||
|
id={"record-set-#{record_set.id}"}
|
||||||
|
class="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4"
|
||||||
|
>
|
||||||
|
<div class="flex items-baseline justify-between mb-3">
|
||||||
|
<div class="grow">
|
||||||
|
<header class="sm:flex items-baseline justify-start">
|
||||||
|
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||||
|
<.link navigate={~p"/record-sets/#{record_set}"} class="hover:underline">
|
||||||
|
{record_set.name}
|
||||||
|
</.link>
|
||||||
|
</h2>
|
||||||
|
<span class="sm:ml-2 text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext("%{collected}/%{total} records", RecordSet.count_by_status(record_set))}
|
||||||
|
</span>
|
||||||
|
</header>
|
||||||
|
<article
|
||||||
|
:if={record_set.description}
|
||||||
|
class="text-sm my-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
|
||||||
|
>
|
||||||
|
{render_description(record_set.description)}
|
||||||
|
</article>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<.dropdown id={"set-actions-#{record_set.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>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"set-actions-#{record_set.id}-edit"}
|
||||||
|
patch={
|
||||||
|
~p"/record-sets/#{record_set}/edit?#{Map.take(@list_params, [:query, :page, :page_size, :order]) |> Enum.filter(fn {_, v} -> v not in ["", nil] end)}"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="delete_set"
|
||||||
|
phx-value-id={record_set.id}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12 gap-3 pb-2"
|
||||||
|
id={"record-set-#{record_set.id}-items"}
|
||||||
|
phx-hook="SortableList"
|
||||||
|
data-set-id={record_set.id}
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:for={item <- record_set.items}
|
||||||
|
data-sortable-item
|
||||||
|
data-record-id={item.record.id}
|
||||||
|
class={[
|
||||||
|
"flex-none group relative",
|
||||||
|
is_nil(item.record.purchased_at) &&
|
||||||
|
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.link
|
||||||
|
:if={item.record.purchased_at}
|
||||||
|
navigate={~p"/collection/#{item.record}"}
|
||||||
|
>
|
||||||
|
<MusicLibraryWeb.RecordComponents.record_cover
|
||||||
|
record={item.record}
|
||||||
|
class="rounded-lg aspect-square object-cover"
|
||||||
|
width={256}
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
<.link
|
||||||
|
:if={!item.record.purchased_at}
|
||||||
|
navigate={~p"/wishlist/#{item.record}"}
|
||||||
|
>
|
||||||
|
<MusicLibraryWeb.RecordComponents.record_cover
|
||||||
|
record={item.record}
|
||||||
|
class="rounded-lg aspect-square object-cover"
|
||||||
|
width={256}
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
<div
|
||||||
|
data-sortable-handle
|
||||||
|
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-bars-2"
|
||||||
|
class="size-3.5 text-zinc-800 dark:text-zinc-200"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
|
||||||
|
<.dropdown
|
||||||
|
id={"item-actions-#{record_set.id}-#{item.record.id}"}
|
||||||
|
placement="bottom-end"
|
||||||
|
>
|
||||||
|
<:toggle>
|
||||||
|
<span class="sr-only">{gettext("Actions")}</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-ellipsis-vertical"
|
||||||
|
class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</:toggle>
|
||||||
|
<.dropdown_button
|
||||||
|
:if={item.position > 0}
|
||||||
|
phx-click="move_up"
|
||||||
|
phx-value-set-id={record_set.id}
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
>
|
||||||
|
{gettext("Move left")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.dropdown_button
|
||||||
|
:if={item.position < length(record_set.items) - 1}
|
||||||
|
phx-click="move_down"
|
||||||
|
phx-value-set-id={record_set.id}
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
>
|
||||||
|
{gettext("Move right")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="remove_record"
|
||||||
|
phx-value-set-id={record_set.id}
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
data-confirm={gettext("Remove this record from the set?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Remove")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
|
||||||
|
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
|
||||||
|
</h1>
|
||||||
|
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{item.record.title}
|
||||||
|
</h2>
|
||||||
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
||||||
|
{format_label(item.record.format)} · {type_label(item.record.type)}
|
||||||
|
</p>
|
||||||
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
||||||
|
<.icon
|
||||||
|
name="hero-calendar-days"
|
||||||
|
class="-mt-1 h-4 w-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{Records.Record.format_release_date(item.record.release_date)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.link
|
||||||
|
patch={~p"/record-sets/#{record_set}/add-record"}
|
||||||
|
class={[
|
||||||
|
"flex-none aspect-square",
|
||||||
|
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
|
||||||
|
"rounded-lg flex items-center justify-center",
|
||||||
|
"hover:border-zinc-400 dark:hover:border-zinc-500",
|
||||||
|
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
|
||||||
|
"transition-colors cursor-pointer"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-plus"
|
||||||
|
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<.pagination id={:bottom_pagination} pagination_params={@list_params} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action in [:new, :edit]}
|
||||||
|
id="record-set-modal"
|
||||||
|
on_close={JS.patch(back_path(@list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.RecordSetLive.Form}
|
||||||
|
id={@record_set.id || :new}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
record_set={@record_set}
|
||||||
|
patch={back_path(@list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :add_record}
|
||||||
|
id="record-picker-modal"
|
||||||
|
on_close={JS.patch(back_path(@list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.RecordSetLive.RecordPicker}
|
||||||
|
id={"record-picker-#{@record_set.id}"}
|
||||||
|
title={@page_title}
|
||||||
|
record_set={@record_set}
|
||||||
|
patch={back_path(@list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok, assign(socket, :current_section, :record_sets)}
|
{:ok, assign(socket, :current_section, :record_sets)}
|
||||||
|
|||||||
@@ -1,273 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<header class="mb-6">
|
|
||||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
|
||||||
<.search_form query={@list_params.query} />
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
patch={~p"/record-sets/new"}
|
|
||||||
>
|
|
||||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("New Set")}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="flex items-end justify-between gap-6 mt-4">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@list_params, :updated_at)}
|
|
||||||
size="sm"
|
|
||||||
class={[@list_params.order == :updated_at && "bg-zinc-100! dark:bg-zinc-700!"]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-clock" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("Updated")}</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@list_params, :alphabetical)}
|
|
||||||
size="sm"
|
|
||||||
class={[@list_params.order == :alphabetical && "bg-zinc-100! dark:bg-zinc-700!"]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6 space-y-6">
|
|
||||||
<ul id="record-sets-list" class="space-y-6">
|
|
||||||
<li
|
|
||||||
:if={@record_sets == []}
|
|
||||||
id="no-record-sets"
|
|
||||||
class="p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
|
||||||
>
|
|
||||||
<.icon name="hero-rectangle-stack" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
|
||||||
<p class="text-zinc-600 dark:text-zinc-400">
|
|
||||||
{gettext("No record sets yet")}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li
|
|
||||||
:for={record_set <- @record_sets}
|
|
||||||
id={"record-set-#{record_set.id}"}
|
|
||||||
class="bg-white dark:bg-zinc-900 rounded-lg border border-zinc-200 dark:border-zinc-700 p-4"
|
|
||||||
>
|
|
||||||
<div class="flex items-baseline justify-between mb-3">
|
|
||||||
<div class="grow">
|
|
||||||
<header class="sm:flex items-baseline justify-start">
|
|
||||||
<h2 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
|
||||||
<.link navigate={~p"/record-sets/#{record_set}"} class="hover:underline">
|
|
||||||
{record_set.name}
|
|
||||||
</.link>
|
|
||||||
</h2>
|
|
||||||
<span class="sm:ml-2 text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext("%{collected}/%{total} records", RecordSet.count_by_status(record_set))}
|
|
||||||
</span>
|
|
||||||
</header>
|
|
||||||
<article
|
|
||||||
:if={record_set.description}
|
|
||||||
class="text-sm my-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
|
|
||||||
>
|
|
||||||
{render_description(record_set.description)}
|
|
||||||
</article>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<.dropdown id={"set-actions-#{record_set.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>
|
|
||||||
<.dropdown_link
|
|
||||||
id={"set-actions-#{record_set.id}-edit"}
|
|
||||||
patch={
|
|
||||||
~p"/record-sets/#{record_set}/edit?#{Map.take(@list_params, [:query, :page, :page_size, :order]) |> Enum.filter(fn {_, v} -> v not in ["", nil] end)}"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{gettext("Edit")}
|
|
||||||
</.dropdown_link>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="delete_set"
|
|
||||||
phx-value-id={record_set.id}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div
|
|
||||||
class="grid grid-cols-3 md:grid-cols-6 lg:grid-cols-8 xl:grid-cols-12 gap-3 pb-2"
|
|
||||||
id={"record-set-#{record_set.id}-items"}
|
|
||||||
phx-hook="SortableList"
|
|
||||||
data-set-id={record_set.id}
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:for={item <- record_set.items}
|
|
||||||
data-sortable-item
|
|
||||||
data-record-id={item.record.id}
|
|
||||||
class={[
|
|
||||||
"flex-none group relative",
|
|
||||||
is_nil(item.record.purchased_at) &&
|
|
||||||
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.link
|
|
||||||
:if={item.record.purchased_at}
|
|
||||||
navigate={~p"/collection/#{item.record}"}
|
|
||||||
>
|
|
||||||
<MusicLibraryWeb.RecordComponents.record_cover
|
|
||||||
record={item.record}
|
|
||||||
class="rounded-lg aspect-square object-cover"
|
|
||||||
width={256}
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
<.link
|
|
||||||
:if={!item.record.purchased_at}
|
|
||||||
navigate={~p"/wishlist/#{item.record}"}
|
|
||||||
>
|
|
||||||
<MusicLibraryWeb.RecordComponents.record_cover
|
|
||||||
record={item.record}
|
|
||||||
class="rounded-lg aspect-square object-cover"
|
|
||||||
width={256}
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
<div
|
|
||||||
data-sortable-handle
|
|
||||||
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-bars-2"
|
|
||||||
class="size-3.5 text-zinc-800 dark:text-zinc-200"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
|
|
||||||
<.dropdown
|
|
||||||
id={"item-actions-#{record_set.id}-#{item.record.id}"}
|
|
||||||
placement="bottom-end"
|
|
||||||
>
|
|
||||||
<:toggle>
|
|
||||||
<span class="sr-only">{gettext("Actions")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-ellipsis-vertical"
|
|
||||||
class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</:toggle>
|
|
||||||
<.dropdown_button
|
|
||||||
:if={item.position > 0}
|
|
||||||
phx-click="move_up"
|
|
||||||
phx-value-set-id={record_set.id}
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
>
|
|
||||||
{gettext("Move left")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.dropdown_button
|
|
||||||
:if={item.position < length(record_set.items) - 1}
|
|
||||||
phx-click="move_down"
|
|
||||||
phx-value-set-id={record_set.id}
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
>
|
|
||||||
{gettext("Move right")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="remove_record"
|
|
||||||
phx-value-set-id={record_set.id}
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
data-confirm={gettext("Remove this record from the set?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Remove")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
|
|
||||||
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
|
|
||||||
</h1>
|
|
||||||
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{item.record.title}
|
|
||||||
</h2>
|
|
||||||
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
||||||
{format_label(item.record.format)} · {type_label(item.record.type)}
|
|
||||||
</p>
|
|
||||||
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
||||||
<.icon
|
|
||||||
name="hero-calendar-days"
|
|
||||||
class="-mt-1 h-4 w-4"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{Records.Record.format_release_date(item.record.release_date)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.link
|
|
||||||
patch={~p"/record-sets/#{record_set}/add-record"}
|
|
||||||
class={[
|
|
||||||
"flex-none aspect-square",
|
|
||||||
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
|
|
||||||
"rounded-lg flex items-center justify-center",
|
|
||||||
"hover:border-zinc-400 dark:hover:border-zinc-500",
|
|
||||||
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
|
|
||||||
"transition-colors cursor-pointer"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-plus"
|
|
||||||
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<.pagination id={:bottom_pagination} pagination_params={@list_params} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action in [:new, :edit]}
|
|
||||||
id="record-set-modal"
|
|
||||||
on_close={JS.patch(back_path(@list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.RecordSetLive.Form}
|
|
||||||
id={@record_set.id || :new}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
record_set={@record_set}
|
|
||||||
patch={back_path(@list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :add_record}
|
|
||||||
id="record-picker-modal"
|
|
||||||
on_close={JS.patch(back_path(@list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.RecordSetLive.RecordPicker}
|
|
||||||
id={"record-picker-#{@record_set.id}"}
|
|
||||||
title={@page_title}
|
|
||||||
record_set={@record_set}
|
|
||||||
patch={back_path(@list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -8,6 +8,221 @@ defmodule MusicLibraryWeb.RecordSetLive.Show do
|
|||||||
alias MusicLibraryWeb.Markdown
|
alias MusicLibraryWeb.Markdown
|
||||||
alias Phoenix.LiveView.JS
|
alias Phoenix.LiveView.JS
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div class="mt-4">
|
||||||
|
<header class="mt-4 flex items-baseline justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
||||||
|
{@record_set.name}
|
||||||
|
</h1>
|
||||||
|
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext("%{collected}/%{total} records", RecordSet.count_by_status(@record_set))}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<.dropdown id="set-actions" 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>
|
||||||
|
<.dropdown_link
|
||||||
|
id="set-actions-edit"
|
||||||
|
patch={~p"/record-sets/#{@record_set}/show/edit"}
|
||||||
|
>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="delete_set"
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<article
|
||||||
|
:if={@record_set.description}
|
||||||
|
class="mt-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
|
||||||
|
>
|
||||||
|
{render_description(@record_set.description)}
|
||||||
|
</article>
|
||||||
|
|
||||||
|
<div class="mt-6">
|
||||||
|
<div
|
||||||
|
class="grid grid-cols-3 sm:grid-cols-6 lg:grid-cols-8 gap-4"
|
||||||
|
id="record-set-records"
|
||||||
|
phx-hook="SortableList"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
:for={item <- @record_set.items}
|
||||||
|
id={"record-#{item.record.id}"}
|
||||||
|
data-sortable-item
|
||||||
|
data-record-id={item.record.id}
|
||||||
|
class={[
|
||||||
|
"group relative",
|
||||||
|
is_nil(item.record.purchased_at) &&
|
||||||
|
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.link
|
||||||
|
:if={item.record.purchased_at}
|
||||||
|
navigate={~p"/collection/#{item.record}"}
|
||||||
|
>
|
||||||
|
<MusicLibraryWeb.RecordComponents.record_cover
|
||||||
|
record={item.record}
|
||||||
|
class="rounded-lg aspect-square object-cover"
|
||||||
|
width={468}
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
<.link
|
||||||
|
:if={!item.record.purchased_at}
|
||||||
|
navigate={~p"/wishlist/#{item.record}"}
|
||||||
|
>
|
||||||
|
<MusicLibraryWeb.RecordComponents.record_cover
|
||||||
|
record={item.record}
|
||||||
|
class="rounded-lg aspect-square object-cover"
|
||||||
|
width={468}
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
<div
|
||||||
|
data-sortable-handle
|
||||||
|
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-bars-2"
|
||||||
|
class="size-3.5 text-zinc-800 dark:text-zinc-200"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
|
||||||
|
<.dropdown
|
||||||
|
id={"item-actions-#{item.record.id}"}
|
||||||
|
placement="bottom-end"
|
||||||
|
>
|
||||||
|
<:toggle>
|
||||||
|
<span class="sr-only">{gettext("Actions")}</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-ellipsis-vertical"
|
||||||
|
class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</:toggle>
|
||||||
|
<.dropdown_button
|
||||||
|
:if={item.position > 0}
|
||||||
|
phx-click="move_up"
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
>
|
||||||
|
{gettext("Move left")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.dropdown_button
|
||||||
|
:if={item.position < length(@record_set.items) - 1}
|
||||||
|
phx-click="move_down"
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
>
|
||||||
|
{gettext("Move right")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="remove_record"
|
||||||
|
phx-value-record-id={item.record.id}
|
||||||
|
data-confirm={gettext("Remove this record from the set?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Remove")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
|
||||||
|
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
|
||||||
|
</h1>
|
||||||
|
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{item.record.title}
|
||||||
|
</h2>
|
||||||
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
||||||
|
{format_label(item.record.format)} · {type_label(item.record.type)}
|
||||||
|
</p>
|
||||||
|
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
||||||
|
<.icon
|
||||||
|
name="hero-calendar-days"
|
||||||
|
class="-mt-1 h-4 w-4"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{Records.Record.format_release_date(item.record.release_date)}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<.link
|
||||||
|
patch={~p"/record-sets/#{@record_set}/show/add-record"}
|
||||||
|
class={[
|
||||||
|
"aspect-square",
|
||||||
|
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
|
||||||
|
"rounded-lg flex items-center justify-center",
|
||||||
|
"hover:border-zinc-400 dark:hover:border-zinc-500",
|
||||||
|
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
|
||||||
|
"transition-colors cursor-pointer"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-plus"
|
||||||
|
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</.link>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="record-set-modal"
|
||||||
|
on_close={JS.patch(~p"/record-sets/#{@record_set}")}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.RecordSetLive.Form}
|
||||||
|
id={@record_set.id}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
record_set={@record_set}
|
||||||
|
patch={~p"/record-sets/#{@record_set}"}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :add_record}
|
||||||
|
id="record-picker-modal"
|
||||||
|
on_close={JS.patch(~p"/record-sets/#{@record_set}")}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.RecordSetLive.RecordPicker}
|
||||||
|
id={"record-picker-#{@record_set.id}"}
|
||||||
|
title={@page_title}
|
||||||
|
record_set={@record_set}
|
||||||
|
patch={~p"/record-sets/#{@record_set}"}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok, assign(socket, :current_section, :record_sets)}
|
{:ok, assign(socket, :current_section, :record_sets)}
|
||||||
|
|||||||
@@ -1,209 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div class="mt-4">
|
|
||||||
<header class="mt-4 flex items-baseline justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-lg font-semibold text-zinc-900 dark:text-zinc-100">
|
|
||||||
{@record_set.name}
|
|
||||||
</h1>
|
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext("%{collected}/%{total} records", RecordSet.count_by_status(@record_set))}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<.dropdown id="set-actions" 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>
|
|
||||||
<.dropdown_link
|
|
||||||
id="set-actions-edit"
|
|
||||||
patch={~p"/record-sets/#{@record_set}/show/edit"}
|
|
||||||
>
|
|
||||||
{gettext("Edit")}
|
|
||||||
</.dropdown_link>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="delete_set"
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<article
|
|
||||||
:if={@record_set.description}
|
|
||||||
class="mt-4 prose dark:prose-invert prose-zinc prose-sm prose-h1:text-sm max-w-none"
|
|
||||||
>
|
|
||||||
{render_description(@record_set.description)}
|
|
||||||
</article>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<div
|
|
||||||
class="grid grid-cols-3 sm:grid-cols-6 lg:grid-cols-8 gap-4"
|
|
||||||
id="record-set-records"
|
|
||||||
phx-hook="SortableList"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
:for={item <- @record_set.items}
|
|
||||||
id={"record-#{item.record.id}"}
|
|
||||||
data-sortable-item
|
|
||||||
data-record-id={item.record.id}
|
|
||||||
class={[
|
|
||||||
"group relative",
|
|
||||||
is_nil(item.record.purchased_at) &&
|
|
||||||
"opacity-60 dark:opacity-40 hover:opacity-100 transition-opacity"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.link
|
|
||||||
:if={item.record.purchased_at}
|
|
||||||
navigate={~p"/collection/#{item.record}"}
|
|
||||||
>
|
|
||||||
<MusicLibraryWeb.RecordComponents.record_cover
|
|
||||||
record={item.record}
|
|
||||||
class="rounded-lg aspect-square object-cover"
|
|
||||||
width={468}
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
<.link
|
|
||||||
:if={!item.record.purchased_at}
|
|
||||||
navigate={~p"/wishlist/#{item.record}"}
|
|
||||||
>
|
|
||||||
<MusicLibraryWeb.RecordComponents.record_cover
|
|
||||||
record={item.record}
|
|
||||||
class="rounded-lg aspect-square object-cover"
|
|
||||||
width={468}
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
<div
|
|
||||||
data-sortable-handle
|
|
||||||
class="absolute top-1 left-1 flex items-center justify-center rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-8 sm:size-5 cursor-grab active:cursor-grabbing"
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-bars-2"
|
|
||||||
class="size-3.5 text-zinc-800 dark:text-zinc-200"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="absolute top-1 right-1 rounded-full bg-zinc-100/50 hover:bg-zinc-100/75 dark:bg-zinc-700/50 dark:hover:bg-zinc-700/75 size-5">
|
|
||||||
<.dropdown
|
|
||||||
id={"item-actions-#{item.record.id}"}
|
|
||||||
placement="bottom-end"
|
|
||||||
>
|
|
||||||
<:toggle>
|
|
||||||
<span class="sr-only">{gettext("Actions")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-ellipsis-vertical"
|
|
||||||
class="size-5 text-zinc-800 dark:text-zinc-200 cursor-pointer"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</:toggle>
|
|
||||||
<.dropdown_button
|
|
||||||
:if={item.position > 0}
|
|
||||||
phx-click="move_up"
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
>
|
|
||||||
{gettext("Move left")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.dropdown_button
|
|
||||||
:if={item.position < length(@record_set.items) - 1}
|
|
||||||
phx-click="move_down"
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
>
|
|
||||||
{gettext("Move right")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="remove_record"
|
|
||||||
phx-value-record-id={item.record.id}
|
|
||||||
data-confirm={gettext("Remove this record from the set?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Remove")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
<h1 class="mt-1 text-sm sm:text-sm leading-6 text-zinc-700">
|
|
||||||
<.artist_links joinphrase_class="text-sm" artists={item.record.artists} />
|
|
||||||
</h1>
|
|
||||||
<h2 class="flex font-semibold text-sm sm:text-sm leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{item.record.title}
|
|
||||||
</h2>
|
|
||||||
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
||||||
{format_label(item.record.format)} · {type_label(item.record.type)}
|
|
||||||
</p>
|
|
||||||
<p class="pointer-events-none block text-sm font-medium text-zinc-500">
|
|
||||||
<.icon
|
|
||||||
name="hero-calendar-days"
|
|
||||||
class="-mt-1 h-4 w-4"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{Records.Record.format_release_date(item.record.release_date)}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<.link
|
|
||||||
patch={~p"/record-sets/#{@record_set}/show/add-record"}
|
|
||||||
class={[
|
|
||||||
"aspect-square",
|
|
||||||
"border-2 border-dashed border-zinc-300 dark:border-zinc-600",
|
|
||||||
"rounded-lg flex items-center justify-center",
|
|
||||||
"hover:border-zinc-400 dark:hover:border-zinc-500",
|
|
||||||
"hover:bg-zinc-50 dark:hover:bg-zinc-800",
|
|
||||||
"transition-colors cursor-pointer"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-plus"
|
|
||||||
class="h-8 w-8 text-zinc-400 dark:text-zinc-500"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</.link>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="record-set-modal"
|
|
||||||
on_close={JS.patch(~p"/record-sets/#{@record_set}")}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.RecordSetLive.Form}
|
|
||||||
id={@record_set.id}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
record_set={@record_set}
|
|
||||||
patch={~p"/record-sets/#{@record_set}"}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :add_record}
|
|
||||||
id="record-picker-modal"
|
|
||||||
on_close={JS.patch(~p"/record-sets/#{@record_set}")}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.RecordSetLive.RecordPicker}
|
|
||||||
id={"record-picker-#{@record_set.id}"}
|
|
||||||
title={@page_title}
|
|
||||||
record_set={@record_set}
|
|
||||||
patch={~p"/record-sets/#{@record_set}"}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -7,6 +7,141 @@ defmodule MusicLibraryWeb.ScrobbleLive.Index do
|
|||||||
alias MusicLibrary.Records
|
alias MusicLibrary.Records
|
||||||
alias MusicLibrary.ScrobbleActivity
|
alias MusicLibrary.ScrobbleActivity
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div>
|
||||||
|
<header class="gap-6 mb-2">
|
||||||
|
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||||
|
<.search_form query={@search_query} />
|
||||||
|
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
||||||
|
{gettext("Connect your Last.fm account")}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
<%= if @search_results != [] && @selected_release_group == nil do %>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
||||||
|
<ul class={[
|
||||||
|
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
||||||
|
"max-h-125 overflow-y-auto"
|
||||||
|
]}>
|
||||||
|
<li
|
||||||
|
:for={release_group <- @search_results}
|
||||||
|
phx-click="select_release_group"
|
||||||
|
phx-value-release_group_id={release_group.id}
|
||||||
|
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
||||||
|
<img
|
||||||
|
class="w-20 flex-none rounded-lg mr-4"
|
||||||
|
alt={release_group.title}
|
||||||
|
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
||||||
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
|
<div class="min-w-0 flex-auto">
|
||||||
|
<p class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
||||||
|
{release_group.artists}
|
||||||
|
</p>
|
||||||
|
<p class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{release_group.title}
|
||||||
|
</p>
|
||||||
|
<p class="mt-1 flex items-center gap-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
||||||
|
{Records.Record.format_release_date(release_group.release_date)}
|
||||||
|
<span>·</span>
|
||||||
|
<.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= if @selected_release_group && @releases != [] do %>
|
||||||
|
<div class="space-y-3">
|
||||||
|
<div class="flex items-center gap-2">
|
||||||
|
<.button
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
phx-click="clear_selection"
|
||||||
|
>
|
||||||
|
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Back")}
|
||||||
|
</.button>
|
||||||
|
<h3 class="text-lg font-semibold">
|
||||||
|
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
||||||
|
</h3>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||||
|
<li :for={release <- @releases}>
|
||||||
|
<.link
|
||||||
|
navigate={~p"/scrobble/#{release.id}"}
|
||||||
|
class="flex items-center gap-x-4 py-5 px-4 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="w-20 flex-none rounded-lg"
|
||||||
|
alt={release.title}
|
||||||
|
src={Release.thumb_url(release)}
|
||||||
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
|
<div class="min-w-0 flex-auto">
|
||||||
|
<p class="font-medium text-zinc-900 dark:text-zinc-100">
|
||||||
|
{release.title}
|
||||||
|
</p>
|
||||||
|
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
<span :if={release.date}>{release.date}</span>
|
||||||
|
<span :if={release.country}>
|
||||||
|
{country_label(release.country)}
|
||||||
|
</span>
|
||||||
|
<.badge :if={release.catalog_number} variant="soft" size="xs">
|
||||||
|
{release.catalog_number}
|
||||||
|
</.badge>
|
||||||
|
<span :if={release.media != []}>
|
||||||
|
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</.link>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= if @loading && @search_query != "" do %>
|
||||||
|
<div class="text-center py-8">
|
||||||
|
<.loading class="size-8 mx-auto text-zinc-400" />
|
||||||
|
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
|
||||||
|
<%= if @selected_release_group do %>
|
||||||
|
{gettext("Loading releases...")}
|
||||||
|
<% else %>
|
||||||
|
{gettext("Searching...")}
|
||||||
|
<% end %>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
|
||||||
|
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
||||||
|
<div class="text-center py-8">
|
||||||
|
<.icon
|
||||||
|
name="hero-magnifying-glass"
|
||||||
|
class="h-12 w-12 mx-auto text-zinc-300 dark:text-zinc-600"
|
||||||
|
/>
|
||||||
|
<p class="text-zinc-600 dark:text-zinc-400 mt-3">
|
||||||
|
{gettext("No release groups found for \"%{query}\"", query: @search_query)}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
||||||
|
{gettext("Try a different search term or check the spelling")}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<% end %>
|
||||||
|
</div>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok,
|
{:ok,
|
||||||
|
|||||||
@@ -1,129 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div>
|
|
||||||
<header class="gap-6 mb-2">
|
|
||||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
|
||||||
<.search_form query={@search_query} />
|
|
||||||
<.button :if={!@can_scrobble?} size="sm" href={LastFm.auth_url()}>
|
|
||||||
{gettext("Connect your Last.fm account")}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
<%= if @search_results != [] && @selected_release_group == nil do %>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<h3 class="text-lg font-semibold">{gettext("Release Groups")}</h3>
|
|
||||||
<ul class={[
|
|
||||||
"mt-5 divide-y divide-zinc-100 dark:divide-slate-300/30",
|
|
||||||
"max-h-125 overflow-y-auto"
|
|
||||||
]}>
|
|
||||||
<li
|
|
||||||
:for={release_group <- @search_results}
|
|
||||||
phx-click="select_release_group"
|
|
||||||
phx-value-release_group_id={release_group.id}
|
|
||||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-700 cursor-pointer"
|
|
||||||
>
|
|
||||||
<div class="shrink-0 flex items-center justify-between w-full px-4">
|
|
||||||
<img
|
|
||||||
class="w-20 flex-none rounded-lg mr-4"
|
|
||||||
alt={release_group.title}
|
|
||||||
src={ReleaseGroupSearchResult.thumb_url(release_group)}
|
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
||||||
/>
|
|
||||||
<div class="min-w-0 flex-auto">
|
|
||||||
<p class="truncate text-sm leading-6 text-zinc-700 dark:text-zinc-400">
|
|
||||||
{release_group.artists}
|
|
||||||
</p>
|
|
||||||
<p class="truncate mt-1 flex font-semibold text-sm sm:text-base leading-5 text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{release_group.title}
|
|
||||||
</p>
|
|
||||||
<p class="mt-1 flex items-center gap-1 text-xs leading-5 text-zinc-500 dark:text-zinc-400">
|
|
||||||
{Records.Record.format_release_date(release_group.release_date)}
|
|
||||||
<span>·</span>
|
|
||||||
<.badge variant="soft" size="xs">{type_label(release_group.type)}</.badge>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if @selected_release_group && @releases != [] do %>
|
|
||||||
<div class="space-y-3">
|
|
||||||
<div class="flex items-center gap-2">
|
|
||||||
<.button
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
phx-click="clear_selection"
|
|
||||||
>
|
|
||||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Back")}
|
|
||||||
</.button>
|
|
||||||
<h3 class="text-lg font-semibold">
|
|
||||||
{gettext("Releases for \"%{title}\"", title: @selected_release_group.title)}
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<ul class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
|
||||||
<li :for={release <- @releases}>
|
|
||||||
<.link
|
|
||||||
navigate={~p"/scrobble/#{release.id}"}
|
|
||||||
class="flex items-center gap-x-4 py-5 px-4 hover:bg-zinc-50 dark:hover:bg-zinc-700 transition-colors"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="w-20 flex-none rounded-lg"
|
|
||||||
alt={release.title}
|
|
||||||
src={Release.thumb_url(release)}
|
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
||||||
/>
|
|
||||||
<div class="min-w-0 flex-auto">
|
|
||||||
<p class="font-medium text-zinc-900 dark:text-zinc-100">
|
|
||||||
{release.title}
|
|
||||||
</p>
|
|
||||||
<div class="mt-1 flex flex-wrap items-center gap-x-2 gap-y-1 text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
<span :if={release.date}>{release.date}</span>
|
|
||||||
<span :if={release.country}>
|
|
||||||
{country_label(release.country)}
|
|
||||||
</span>
|
|
||||||
<.badge :if={release.catalog_number} variant="soft" size="xs">
|
|
||||||
{release.catalog_number}
|
|
||||||
</.badge>
|
|
||||||
<span :if={release.media != []}>
|
|
||||||
{ngettext("1 disc", "%{count} discs", Release.media_count(release))}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</.link>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if @loading && @search_query != "" do %>
|
|
||||||
<div class="text-center py-8">
|
|
||||||
<.loading class="size-8 mx-auto text-zinc-400" />
|
|
||||||
<p class="text-zinc-600 dark:text-zinc-400 mt-2">
|
|
||||||
<%= if @selected_release_group do %>
|
|
||||||
{gettext("Loading releases...")}
|
|
||||||
<% else %>
|
|
||||||
{gettext("Searching...")}
|
|
||||||
<% end %>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
|
|
||||||
<%= if @search_query != "" && @search_results == [] && not @loading do %>
|
|
||||||
<div class="text-center py-8">
|
|
||||||
<.icon
|
|
||||||
name="hero-magnifying-glass"
|
|
||||||
class="h-12 w-12 mx-auto text-zinc-300 dark:text-zinc-600"
|
|
||||||
/>
|
|
||||||
<p class="text-zinc-600 dark:text-zinc-400 mt-3">
|
|
||||||
{gettext("No release groups found for \"%{query}\"", query: @search_query)}
|
|
||||||
</p>
|
|
||||||
<p class="text-sm text-zinc-500 dark:text-zinc-500 mt-1">
|
|
||||||
{gettext("Try a different search term or check the spelling")}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<% end %>
|
|
||||||
</div>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -6,6 +6,105 @@ defmodule MusicLibraryWeb.ScrobbleLive.Show do
|
|||||||
|
|
||||||
alias MusicLibrary.ScrobbleActivity
|
alias MusicLibrary.ScrobbleActivity
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
||||||
|
<div>
|
||||||
|
<.alert
|
||||||
|
:if={not @can_scrobble}
|
||||||
|
color="warning"
|
||||||
|
title={gettext("Last.fm not connected")}
|
||||||
|
hide_close
|
||||||
|
>
|
||||||
|
{gettext(
|
||||||
|
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
|
||||||
|
)}
|
||||||
|
</.alert>
|
||||||
|
|
||||||
|
<div class="mt-2 mb-4">
|
||||||
|
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
|
||||||
|
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Back to search")}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||||
|
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
||||||
|
<img
|
||||||
|
src={MusicBrainz.Release.thumb_url(@release)}
|
||||||
|
alt={"Cover art for #{@release.title}"}
|
||||||
|
class="w-full rounded-lg drop-shadow-sm"
|
||||||
|
loading="lazy"
|
||||||
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grow">
|
||||||
|
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
||||||
|
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
|
||||||
|
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{@release.title}
|
||||||
|
</h2>
|
||||||
|
|
||||||
|
<div class="mt-4 md:mt-8">
|
||||||
|
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||||
|
<.dl_row :if={@release.date} label={gettext("Release Date")}>
|
||||||
|
{@release.date}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@release.country} label={gettext("Country")}>
|
||||||
|
{country_label(@release.country)} {@release.country}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@release.barcode} label={gettext("Barcode")}>
|
||||||
|
<code>{@release.barcode}</code>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@release.catalog_number} label={gettext("Catalog Number")}>
|
||||||
|
<code>{@release.catalog_number}</code>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@release.media != []} label={gettext("Media")}>
|
||||||
|
{ngettext("1 disc", "%{count} discs", MusicBrainz.Release.media_count(@release))}
|
||||||
|
</.dl_row>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :if={@release.media != []} class="mt-6 space-y-4">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
|
||||||
|
|
||||||
|
<.button
|
||||||
|
:if={@can_scrobble}
|
||||||
|
phx-click={
|
||||||
|
if MapSet.size(@selected_tracks) > 0,
|
||||||
|
do: "scrobble_selected_tracks",
|
||||||
|
else: "scrobble_release"
|
||||||
|
}
|
||||||
|
size="sm"
|
||||||
|
>
|
||||||
|
{scrobble_button_label(@selected_tracks)}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.medium
|
||||||
|
:for={medium <- @release.media}
|
||||||
|
can_scrobble?={@can_scrobble}
|
||||||
|
already_scrobbled={false}
|
||||||
|
medium={medium}
|
||||||
|
release_artists={@release.artists}
|
||||||
|
selected_tracks={@selected_tracks}
|
||||||
|
media_count={MusicBrainz.Release.media_count(@release)}
|
||||||
|
myself={nil}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok,
|
{:ok,
|
||||||
|
|||||||
@@ -1,93 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={:scrobble} socket={@socket}>
|
|
||||||
<div>
|
|
||||||
<.alert
|
|
||||||
:if={not @can_scrobble}
|
|
||||||
color="warning"
|
|
||||||
title={gettext("Last.fm not connected")}
|
|
||||||
hide_close
|
|
||||||
>
|
|
||||||
{gettext(
|
|
||||||
"You need to connect your Last.fm account to scrobble. Please set up your Last.fm session key in the settings."
|
|
||||||
)}
|
|
||||||
</.alert>
|
|
||||||
|
|
||||||
<div class="mt-2 mb-4">
|
|
||||||
<.button variant="ghost" size="sm" navigate={~p"/scrobble"}>
|
|
||||||
<.icon name="hero-arrow-left" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Back to search")}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
|
||||||
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
|
||||||
<img
|
|
||||||
src={MusicBrainz.Release.thumb_url(@release)}
|
|
||||||
alt={"Cover art for #{@release.title}"}
|
|
||||||
class="w-full rounded-lg drop-shadow-sm"
|
|
||||||
loading="lazy"
|
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grow">
|
|
||||||
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
|
||||||
<h1 :if={@release.artists != []} class="text-base font-medium leading-6 text-zinc-700">
|
|
||||||
{@release.artists |> Enum.map(& &1.name) |> Enum.join(", ")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{@release.title}
|
|
||||||
</h2>
|
|
||||||
|
|
||||||
<div class="mt-4 md:mt-8">
|
|
||||||
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
|
||||||
<.dl_row :if={@release.date} label={gettext("Release Date")}>
|
|
||||||
{@release.date}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@release.country} label={gettext("Country")}>
|
|
||||||
{country_label(@release.country)} {@release.country}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@release.barcode} label={gettext("Barcode")}>
|
|
||||||
<code>{@release.barcode}</code>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@release.catalog_number} label={gettext("Catalog Number")}>
|
|
||||||
<code>{@release.catalog_number}</code>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@release.media != []} label={gettext("Media")}>
|
|
||||||
{ngettext("1 disc", "%{count} discs", MusicBrainz.Release.media_count(@release))}
|
|
||||||
</.dl_row>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div :if={@release.media != []} class="mt-6 space-y-4">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<h3 class="text-lg font-semibold">{gettext("Tracks")}</h3>
|
|
||||||
|
|
||||||
<.button
|
|
||||||
:if={@can_scrobble}
|
|
||||||
phx-click={
|
|
||||||
if MapSet.size(@selected_tracks) > 0,
|
|
||||||
do: "scrobble_selected_tracks",
|
|
||||||
else: "scrobble_release"
|
|
||||||
}
|
|
||||||
size="sm"
|
|
||||||
>
|
|
||||||
{scrobble_button_label(@selected_tracks)}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.medium
|
|
||||||
:for={medium <- @release.media}
|
|
||||||
can_scrobble?={@can_scrobble}
|
|
||||||
already_scrobbled={false}
|
|
||||||
medium={medium}
|
|
||||||
release_artists={@release.artists}
|
|
||||||
selected_tracks={@selected_tracks}
|
|
||||||
media_count={MusicBrainz.Release.media_count(@release)}
|
|
||||||
myself={nil}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -14,6 +14,143 @@ defmodule MusicLibraryWeb.ScrobbleRulesLive.Index do
|
|||||||
order: :inserted_at
|
order: :inserted_at
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<header class="mb-6">
|
||||||
|
<div class="flex items-center justify-between">
|
||||||
|
<div>
|
||||||
|
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
||||||
|
{gettext("Scrobble Rules")}
|
||||||
|
</h1>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
patch={~p"/scrobble-rules/new"}
|
||||||
|
>
|
||||||
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Add")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
phx-click="apply_all_rules"
|
||||||
|
>
|
||||||
|
<.icon name="hero-play" class="icon" />
|
||||||
|
{gettext("Apply")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="mt-6 space-y-4">
|
||||||
|
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
|
||||||
|
<li
|
||||||
|
id="no-scrobble-rules"
|
||||||
|
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<.icon name="hero-beaker" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
||||||
|
<p class="text-zinc-600 dark:text-zinc-400">
|
||||||
|
{gettext("No scrobble rules found")}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
|
||||||
|
id={dom_id}
|
||||||
|
class="flex justify-between"
|
||||||
|
>
|
||||||
|
<div class="flex items-center">
|
||||||
|
<.type_badge type={scrobble_rule.type} />
|
||||||
|
</div>
|
||||||
|
<div class="grow p-2">
|
||||||
|
<p class="text-sm text-zinc-900 dark:text-zinc-100">
|
||||||
|
{scrobble_rule.match_value}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
|
||||||
|
{scrobble_rule.target_musicbrainz_id}
|
||||||
|
</p>
|
||||||
|
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
|
||||||
|
{scrobble_rule.description}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col justify-center text-right">
|
||||||
|
<span>
|
||||||
|
<.status_badge enabled={scrobble_rule.enabled} />
|
||||||
|
</span>
|
||||||
|
<span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
|
||||||
|
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="flex items-center p-2">
|
||||||
|
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
|
||||||
|
<:toggle>
|
||||||
|
<.button variant="ghost">
|
||||||
|
<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>
|
||||||
|
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
|
||||||
|
{gettext("Apply rule")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
|
||||||
|
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
|
||||||
|
</.dropdown_button>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{scrobble_rule.id}-edit"}
|
||||||
|
patch={
|
||||||
|
~p"/scrobble-rules/#{scrobble_rule}/edit?#{Map.take(@list_params, [:page, :page_size])}"
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
<.separator />
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click="delete"
|
||||||
|
phx-value-id={scrobble_rule.id}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<.pagination id={:bottom_pagination} pagination_params={@list_params} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action in [:new, :edit]}
|
||||||
|
id="scrobble_rule-modal"
|
||||||
|
on_close={JS.patch(back_path(@list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.ScrobbleRulesLive.Form}
|
||||||
|
id={@scrobble_rule.id || :new}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
scrobble_rule={@scrobble_rule}
|
||||||
|
patch={back_path(@list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
{:ok, assign(socket, :current_section, :scrobble_rules)}
|
{:ok, assign(socket, :current_section, :scrobble_rules)}
|
||||||
|
|||||||
@@ -1,131 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<header class="mb-6">
|
|
||||||
<div class="flex items-center justify-between">
|
|
||||||
<div>
|
|
||||||
<h1 class="text-2xl font-bold text-zinc-900 dark:text-zinc-100">
|
|
||||||
{gettext("Scrobble Rules")}
|
|
||||||
</h1>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
patch={~p"/scrobble-rules/new"}
|
|
||||||
>
|
|
||||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Add")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
phx-click="apply_all_rules"
|
|
||||||
>
|
|
||||||
<.icon name="hero-play" class="icon" />
|
|
||||||
{gettext("Apply")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="mt-6 space-y-4">
|
|
||||||
<ul phx-update="stream" id="scrobble-rules-list" class="space-y-4">
|
|
||||||
<li
|
|
||||||
id="no-scrobble-rules"
|
|
||||||
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
|
||||||
>
|
|
||||||
<.icon name="hero-beaker" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
|
||||||
<p class="text-zinc-600 dark:text-zinc-400">
|
|
||||||
{gettext("No scrobble rules found")}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li
|
|
||||||
:for={{dom_id, scrobble_rule} <- @streams.scrobble_rules}
|
|
||||||
id={dom_id}
|
|
||||||
class="flex justify-between"
|
|
||||||
>
|
|
||||||
<div class="flex items-center">
|
|
||||||
<.type_badge type={scrobble_rule.type} />
|
|
||||||
</div>
|
|
||||||
<div class="grow p-2">
|
|
||||||
<p class="text-sm text-zinc-900 dark:text-zinc-100">
|
|
||||||
{scrobble_rule.match_value}
|
|
||||||
</p>
|
|
||||||
<p class="text-xs font-mono text-zinc-500 dark:text-zinc-400 mt-2">
|
|
||||||
{scrobble_rule.target_musicbrainz_id}
|
|
||||||
</p>
|
|
||||||
<p class="text-xs text-zinc-500 dark:text-zinc-400 mt-2">
|
|
||||||
{scrobble_rule.description}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div class="flex flex-col justify-center text-right">
|
|
||||||
<span>
|
|
||||||
<.status_badge enabled={scrobble_rule.enabled} />
|
|
||||||
</span>
|
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400 text-nowrap mt-2">
|
|
||||||
{Calendar.strftime(scrobble_rule.inserted_at, "%Y-%m-%d")}
|
|
||||||
</span>
|
|
||||||
</div>
|
|
||||||
<div class="flex items-center p-2">
|
|
||||||
<.dropdown id={"actions-#{scrobble_rule.id}"} placement="bottom-end">
|
|
||||||
<:toggle>
|
|
||||||
<.button variant="ghost">
|
|
||||||
<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>
|
|
||||||
<.dropdown_button phx-click="apply_rule" phx-value-id={scrobble_rule.id}>
|
|
||||||
{gettext("Apply rule")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.dropdown_button phx-click="toggle_enabled" phx-value-id={scrobble_rule.id}>
|
|
||||||
{if scrobble_rule.enabled, do: gettext("Disable rule"), else: gettext("Enable rule")}
|
|
||||||
</.dropdown_button>
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{scrobble_rule.id}-edit"}
|
|
||||||
patch={
|
|
||||||
~p"/scrobble-rules/#{scrobble_rule}/edit?#{Map.take(@list_params, [:page, :page_size])}"
|
|
||||||
}
|
|
||||||
>
|
|
||||||
{gettext("Edit")}
|
|
||||||
</.dropdown_link>
|
|
||||||
<.separator />
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click="delete"
|
|
||||||
phx-value-id={scrobble_rule.id}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<.pagination id={:bottom_pagination} pagination_params={@list_params} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action in [:new, :edit]}
|
|
||||||
id="scrobble_rule-modal"
|
|
||||||
on_close={JS.patch(back_path(@list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.ScrobbleRulesLive.Form}
|
|
||||||
id={@scrobble_rule.id || :new}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
scrobble_rule={@scrobble_rule}
|
|
||||||
patch={back_path(@list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -16,6 +16,197 @@ defmodule MusicLibraryWeb.ScrobbledTracksLive.Index do
|
|||||||
order: :scrobbled_at
|
order: :scrobbled_at
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div>
|
||||||
|
<header class="gap-6">
|
||||||
|
<div class="mb-2 mt-2">
|
||||||
|
<.search_form query={@track_list_params.query} />
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex items-end gap-6 mt-8 justify-between">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@track_list_params, :scrobbled_at)}
|
||||||
|
size="xs"
|
||||||
|
class={[
|
||||||
|
@track_list_params.order == :scrobbled_at && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-clock-solid"
|
||||||
|
class="icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Scrobbled")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@track_list_params, :title)}
|
||||||
|
size="xs"
|
||||||
|
class={[
|
||||||
|
@track_list_params.order == :title && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Title")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@track_list_params, :artist)}
|
||||||
|
size="xs"
|
||||||
|
class={[
|
||||||
|
@track_list_params.order == :artist && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Artist")}
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@track_list_params, :album)}
|
||||||
|
size="xs"
|
||||||
|
class={[
|
||||||
|
@track_list_params.order == :album && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Album")}
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
<.refresh_lastfm_feed_button />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-6">
|
||||||
|
<ul
|
||||||
|
class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
|
||||||
|
role="list"
|
||||||
|
id="tracks"
|
||||||
|
phx-update="stream"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
id="no-scrobbled-tracks"
|
||||||
|
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
||||||
|
>
|
||||||
|
<.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
||||||
|
<p class="text-zinc-600 dark:text-zinc-400">
|
||||||
|
{gettext("No scrobbled tracks found")}
|
||||||
|
</p>
|
||||||
|
</li>
|
||||||
|
|
||||||
|
<li
|
||||||
|
:for={
|
||||||
|
{id,
|
||||||
|
%{
|
||||||
|
track: track,
|
||||||
|
artist_id: artist_id,
|
||||||
|
collected_record_id: collected_record_id,
|
||||||
|
wishlisted_record_id: wishlisted_record_id,
|
||||||
|
cover_hash: cover_hash
|
||||||
|
}} <- @streams.tracks
|
||||||
|
}
|
||||||
|
id={id}
|
||||||
|
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
||||||
|
>
|
||||||
|
<div class="flex items-center space-x-4 flex-1 min-w-0">
|
||||||
|
<div class="shrink-0">
|
||||||
|
<img
|
||||||
|
class="h-12 w-12 rounded-md shadow-sm"
|
||||||
|
src={track_cover_url(track, cover_hash)}
|
||||||
|
alt={track.title}
|
||||||
|
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="min-w-0 flex-1">
|
||||||
|
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
|
||||||
|
{track.title}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-zinc-600 dark:text-zinc-400 truncate">
|
||||||
|
{track.artist.name}
|
||||||
|
</p>
|
||||||
|
<p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
|
||||||
|
{track.album.title}
|
||||||
|
</p>
|
||||||
|
<time
|
||||||
|
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
||||||
|
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{track.scrobbled_at_label}
|
||||||
|
</time>
|
||||||
|
<.track_metadata_tooltip track={track} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flex items-center">
|
||||||
|
<.record_status_badges
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
collected_record_id={collected_record_id}
|
||||||
|
wishlisted_record_id={wishlisted_record_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.import_format_dropdown
|
||||||
|
:if={
|
||||||
|
track.album.musicbrainz_id !== "" and !collected_record_id and
|
||||||
|
!wishlisted_record_id
|
||||||
|
}
|
||||||
|
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
|
||||||
|
<:toggle>
|
||||||
|
<.button variant="ghost">
|
||||||
|
<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>
|
||||||
|
<.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
|
||||||
|
{gettext("Edit")}
|
||||||
|
</.dropdown_link>
|
||||||
|
<.dropdown_button
|
||||||
|
phx-click={
|
||||||
|
JS.push("delete", value: %{"scrobbled-at-uts": track.scrobbled_at_uts})
|
||||||
|
|> JS.hide(to: "##{id}")
|
||||||
|
}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class={[
|
||||||
|
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_button>
|
||||||
|
</.dropdown>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
|
||||||
|
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="track-modal"
|
||||||
|
on_close={JS.patch(back_path(@track_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.ScrobbledTracksLive.Form}
|
||||||
|
id={@track.scrobbled_at_uts}
|
||||||
|
action={@live_action}
|
||||||
|
track={@track}
|
||||||
|
patch={back_path(@track_list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
socket =
|
socket =
|
||||||
|
|||||||
@@ -1,185 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div>
|
|
||||||
<header class="gap-6">
|
|
||||||
<div class="mb-2 mt-2">
|
|
||||||
<.search_form query={@track_list_params.query} />
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="flex items-end gap-6 mt-8 justify-between">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@track_list_params, :scrobbled_at)}
|
|
||||||
size="xs"
|
|
||||||
class={[
|
|
||||||
@track_list_params.order == :scrobbled_at && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-clock-solid"
|
|
||||||
class="icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Scrobbled")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@track_list_params, :title)}
|
|
||||||
size="xs"
|
|
||||||
class={[
|
|
||||||
@track_list_params.order == :title && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Title")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@track_list_params, :artist)}
|
|
||||||
size="xs"
|
|
||||||
class={[
|
|
||||||
@track_list_params.order == :artist && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Artist")}
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@track_list_params, :album)}
|
|
||||||
size="xs"
|
|
||||||
class={[
|
|
||||||
@track_list_params.order == :album && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-musical-note-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Album")}
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
<.refresh_lastfm_feed_button />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-6">
|
|
||||||
<ul
|
|
||||||
class="divide-y divide-zinc-100 dark:divide-zinc-300/20 mt-5"
|
|
||||||
role="list"
|
|
||||||
id="tracks"
|
|
||||||
phx-update="stream"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
id="no-scrobbled-tracks"
|
|
||||||
class="hidden only:block p-8 text-center bg-zinc-50 dark:bg-zinc-800 rounded-lg"
|
|
||||||
>
|
|
||||||
<.icon name="hero-musical-note" class="h-12 w-12 text-zinc-400 mx-auto mb-4" />
|
|
||||||
<p class="text-zinc-600 dark:text-zinc-400">
|
|
||||||
{gettext("No scrobbled tracks found")}
|
|
||||||
</p>
|
|
||||||
</li>
|
|
||||||
|
|
||||||
<li
|
|
||||||
:for={
|
|
||||||
{id,
|
|
||||||
%{
|
|
||||||
track: track,
|
|
||||||
artist_id: artist_id,
|
|
||||||
collected_record_id: collected_record_id,
|
|
||||||
wishlisted_record_id: wishlisted_record_id,
|
|
||||||
cover_hash: cover_hash
|
|
||||||
}} <- @streams.tracks
|
|
||||||
}
|
|
||||||
id={id}
|
|
||||||
class="flex justify-between gap-x-6 py-5 hover:bg-zinc-50 dark:hover:bg-zinc-800 px-2 -mx-2 md:px-4 md:-mx-4 cursor-pointer"
|
|
||||||
>
|
|
||||||
<div class="flex items-center space-x-4 flex-1 min-w-0">
|
|
||||||
<div class="shrink-0">
|
|
||||||
<img
|
|
||||||
class="h-12 w-12 rounded-md shadow-sm"
|
|
||||||
src={track_cover_url(track, cover_hash)}
|
|
||||||
alt={track.title}
|
|
||||||
onerror={"this.src = '" <> ~p"/images/cover-not-found.png" <> "';"}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="min-w-0 flex-1">
|
|
||||||
<p class="text-sm font-medium text-zinc-900 dark:text-zinc-100 truncate">
|
|
||||||
{track.title}
|
|
||||||
</p>
|
|
||||||
<p class="text-sm text-zinc-600 dark:text-zinc-400 truncate">
|
|
||||||
{track.artist.name}
|
|
||||||
</p>
|
|
||||||
<p class="text-sm text-zinc-500 dark:text-zinc-500 truncate">
|
|
||||||
{track.album.title}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
|
||||||
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{track.scrobbled_at_label}
|
|
||||||
</time>
|
|
||||||
<.track_metadata_tooltip track={track} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flex items-center">
|
|
||||||
<.record_status_badges
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
collected_record_id={collected_record_id}
|
|
||||||
wishlisted_record_id={wishlisted_record_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.import_format_dropdown
|
|
||||||
:if={
|
|
||||||
track.album.musicbrainz_id !== "" and !collected_record_id and
|
|
||||||
!wishlisted_record_id
|
|
||||||
}
|
|
||||||
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
<.dropdown id={"actions-#{track.scrobbled_at_uts}"} placement="bottom-end">
|
|
||||||
<:toggle>
|
|
||||||
<.button variant="ghost">
|
|
||||||
<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>
|
|
||||||
<.dropdown_link patch={~p"/scrobbled-tracks/#{track.scrobbled_at_uts}/edit"}>
|
|
||||||
{gettext("Edit")}
|
|
||||||
</.dropdown_link>
|
|
||||||
<.dropdown_button
|
|
||||||
phx-click={
|
|
||||||
JS.push("delete", value: %{"scrobbled-at-uts": track.scrobbled_at_uts})
|
|
||||||
|> JS.hide(to: "##{id}")
|
|
||||||
}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class={[
|
|
||||||
"text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_button>
|
|
||||||
</.dropdown>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
|
|
||||||
<.pagination id={:bottom_pagination} pagination_params={@track_list_params} />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="track-modal"
|
|
||||||
on_close={JS.patch(back_path(@track_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.ScrobbledTracksLive.Form}
|
|
||||||
id={@track.scrobbled_at_uts}
|
|
||||||
action={@live_action}
|
|
||||||
track={@track}
|
|
||||||
patch={back_path(@track_list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -11,6 +11,337 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
alias MusicLibrary.{Collection, Records, ScrobbleActivity, Wishlist}
|
alias MusicLibrary.{Collection, Records, ScrobbleActivity, Wishlist}
|
||||||
alias MusicLibraryWeb.StatsLive.{TopAlbums, TopArtists}
|
alias MusicLibraryWeb.StatsLive.{TopAlbums, TopArtists}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Records")}
|
||||||
|
</h1>
|
||||||
|
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
||||||
|
<.album_preview
|
||||||
|
record={@latest_record}
|
||||||
|
title={gettext("Latest purchase")}
|
||||||
|
class="col-span-3 sm:col-span-2"
|
||||||
|
/>
|
||||||
|
<.counter
|
||||||
|
title={gettext("Collection")}
|
||||||
|
count={@collection_count}
|
||||||
|
path={~p"/collection"}
|
||||||
|
/>
|
||||||
|
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
||||||
|
<.counter
|
||||||
|
title={gettext("Scrobbles")}
|
||||||
|
count={to_compact(@scrobble_count)}
|
||||||
|
tooltip={@scrobble_count}
|
||||||
|
/>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grid lg:grid-cols-2 gap-x-5">
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Formats")}
|
||||||
|
</h1>
|
||||||
|
<.counters_by_category
|
||||||
|
categories_with_counts={@collection_count_by_format}
|
||||||
|
category_format_fn={&format_label/1}
|
||||||
|
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Types")}
|
||||||
|
</h1>
|
||||||
|
<.counters_by_category
|
||||||
|
categories_with_counts={@collection_count_by_type}
|
||||||
|
category_format_fn={&type_label/1}
|
||||||
|
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
|
||||||
|
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||||
|
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="flow-root">
|
||||||
|
<div class="mt-5 flex justify-between items-center">
|
||||||
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Scrobble activity")}
|
||||||
|
</h1>
|
||||||
|
<.refresh_lastfm_feed_button />
|
||||||
|
</div>
|
||||||
|
<.tabs id="scrobble-activity" class="mt-4">
|
||||||
|
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
||||||
|
<:tab
|
||||||
|
name="albums"
|
||||||
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
||||||
|
>
|
||||||
|
{gettext("Albums")}
|
||||||
|
</:tab>
|
||||||
|
<:tab
|
||||||
|
name="tracks"
|
||||||
|
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
||||||
|
>
|
||||||
|
{gettext("Tracks")}
|
||||||
|
</:tab>
|
||||||
|
</.tabs_list>
|
||||||
|
|
||||||
|
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
||||||
|
<ul
|
||||||
|
id="scrobble-activity-albums"
|
||||||
|
role="list"
|
||||||
|
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
||||||
|
phx-update="stream"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
:for={
|
||||||
|
{id,
|
||||||
|
%{
|
||||||
|
album: album,
|
||||||
|
artist_id: artist_id,
|
||||||
|
collected_record_id: collected_record_id,
|
||||||
|
wishlisted_record_id: wishlisted_record_id,
|
||||||
|
cover_hash: cover_hash
|
||||||
|
}} <- @streams.recent_albums
|
||||||
|
}
|
||||||
|
id={id}
|
||||||
|
class="group"
|
||||||
|
>
|
||||||
|
<div class="relative pb-4 group-last:pb-0">
|
||||||
|
<span
|
||||||
|
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<div class="relative flex space-x-3 items-center justify-between">
|
||||||
|
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||||
|
<img
|
||||||
|
class="h-12 w-12 rounded-md shadow-sm"
|
||||||
|
src={track_or_album_cover_url(album, cover_hash)}
|
||||||
|
alt={album.metadata.title}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
:if={!artist_id(album, artist_id)}
|
||||||
|
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{album.artist.name}
|
||||||
|
</p>
|
||||||
|
<.link
|
||||||
|
:if={artist_id(album, artist_id)}
|
||||||
|
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
|
||||||
|
>
|
||||||
|
{album.artist.name}
|
||||||
|
</.link>
|
||||||
|
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||||
|
{album.metadata.title}
|
||||||
|
</p>
|
||||||
|
<time
|
||||||
|
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
||||||
|
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{album.scrobbled_at_label}
|
||||||
|
</time>
|
||||||
|
<.album_metadata_tooltip album={album} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_status_badges
|
||||||
|
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||||
|
collected_record_id={collected_record_id}
|
||||||
|
wishlisted_record_id={wishlisted_record_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.import_format_dropdown
|
||||||
|
:if={
|
||||||
|
album.metadata.musicbrainz_id !== "" and !collected_record_id and
|
||||||
|
!wishlisted_record_id
|
||||||
|
}
|
||||||
|
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
||||||
|
musicbrainz_id={album.metadata.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.tabs_panel>
|
||||||
|
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
||||||
|
<ul
|
||||||
|
id="scrobble-activity-tracks"
|
||||||
|
role="list"
|
||||||
|
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
||||||
|
phx-update="stream"
|
||||||
|
>
|
||||||
|
<li
|
||||||
|
:for={
|
||||||
|
{id,
|
||||||
|
%{
|
||||||
|
track: track,
|
||||||
|
artist_id: artist_id,
|
||||||
|
collected_record_id: collected_record_id,
|
||||||
|
wishlisted_record_id: wishlisted_record_id,
|
||||||
|
cover_hash: cover_hash
|
||||||
|
}} <- @streams.recent_tracks
|
||||||
|
}
|
||||||
|
id={id}
|
||||||
|
class="group"
|
||||||
|
>
|
||||||
|
<div class="relative pb-4 group-last:pb-0">
|
||||||
|
<span
|
||||||
|
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
||||||
|
aria-hidden="true"
|
||||||
|
>
|
||||||
|
</span>
|
||||||
|
<div class="relative flex space-x-3 items-center justify-between">
|
||||||
|
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
||||||
|
<img
|
||||||
|
class="h-12 w-12 rounded-md shadow-sm"
|
||||||
|
src={track_or_album_cover_url(track, cover_hash)}
|
||||||
|
alt={track.title}
|
||||||
|
/>
|
||||||
|
<div>
|
||||||
|
<p
|
||||||
|
:if={!artist_id(track, artist_id)}
|
||||||
|
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{track.artist.name}
|
||||||
|
</p>
|
||||||
|
<.link
|
||||||
|
:if={artist_id(track, artist_id)}
|
||||||
|
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
|
||||||
|
>
|
||||||
|
{track.artist.name}
|
||||||
|
</.link>
|
||||||
|
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
||||||
|
{track.title}
|
||||||
|
</p>
|
||||||
|
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
{track.album.title}
|
||||||
|
</p>
|
||||||
|
<time
|
||||||
|
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
||||||
|
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
||||||
|
>
|
||||||
|
{track.scrobbled_at_label}
|
||||||
|
</time>
|
||||||
|
<.track_metadata_tooltip track={track} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_status_badges
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
collected_record_id={collected_record_id}
|
||||||
|
wishlisted_record_id={wishlisted_record_id}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.import_format_dropdown
|
||||||
|
:if={
|
||||||
|
track.album.musicbrainz_id !== "" and !collected_record_id and
|
||||||
|
!wishlisted_record_id
|
||||||
|
}
|
||||||
|
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
||||||
|
musicbrainz_id={track.album.musicbrainz_id}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.tabs_panel>
|
||||||
|
</.tabs>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
|
||||||
|
<div class="lg:col-span-3">
|
||||||
|
<div class="flex justify-between items-center">
|
||||||
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("On This day")}
|
||||||
|
</h1>
|
||||||
|
<.form
|
||||||
|
:let={f}
|
||||||
|
for={to_form(%{"current_date" => @current_date})}
|
||||||
|
phx-change="set_current_date"
|
||||||
|
>
|
||||||
|
<.date_picker size="xs" field={f[:current_date]}>
|
||||||
|
<:outer_suffix>
|
||||||
|
<.button
|
||||||
|
size="xs"
|
||||||
|
type="button"
|
||||||
|
phx-click={
|
||||||
|
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Today
|
||||||
|
</.button>
|
||||||
|
</:outer_suffix>
|
||||||
|
</.date_picker>
|
||||||
|
</.form>
|
||||||
|
</div>
|
||||||
|
<div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||||
|
<.records_on_this_day
|
||||||
|
current_date={@current_date}
|
||||||
|
records={@records_on_this_day}
|
||||||
|
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="lg:col-span-4">
|
||||||
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
||||||
|
</h1>
|
||||||
|
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||||
|
<.vertical_bar_chart
|
||||||
|
data={@records_by_artist}
|
||||||
|
width={600}
|
||||||
|
height={26 * length(@records_by_artist)}
|
||||||
|
color_class="fill-red-500"
|
||||||
|
label_fn={fn datum -> datum.name end}
|
||||||
|
value_fn={fn datum -> datum.count end}
|
||||||
|
datum_click={
|
||||||
|
fn datum ->
|
||||||
|
JS.navigate(~p"/artists/#{datum.id}")
|
||||||
|
end
|
||||||
|
}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="lg:col-span-4">
|
||||||
|
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
||||||
|
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
||||||
|
</h1>
|
||||||
|
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
||||||
|
<.vertical_bar_chart
|
||||||
|
data={@records_by_genre}
|
||||||
|
width={600}
|
||||||
|
height={26 * length(@records_by_genre)}
|
||||||
|
color_class="fill-zinc-500"
|
||||||
|
label_fn={fn {genre, _count} -> genre end}
|
||||||
|
value_fn={fn {_genre, count} -> count end}
|
||||||
|
datum_click={
|
||||||
|
fn {genre, _count} ->
|
||||||
|
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
||||||
|
end
|
||||||
|
}
|
||||||
|
class="w-full"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
|
current_date = DateTime.now!(socket.assigns.timezone) |> DateTime.to_date()
|
||||||
latest_record = Collection.get_latest_record()
|
latest_record = Collection.get_latest_record()
|
||||||
@@ -44,6 +375,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
)}
|
)}
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def handle_event("refresh_lastfm_feed", _, socket) do
|
def handle_event("refresh_lastfm_feed", _, socket) do
|
||||||
LastFm.refresh_scrobbled_tracks()
|
LastFm.refresh_scrobbled_tracks()
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
@@ -96,6 +428,7 @@ defmodule MusicLibraryWeb.StatsLive.Index do
|
|||||||
end
|
end
|
||||||
end
|
end
|
||||||
|
|
||||||
|
@impl true
|
||||||
def handle_info(%{track_count: 0}, socket) do
|
def handle_info(%{track_count: 0}, socket) do
|
||||||
{:noreply, socket}
|
{:noreply, socket}
|
||||||
end
|
end
|
||||||
|
|||||||
@@ -1,324 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div>
|
|
||||||
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Records")}
|
|
||||||
</h1>
|
|
||||||
<dl class="mt-5 grid grid-cols-3 gap-5 sm:grid-cols-5">
|
|
||||||
<.album_preview
|
|
||||||
record={@latest_record}
|
|
||||||
title={gettext("Latest purchase")}
|
|
||||||
class="col-span-3 sm:col-span-2"
|
|
||||||
/>
|
|
||||||
<.counter
|
|
||||||
title={gettext("Collection")}
|
|
||||||
count={@collection_count}
|
|
||||||
path={~p"/collection"}
|
|
||||||
/>
|
|
||||||
<.counter title={gettext("Wishlist")} count={@wishlist_count} path={~p"/wishlist"} />
|
|
||||||
<.counter
|
|
||||||
title={gettext("Scrobbles")}
|
|
||||||
count={to_compact(@scrobble_count)}
|
|
||||||
tooltip={@scrobble_count}
|
|
||||||
/>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grid lg:grid-cols-2 gap-x-5">
|
|
||||||
<div>
|
|
||||||
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Formats")}
|
|
||||||
</h1>
|
|
||||||
<.counters_by_category
|
|
||||||
categories_with_counts={@collection_count_by_format}
|
|
||||||
category_format_fn={&format_label/1}
|
|
||||||
category_path_fn={fn format -> ~p"/collection?query=format:#{format}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<h1 class="mt-5 text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Types")}
|
|
||||||
</h1>
|
|
||||||
<.counters_by_category
|
|
||||||
categories_with_counts={@collection_count_by_type}
|
|
||||||
category_format_fn={&type_label/1}
|
|
||||||
category_path_fn={fn type -> ~p"/collection?query=type:#{type}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-2 gap-5">
|
|
||||||
<TopArtists.live id="top-artists" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
|
||||||
<TopAlbums.live id="top-albums" timezone={@timezone} last_updated_uts={@last_updated_uts} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="flow-root">
|
|
||||||
<div class="mt-5 flex justify-between items-center">
|
|
||||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Scrobble activity")}
|
|
||||||
</h1>
|
|
||||||
<.refresh_lastfm_feed_button />
|
|
||||||
</div>
|
|
||||||
<.tabs id="scrobble-activity" class="mt-4">
|
|
||||||
<.tabs_list active_tab={@scrobble_activity_mode} variant="segmented" class="w-48">
|
|
||||||
<:tab
|
|
||||||
name="albums"
|
|
||||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "albums"})}
|
|
||||||
>
|
|
||||||
{gettext("Albums")}
|
|
||||||
</:tab>
|
|
||||||
<:tab
|
|
||||||
name="tracks"
|
|
||||||
phx-click={JS.push("set_scrobble_activity_mode", value: %{mode: "tracks"})}
|
|
||||||
>
|
|
||||||
{gettext("Tracks")}
|
|
||||||
</:tab>
|
|
||||||
</.tabs_list>
|
|
||||||
|
|
||||||
<.tabs_panel name="albums" active={@scrobble_activity_mode == "albums"}>
|
|
||||||
<ul
|
|
||||||
id="scrobble-activity-albums"
|
|
||||||
role="list"
|
|
||||||
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
|
||||||
phx-update="stream"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
:for={
|
|
||||||
{id,
|
|
||||||
%{
|
|
||||||
album: album,
|
|
||||||
artist_id: artist_id,
|
|
||||||
collected_record_id: collected_record_id,
|
|
||||||
wishlisted_record_id: wishlisted_record_id,
|
|
||||||
cover_hash: cover_hash
|
|
||||||
}} <- @streams.recent_albums
|
|
||||||
}
|
|
||||||
id={id}
|
|
||||||
class="group"
|
|
||||||
>
|
|
||||||
<div class="relative pb-4 group-last:pb-0">
|
|
||||||
<span
|
|
||||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<div class="relative flex space-x-3 items-center justify-between">
|
|
||||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
|
||||||
<img
|
|
||||||
class="h-12 w-12 rounded-md shadow-sm"
|
|
||||||
src={track_or_album_cover_url(album, cover_hash)}
|
|
||||||
alt={album.metadata.title}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
:if={!artist_id(album, artist_id)}
|
|
||||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{album.artist.name}
|
|
||||||
</p>
|
|
||||||
<.link
|
|
||||||
:if={artist_id(album, artist_id)}
|
|
||||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
navigate={~p"/artists/#{artist_id(album, artist_id)}"}
|
|
||||||
>
|
|
||||||
{album.artist.name}
|
|
||||||
</.link>
|
|
||||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
|
||||||
{album.metadata.title}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
datetime={format_scrobbled_at_uts(album.scrobbled_at_uts)}
|
|
||||||
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{album.scrobbled_at_label}
|
|
||||||
</time>
|
|
||||||
<.album_metadata_tooltip album={album} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_status_badges
|
|
||||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
|
||||||
collected_record_id={collected_record_id}
|
|
||||||
wishlisted_record_id={wishlisted_record_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.import_format_dropdown
|
|
||||||
:if={
|
|
||||||
album.metadata.musicbrainz_id !== "" and !collected_record_id and
|
|
||||||
!wishlisted_record_id
|
|
||||||
}
|
|
||||||
id={"actions-#{album.scrobbled_at_uts}-albums"}
|
|
||||||
musicbrainz_id={album.metadata.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.tabs_panel>
|
|
||||||
<.tabs_panel name="tracks" active={@scrobble_activity_mode == "tracks"}>
|
|
||||||
<ul
|
|
||||||
id="scrobble-activity-tracks"
|
|
||||||
role="list"
|
|
||||||
class="mt-5 p-6 bg-white dark:bg-zinc-800 rounded-md shadow-sm"
|
|
||||||
phx-update="stream"
|
|
||||||
>
|
|
||||||
<li
|
|
||||||
:for={
|
|
||||||
{id,
|
|
||||||
%{
|
|
||||||
track: track,
|
|
||||||
artist_id: artist_id,
|
|
||||||
collected_record_id: collected_record_id,
|
|
||||||
wishlisted_record_id: wishlisted_record_id,
|
|
||||||
cover_hash: cover_hash
|
|
||||||
}} <- @streams.recent_tracks
|
|
||||||
}
|
|
||||||
id={id}
|
|
||||||
class="group"
|
|
||||||
>
|
|
||||||
<div class="relative pb-4 group-last:pb-0">
|
|
||||||
<span
|
|
||||||
class="group-last:hidden absolute left-6 top-6 -ml-px h-full w-0.5 bg-zinc-200"
|
|
||||||
aria-hidden="true"
|
|
||||||
>
|
|
||||||
</span>
|
|
||||||
<div class="relative flex space-x-3 items-center justify-between">
|
|
||||||
<div class="flex min-w-0 justify-between space-x-4 items-center">
|
|
||||||
<img
|
|
||||||
class="h-12 w-12 rounded-md shadow-sm"
|
|
||||||
src={track_or_album_cover_url(track, cover_hash)}
|
|
||||||
alt={track.title}
|
|
||||||
/>
|
|
||||||
<div>
|
|
||||||
<p
|
|
||||||
:if={!artist_id(track, artist_id)}
|
|
||||||
class="font-semibold text-sm block text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{track.artist.name}
|
|
||||||
</p>
|
|
||||||
<.link
|
|
||||||
:if={artist_id(track, artist_id)}
|
|
||||||
class="font-semibold text-sm block text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
navigate={~p"/artists/#{artist_id(track, artist_id)}"}
|
|
||||||
>
|
|
||||||
{track.artist.name}
|
|
||||||
</.link>
|
|
||||||
<p class="font-semibold text-sm md:text-base text-zinc-700 dark:text-zinc-300">
|
|
||||||
{track.title}
|
|
||||||
</p>
|
|
||||||
<p class="font-semibold text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
{track.album.title}
|
|
||||||
</p>
|
|
||||||
<time
|
|
||||||
datetime={format_scrobbled_at_uts(track.scrobbled_at_uts)}
|
|
||||||
class="whitespace-nowrap text-right text-xs sm:text-sm text-zinc-500 dark:text-zinc-400"
|
|
||||||
>
|
|
||||||
{track.scrobbled_at_label}
|
|
||||||
</time>
|
|
||||||
<.track_metadata_tooltip track={track} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_status_badges
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
collected_record_id={collected_record_id}
|
|
||||||
wishlisted_record_id={wishlisted_record_id}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.import_format_dropdown
|
|
||||||
:if={
|
|
||||||
track.album.musicbrainz_id !== "" and !collected_record_id and
|
|
||||||
!wishlisted_record_id
|
|
||||||
}
|
|
||||||
id={"actions-#{track.scrobbled_at_uts}-tracks"}
|
|
||||||
musicbrainz_id={track.album.musicbrainz_id}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.tabs_panel>
|
|
||||||
</.tabs>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-5 grid grid-cols-1 lg:grid-cols-11 gap-4">
|
|
||||||
<div class="lg:col-span-3">
|
|
||||||
<div class="flex justify-between items-center">
|
|
||||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("On This day")}
|
|
||||||
</h1>
|
|
||||||
<.form
|
|
||||||
:let={f}
|
|
||||||
for={to_form(%{"current_date" => @current_date})}
|
|
||||||
phx-change="set_current_date"
|
|
||||||
>
|
|
||||||
<.date_picker size="xs" field={f[:current_date]}>
|
|
||||||
<:outer_suffix>
|
|
||||||
<.button
|
|
||||||
size="xs"
|
|
||||||
type="button"
|
|
||||||
phx-click={
|
|
||||||
JS.push("set_current_date", value: %{"current_date" => Date.utc_today()})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
Today
|
|
||||||
</.button>
|
|
||||||
</:outer_suffix>
|
|
||||||
</.date_picker>
|
|
||||||
</.form>
|
|
||||||
</div>
|
|
||||||
<div class="bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
|
||||||
<.records_on_this_day
|
|
||||||
current_date={@current_date}
|
|
||||||
records={@records_on_this_day}
|
|
||||||
record_show_path={fn record -> ~p"/collection/#{record}" end}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="lg:col-span-4">
|
|
||||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Top %{n} Collection Artists", %{n: length(@records_by_artist)})}
|
|
||||||
</h1>
|
|
||||||
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
|
||||||
<.vertical_bar_chart
|
|
||||||
data={@records_by_artist}
|
|
||||||
width={600}
|
|
||||||
height={26 * length(@records_by_artist)}
|
|
||||||
color_class="fill-red-500"
|
|
||||||
label_fn={fn datum -> datum.name end}
|
|
||||||
value_fn={fn datum -> datum.count end}
|
|
||||||
datum_click={
|
|
||||||
fn datum ->
|
|
||||||
JS.navigate(~p"/artists/#{datum.id}")
|
|
||||||
end
|
|
||||||
}
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="lg:col-span-4">
|
|
||||||
<h1 class="text-base lg:text-2xl text-zinc-900 dark:text-zinc-200 font-semibold">
|
|
||||||
{gettext("Top %{n} Collection Genres", %{n: length(@records_by_genre)})}
|
|
||||||
</h1>
|
|
||||||
<div class="mt-5 bg-white dark:bg-zinc-800 rounded-md shadow-sm">
|
|
||||||
<.vertical_bar_chart
|
|
||||||
data={@records_by_genre}
|
|
||||||
width={600}
|
|
||||||
height={26 * length(@records_by_genre)}
|
|
||||||
color_class="fill-zinc-500"
|
|
||||||
label_fn={fn {genre, _count} -> genre end}
|
|
||||||
value_fn={fn {_genre, count} -> count end}
|
|
||||||
datum_click={
|
|
||||||
fn {genre, _count} ->
|
|
||||||
JS.navigate(~p"/collection?#{%{query: ~s(genre:"#{genre}")}}")
|
|
||||||
end
|
|
||||||
}
|
|
||||||
class="w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -6,6 +6,137 @@ defmodule MusicLibraryWeb.UniversalSearchLive.Index do
|
|||||||
alias MusicLibrary.Search
|
alias MusicLibrary.Search
|
||||||
alias Phoenix.LiveView.ColocatedHook
|
alias Phoenix.LiveView.ColocatedHook
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<div id={@id} phx-hook="UniversalSearchNavigation">
|
||||||
|
<.structured_modal
|
||||||
|
:if={@show_modal}
|
||||||
|
id="universal-search-root"
|
||||||
|
open={@show_modal}
|
||||||
|
on_close={JS.push("close_modal", value: %{}, target: "#universal-search")}
|
||||||
|
>
|
||||||
|
<form class="mt-4 text-sm" phx-change="search" phx-submit="search" phx-target={@myself}>
|
||||||
|
<div class="relative">
|
||||||
|
<.icon
|
||||||
|
name="hero-magnifying-glass"
|
||||||
|
class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-zinc-400"
|
||||||
|
/>
|
||||||
|
<label for="universal-search-input" class="sr-only">Universal Search</label>
|
||||||
|
<.input
|
||||||
|
name="query"
|
||||||
|
id="universal-search-input"
|
||||||
|
placeholder="Search records and artists..."
|
||||||
|
value={@search_query}
|
||||||
|
phx-debounce="300"
|
||||||
|
autofocus
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
|
||||||
|
<.empty_state :if={@search_query == ""} />
|
||||||
|
|
||||||
|
<.no_results :if={@search_query != "" and @total_results == 0} query={@search_query} />
|
||||||
|
|
||||||
|
<div :if={@total_results > 0} class="max-h-148 md:max-h-164 overflow-y-auto mt-4">
|
||||||
|
<.search_result_group
|
||||||
|
:if={length(@search_results.artists) > 0}
|
||||||
|
title="Artists"
|
||||||
|
count={length(@search_results.artists)}
|
||||||
|
total_count={@search_counts.artists_count}
|
||||||
|
>
|
||||||
|
<.search_result_artist
|
||||||
|
:for={%{artist: artist, image_data_hash: image_data_hash} <- @search_results.artists}
|
||||||
|
artist={artist}
|
||||||
|
image_data_hash={image_data_hash}
|
||||||
|
phx-click="navigate_to_artist"
|
||||||
|
phx-value-id={artist.musicbrainz_id}
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
</.search_result_group>
|
||||||
|
</div>
|
||||||
|
<.search_result_group
|
||||||
|
:if={length(@search_results.collection) > 0}
|
||||||
|
title="Collection"
|
||||||
|
count={length(@search_results.collection)}
|
||||||
|
total_count={@search_counts.collection_count}
|
||||||
|
>
|
||||||
|
<.search_result_record
|
||||||
|
:for={record <- @search_results.collection}
|
||||||
|
record={record}
|
||||||
|
type={:collection}
|
||||||
|
phx-click="navigate_to_record"
|
||||||
|
phx-value-id={record.id}
|
||||||
|
phx-value-type="collection"
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
<:actions>
|
||||||
|
<.view_all_button
|
||||||
|
:if={@search_counts.collection_count > length(@search_results.collection)}
|
||||||
|
count={@search_counts.collection_count}
|
||||||
|
target="collection"
|
||||||
|
phx-click="navigate_to_collection"
|
||||||
|
phx-value-query={@search_query}
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
</:actions>
|
||||||
|
</.search_result_group>
|
||||||
|
<.search_result_group
|
||||||
|
:if={length(@search_results.wishlist) > 0}
|
||||||
|
title="Wishlist"
|
||||||
|
count={length(@search_results.wishlist)}
|
||||||
|
total_count={@search_counts.wishlist_count}
|
||||||
|
>
|
||||||
|
<.search_result_record
|
||||||
|
:for={record <- @search_results.wishlist}
|
||||||
|
record={record}
|
||||||
|
type={:wishlist}
|
||||||
|
phx-click="navigate_to_record"
|
||||||
|
phx-value-id={record.id}
|
||||||
|
phx-value-type="wishlist"
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
<:actions>
|
||||||
|
<.view_all_button
|
||||||
|
:if={@search_counts.wishlist_count > length(@search_results.wishlist)}
|
||||||
|
count={@search_counts.wishlist_count}
|
||||||
|
target="wishlist"
|
||||||
|
phx-click="navigate_to_wishlist"
|
||||||
|
phx-value-query={@search_query}
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
</:actions>
|
||||||
|
</.search_result_group>
|
||||||
|
<.search_result_group
|
||||||
|
:if={length(@search_results.record_sets) > 0}
|
||||||
|
title="Record Sets"
|
||||||
|
count={length(@search_results.record_sets)}
|
||||||
|
total_count={@search_counts.record_sets_count}
|
||||||
|
>
|
||||||
|
<.search_result_record_set
|
||||||
|
:for={record_set <- @search_results.record_sets}
|
||||||
|
record_set={record_set}
|
||||||
|
phx-click="navigate_to_record_set"
|
||||||
|
phx-value-id={record_set.id}
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
<:actions>
|
||||||
|
<.view_all_button
|
||||||
|
:if={@search_counts.record_sets_count > length(@search_results.record_sets)}
|
||||||
|
count={@search_counts.record_sets_count}
|
||||||
|
target="record set"
|
||||||
|
phx-click="navigate_to_record_sets"
|
||||||
|
phx-value-query={@search_query}
|
||||||
|
phx-target={@myself}
|
||||||
|
/>
|
||||||
|
</:actions>
|
||||||
|
</.search_result_group>
|
||||||
|
<.results_footer total_results={@total_results} />
|
||||||
|
</.structured_modal>
|
||||||
|
</div>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
def universal_search_trigger(assigns) do
|
def universal_search_trigger(assigns) do
|
||||||
~H"""
|
~H"""
|
||||||
<script :type={ColocatedHook} name=".SearchGlobalShortcut">
|
<script :type={ColocatedHook} name=".SearchGlobalShortcut">
|
||||||
|
|||||||
@@ -1,125 +0,0 @@
|
|||||||
<div id={@id} phx-hook="UniversalSearchNavigation">
|
|
||||||
<.structured_modal
|
|
||||||
:if={@show_modal}
|
|
||||||
id="universal-search-root"
|
|
||||||
open={@show_modal}
|
|
||||||
on_close={JS.push("close_modal", value: %{}, target: "#universal-search")}
|
|
||||||
>
|
|
||||||
<form class="mt-4 text-sm" phx-change="search" phx-submit="search" phx-target={@myself}>
|
|
||||||
<div class="relative">
|
|
||||||
<.icon
|
|
||||||
name="hero-magnifying-glass"
|
|
||||||
class="absolute left-3 top-1/2 transform -translate-y-1/2 h-5 w-5 text-zinc-400"
|
|
||||||
/>
|
|
||||||
<label for="universal-search-input" class="sr-only">Universal Search</label>
|
|
||||||
<.input
|
|
||||||
name="query"
|
|
||||||
id="universal-search-input"
|
|
||||||
placeholder="Search records and artists..."
|
|
||||||
value={@search_query}
|
|
||||||
phx-debounce="300"
|
|
||||||
autofocus
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</form>
|
|
||||||
|
|
||||||
<.empty_state :if={@search_query == ""} />
|
|
||||||
|
|
||||||
<.no_results :if={@search_query != "" and @total_results == 0} query={@search_query} />
|
|
||||||
|
|
||||||
<div :if={@total_results > 0} class="max-h-148 md:max-h-164 overflow-y-auto mt-4">
|
|
||||||
<.search_result_group
|
|
||||||
:if={length(@search_results.artists) > 0}
|
|
||||||
title="Artists"
|
|
||||||
count={length(@search_results.artists)}
|
|
||||||
total_count={@search_counts.artists_count}
|
|
||||||
>
|
|
||||||
<.search_result_artist
|
|
||||||
:for={%{artist: artist, image_data_hash: image_data_hash} <- @search_results.artists}
|
|
||||||
artist={artist}
|
|
||||||
image_data_hash={image_data_hash}
|
|
||||||
phx-click="navigate_to_artist"
|
|
||||||
phx-value-id={artist.musicbrainz_id}
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
</.search_result_group>
|
|
||||||
</div>
|
|
||||||
<.search_result_group
|
|
||||||
:if={length(@search_results.collection) > 0}
|
|
||||||
title="Collection"
|
|
||||||
count={length(@search_results.collection)}
|
|
||||||
total_count={@search_counts.collection_count}
|
|
||||||
>
|
|
||||||
<.search_result_record
|
|
||||||
:for={record <- @search_results.collection}
|
|
||||||
record={record}
|
|
||||||
type={:collection}
|
|
||||||
phx-click="navigate_to_record"
|
|
||||||
phx-value-id={record.id}
|
|
||||||
phx-value-type="collection"
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
<:actions>
|
|
||||||
<.view_all_button
|
|
||||||
:if={@search_counts.collection_count > length(@search_results.collection)}
|
|
||||||
count={@search_counts.collection_count}
|
|
||||||
target="collection"
|
|
||||||
phx-click="navigate_to_collection"
|
|
||||||
phx-value-query={@search_query}
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
</:actions>
|
|
||||||
</.search_result_group>
|
|
||||||
<.search_result_group
|
|
||||||
:if={length(@search_results.wishlist) > 0}
|
|
||||||
title="Wishlist"
|
|
||||||
count={length(@search_results.wishlist)}
|
|
||||||
total_count={@search_counts.wishlist_count}
|
|
||||||
>
|
|
||||||
<.search_result_record
|
|
||||||
:for={record <- @search_results.wishlist}
|
|
||||||
record={record}
|
|
||||||
type={:wishlist}
|
|
||||||
phx-click="navigate_to_record"
|
|
||||||
phx-value-id={record.id}
|
|
||||||
phx-value-type="wishlist"
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
<:actions>
|
|
||||||
<.view_all_button
|
|
||||||
:if={@search_counts.wishlist_count > length(@search_results.wishlist)}
|
|
||||||
count={@search_counts.wishlist_count}
|
|
||||||
target="wishlist"
|
|
||||||
phx-click="navigate_to_wishlist"
|
|
||||||
phx-value-query={@search_query}
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
</:actions>
|
|
||||||
</.search_result_group>
|
|
||||||
<.search_result_group
|
|
||||||
:if={length(@search_results.record_sets) > 0}
|
|
||||||
title="Record Sets"
|
|
||||||
count={length(@search_results.record_sets)}
|
|
||||||
total_count={@search_counts.record_sets_count}
|
|
||||||
>
|
|
||||||
<.search_result_record_set
|
|
||||||
:for={record_set <- @search_results.record_sets}
|
|
||||||
record_set={record_set}
|
|
||||||
phx-click="navigate_to_record_set"
|
|
||||||
phx-value-id={record_set.id}
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
<:actions>
|
|
||||||
<.view_all_button
|
|
||||||
:if={@search_counts.record_sets_count > length(@search_results.record_sets)}
|
|
||||||
count={@search_counts.record_sets_count}
|
|
||||||
target="record set"
|
|
||||||
phx-click="navigate_to_record_sets"
|
|
||||||
phx-value-query={@search_query}
|
|
||||||
phx-target={@myself}
|
|
||||||
/>
|
|
||||||
</:actions>
|
|
||||||
</.search_result_group>
|
|
||||||
<.results_footer total_results={@total_results} />
|
|
||||||
</.structured_modal>
|
|
||||||
</div>
|
|
||||||
@@ -16,6 +16,148 @@ defmodule MusicLibraryWeb.WishlistLive.Index do
|
|||||||
order: :alphabetical
|
order: :alphabetical
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<header class="mb-2">
|
||||||
|
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
||||||
|
<.search_form query={@record_list_params.query} />
|
||||||
|
<.button
|
||||||
|
variant="solid"
|
||||||
|
size="sm"
|
||||||
|
patch={~p"/wishlist/import"}
|
||||||
|
>
|
||||||
|
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
{gettext("Add")}
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
</header>
|
||||||
|
|
||||||
|
<div class="flex items-end justify-between gap-6 mt-8">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :insertion)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :alphabetical)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :alphabetical && "bg-zinc-100 dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
patch={order_path(@record_list_params, :release)}
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
phx-click="set_display"
|
||||||
|
phx-value-mode="grid"
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-squares-2x2"
|
||||||
|
class="icon"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
<span class="sr-only sm:not-sr-only">
|
||||||
|
{gettext("Grid")}
|
||||||
|
</span>
|
||||||
|
</.button>
|
||||||
|
<.button
|
||||||
|
phx-click="set_display"
|
||||||
|
phx-value-mode="list"
|
||||||
|
size="sm"
|
||||||
|
class={[
|
||||||
|
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
|
||||||
|
]}
|
||||||
|
>
|
||||||
|
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
|
||||||
|
<span class="sr-only sm:not-sr-only">
|
||||||
|
{gettext("List")}
|
||||||
|
</span>
|
||||||
|
</.button>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.record_grid
|
||||||
|
:if={@display == :grid}
|
||||||
|
id="wishlist"
|
||||||
|
records={@streams.records}
|
||||||
|
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
||||||
|
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
||||||
|
display_artist_names
|
||||||
|
density={:high}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.record_list
|
||||||
|
:if={@display == :list}
|
||||||
|
current_date={@current_date}
|
||||||
|
records={@streams.records}
|
||||||
|
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
||||||
|
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(back_path(@record_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.RecordForm}
|
||||||
|
id={@record.id}
|
||||||
|
action={@live_action}
|
||||||
|
show_purchased_at={false}
|
||||||
|
record={@record}
|
||||||
|
patch={back_path(@record_list_params)}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :import}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(back_path(@record_list_params))}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.AddRecord}
|
||||||
|
id={:search}
|
||||||
|
title={@page_title}
|
||||||
|
action={@live_action}
|
||||||
|
record={@record}
|
||||||
|
patch={back_path(@record_list_params)}
|
||||||
|
initial_query={@import_query}
|
||||||
|
icon_name="hero-plus"
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
|
||||||
|
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(_params, _session, socket) do
|
def mount(_params, _session, socket) do
|
||||||
current_date = Date.utc_today()
|
current_date = Date.utc_today()
|
||||||
|
|||||||
@@ -1,136 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<header class="mb-2">
|
|
||||||
<div class="flex items-center justify-between gap-6 mb-2 mt-2">
|
|
||||||
<.search_form query={@record_list_params.query} />
|
|
||||||
<.button
|
|
||||||
variant="solid"
|
|
||||||
size="sm"
|
|
||||||
patch={~p"/wishlist/import"}
|
|
||||||
>
|
|
||||||
<.icon name="hero-plus" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
{gettext("Add")}
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</header>
|
|
||||||
|
|
||||||
<div class="flex items-end justify-between gap-6 mt-8">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :insertion)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :insertion && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-star" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("Insertion")}</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :alphabetical)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :alphabetical && "bg-zinc-100 dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-user-solid" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("A->Z")}</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
patch={order_path(@record_list_params, :release)}
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@record_list_params.order == :release && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-calendar-days" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">{gettext("Release")}</span>
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
phx-click="set_display"
|
|
||||||
phx-value-mode="grid"
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@display == :grid && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-squares-2x2"
|
|
||||||
class="icon"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
<span class="sr-only sm:not-sr-only">
|
|
||||||
{gettext("Grid")}
|
|
||||||
</span>
|
|
||||||
</.button>
|
|
||||||
<.button
|
|
||||||
phx-click="set_display"
|
|
||||||
phx-value-mode="list"
|
|
||||||
size="sm"
|
|
||||||
class={[
|
|
||||||
@display == :list && "bg-zinc-100! dark:bg-zinc-700!"
|
|
||||||
]}
|
|
||||||
>
|
|
||||||
<.icon name="hero-list-bullet" class="icon" aria-hidden="true" data-slot="icon" />
|
|
||||||
<span class="sr-only sm:not-sr-only">
|
|
||||||
{gettext("List")}
|
|
||||||
</span>
|
|
||||||
</.button>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.record_grid
|
|
||||||
:if={@display == :grid}
|
|
||||||
id="wishlist"
|
|
||||||
records={@streams.records}
|
|
||||||
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
|
||||||
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
|
||||||
display_artist_names
|
|
||||||
density={:high}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.record_list
|
|
||||||
:if={@display == :list}
|
|
||||||
current_date={@current_date}
|
|
||||||
records={@streams.records}
|
|
||||||
record_show_path={fn record -> ~p"/wishlist/#{record}" end}
|
|
||||||
record_edit_path={fn record -> ~p"/wishlist/#{record}/edit" end}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(back_path(@record_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.RecordForm}
|
|
||||||
id={@record.id}
|
|
||||||
action={@live_action}
|
|
||||||
show_purchased_at={false}
|
|
||||||
record={@record}
|
|
||||||
patch={back_path(@record_list_params)}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :import}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(back_path(@record_list_params))}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.AddRecord}
|
|
||||||
id={:search}
|
|
||||||
title={@page_title}
|
|
||||||
action={@live_action}
|
|
||||||
record={@record}
|
|
||||||
patch={back_path(@record_list_params)}
|
|
||||||
initial_query={@import_query}
|
|
||||||
icon_name="hero-plus"
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
|
|
||||||
<.pagination id={:bottom_pagination} pagination_params={@record_list_params} />
|
|
||||||
</Layouts.app>
|
|
||||||
@@ -17,6 +17,344 @@ defmodule MusicLibraryWeb.WishlistLive.Show do
|
|||||||
alias MusicLibrary.Records.Similarity
|
alias MusicLibrary.Records.Similarity
|
||||||
alias MusicLibrary.RecordSets.RecordSet
|
alias MusicLibrary.RecordSets.RecordSet
|
||||||
|
|
||||||
|
@impl true
|
||||||
|
def render(assigns) do
|
||||||
|
~H"""
|
||||||
|
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
||||||
|
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
||||||
|
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
||||||
|
<.record_cover
|
||||||
|
record={@record}
|
||||||
|
class="w-full rounded-lg drop-shadow-sm"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="grow">
|
||||||
|
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
||||||
|
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
||||||
|
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
|
||||||
|
</h1>
|
||||||
|
<div class="min-w-12">
|
||||||
|
<.button_group>
|
||||||
|
<.button
|
||||||
|
variant="soft"
|
||||||
|
phx-click={MusicLibraryWeb.Components.Chat.open("record-chat-sheet")}
|
||||||
|
>
|
||||||
|
<span class="sr-only">{gettext("Chat about album")}</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-chat-bubble-left-right"
|
||||||
|
class="h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</.button>
|
||||||
|
<.dropdown id={"actions-#{@record.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-#{@record.id}-focus-wrap"}>
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-edit"}
|
||||||
|
patch={~p"/wishlist/#{@record}/show/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-#{@record.id}-refresh-cover"}
|
||||||
|
phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-refresh-mb-data"}
|
||||||
|
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-populate-genres"}
|
||||||
|
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-sparkles"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Populate genres")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
:if={!@record.purchased_at}
|
||||||
|
id={"actions-#{@record.id}-purchase"}
|
||||||
|
phx-click={
|
||||||
|
JS.dispatch("music_library:confetti")
|
||||||
|
|> JS.push("add-to-collection", value: %{id: @record.id})
|
||||||
|
}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-banknotes"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Purchased")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-extract-colors-fast"}
|
||||||
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-paint-brush"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Extract colors (fast)")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-extract-colors-slow"}
|
||||||
|
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-paint-brush"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Extract colors (slow)")}
|
||||||
|
</.dropdown_link>
|
||||||
|
|
||||||
|
<.dropdown_separator />
|
||||||
|
<.dropdown_link
|
||||||
|
id={"actions-#{@record.id}-delete"}
|
||||||
|
phx-click={JS.push("delete", value: %{id: @record.id})}
|
||||||
|
data-confirm={gettext("Are you sure?")}
|
||||||
|
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
||||||
|
>
|
||||||
|
<.icon
|
||||||
|
name="hero-trash"
|
||||||
|
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
{gettext("Delete")}
|
||||||
|
</.dropdown_link>
|
||||||
|
</.focus_wrap>
|
||||||
|
</.dropdown>
|
||||||
|
</.button_group>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
||||||
|
{@record.title}
|
||||||
|
</h2>
|
||||||
|
<p class="flex items-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
|
||||||
|
<.record_colors record={@record} />
|
||||||
|
|
||||||
|
<span class="ml-1">
|
||||||
|
{Records.Record.format_release_date(@record.release_date)}
|
||||||
|
<span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
|
||||||
|
({gettext("Unreleased")})
|
||||||
|
</span>
|
||||||
|
· {format_label(@record.format)} · {type_label(@record.type)}
|
||||||
|
</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="mt-4 md:mt-8">
|
||||||
|
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
||||||
|
<.dl_row label={gettext("ID")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<code id={"record-#{@record.id}"}>{@record.id}</code>
|
||||||
|
<.copy_to_clipboard
|
||||||
|
target_id={"record-#{@record.id}"}
|
||||||
|
label={gettext("Copy record ID to clipboard")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Genres")}>
|
||||||
|
<.link
|
||||||
|
:for={genre <- @record.genres}
|
||||||
|
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
||||||
|
patch={~p"/wishlist?#{%{query: ~s(genre:"#{genre}")}}"}
|
||||||
|
>
|
||||||
|
{genre}
|
||||||
|
</.link>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("MusicBrainz ID")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
||||||
|
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
||||||
|
</a>
|
||||||
|
<.copy_to_clipboard
|
||||||
|
target_id={"mb-#{@record.musicbrainz_id}"}
|
||||||
|
label={gettext("Copy MusicBrainz ID to clipboard")}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Published releases")}>
|
||||||
|
<div class="flex justify-between">
|
||||||
|
{Records.Record.release_count(@record)}
|
||||||
|
<.release_list record={@record} />
|
||||||
|
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
||||||
|
<span class="sr-only">
|
||||||
|
{gettext("Show releases included in the record")}
|
||||||
|
</span>
|
||||||
|
<.icon
|
||||||
|
name="hero-magnifying-glass-plus"
|
||||||
|
class="-mt-1 h-5 w-5"
|
||||||
|
aria-hidden="true"
|
||||||
|
data-slot="icon"
|
||||||
|
/>
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Wishlisted release")}>
|
||||||
|
<div class="flex justify-between space-x-2">
|
||||||
|
<span
|
||||||
|
:if={!@record.selected_release_id}
|
||||||
|
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
||||||
|
>
|
||||||
|
{gettext("No release selected")}
|
||||||
|
</span>
|
||||||
|
<.release_summary
|
||||||
|
:if={@record.selected_release_id}
|
||||||
|
release={Records.Record.selected_release(@record)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row
|
||||||
|
:if={Records.Record.included_release_groups_count(@record) > 0}
|
||||||
|
label={gettext("Includes")}
|
||||||
|
>
|
||||||
|
<ul>
|
||||||
|
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
||||||
|
{included_release_group.artists} - {included_release_group.title}
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row :if={@record_sets != []} label={gettext("Record sets")}>
|
||||||
|
<ul>
|
||||||
|
<li :for={record_set <- @record_sets} class="flex items-baseline gap-2">
|
||||||
|
<.link
|
||||||
|
navigate={~p"/record-sets/#{record_set}"}
|
||||||
|
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 hover:underline"
|
||||||
|
>
|
||||||
|
{record_set.name}
|
||||||
|
</.link>
|
||||||
|
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
||||||
|
{gettext(
|
||||||
|
"%{collected}/%{total} collected",
|
||||||
|
RecordSet.count_by_status(record_set)
|
||||||
|
)}
|
||||||
|
</span>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Inserted at")}>
|
||||||
|
{Records.Record.format_as_date(@record.inserted_at)}
|
||||||
|
</.dl_row>
|
||||||
|
<.dl_row label={gettext("Updated at")}>
|
||||||
|
{Records.Record.format_as_date(@record.updated_at)}
|
||||||
|
</.dl_row>
|
||||||
|
</dl>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div :if={@online_store_templates != []} class="mt-4">
|
||||||
|
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
|
||||||
|
<summary class="text-xs sm:text-sm font-medium cursor-pointer">
|
||||||
|
{gettext("Check Online Stores")}
|
||||||
|
</summary>
|
||||||
|
<div class="mt-4 space-y-2">
|
||||||
|
<.button
|
||||||
|
:for={template <- @online_store_templates}
|
||||||
|
href={OnlineStoreTemplates.generate_url(template, @record)}
|
||||||
|
target="_blank"
|
||||||
|
rel="noopener noreferrer"
|
||||||
|
variant="ghost"
|
||||||
|
size="sm"
|
||||||
|
class="ml-2"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
class="mr-2"
|
||||||
|
src={favicon_url(template.url_template)}
|
||||||
|
alt={template.name}
|
||||||
|
loading="lazy"
|
||||||
|
/>
|
||||||
|
<span class="text-sm font-medium text-zinc-900 dark:text-white">
|
||||||
|
{template.name}
|
||||||
|
</span>
|
||||||
|
</.button>
|
||||||
|
</div>
|
||||||
|
</details>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
||||||
|
<.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
|
||||||
|
|
||||||
|
<.live_component
|
||||||
|
id="record-chat"
|
||||||
|
sheet_id="record-chat-sheet"
|
||||||
|
module={MusicLibraryWeb.Components.Chat}
|
||||||
|
title={@record.title}
|
||||||
|
chat_module={MusicLibrary.RecordChat}
|
||||||
|
chat_context={{@record, @embedding_text}}
|
||||||
|
placeholder={gettext("Ask about this album...")}
|
||||||
|
empty_prompt={gettext("Ask anything about this album")}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<.structured_modal
|
||||||
|
:if={@live_action == :edit}
|
||||||
|
id="record-modal"
|
||||||
|
on_close={JS.patch(~p"/wishlist/#{@record}")}
|
||||||
|
>
|
||||||
|
<.live_component
|
||||||
|
module={MusicLibraryWeb.Components.RecordForm}
|
||||||
|
id={@record.id}
|
||||||
|
action={@live_action}
|
||||||
|
show_purchased_at={false}
|
||||||
|
record={@record}
|
||||||
|
patch={~p"/wishlist/#{@record}"}
|
||||||
|
/>
|
||||||
|
</.structured_modal>
|
||||||
|
</Layouts.app>
|
||||||
|
"""
|
||||||
|
end
|
||||||
|
|
||||||
@impl true
|
@impl true
|
||||||
def mount(%{"id" => record_id}, _session, socket) do
|
def mount(%{"id" => record_id}, _session, socket) do
|
||||||
current_date = DateTime.utc_now() |> DateTime.to_date()
|
current_date = DateTime.utc_now() |> DateTime.to_date()
|
||||||
|
|||||||
@@ -1,332 +0,0 @@
|
|||||||
<Layouts.app flash={@flash} current_section={@current_section} socket={@socket}>
|
|
||||||
<div class="md:flex mt-4 px-4 md:gap-x-4">
|
|
||||||
<div class="drop-shadow-sm md:max-w-152 lg:min-w-152">
|
|
||||||
<.record_cover
|
|
||||||
record={@record}
|
|
||||||
class="w-full rounded-lg drop-shadow-sm"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="grow">
|
|
||||||
<div class="mt-4 md:mt-0 flex justify-between items-center">
|
|
||||||
<h1 class="text-base font-medium leading-6 text-zinc-700">
|
|
||||||
<.artist_links joinphrase_class="text-sm" artists={@record.artists} />
|
|
||||||
</h1>
|
|
||||||
<div class="min-w-12">
|
|
||||||
<.button_group>
|
|
||||||
<.button
|
|
||||||
variant="soft"
|
|
||||||
phx-click={MusicLibraryWeb.Components.Chat.open("record-chat-sheet")}
|
|
||||||
>
|
|
||||||
<span class="sr-only">{gettext("Chat about album")}</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-chat-bubble-left-right"
|
|
||||||
class="h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</.button>
|
|
||||||
<.dropdown id={"actions-#{@record.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-#{@record.id}-focus-wrap"}>
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-edit"}
|
|
||||||
patch={~p"/wishlist/#{@record}/show/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-#{@record.id}-refresh-cover"}
|
|
||||||
phx-click={JS.push("refresh_cover", value: %{id: @record.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 cover")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-refresh-mb-data"}
|
|
||||||
phx-click={JS.push("refresh_musicbrainz_data", value: %{id: @record.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 MB data")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-populate-genres"}
|
|
||||||
phx-click={JS.push("populate_genres", value: %{id: @record.id})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-sparkles"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Populate genres")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
:if={!@record.purchased_at}
|
|
||||||
id={"actions-#{@record.id}-purchase"}
|
|
||||||
phx-click={
|
|
||||||
JS.dispatch("music_library:confetti")
|
|
||||||
|> JS.push("add-to-collection", value: %{id: @record.id})
|
|
||||||
}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-banknotes"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Purchased")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-extract-colors-fast"}
|
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :fast})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-paint-brush"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Extract colors (fast)")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-extract-colors-slow"}
|
|
||||||
phx-click={JS.push("extract_colors", value: %{id: @record.id, method: :slow})}
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-paint-brush"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-shake"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Extract colors (slow)")}
|
|
||||||
</.dropdown_link>
|
|
||||||
|
|
||||||
<.dropdown_separator />
|
|
||||||
<.dropdown_link
|
|
||||||
id={"actions-#{@record.id}-delete"}
|
|
||||||
phx-click={JS.push("delete", value: %{id: @record.id})}
|
|
||||||
data-confirm={gettext("Are you sure?")}
|
|
||||||
class="text-red-900! hover:bg-red-50! dark:text-red-500! dark:hover:bg-red-900/30! dark:hover:text-red-600!"
|
|
||||||
>
|
|
||||||
<.icon
|
|
||||||
name="hero-trash"
|
|
||||||
class="h-4 w-4 mr-1 phx-click-loading:animate-spin"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
{gettext("Delete")}
|
|
||||||
</.dropdown_link>
|
|
||||||
</.focus_wrap>
|
|
||||||
</.dropdown>
|
|
||||||
</.button_group>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<h2 class="mt-1 flex font-semibold text-lg md:text-2xl text-zinc-700 dark:text-zinc-300 text-wrap">
|
|
||||||
{@record.title}
|
|
||||||
</h2>
|
|
||||||
<p class="flex items-center mt-2 text-sm text-zinc-500 dark:text-zinc-400">
|
|
||||||
<.record_colors record={@record} />
|
|
||||||
|
|
||||||
<span class="ml-1">
|
|
||||||
{Records.Record.format_release_date(@record.release_date)}
|
|
||||||
<span :if={@current_date && !Records.Record.released?(@record, @current_date)}>
|
|
||||||
({gettext("Unreleased")})
|
|
||||||
</span>
|
|
||||||
· {format_label(@record.format)} · {type_label(@record.type)}
|
|
||||||
</span>
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="mt-4 md:mt-8">
|
|
||||||
<dl class="divide-y divide-zinc-100 dark:divide-slate-300/30">
|
|
||||||
<.dl_row label={gettext("ID")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<code id={"record-#{@record.id}"}>{@record.id}</code>
|
|
||||||
<.copy_to_clipboard
|
|
||||||
target_id={"record-#{@record.id}"}
|
|
||||||
label={gettext("Copy record ID to clipboard")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Genres")}>
|
|
||||||
<.link
|
|
||||||
:for={genre <- @record.genres}
|
|
||||||
class="mr-2 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300"
|
|
||||||
patch={~p"/wishlist?#{%{query: ~s(genre:"#{genre}")}}"}
|
|
||||||
>
|
|
||||||
{genre}
|
|
||||||
</.link>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("MusicBrainz ID")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
<a href={MusicBrainz.ReleaseGroup.url(@record.musicbrainz_id)}>
|
|
||||||
<code id={"mb-#{@record.musicbrainz_id}"}>{@record.musicbrainz_id}</code>
|
|
||||||
</a>
|
|
||||||
<.copy_to_clipboard
|
|
||||||
target_id={"mb-#{@record.musicbrainz_id}"}
|
|
||||||
label={gettext("Copy MusicBrainz ID to clipboard")}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Published releases")}>
|
|
||||||
<div class="flex justify-between">
|
|
||||||
{Records.Record.release_count(@record)}
|
|
||||||
<.release_list record={@record} />
|
|
||||||
<button phx-click={Fluxon.open_dialog("release-list-" <> @record.id)}>
|
|
||||||
<span class="sr-only">
|
|
||||||
{gettext("Show releases included in the record")}
|
|
||||||
</span>
|
|
||||||
<.icon
|
|
||||||
name="hero-magnifying-glass-plus"
|
|
||||||
class="-mt-1 h-5 w-5"
|
|
||||||
aria-hidden="true"
|
|
||||||
data-slot="icon"
|
|
||||||
/>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Wishlisted release")}>
|
|
||||||
<div class="flex justify-between space-x-2">
|
|
||||||
<span
|
|
||||||
:if={!@record.selected_release_id}
|
|
||||||
class="text-xs md:text-sm text-zinc-700 dark:text-zinc-300"
|
|
||||||
>
|
|
||||||
{gettext("No release selected")}
|
|
||||||
</span>
|
|
||||||
<.release_summary
|
|
||||||
:if={@record.selected_release_id}
|
|
||||||
release={Records.Record.selected_release(@record)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row
|
|
||||||
:if={Records.Record.included_release_groups_count(@record) > 0}
|
|
||||||
label={gettext("Includes")}
|
|
||||||
>
|
|
||||||
<ul>
|
|
||||||
<li :for={included_release_group <- Records.Record.included_release_groups(@record)}>
|
|
||||||
{included_release_group.artists} - {included_release_group.title}
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row :if={@record_sets != []} label={gettext("Record sets")}>
|
|
||||||
<ul>
|
|
||||||
<li :for={record_set <- @record_sets} class="flex items-baseline gap-2">
|
|
||||||
<.link
|
|
||||||
navigate={~p"/record-sets/#{record_set}"}
|
|
||||||
class="text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300 hover:underline"
|
|
||||||
>
|
|
||||||
{record_set.name}
|
|
||||||
</.link>
|
|
||||||
<span class="text-xs text-zinc-500 dark:text-zinc-400">
|
|
||||||
{gettext(
|
|
||||||
"%{collected}/%{total} collected",
|
|
||||||
RecordSet.count_by_status(record_set)
|
|
||||||
)}
|
|
||||||
</span>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Inserted at")}>
|
|
||||||
{Records.Record.format_as_date(@record.inserted_at)}
|
|
||||||
</.dl_row>
|
|
||||||
<.dl_row label={gettext("Updated at")}>
|
|
||||||
{Records.Record.format_as_date(@record.updated_at)}
|
|
||||||
</.dl_row>
|
|
||||||
</dl>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div :if={@online_store_templates != []} class="mt-4">
|
|
||||||
<details class="px-4 text-zinc-700 hover:text-zinc-500 dark:text-zinc-400 dark:hover:text-zinc-300">
|
|
||||||
<summary class="text-xs sm:text-sm font-medium cursor-pointer">
|
|
||||||
{gettext("Check Online Stores")}
|
|
||||||
</summary>
|
|
||||||
<div class="mt-4 space-y-2">
|
|
||||||
<.button
|
|
||||||
:for={template <- @online_store_templates}
|
|
||||||
href={OnlineStoreTemplates.generate_url(template, @record)}
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
variant="ghost"
|
|
||||||
size="sm"
|
|
||||||
class="ml-2"
|
|
||||||
>
|
|
||||||
<img
|
|
||||||
class="mr-2"
|
|
||||||
src={favicon_url(template.url_template)}
|
|
||||||
alt={template.name}
|
|
||||||
loading="lazy"
|
|
||||||
/>
|
|
||||||
<span class="text-sm font-medium text-zinc-900 dark:text-white">
|
|
||||||
{template.name}
|
|
||||||
</span>
|
|
||||||
</.button>
|
|
||||||
</div>
|
|
||||||
</details>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<.json_viewer title={gettext("MusicBrainz data")} data={@record.musicbrainz_data} />
|
|
||||||
<.text_viewer title={gettext("Record Embedding")} data={@embedding_text} />
|
|
||||||
|
|
||||||
<.live_component
|
|
||||||
id="record-chat"
|
|
||||||
sheet_id="record-chat-sheet"
|
|
||||||
module={MusicLibraryWeb.Components.Chat}
|
|
||||||
title={@record.title}
|
|
||||||
chat_module={MusicLibrary.RecordChat}
|
|
||||||
chat_context={{@record, @embedding_text}}
|
|
||||||
placeholder={gettext("Ask about this album...")}
|
|
||||||
empty_prompt={gettext("Ask anything about this album")}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<.structured_modal
|
|
||||||
:if={@live_action == :edit}
|
|
||||||
id="record-modal"
|
|
||||||
on_close={JS.patch(~p"/wishlist/#{@record}")}
|
|
||||||
>
|
|
||||||
<.live_component
|
|
||||||
module={MusicLibraryWeb.Components.RecordForm}
|
|
||||||
id={@record.id}
|
|
||||||
action={@live_action}
|
|
||||||
show_purchased_at={false}
|
|
||||||
record={@record}
|
|
||||||
patch={~p"/wishlist/#{@record}"}
|
|
||||||
/>
|
|
||||||
</.structured_modal>
|
|
||||||
</Layouts.app>
|
|
||||||
+205
-212
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user