Inline templates inside LV modules
This commit is contained in:
Claudio Ortolina
@@ -17,6 +17,176 @@ defmodule MusicLibraryWeb.CollectionLive.Index do
|
||||
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
|
||||
def mount(_params, _session, socket) do
|
||||
{: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 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
|
||||
def mount(%{"id" => record_id}, _session, 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>
|
||||
Reference in New Issue
Block a user